refactor: use react-virtual

This commit is contained in:
sk1982 2024-04-11 04:59:08 -04:00
parent 3eb24e5c9b
commit 9a6d5e8f6c
5 changed files with 190 additions and 197 deletions

69
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@heroicons/react": "^2.1.3",
"@next/bundle-analyzer": "^14.1.4",
"@nextui-org/react": "^2.2.10",
"@tanstack/react-virtual": "^3.2.0",
"bcrypt": "^5.1.1",
"clsx": "^2.1.0",
"db-migrate": "^0.11.14",
@ -32,7 +33,6 @@
"react-icons": "^5.0.1",
"react-resizable": "^3.0.5",
"react-swipeable": "^7.0.1",
"react-virtualized": "^9.22.5",
"sass": "^1.72.0",
"tailwind-merge": "^2.2.2",
"tailwindcss-text-fill-stroke": "^2.0.0-beta.1",
@ -3586,6 +3586,31 @@
"node": ">=6"
}
},
"node_modules/@tanstack/react-virtual": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
"integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
"dependencies": {
"@tanstack/virtual-core": "3.2.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@tanstack/virtual-core": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
"integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tsconfig/node10": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@ -5353,7 +5378,8 @@
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"devOptional": true
},
"node_modules/cuint": {
"version": "0.2.2",
@ -5753,15 +5779,6 @@
"node": ">=6.0.0"
}
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/dot-prop": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-6.0.1.tgz",
@ -9957,11 +9974,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-remove-scroll-bar": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.5.tgz",
@ -10041,31 +10053,6 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-virtualized": {
"version": "9.22.5",
"resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
"integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
"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"
}
},
"node_modules/react-virtualized/node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"engines": {
"node": ">=6"
}
},
"node_modules/read": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

View File

@ -19,6 +19,7 @@
"@heroicons/react": "^2.1.3",
"@next/bundle-analyzer": "^14.1.4",
"@nextui-org/react": "^2.2.10",
"@tanstack/react-virtual": "^3.2.0",
"bcrypt": "^5.1.1",
"clsx": "^2.1.0",
"db-migrate": "^0.11.14",
@ -39,7 +40,6 @@
"react-icons": "^5.0.1",
"react-resizable": "^3.0.5",
"react-swipeable": "^7.0.1",
"react-virtualized": "^9.22.5",
"sass": "^1.72.0",
"tailwind-merge": "^2.2.2",
"tailwindcss-text-fill-stroke": "^2.0.0-beta.1",

View File

@ -165,13 +165,13 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
</div>
<div className="flex gap-2 w-full px-2 sm:px-1">
<SelectModalButton className="flex-grow flex-1" displayMode="grid" modalSize="full" rowSize={230} colSize={500} gap={6} items={userboxItems.namePlate}
modalId="nameplate"
modalId="nameplate" itemId="id"
renderItem={n => renderItem(n, getImageUrl(`chuni/name-plate/${n.imagePath}`), 'w-full sm:text-lg', 'px-2 pb-1')}
selectedItem={equipped.namePlate} onSelected={i => equipItem('namePlate', i)}>
Change Nameplate
</SelectModalButton>
<SelectModalButton className="flex-grow flex-1" displayMode="list" modalSize="2xl" rowSize={66} items={userboxItems.trophy}
modalId="trophy"
modalId="trophy" itemId="id"
renderItem={n => <ChuniTrophy rarity={n.rareType} name={n.name} />}
selectedItem={equipped.trophy} onSelected={i => equipItem('trophy', i)}>
Change Trophy
@ -209,7 +209,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
</div>
<div className="grid grid-cols-2 w-full px-2 sm:px-0 sm:flex flex-col gap-1.5 sm:ml-3 flex-grow">
{(['avatarHead', 'avatarFace', 'avatarWear', 'avatarSkin', 'avatarItem', 'avatarBack'] as const).map(k => ((k !== 'avatarSkin' || userboxItems.avatarSkin.length > 1) && <SelectModalButton
key={k} displayMode="grid" modalSize="3xl" colSize={175} rowSize={205} gap={5} modalId={k}
key={k} displayMode="grid" modalSize="3xl" colSize={175} rowSize={205} gap={5} modalId={k} itemId="avatarAccessoryId"
className={(k === 'avatarBack' && userboxItems.avatarSkin.length === 1) ? 'w-full col-span-full' : 'w-full'}
onSelected={i => equipItem(k, i)} items={userboxItems[k]} selectedItem={equipped[k]}
renderItem={i => renderItem(i, getImageUrl(`chuni/avatar/${i.iconPath}`)) }>
@ -253,7 +253,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
{ voicePreview }
<SelectModalButton selectedItem={equipped.systemVoice} items={userboxItems.systemVoice}
displayMode="grid" rowSize={150} colSize={175} gap={6} modalSize="full"
modalId="system-voice"
modalId="system-voice" itemId="id"
footer={<><div className="flex flex-grow gap-2 items-center max-w-full sm:max-w-[min(100%,18rem)]">
{ voicePreview }
</div>
@ -304,7 +304,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
<div className="px-2 w-full flex justify-center">
<SelectModalButton onSelected={i => i && equipItem('mapIcon', i)} selectedItem={equipped.mapIcon}
displayMode="grid" modalSize="full" rowSize={210} colSize={175} items={userboxItems.mapIcon} gap={6}
className="w-full sm:w-auto mb-4" modalId="map-icon"
className="w-full sm:w-auto mb-4" modalId="map-icon" itemId="id"
renderItem={i => renderItem(i, getImageUrl(`chuni/map-icon/${i.imagePath}`))}>
Change Map Icon
</SelectModalButton>

View File

@ -4,16 +4,17 @@ import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalProps }
import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
import { Button, ButtonProps, Input } from '@nextui-org/react';
import { SearchIcon } from '@nextui-org/shared-icons';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
import { useDebounceCallback } from 'usehooks-ts';
import { CellMeasurerChildProps } from 'react-virtualized/dist/es/CellMeasurer';
import { useRouter } from 'next/navigation';
import { useWindowListener } from '@/helpers/use-window-listener';
import { useReloaded } from './client-providers';
import { useVirtualizer } from '@tanstack/react-virtual';
type Data<I extends string> = {
name?: string | null,
} & { [K in I]: any };
export type SelectModalProps<T extends 'grid' | 'list', D extends { name?: string | null }> = {
export type SelectModalProps<T extends 'grid' | 'list', I extends string, D extends Data<I>> = {
isOpen: boolean,
onSelected: (item: D | null | undefined) => void,
selectedItem: D | null | undefined,
@ -21,30 +22,121 @@ export type SelectModalProps<T extends 'grid' | 'list', D extends { name?: strin
displayMode: T,
rowSize: number,
items: D[],
renderItem: (item: D) => (ReactNode | ((props: Pick<CellMeasurerChildProps, 'measure'>) => ReactNode)),
renderItem: (item: D) => ReactNode,
gap?: number,
onSelectionChanged?: (item: D) => void,
footer?: ReactNode
footer?: ReactNode,
itemId: I
} & (T extends 'grid' ? {
colSize: number
} : {
colSize?: never
});
const SelectModal = <T extends 'grid' | 'list', D extends { name?: string | null }>({ footer, onSelectionChanged, gap, selectedItem, renderItem, displayMode, items, isOpen, onSelected, modalSize, colSize, rowSize }: SelectModalProps<T, D>) => {
const measurementCache = useMemo(() => {
return new CellMeasurerCache({
defaultHeight: rowSize,
fixedWidth: true,
minHeight: Math.ceil(rowSize / 3),
keyMapper: () => window.innerWidth
});
}, [rowSize]);
const SelectModalList = <I extends string, D extends Data<I>>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, itemId }:
Pick<SelectModalProps<'list', I, D>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items'> & { selected?: D | null, setSelected: (d: D) => void }) => {
const listRef = useRef<HTMLDivElement | null>(null);
const lastHeight = useRef(rowSize);
const listRef = useRef<List | null>(null);
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => listRef.current,
estimateSize: () => lastHeight.current,
overscan: 5,
scrollingDelay: 0,
measureElement: el => {
return lastHeight.current = el.clientHeight;
}
});
const buttonStyle = { height: `calc(100% - ${gap ?? 0}px)` };
return (<div ref={listRef} className="w-full overflow-y-auto overflow-x-hidden">
<div className="w-full relative" style={{
height: `${virtualizer.getTotalSize()}px`
}}>
{virtualizer.getVirtualItems().map(item => {
const data = items[item.index];
const child = renderItem(data);
return (<div key={item.key} ref={virtualizer.measureElement} data-index={item.index}
className="flex items-center justify-center absolute top-0 left-0 w-full"
style={{
transform: `translateY(${item.start}px)`
}}>
<Button
style={buttonStyle}
className={`w-full h-fit max-h-full px-0 transition ${data[itemId] === selected?.[itemId] ? 'bg-gray-400/75' : 'bg-transparent'}`}
variant="flat" onPress={() => { setSelected(data); onSelectionChanged?.(data); }}>
{child}
</Button>
</div>)
})}
</div>
</div>)
};
const SelectModalGrid = <I extends string, D extends Data<I>>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, colSize, itemId }:
Pick<SelectModalProps<'grid', I, D>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items' | 'colSize'> & { selected?: D | null, setSelected: (d: D) => void; }) => {
const listRef = useRef<HTMLDivElement | null>(null);
const lastHeight = useRef(rowSize);
const [width, setWidth] = useState(0)
const itemsPerRow = Math.max(1, Math.floor(width / colSize));
const rowCount = Math.ceil(items.length / itemsPerRow);
const virtualizer = useVirtualizer({
count: rowCount,
getScrollElement: () => listRef.current,
estimateSize: () => lastHeight.current,
overscan: 5,
scrollingDelay: 0,
measureElement: el => {
return lastHeight.current = el.clientHeight;
}
});
const buttonStyle = {
maxWidth: `${colSize}px`,
aspectRatio: `${colSize}/${rowSize}`
};
const rowStyle = { gap: `${gap ?? 0}px`, paddingBottom: `${gap ?? 0}px` };
useEffect(() => setWidth(listRef.current?.clientWidth ?? 0), []);
useWindowListener('resize', () => setWidth(listRef.current?.clientWidth ?? 0));
return (<div ref={listRef} className="w-full overflow-y-auto overflow-x-hidden">
<div className="w-full relative" style={{
height: `${virtualizer.getTotalSize()}px`
}}>
{virtualizer.getVirtualItems().map(item => {
const row = items.slice(item.index * itemsPerRow, (item.index + 1) * itemsPerRow);
const children = row.map((item, i) => (<Button key={i} style={buttonStyle}
className={`w-full px-0 h-full ${selected?.[itemId] === item[itemId] ? 'bg-gray-400/75' : 'bg-transparent'}`} onPress={() => {
onSelectionChanged?.(item);
setSelected(item);
}}>
{renderItem(item)}
</Button>));
return (<div key={item.key} ref={virtualizer.measureElement} data-index={item.index}
className="absolute top-0 left-0 w-full flex items-center justify-center"
style={{
transform: `translateY(${item.start}px)`,
...rowStyle
}}>
{ children }
{item.index === rowCount - 1 ? [...new Array(itemsPerRow - children.length)].map((_, i) =>
<div key={i} style={buttonStyle} className="w-full h-full"></div>) : null }
</div>)
})}
</div>
</div>)
};
const SelectModal = <T extends 'grid' | 'list', I extends string, D extends Data<I>>({ footer, onSelectionChanged, gap, selectedItem, renderItem, displayMode, items, isOpen, onSelected, modalSize, colSize, rowSize, itemId }: SelectModalProps<T, I, D>) => {
const [selected, setSelected] = useState(selectedItem);
const [filteredItems, setFilteredItems] = useState(items);
const [gridRowCount, setGridRowCount] = useState(0);
const outputSelected = useRef<null | undefined | D>(null);
useEffect(() => {
@ -55,118 +147,21 @@ const SelectModal = <T extends 'grid' | 'list', D extends { name?: string | null
}
}, [isOpen]);
useEffect(() => {
listRef.current?.recomputeRowHeights();
}, [colSize, rowSize]);
const filter = useDebounceCallback((query: string) => {
const lowerQuery = query.toLowerCase();
setFilteredItems(items.filter(({ name }) => name?.toLowerCase().includes(lowerQuery)));
}, 100);
const recompute = useDebounceCallback(() => {
listRef.current?.recomputeRowHeights();
}, 150);
useEffect(() => {
if (!isOpen) return;
let prevWidth = -1;
const cb = () => {
if (prevWidth !== window.innerWidth) {
prevWidth = window.innerWidth;
recompute();
}
};
window.addEventListener('resize', cb);
return () => {
window.removeEventListener('resize', cb);
};
}, [isOpen, recompute]);
const containerStyle = { pointerEvents: 'auto' } as const;
const renderedContent = useMemo(() => {
if (!isOpen) return null;
if (displayMode === 'list') {
const buttonStyle = { height: `calc(100% - ${gap ?? 0}px)` };
if (displayMode === 'list')
return <SelectModalList onSelectionChanged={onSelectionChanged} gap={gap} rowSize={rowSize} renderItem={renderItem}
items={filteredItems} selected={selected} setSelected={setSelected} itemId={itemId} />
return (<div style={{ flexBasis: `${filteredItems.length * rowSize}px` }}>
<AutoSizer>
{({ height, width }) => (<List containerStyle={containerStyle}
deferredMeasurementCache={measurementCache}
rowCount={filteredItems.length}
height={height}
width={width}
rowHeight={measurementCache.rowHeight}
ref={listRef}
rowRenderer={({ key, index, style, parent }) => {
const child = renderItem(filteredItems[index]);
return (<CellMeasurer cache={measurementCache} parent={parent} columnIndex={0} rowIndex={index} key={key}>
{({ measure, registerChild }) => {
return (<div ref={registerChild as any} style={style} className="flex items-center justify-center">
<Button
style={buttonStyle}
className={`w-full h-fit max-h-full px-0 transition ${filteredItems[index] === selected ? 'bg-gray-400/75' : 'bg-transparent'}`}
variant="flat" onPress={() => { setSelected(filteredItems[index]); onSelectionChanged?.(filteredItems[index]) }}>
{typeof child === 'function' ? child({ measure }) : child}
</Button>
</div>)
}}
</CellMeasurer>);
}}
/>)}
</AutoSizer>
</div>);
}
const buttonStyle = { maxWidth: `${colSize}px`,
aspectRatio: `${colSize}/${rowSize}`,
height: `calc(100% - ${gap ?? 0}px)` };
const rowStyle = { gap: `${gap ?? 0}px` };
return (<AutoSizer disableHeight className="flex flex-1 max-h-full overflow-hidden" style={{ flexBasis: `${gridRowCount * rowSize}px` }}>
{(({ width }) => {
const itemsPerRow = Math.max(1, Math.floor(width / colSize!));
const rowCount = Math.ceil(filteredItems.length / itemsPerRow);
setTimeout(() => setGridRowCount(rowCount));
return (<div style={{ flexBasis: `${rowCount * rowSize}px` }}>
<AutoSizer disableWidth>
{({ height }) => (<List ref={listRef}
containerStyle={containerStyle}
deferredMeasurementCache={measurementCache}
rowCount={rowCount}
height={height}
width={width}
rowHeight={measurementCache.rowHeight}
rowRenderer={({ key, index, style, parent }) => (<CellMeasurer cache={measurementCache} parent={parent} columnIndex={0} rowIndex={index} key={key}>
{({ measure, registerChild }) => {
const children = filteredItems.slice(index * itemsPerRow, (index + 1) * itemsPerRow)
.map((item, i) => {
const res = renderItem(item);
return (<Button key={i} style={buttonStyle} className={`w-full px-0 ${selected === item ? 'bg-gray-400/75' : 'bg-transparent'}`}
onPress={() => { setSelected(item); onSelectionChanged?.(item) }}>
{ typeof res === 'function' ? res({ measure }) : res }
</Button>)
});
return <div style={{...style, ...rowStyle}} className="w-full h-full flex items-center justify-center" ref={registerChild as any}>
{children}
{ index === rowCount - 1 ? [...new Array(itemsPerRow - children.length)].map((_, i) =>
<div key={i} style={buttonStyle} className="w-full"></div>) : null }
</div>;
}}
</CellMeasurer>)} />)}
</AutoSizer>
</div>);
})}
</AutoSizer>)
}, [displayMode, filteredItems, colSize, rowSize, selected, isOpen, gridRowCount, gap, onSelectionChanged]);
return <SelectModalGrid onSelectionChanged={onSelectionChanged} gap={gap} rowSize={rowSize} renderItem={renderItem}
items={filteredItems} selected={selected} setSelected={setSelected} colSize={colSize!} itemId={itemId} />
}, [displayMode, filteredItems, colSize, rowSize, selected, isOpen, gap]);
return (<Modal classNames={{ wrapper: 'overflow-hidden' }} size={modalSize} onClose={() => {
onSelected(outputSelected.current);
@ -199,13 +194,12 @@ const SelectModal = <T extends 'grid' | 'list', D extends { name?: string | null
</Modal>)
};
export type SelectModalButtonProps<T extends 'grid' | 'list', D extends { name?: string | null }> = Omit<ButtonProps, 'onClick'> &
Pick<SelectModalProps<T, D>, 'modalSize' | 'displayMode' | 'colSize' | 'rowSize' | 'items' | 'renderItem' | 'selectedItem' | 'onSelected' | 'gap' | 'onSelectionChanged' | 'footer'> &
{ modalId: string };
export const SelectModalButton = <T extends 'grid' | 'list', D extends { name?: string | null }>(props: SelectModalButtonProps<T, D>) => {
export const SelectModalButton = <T extends 'grid' | 'list', I extends string, D extends Data<I>>(props: Omit<ButtonProps, 'onClick'> &
Pick<SelectModalProps<T, I, D>, 'itemId' | 'modalSize' | 'displayMode' | 'colSize' | 'rowSize' | 'items' | 'renderItem' | 'selectedItem' | 'onSelected' | 'gap' | 'onSelectionChanged' | 'footer'> &
{ modalId: string; }) => {
const router = useRouter();
const [isOpen, setOpen] = useState(false);
const { modalId, footer, onSelectionChanged, gap, onSelected, selectedItem, renderItem, items, colSize, rowSize, displayMode, modalSize } = props;
const { modalId, footer, onSelectionChanged, gap, onSelected, selectedItem, renderItem, items, colSize, rowSize, displayMode, modalSize, itemId } = props;
const historyPushed = useRef(false);
const reloaded = useReloaded();
@ -223,7 +217,7 @@ export const SelectModalButton = <T extends 'grid' | 'list', D extends { name?:
return (<>
<SelectModal displayMode={displayMode} modalSize={modalSize} isOpen={isOpen} selectedItem={selectedItem} gap={gap} footer={footer}
colSize={colSize as any} rowSize={rowSize} items={items} renderItem={renderItem} onSelectionChanged={onSelectionChanged}
colSize={colSize as any} rowSize={rowSize} items={items} renderItem={renderItem} onSelectionChanged={onSelectionChanged} itemId={itemId}
onSelected={item => {
setOpen(false);
onSelected(item);

View File

@ -1,5 +1,6 @@
import { ReactNode, useEffect, useRef } from 'react';
import { AutoSizer, List, WindowScroller } from 'react-virtualized';
import { ReactNode, useRef } from 'react';
import { useWindowVirtualizer } from '@tanstack/react-virtual';
import { useResizeObserver } from 'usehooks-ts';
type WindowScrollerGridProps<D> = {
rowSize: number,
@ -9,27 +10,38 @@ type WindowScrollerGridProps<D> = {
};
export const WindowScrollerGrid = <D extends any>({ rowSize, colSize, items, children }: WindowScrollerGridProps<D>) => {
const listRef = useRef<List | null>(null);
const listRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
listRef.current?.recomputeRowHeights(0);
}, [rowSize, colSize, items]);
const { width = 0 } = useResizeObserver({
ref: listRef
});
return (<WindowScroller>{({ height, isScrolling, onChildScroll, scrollTop }) =>
(<AutoSizer disableHeight>
{({ width }) => {
const itemsPerRow = Math.max(1, Math.floor(width / colSize));
const rowCount = Math.ceil(items.length / itemsPerRow);
return (<List ref={listRef} autoHeight isScrolling={isScrolling} onScroll={onChildScroll} scrollTop={scrollTop}
rowCount={rowCount} height={height} rowHeight={rowSize} width={width} rowRenderer={({ index, key, style }) =>
(<div key={key} style={{ ...style, height: `${rowSize}px` }} className="max-w-full h-full w-full flex justify-evenly sm:justify-center">
{items.slice(index * itemsPerRow, (index + 1) * itemsPerRow).map((item, i) => (<div key={i} style={{ width: `${colSize}px` }} className="h-full max-w-full">
const virtualizer = useWindowVirtualizer({
count: rowCount,
estimateSize: () => rowSize,
scrollMargin: listRef.current?.offsetTop ?? 0,
overscan: 5,
scrollingDelay: 0
});
return (<div ref={listRef} className={width <= 0 ? `invisible` : ''}>
{width > 0 && <div className="w-full relative" style={{
height: `${virtualizer.getTotalSize()}px`
}}>
{virtualizer.getVirtualItems().map(item => {
const row = items.slice(item.index * itemsPerRow, (item.index + 1) * itemsPerRow);
return (<div key={item.key} className="absolute top-0 left-0 max-w-full h-full w-full flex justify-evenly sm:justify-center" style={{
height: `${rowSize}px`,
transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
}}>
{row.map((item, i) => (<div key={i} style={{ width: `${colSize}px` }} className="h-full max-w-full">
{children(item)}
</div>))}
</div>)
} />)
}}
</AutoSizer>)
}</WindowScroller>)
</div>);
})}
</div>}
</div>);
};