diff --git a/.changeset/tall-lamps-fix.md b/.changeset/tall-lamps-fix.md new file mode 100644 index 00000000..be83f13a --- /dev/null +++ b/.changeset/tall-lamps-fix.md @@ -0,0 +1,5 @@ +--- +"react-cool-virtual": patch +--- + +refactor: remove `keyExtractor` option diff --git a/src/types/index.ts b/src/types/index.ts index 23efce22..4a0ac002 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -2,7 +2,6 @@ import { MutableRefObject } from "react"; // Internal export interface Measure { - key?: string; idx: number; start: number; end: number; @@ -20,10 +19,6 @@ interface ScrollEasingFunction { (time: number): number; } -export interface KeyExtractor { - (index: number): string; -} - interface IsItemLoaded { (index: number): boolean; } @@ -55,7 +50,6 @@ interface OnResize { } export interface Item { - readonly key?: string; readonly index: number; readonly start: number; readonly size: number; @@ -99,7 +93,6 @@ export interface Options { useIsScrolling?: UseIsScrolling; scrollDuration?: number; scrollEasingFunction?: ScrollEasingFunction; - keyExtractor?: KeyExtractor; loadMoreThreshold?: number; isItemLoaded?: IsItemLoaded; loadMore?: LoadMore; diff --git a/src/types/react-cool-virtual.d.ts b/src/types/react-cool-virtual.d.ts index 09edcf30..6dfd6656 100644 --- a/src/types/react-cool-virtual.d.ts +++ b/src/types/react-cool-virtual.d.ts @@ -17,10 +17,6 @@ declare module "react-cool-virtual" { (time: number): number; } - export interface KeyExtractor { - (index: number): string; - } - export interface IsItemLoaded { (index: number): boolean; } @@ -65,7 +61,6 @@ declare module "react-cool-virtual" { } export interface Item { - readonly key?: string; readonly index: number; readonly start: number; readonly size: number; @@ -108,7 +103,6 @@ declare module "react-cool-virtual" { useIsScrolling?: UseIsScrolling; scrollDuration?: number; scrollEasingFunction?: ScrollEasingFunction; - keyExtractor?: KeyExtractor; loadMoreThreshold?: number; isItemLoaded?: IsItemLoaded; loadMore?: LoadMore; diff --git a/src/useVirtual.ts b/src/useVirtual.ts index d6e41491..dfe4bdc9 100644 --- a/src/useVirtual.ts +++ b/src/useVirtual.ts @@ -3,7 +3,6 @@ import { useCallback, useRef, useState } from "react"; import { Align, Item, - KeyExtractor, Measure, Options, Return, @@ -29,28 +28,22 @@ const DEFAULT_ITEM_SIZE = 50; const DEBOUNCE_INTERVAL = 150; const MAX_CORRECT_SCROLL_COUNT = 10; -const getInitItems = ( - ssrItemCount?: SsrItemCount, - keyExtractor?: KeyExtractor -) => { - if (ssrItemCount === undefined) return []; +const getInitItems = (ssrItemCount?: SsrItemCount) => { + if (!ssrItemCount) return []; const [idx, len] = isNumber(ssrItemCount) ? [0, ssrItemCount - 1] : ssrItemCount; const ssrItems = []; - for (let i = idx; i <= len; i += 1) { - const ssrItem = { + for (let i = idx; i <= len; i += 1) + ssrItems[i] = { index: i, start: 0, size: 0, width: 0, measureRef: () => null, }; - if (keyExtractor) (ssrItem as any).key = keyExtractor(i); - ssrItems.push(ssrItem); - } return ssrItems; }; @@ -67,16 +60,13 @@ export default < useIsScrolling, scrollDuration = 500, scrollEasingFunction = easeInOutCubic, - keyExtractor, loadMoreThreshold = 15, isItemLoaded, loadMore, onScroll, onResize, }: Options): Return => { - const [items, setItems] = useState(() => - getInitItems(ssrItemCount, keyExtractor) - ); + const [items, setItems] = useState(() => getInitItems(ssrItemCount)); const hasDynamicSizeRef = useRef(false); const isScrollToItemRef = useRef(false); const hasLoadMoreOnMountRef = useRef(false); @@ -93,7 +83,6 @@ export default < const isItemLoadedRef = useRef(isItemLoaded); const loadMoreRef = useLatest(loadMore); const easingFnRef = useLatest(scrollEasingFunction); - const keyExtractorRef = useLatest(keyExtractor); const itemSizeRef = useLatest(itemSize); const useIsScrollingRef = useLatest(useIsScrolling); const onScrollRef = useLatest(onScroll); @@ -112,17 +101,10 @@ export default < [itemSizeRef] ); - const getMeasure = useCallback( - (idx: number, size: number) => { - const start = msDataRef.current[idx - 1]?.end || 0; - const ms: Measure = { idx, start, end: start + size, size }; - - if (keyExtractorRef.current) ms.key = keyExtractorRef.current(idx); - - return ms; - }, - [keyExtractorRef] - ); + const getMeasure = useCallback((idx: number, size: number): Measure => { + const start = msDataRef.current[idx - 1]?.end || 0; + return { idx, start, end: start + size, size }; + }, []); const measureItems = useCallback( (useCache = true) => { @@ -340,10 +322,9 @@ export default < for (let i = oStart; i <= oStop; i += 1) { const { current: msData } = msDataRef; - const { key, start, size } = msData[i]; + const { start, size } = msData[i]; nextItems.push({ - key, index: i, start: start - margin, size,