Skip to content

Commit 83fa40a

Browse files
author
Amin Mahboubi
authored
Chore/upgrade virtuoso (#41)
* chore: upgrade xml-parser * Chore: Upgrade Virtuoso * fix tests
1 parent 3a01878 commit 83fa40a

5 files changed

Lines changed: 103 additions & 31 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"ical-expander": "^3.1.0",
5555
"linkifyjs": "^2.1.9",
5656
"react-markdown": "^5.0.3",
57-
"react-virtuoso": "^0.20.3"
57+
"react-virtuoso": "^1.5.8"
5858
},
5959
"devDependencies": {
6060
"@size-limit/preset-big-lib": "^4.9.2",

‎src/components/DatePicker/DatePickerSelect.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useRef, useCallback, useEffect, FC } from 'react';
2-
import { Virtuoso, VirtuosoMethods } from 'react-virtuoso';
2+
import { Virtuoso } from 'react-virtuoso';
33
import { Dayjs } from 'dayjs';
44
import { DatePickerProps } from './DatePicker';
55

@@ -41,6 +41,7 @@ export type DatePickerItemData = {
4141
const ITEMS_PER_PAGE = 40;
4242
const VERTICAL_COMPENSATION = 3;
4343
const INITIAL_INDEX = ITEMS_PER_PAGE;
44+
const VIRTUOSO_START_INDEX = 10000;
4445

4546
/**
4647
* DatePicker select
@@ -60,9 +61,10 @@ export const DatePickerSelect: FC<DatePickerSelectProps> = (props) => {
6061
);
6162

6263
const [items, setItems] = useState<DatePickerItemData[]>(generateItems(ITEMS_PER_PAGE * 2, -ITEMS_PER_PAGE));
64+
const [firstItemIndex, setFirstItemIndex] = useState(VIRTUOSO_START_INDEX);
65+
6366
const initialIndexOffset = useRef(INITIAL_INDEX);
6467
const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
65-
const virtuoso = useRef<VirtuosoMethods>(null);
6668

6769
const handleClick = useCallback(
6870
(item: DatePickerItemData) => {
@@ -78,7 +80,6 @@ export const DatePickerSelect: FC<DatePickerSelectProps> = (props) => {
7880
nextFirstItemIdx -= missingTopItems;
7981
initialIndexOffset.current -= firstItemIndex - missingTopItems;
8082
setItems((items) => [...generateItems(missingTopItems, nextFirstItemIdx), ...items]);
81-
if (virtuoso.current) virtuoso.current.adjustForPrependedItems(missingTopItems);
8283
}
8384
setSelectedIdx(item.idx);
8485
},
@@ -100,7 +101,7 @@ export const DatePickerSelect: FC<DatePickerSelectProps> = (props) => {
100101
initialIndexOffset.current -= ITEMS_PER_PAGE;
101102
}
102103
setItems((items) => [...generateItems(ITEMS_PER_PAGE, nextFirstItemIdx), ...items]);
103-
if (virtuoso.current) virtuoso.current.adjustForPrependedItems(ITEMS_PER_PAGE);
104+
setFirstItemIndex(firstItemIndex - ITEMS_PER_PAGE);
104105
return false;
105106
}, [setItems, generateItems, initialIndexOffset]);
106107

@@ -120,19 +121,16 @@ export const DatePickerSelect: FC<DatePickerSelectProps> = (props) => {
120121

121122
return (
122123
<Virtuoso
123-
ref={virtuoso}
124-
overscan={200}
125-
totalCount={items.length}
126-
initialTopMostItemIndex={INITIAL_INDEX - VERTICAL_COMPENSATION}
127-
item={(index) => (
124+
data={items}
125+
firstItemIndex={firstItemIndex}
126+
itemContent={(_, item) => (
128127
<div
129128
className={
130-
itemClassName +
131-
` mml-datepicker__item ${items[index].idx === selectedIdx ? 'mml-datepicker__item--selected' : ''}`
129+
itemClassName + ` mml-datepicker__item ${item.idx === selectedIdx ? 'mml-datepicker__item--selected' : ''}`
132130
}
133-
onClick={() => handleClick(items[index])}
131+
onClick={() => handleClick(item)}
134132
>
135-
{items[index].displayValue}
133+
{item.displayValue}
136134
</div>
137135
)}
138136
endReached={appendItems}

‎src/parser/__snapshots__/examples.test.tsx.snap‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -348,21 +348,28 @@ Array [
348348
<div
349349
style={
350350
Object {
351-
"marginTop": "0px",
351+
"boxSizing": "border-box",
352+
"height": 0,
353+
"marginTop": 0,
354+
"paddingBottom": 0,
355+
"paddingTop": 0,
352356
}
353357
}
354358
/>
355359
</div>
356360
<div
357361
style={
358362
Object {
359-
"height": "0px",
360-
"position": "absolute",
363+
"marginTop": "0px",
364+
"position": "-webkit-sticky",
361365
"top": 0,
366+
"width": "100%",
362367
}
363368
}
364369
>
365-
 
370+
<div
371+
style={Object {}}
372+
/>
366373
</div>
367374
</div>
368375
</div>
@@ -394,21 +401,28 @@ Array [
394401
<div
395402
style={
396403
Object {
397-
"marginTop": "0px",
404+
"boxSizing": "border-box",
405+
"height": 0,
406+
"marginTop": 0,
407+
"paddingBottom": 0,
408+
"paddingTop": 0,
398409
}
399410
}
400411
/>
401412
</div>
402413
<div
403414
style={
404415
Object {
405-
"height": "0px",
406-
"position": "absolute",
416+
"marginTop": "0px",
417+
"position": "-webkit-sticky",
407418
"top": 0,
419+
"width": "100%",
408420
}
409421
}
410422
>
411-
 
423+
<div
424+
style={Object {}}
425+
/>
412426
</div>
413427
</div>
414428
</div>

‎src/parser/examples.test.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,17 @@ describe('examples', () => {
175175
expect(tree).toMatchSnapshot();
176176
expect(tree.reactElements).toMatchSnapshot();
177177

178-
expect(renderer.create(<>{tree.reactElements}</>).toJSON()).toMatchSnapshot();
178+
expect(
179+
renderer
180+
.create(<>{tree.reactElements}</>, {
181+
// let virtuoso render in jest env
182+
createNodeMock: (element: React.ReactElement) => {
183+
if (element.type === 'div') return { addEventListener() {} };
184+
return null;
185+
},
186+
})
187+
.toJSON(),
188+
).toMatchSnapshot();
179189
});
180190
});
181191
});

‎yarn.lock‎

Lines changed: 58 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2308,6 +2308,18 @@
23082308
semver "^7.3.2"
23092309
tsutils "^3.17.1"
23102310

2311+
"@virtuoso.dev/react-urx@^0.2.5":
2312+
version "0.2.5"
2313+
resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.5.tgz#41f1a8c7657a339276ecf1ff718b556010c80932"
2314+
integrity sha512-4C0HoPaZEqAKg3pzs3mS16kesCRvEU+TYVDxFsW+vGFi1nyPovhiQ7YVTOPBE55rjVv/rkNqL1eWqjwJM/SohA==
2315+
dependencies:
2316+
"@virtuoso.dev/urx" "^0.2.5"
2317+
2318+
"@virtuoso.dev/urx@^0.2.5":
2319+
version "0.2.5"
2320+
resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.5.tgz#8c88e9634df06e9f6b98bcd80490652347108c86"
2321+
integrity sha512-Vf3g+iAl5h8UuduSRTB1XK4G08xeV80tMP46P3xn5jIk1xV5IsdTInl58VU2thnCxRG9yJawR/QJwTFfMgkUww==
2322+
23112323
"@webassemblyjs/ast@1.9.0":
23122324
version "1.9.0"
23132325
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -2859,6 +2871,11 @@ art-template@^4.13.2:
28592871
merge-source-map "^1.0.3"
28602872
source-map "^0.5.6"
28612873

2874+
asap@~2.0.6:
2875+
version "2.0.6"
2876+
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
2877+
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
2878+
28622879
asn1.js@^5.2.0:
28632880
version "5.4.1"
28642881
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -4604,7 +4621,7 @@ core-js@^2.4.1, core-js@^2.6.5:
46044621
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
46054622
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
46064623

4607-
core-js@^3.6.5:
4624+
core-js@^3.5.0, core-js@^3.6.5:
46084625
version "3.9.0"
46094626
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.0.tgz#790b1bb11553a2272b36e2625c7179db345492f8"
46104627
integrity sha512-PyFBJaLq93FlyYdsndE5VaueA9K5cNB7CGzeCj191YYLhkQM0gdZR2SKihM70oF0wdqKSKClv/tEBOpoRmdOVQ==
@@ -12704,6 +12721,13 @@ promise-inflight@^1.0.1:
1270412721
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
1270512722
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
1270612723

12724+
promise@^8.0.3:
12725+
version "8.1.0"
12726+
resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
12727+
integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
12728+
dependencies:
12729+
asap "~2.0.6"
12730+
1270712731
prompts@^2.0.1, prompts@^2.3.2:
1270812732
version "2.4.0"
1270912733
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7"
@@ -12929,6 +12953,13 @@ raf-schd@^4.0.2:
1292912953
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
1293012954
integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
1293112955

12956+
raf@^3.4.1:
12957+
version "3.4.1"
12958+
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
12959+
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
12960+
dependencies:
12961+
performance-now "^2.1.0"
12962+
1293212963
ramda@^0.27.1:
1293312964
version "0.27.1"
1293412965
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
@@ -13007,6 +13038,18 @@ react-ace@^7.0.2:
1300713038
lodash.isequal "^4.5.0"
1300813039
prop-types "^15.7.2"
1300913040

13041+
react-app-polyfill@^1.0.6:
13042+
version "1.0.6"
13043+
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"
13044+
integrity sha512-OfBnObtnGgLGfweORmdZbyEz+3dgVePQBb3zipiaDsMHV1NpWm0rDFYIVXFV/AK+x4VIIfWHhrdMIeoTLyRr2g==
13045+
dependencies:
13046+
core-js "^3.5.0"
13047+
object-assign "^4.1.1"
13048+
promise "^8.0.3"
13049+
raf "^3.4.1"
13050+
regenerator-runtime "^0.13.3"
13051+
whatwg-fetch "^3.0.0"
13052+
1301013053
react-dev-utils@^4.2.3:
1301113054
version "4.2.3"
1301213055
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.3.tgz#5b42d9ea58d5e9e017a2f57a40a8af408a3a46fb"
@@ -13201,13 +13244,15 @@ react-test-renderer@^17.0.1:
1320113244
react-shallow-renderer "^16.13.1"
1320213245
scheduler "^0.20.1"
1320313246

13204-
react-virtuoso@^0.20.3:
13205-
version "0.20.3"
13206-
resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-0.20.3.tgz#dde89d9d84f10a029ddbe61ac22fa416b51e0119"
13207-
integrity sha512-22Vw7dc04VoxTcrhra3be1/fyPCsZ9Dbduto7m6juf1SroP6BGSJvAGm0hSOiQqaPdgZvD/77QqMXGPzWR2SBA==
13247+
react-virtuoso@^1.5.8:
13248+
version "1.5.8"
13249+
resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-1.5.8.tgz#137d4dc5ee82e55302f39c73479f2d1d7e2a10cd"
13250+
integrity sha512-GPLkT+PrP5mwLFgsUJcCmmc63Gw05cbGh4jvzGQu0jWqWUKFzNn0O0JvTEOIScQ65o2JV9Dxoz5ZLNtwyNgw5w==
1320813251
dependencies:
13252+
"@virtuoso.dev/react-urx" "^0.2.5"
13253+
"@virtuoso.dev/urx" "^0.2.5"
13254+
react-app-polyfill "^1.0.6"
1320913255
resize-observer-polyfill "^1.5.1"
13210-
tslib "^1.11.1"
1321113256

1321213257
react@^17.0.1:
1321313258
version "17.0.1"
@@ -13413,7 +13458,7 @@ regenerate@^1.4.0:
1341313458
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
1341413459
integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
1341513460

13416-
regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
13461+
regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
1341713462
version "0.13.7"
1341813463
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
1341913464
integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
@@ -15780,7 +15825,7 @@ tslib@2.0.1:
1578015825
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
1578115826
integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
1578215827

15783-
tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
15828+
tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
1578415829
version "1.14.1"
1578515830
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
1578615831
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -16748,6 +16793,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.5:
1674816793
dependencies:
1674916794
iconv-lite "0.4.24"
1675016795

16796+
whatwg-fetch@^3.0.0:
16797+
version "3.6.1"
16798+
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.1.tgz#93bc4005af6c2cc30ba3e42ec3125947c8f54ed3"
16799+
integrity sha512-IEmN/ZfmMw6G1hgZpVd0LuZXOQDisrMOZrzYd5x3RAK4bMPlJohKUZWZ9t/QsTvH0dV9TbPDcc2OSuIDcihnHA==
16800+
1675116801
whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
1675216802
version "2.3.0"
1675316803
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"

0 commit comments

Comments
 (0)