Skip to content

Commit

Permalink
removed react-virtualized duplicated lib
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidsingal
davidsingal committed Oct 17, 2023
1 parent a0624b6 commit ef18a10
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 90 deletions.
1 change: 0 additions & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@
"react-map-gl": "7.0.23",
"react-range": "1.8.14",
"react-redux": "8.0.2",
"react-virtualized": "9.22.5",
"recharts": "2.9.0",
"rooks": "7.14.1",
"sharp": "0.32.6",
Expand Down
97 changes: 45 additions & 52 deletions client/src/components/forms/select/autocomplete/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Transition, Combobox } from '@headlessui/react';
import { ChevronUpIcon, ChevronDownIcon, XIcon } from '@heroicons/react/solid';
import { flip, useFloating, size, autoUpdate, offset } from '@floating-ui/react-dom';
import { FloatingPortal } from '@floating-ui/react';
import { List as VirtualizedList } from 'react-virtualized';
import { useVirtualizer } from '@tanstack/react-virtual';

import Hint from 'components/forms/hint';
import Loading from 'components/loading';
Expand Down Expand Up @@ -88,42 +88,6 @@ const AutoCompleteSelect = <T,>({
[options, query],
);

const renderOption = useCallback(
({ index, key, style }) => {
return (
<Combobox.Option
key={key}
style={style}
className={({ active, disabled }) =>
classnames(
'relative cursor-default text-sm select-none py-2 pl-3 pr-9 hover:cursor-pointer',
{
'bg-navy-50': active,
'pointer-events-none cursor-default': disabled,
},
)
}
value={filteredOptions[index]}
disabled={filteredOptions[index].disabled}
data-testid={`${props.id || props.name || props['data-testid']}-option`}
>
{({ selected, disabled }) => (
<div
className={classnames('block truncate', {
'text-navy-400': selected,
'text-gray-300': disabled,
'text-gray-900': !selected && !disabled,
})}
>
{filteredOptions[index].label}
</div>
)}
</Combobox.Option>
);
},
[filteredOptions, props],
);

const clearSelection = useCallback(() => {
setSelected(null);
setQuery('');
Expand All @@ -141,6 +105,12 @@ const AutoCompleteSelect = <T,>({
[selected],
);

const virtualizedList = useVirtualizer({
count: filteredOptions.length,
getScrollElement: useCallback(() => refs.floating.current, [refs.floating]),
estimateSize: useCallback(() => rowHeight, [rowHeight]),
});

// ? in case the value is not set in the hook initialization, it will be set here after first render.
useEffect(() => {
if (value) setSelected(value);
Expand Down Expand Up @@ -250,28 +220,51 @@ const AutoCompleteSelect = <T,>({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
afterLeave={handleAfterTransitionLeave}
className="z-50"
className="z-50 overflow-auto text-base bg-white rounded-md shadow-sm max-h-60 ring-1 ring-gray-200 focus:outline-none"
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
width: `${virtualizedListWidth}px`,
}}
ref={refs.setFloating}
>
<Combobox.Options>
<VirtualizedList
className="w-full overflow-auto text-base bg-white rounded-md shadow-sm max-h-60 ring-1 ring-gray-200 focus:outline-none"
width={virtualizedListWidth}
height={virtualizedListHeight}
rowCount={filteredOptions.length}
rowHeight={rowHeight}
rowRenderer={renderOption}
noRowsRenderer={() => (
<div className="relative px-4 py-2 text-sm text-gray-300 cursor-default select-none">
No results
</div>
)}
/>
<Combobox.Options
className="relative w-full"
style={{
height: `${virtualizedListHeight}px`,
}}
>
{virtualizedList.getVirtualItems().map((virtualItem) => (
<Combobox.Option
key={virtualItem.key}
style={{ height: `${virtualItem.size}px` }}
className={({ active, disabled }) =>
classnames(
'relative cursor-default text-sm select-none py-2 pl-3 pr-9 hover:cursor-pointer',
{
'bg-navy-50': active,
'pointer-events-none cursor-default': disabled,
},
)
}
value={filteredOptions[virtualItem.index]}
disabled={filteredOptions[virtualItem.index].disabled}
data-testid={`${props.id || props.name || props['data-testid']}-option`}
>
{({ selected, disabled }) => (
<div
className={classnames('block truncate', {
'text-navy-400': selected,
'text-gray-300': disabled,
'text-gray-900': !selected && !disabled,
})}
>
{filteredOptions[virtualItem.index].label}
</div>
)}
</Combobox.Option>
))}
</Combobox.Options>
</Transition>
</FloatingPortal>
Expand Down
39 changes: 2 additions & 37 deletions client/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ __metadata:
languageName: node
linkType: hard

"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.9.2":
version: 7.18.9
resolution: "@babel/runtime@npm:7.18.9"
dependencies:
Expand Down Expand Up @@ -2990,13 +2990,6 @@ __metadata:
languageName: node
linkType: hard

"clsx@npm:^1.0.4":
version: 1.2.1
resolution: "clsx@npm:1.2.1"
checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
languageName: node
linkType: hard

"color-convert@npm:^1.9.0":
version: 1.9.3
resolution: "color-convert@npm:1.9.3"
Expand Down Expand Up @@ -3635,16 +3628,6 @@ __metadata:
languageName: node
linkType: hard

"dom-helpers@npm:^5.1.3":
version: 5.2.1
resolution: "dom-helpers@npm:5.2.1"
dependencies:
"@babel/runtime": ^7.8.7
csstype: ^3.0.2
checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
languageName: node
linkType: hard

"draco3d@npm:1.5.5":
version: 1.5.5
resolution: "draco3d@npm:1.5.5"
Expand Down Expand Up @@ -6330,7 +6313,6 @@ __metadata:
react-map-gl: 7.0.23
react-range: 1.8.14
react-redux: 8.0.2
react-virtualized: 9.22.5
recharts: 2.9.0
rooks: 7.14.1
sharp: 0.32.6
Expand Down Expand Up @@ -7844,7 +7826,7 @@ __metadata:
languageName: node
linkType: hard

"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
"prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
Expand Down Expand Up @@ -8262,23 +8244,6 @@ __metadata:
languageName: node
linkType: hard

"react-virtualized@npm:9.22.5":
version: 9.22.5
resolution: "react-virtualized@npm:9.22.5"
dependencies:
"@babel/runtime": ^7.7.2
clsx: ^1.0.4
dom-helpers: ^5.1.3
loose-envify: ^1.4.0
prop-types: ^15.7.2
react-lifecycles-compat: ^3.0.4
peerDependencies:
react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
checksum: 01f5ed8d8db7c831d592172946c2b61fcb409bf6cbc84500468f12d6cf9b7e60453e332fac02dd608480d23cb14421f7f17716393e623e83bb10a7763fad9e2c
languageName: node
linkType: hard

"react@npm:18.2.0":
version: 18.2.0
resolution: "react@npm:18.2.0"
Expand Down

0 comments on commit ef18a10

Please sign in to comment.