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
diff --git a/src/components/select-modal.tsx b/src/components/select-modal.tsx
index 3821ea2..1305b29 100644
--- a/src/components/select-modal.tsx
+++ b/src/components/select-modal.tsx
@@ -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
= {
+ name?: string | null,
+} & { [K in I]: any };
-
-export type SelectModalProps = {
+export type SelectModalProps> = {
isOpen: boolean,
onSelected: (item: D | null | undefined) => void,
selectedItem: D | null | undefined,
@@ -21,30 +22,121 @@ export type SelectModalProps (ReactNode | ((props: Pick) => 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 = ({ footer, onSelectionChanged, gap, selectedItem, renderItem, displayMode, items, isOpen, onSelected, modalSize, colSize, rowSize }: SelectModalProps) => {
- const measurementCache = useMemo(() => {
- return new CellMeasurerCache({
- defaultHeight: rowSize,
- fixedWidth: true,
- minHeight: Math.ceil(rowSize / 3),
- keyMapper: () => window.innerWidth
});
- }, [rowSize]);
- const listRef = useRef(null);
+const SelectModalList = >({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, itemId }:
+ Pick, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items'> & { selected?: D | null, setSelected: (d: D) => void }) => {
+ const listRef = useRef(null);
+ const lastHeight = useRef(rowSize);
+
+ 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 (
+
+ {virtualizer.getVirtualItems().map(item => {
+ const data = items[item.index];
+ const child = renderItem(data);
+
+ return (
+
+
)
+ })}
+
+
+
+ {virtualizer.getVirtualItems().map(item => {
+ const row = items.slice(item.index * itemsPerRow, (item.index + 1) * itemsPerRow);
+ const children = row.map((item, i) => (
));
+
+ return (
+ { children }
+ {item.index === rowCount - 1 ? [...new Array(itemsPerRow - children.length)].map((_, i) =>
+
) : null }
+
)
+ })}
+
+
-
- {({ height, width }) => ( {
- const child = renderItem(filteredItems[index]);
-
- return (
- {({ measure, registerChild }) => {
- return (
-
-
)
- }}
- );
- }}
- />)}
-
-
-
- {({ height }) => ( (
- {({ measure, registerChild }) => {
- const children = filteredItems.slice(index * itemsPerRow, (index + 1) * itemsPerRow)
- .map((item, i) => {
- const res = renderItem(item);
-
- return ()
- });
-
- return
- {children}
- { index === rowCount - 1 ? [...new Array(itemsPerRow - children.length)].map((_, i) =>
-
) : null }
-
-
(null);
+ const listRef = useRef(null);
- useEffect(() => {
- listRef.current?.recomputeRowHeights(0);
- }, [rowSize, colSize, items]);
+ const { width = 0 } = useResizeObserver({
+ ref: listRef
+ });
- return ({({ height, isScrolling, onChildScroll, scrollTop }) =>
- (
- {({ width }) => {
- const itemsPerRow = Math.max(1, Math.floor(width / colSize));
- const rowCount = Math.ceil(items.length / itemsPerRow);
+ const itemsPerRow = Math.max(1, Math.floor(width / colSize));
+ const rowCount = Math.ceil(items.length / itemsPerRow);
- return (
- (
- {items.slice(index * itemsPerRow, (index + 1) * itemsPerRow).map((item, i) => (
- {children(item)}
-
))}
-
)
- })
+ const virtualizer = useWindowVirtualizer({
+ count: rowCount,
+ estimateSize: () => rowSize,
+ scrollMargin: listRef.current?.offsetTop ?? 0,
+ overscan: 5,
+ scrollingDelay: 0
+ });
+
+ return (
+ {width > 0 &&
+ {virtualizer.getVirtualItems().map(item => {
+ const row = items.slice(item.index * itemsPerRow, (item.index + 1) * itemsPerRow);
+ return (
+ {row.map((item, i) => (
+ {children(item)}
+
))}
+
);
+ })}
+
}
+