@fluentui/react-virtualizer 9.0.0-alpha.87 → 9.0.0-alpha.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -5
- package/dist/index.d.ts +21 -22
- package/lib/components/Virtualizer/Virtualizer.js +1 -0
- package/lib/components/Virtualizer/Virtualizer.js.map +1 -1
- package/lib/components/Virtualizer/Virtualizer.types.js.map +1 -1
- package/lib/components/Virtualizer/renderVirtualizer.js.map +1 -1
- package/lib/components/Virtualizer/useVirtualizer.js +53 -45
- package/lib/components/Virtualizer/useVirtualizer.js.map +1 -1
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js +1 -1
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -1
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js +1 -2
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +2 -3
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -1
- package/lib/hooks/hooks.types.js +1 -4
- package/lib/hooks/hooks.types.js.map +1 -1
- package/lib/hooks/useDynamicPagination.js +2 -3
- package/lib/hooks/useDynamicPagination.js.map +1 -1
- package/lib/hooks/useIntersectionObserver.js.map +1 -1
- package/lib/hooks/useMeasureList.js +1 -2
- package/lib/hooks/useMeasureList.js.map +1 -1
- package/lib/hooks/useMutationObserver.js.map +1 -1
- package/lib/hooks/useStaticPagination.js +2 -3
- package/lib/hooks/useStaticPagination.js.map +1 -1
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js +1 -1
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -1
- package/lib/utilities/VirtualizerContext/VirtualizerContext.js +3 -4
- package/lib/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/Virtualizer.js +2 -0
- package/lib-commonjs/components/Virtualizer/Virtualizer.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/Virtualizer.types.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/renderVirtualizer.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/useVirtualizer.js +54 -45
- package/lib-commonjs/components/Virtualizer/useVirtualizer.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js +2 -0
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +2 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +2 -2
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -1
- package/lib-commonjs/hooks/hooks.types.js +3 -4
- package/lib-commonjs/hooks/hooks.types.js.map +1 -1
- package/lib-commonjs/hooks/useDynamicPagination.js +2 -2
- package/lib-commonjs/hooks/useDynamicPagination.js.map +1 -1
- package/lib-commonjs/hooks/useIntersectionObserver.js.map +1 -1
- package/lib-commonjs/hooks/useMeasureList.js +1 -1
- package/lib-commonjs/hooks/useMeasureList.js.map +1 -1
- package/lib-commonjs/hooks/useMutationObserver.js.map +1 -1
- package/lib-commonjs/hooks/useStaticPagination.js +2 -2
- package/lib-commonjs/hooks/useStaticPagination.js.map +1 -1
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js +2 -0
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -1
- package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js +3 -3
- package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useMutationObserver.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useMutationObserver.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst { useRef, useEffect } = React;\n\nexport const useMutationObserver = (\n target: Element | Document | undefined,\n callback: MutationCallback,\n options?: MutationObserverInit,\n): {\n observer: React.MutableRefObject<MutationObserver | undefined>; // eslint-disable-line no-restricted-globals\n} => {\n 'use no memo';\n\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n // eslint-disable-next-line no-restricted-globals\n const observer = useRef<MutationObserver>();\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n useEffect(() => {\n if (!win) {\n return;\n }\n // Create an observer instance linked to the callback function\n observer.current = new win.MutationObserver(callback);\n }, [callback, win]);\n\n useEffect(() => {\n if (target) {\n // Start observing the target node for configured mutations\n observer.current?.observe(target, options);\n }\n\n return () => {\n observer.current?.disconnect();\n };\n }, [target, options]);\n\n return { observer };\n};\n"],"names":["React","useFluent_unstable","useFluent","useRef","useEffect","useMutationObserver","target","callback","options","observer","targetDocument","win","defaultView","current","MutationObserver","observe","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;AAE9B,OAAO,MAAMK,sBAAsB,CACjCC,QACAC,UACAC;IAIA;IAEA,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMC,WAAWN;IACjB,MAAM,EAAEO,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvCR,UAAU;QACR,IAAI,CAACO,KAAK;YACR;QACF;QACA,8DAA8D;QAC9DF,SAASI,OAAO,GAAG,IAAIF,IAAIG,gBAAgB,CAACP;IAC9C,GAAG;QAACA;QAAUI;KAAI;IAElBP,UAAU;QACR,IAAIE,QAAQ;gBACV,2DAA2D;YAC3DG;aAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBM,OAAO,CAACT,QAAQE;QACpC;QAEA,OAAO;gBACLC;aAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBO,UAAU;QAC9B;IACF,GAAG;QAACV;QAAQE;KAAQ;IAEpB,OAAO;QAAEC;IAAS;AACpB,EAAE"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useRef } from 'react';
|
|
3
2
|
import { useTimeout } from '@fluentui/react-utilities';
|
|
4
3
|
/**
|
|
5
4
|
* Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position
|
|
@@ -10,8 +9,8 @@ import { useTimeout } from '@fluentui/react-utilities';
|
|
|
10
9
|
'use no memo';
|
|
11
10
|
const { itemSize, axis = 'vertical' } = virtualizerProps;
|
|
12
11
|
const [setScrollTimer, clearScrollTimer] = useTimeout();
|
|
13
|
-
const lastScrollPos = useRef(0);
|
|
14
|
-
const lastIndexScrolled = useRef(0);
|
|
12
|
+
const lastScrollPos = React.useRef(0);
|
|
13
|
+
const lastIndexScrolled = React.useRef(0);
|
|
15
14
|
const scrollContainer = React.useRef(null);
|
|
16
15
|
const clearListeners = ()=>{
|
|
17
16
|
if (scrollContainer.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useStaticPagination.ts"],"sourcesContent":["import * as React from 'react';\nimport { VirtualizerStaticPaginationProps } from './hooks.types';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useStaticPagination.ts"],"sourcesContent":["import * as React from 'react';\nimport { VirtualizerStaticPaginationProps } from './hooks.types';\nimport { useTimeout } from '@fluentui/react-utilities';\n\n/**\n * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position\n * Sizes are uniform/static, we round to the nearest item on long scrolls\n * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works\n * All VirtualizerStaticPaginationProps can be grabbed from Virtualizer hooks externally and passed in\n */\nexport const useStaticVirtualizerPagination = (\n virtualizerProps: VirtualizerStaticPaginationProps,\n paginationEnabled: Boolean = true,\n) => {\n 'use no memo';\n\n const { itemSize, axis = 'vertical' } = virtualizerProps;\n\n const [setScrollTimer, clearScrollTimer] = useTimeout();\n const lastScrollPos = React.useRef<number>(0);\n const lastIndexScrolled = React.useRef<number>(0);\n\n const scrollContainer = React.useRef<HTMLElement | null>(null);\n\n const clearListeners = () => {\n if (scrollContainer.current) {\n scrollContainer.current.removeEventListener('scroll', onScroll);\n\n scrollContainer.current = null;\n clearScrollTimer();\n }\n };\n\n React.useEffect(() => {\n return () => {\n clearListeners();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n /**\n * Handle scroll stop event and paginate to the closest item\n * If the closest item is the same as the previous scroll end\n * we paginate to the next/previous one based on direction\n */\n const onScrollEnd = React.useCallback(() => {\n if (!scrollContainer.current || !paginationEnabled) {\n // No container found\n return;\n }\n\n const currentScrollPos = Math.round(\n axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft,\n );\n const closestItem = Math.round(currentScrollPos / itemSize);\n\n let nextItem = 0;\n if (Math.round(closestItem - lastIndexScrolled.current) === 0) {\n // Special case for go to next/previous with minimum amount of scroll needed\n const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;\n const isSecondaryScroll = lastScrollPos.current === currentScrollPos;\n const posMod = isSecondaryScroll ? 0 : nextTarget;\n\n nextItem = closestItem + posMod;\n } else {\n // Pagination for anything else can just jump to the closest!\n nextItem = closestItem;\n }\n\n const nextItemPos = nextItem * itemSize;\n\n if (axis === 'vertical') {\n scrollContainer.current.scrollTo({ top: nextItemPos, behavior: 'smooth' });\n } else {\n scrollContainer.current.scrollTo({ left: nextItemPos, behavior: 'smooth' });\n }\n lastScrollPos.current = nextItemPos;\n lastIndexScrolled.current = nextItem;\n }, [paginationEnabled, axis, itemSize]);\n\n /**\n * On scroll timer that will continuously delay callback until scrolling stops\n */\n const onScroll = React.useCallback(\n event => {\n clearScrollTimer();\n setScrollTimer(onScrollEnd, 100);\n },\n [onScrollEnd, clearScrollTimer, setScrollTimer],\n );\n\n /**\n * Pagination ref will ensure we attach listeners to containers on change\n * It is returned from hook and merged into the scroll container externally\n */\n const paginationRef = React.useCallback(\n (instance: HTMLElement | HTMLDivElement | null) => {\n if (!paginationEnabled) {\n clearListeners();\n scrollContainer.current = null;\n return;\n }\n if (scrollContainer.current !== instance) {\n clearListeners();\n\n scrollContainer.current = instance;\n if (scrollContainer.current) {\n scrollContainer.current.addEventListener('scroll', onScroll);\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onScroll, onScrollEnd, paginationEnabled],\n );\n\n return paginationRef;\n};\n"],"names":["React","useTimeout","useStaticVirtualizerPagination","virtualizerProps","paginationEnabled","itemSize","axis","setScrollTimer","clearScrollTimer","lastScrollPos","useRef","lastIndexScrolled","scrollContainer","clearListeners","current","removeEventListener","onScroll","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItem","nextItem","nextTarget","isSecondaryScroll","posMod","nextItemPos","scrollTo","top","behavior","left","event","paginationRef","instance","addEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,UAAU,QAAQ,4BAA4B;AAEvD;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,kBACAC,oBAA6B,IAAI;IAEjC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAE,GAAGH;IAExC,MAAM,CAACI,gBAAgBC,iBAAiB,GAAGP;IAC3C,MAAMQ,gBAAgBT,MAAMU,MAAM,CAAS;IAC3C,MAAMC,oBAAoBX,MAAMU,MAAM,CAAS;IAE/C,MAAME,kBAAkBZ,MAAMU,MAAM,CAAqB;IAEzD,MAAMG,iBAAiB;QACrB,IAAID,gBAAgBE,OAAO,EAAE;YAC3BF,gBAAgBE,OAAO,CAACC,mBAAmB,CAAC,UAAUC;YAEtDJ,gBAAgBE,OAAO,GAAG;YAC1BN;QACF;IACF;IAEAR,MAAMiB,SAAS,CAAC;QACd,OAAO;YACLJ;QACF;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL;;;;GAIC,GACD,MAAMK,cAAclB,MAAMmB,WAAW,CAAC;QACpC,IAAI,CAACP,gBAAgBE,OAAO,IAAI,CAACV,mBAAmB;YAClD,qBAAqB;YACrB;QACF;QAEA,MAAMgB,mBAAmBC,KAAKC,KAAK,CACjChB,SAAS,aAAaM,gBAAgBE,OAAO,CAACS,SAAS,GAAGX,gBAAgBE,OAAO,CAACU,UAAU;QAE9F,MAAMC,cAAcJ,KAAKC,KAAK,CAACF,mBAAmBf;QAElD,IAAIqB,WAAW;QACf,IAAIL,KAAKC,KAAK,CAACG,cAAcd,kBAAkBG,OAAO,MAAM,GAAG;YAC7D,4EAA4E;YAC5E,MAAMa,aAAalB,cAAcK,OAAO,GAAGM,mBAAmB,IAAI,CAAC;YACnE,MAAMQ,oBAAoBnB,cAAcK,OAAO,KAAKM;YACpD,MAAMS,SAASD,oBAAoB,IAAID;YAEvCD,WAAWD,cAAcI;QAC3B,OAAO;YACL,6DAA6D;YAC7DH,WAAWD;QACb;QAEA,MAAMK,cAAcJ,WAAWrB;QAE/B,IAAIC,SAAS,YAAY;YACvBM,gBAAgBE,OAAO,CAACiB,QAAQ,CAAC;gBAAEC,KAAKF;gBAAaG,UAAU;YAAS;QAC1E,OAAO;YACLrB,gBAAgBE,OAAO,CAACiB,QAAQ,CAAC;gBAAEG,MAAMJ;gBAAaG,UAAU;YAAS;QAC3E;QACAxB,cAAcK,OAAO,GAAGgB;QACxBnB,kBAAkBG,OAAO,GAAGY;IAC9B,GAAG;QAACtB;QAAmBE;QAAMD;KAAS;IAEtC;;GAEC,GACD,MAAMW,WAAWhB,MAAMmB,WAAW,CAChCgB,CAAAA;QACE3B;QACAD,eAAeW,aAAa;IAC9B,GACA;QAACA;QAAaV;QAAkBD;KAAe;IAGjD;;;GAGC,GACD,MAAM6B,gBAAgBpC,MAAMmB,WAAW,CACrC,CAACkB;QACC,IAAI,CAACjC,mBAAmB;YACtBS;YACAD,gBAAgBE,OAAO,GAAG;YAC1B;QACF;QACA,IAAIF,gBAAgBE,OAAO,KAAKuB,UAAU;YACxCxB;YAEAD,gBAAgBE,OAAO,GAAGuB;YAC1B,IAAIzB,gBAAgBE,OAAO,EAAE;gBAC3BF,gBAAgBE,OAAO,CAACwB,gBAAgB,CAAC,UAAUtB;YACrD;QACF;IACF,GACA,uDAAuD;IACvD;QAACA;QAAUE;QAAad;KAAkB;IAG5C,OAAOgC;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrolling.types.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrolling.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ScrollToItemStaticParams = {\n index: number;\n itemSize: number;\n totalItems: number;\n scrollViewRef: React.RefObject<HTMLDivElement>;\n axis?: 'horizontal' | 'vertical';\n reversed?: boolean;\n behavior?: ScrollBehavior;\n};\n\nexport type ScrollToItemDynamicParams = {\n index: number;\n itemSizes: React.RefObject<number[]>;\n totalSize: number;\n scrollViewRef: React.RefObject<HTMLDivElement>;\n axis?: 'horizontal' | 'vertical';\n reversed?: boolean;\n behavior?: ScrollBehavior;\n};\n\nexport type ScrollToInterface = {\n scrollTo: (index: number, behavior?: ScrollBehavior, callback?: (index: number) => void) => void;\n virtualizerLength: React.RefObject<number>;\n currentIndex: React.RefObject<number> | undefined;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useMemo, useState, useRef } from 'react';
|
|
3
2
|
const VirtualizerContext = React.createContext(undefined);
|
|
4
3
|
export const VirtualizerContextProvider = VirtualizerContext.Provider;
|
|
5
4
|
export const useVirtualizerContext_unstable = ()=>{
|
|
@@ -7,11 +6,11 @@ export const useVirtualizerContext_unstable = ()=>{
|
|
|
7
6
|
};
|
|
8
7
|
export const useVirtualizerContextState_unstable = (passedContext)=>{
|
|
9
8
|
const virtualizerContext = useVirtualizerContext_unstable();
|
|
10
|
-
const [_contextIndex, _setContextIndex] = useState(-1);
|
|
11
|
-
const childProgressiveSizes = useRef([]);
|
|
9
|
+
const [_contextIndex, _setContextIndex] = React.useState(-1);
|
|
10
|
+
const childProgressiveSizes = React.useRef([]);
|
|
12
11
|
/* We respect any wrapped providers while also ensuring defaults or passed through
|
|
13
12
|
* Order of usage -> Passed Prop -> Provider Context -> Internal State default
|
|
14
|
-
*/ const context = useMemo(()=>{
|
|
13
|
+
*/ const context = React.useMemo(()=>{
|
|
15
14
|
var _passedContext_contextIndex, _ref, _passedContext_setContextIndex, _ref1;
|
|
16
15
|
return {
|
|
17
16
|
contextIndex: (_ref = (_passedContext_contextIndex = passedContext === null || passedContext === void 0 ? void 0 : passedContext.contextIndex) !== null && _passedContext_contextIndex !== void 0 ? _passedContext_contextIndex : virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.contextIndex) !== null && _ref !== void 0 ? _ref : _contextIndex,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utilities/VirtualizerContext/VirtualizerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DynamicVirtualizerContextProps, VirtualizerContextProps } from './types';\
|
|
1
|
+
{"version":3,"sources":["../src/utilities/VirtualizerContext/VirtualizerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DynamicVirtualizerContextProps, VirtualizerContextProps } from './types';\n\nconst VirtualizerContext = React.createContext<VirtualizerContextProps | undefined>(\n undefined,\n) as React.Context<VirtualizerContextProps>;\n\nexport const VirtualizerContextProvider = VirtualizerContext.Provider;\n\nexport const useVirtualizerContext_unstable = () => {\n return React.useContext(VirtualizerContext);\n};\n\nexport const useVirtualizerContextState_unstable = (\n passedContext?: VirtualizerContextProps,\n): DynamicVirtualizerContextProps => {\n const virtualizerContext = useVirtualizerContext_unstable();\n const [_contextIndex, _setContextIndex] = React.useState<number>(-1);\n const childProgressiveSizes = React.useRef<number[]>([]);\n\n /* We respect any wrapped providers while also ensuring defaults or passed through\n * Order of usage -> Passed Prop -> Provider Context -> Internal State default\n */\n const context = React.useMemo(\n () => ({\n contextIndex: passedContext?.contextIndex ?? virtualizerContext?.contextIndex ?? _contextIndex,\n setContextIndex: passedContext?.setContextIndex ?? virtualizerContext?.setContextIndex ?? _setContextIndex,\n childProgressiveSizes,\n }),\n [_contextIndex, passedContext, virtualizerContext],\n );\n\n return context;\n};\n"],"names":["React","VirtualizerContext","createContext","undefined","VirtualizerContextProvider","Provider","useVirtualizerContext_unstable","useContext","useVirtualizerContextState_unstable","passedContext","virtualizerContext","_contextIndex","_setContextIndex","useState","childProgressiveSizes","useRef","context","useMemo","contextIndex","setContextIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,qBAAqBD,MAAME,aAAa,CAC5CC;AAGF,OAAO,MAAMC,6BAA6BH,mBAAmBI,QAAQ,CAAC;AAEtE,OAAO,MAAMC,iCAAiC;IAC5C,OAAON,MAAMO,UAAU,CAACN;AAC1B,EAAE;AAEF,OAAO,MAAMO,sCAAsC,CACjDC;IAEA,MAAMC,qBAAqBJ;IAC3B,MAAM,CAACK,eAAeC,iBAAiB,GAAGZ,MAAMa,QAAQ,CAAS,CAAC;IAClE,MAAMC,wBAAwBd,MAAMe,MAAM,CAAW,EAAE;IAEvD;;GAEC,GACD,MAAMC,UAAUhB,MAAMiB,OAAO,CAC3B;YACgBR,6BAAAA,MACGA,gCAAAA;eAFZ;YACLS,cAAcT,CAAAA,OAAAA,CAAAA,8BAAAA,0BAAAA,oCAAAA,cAAeS,YAAY,cAA3BT,yCAAAA,8BAA+BC,+BAAAA,yCAAAA,mBAAoBQ,YAAY,cAA/DT,kBAAAA,OAAmEE;YACjFQ,iBAAiBV,CAAAA,QAAAA,CAAAA,iCAAAA,0BAAAA,oCAAAA,cAAeU,eAAe,cAA9BV,4CAAAA,iCAAkCC,+BAAAA,yCAAAA,mBAAoBS,eAAe,cAArEV,mBAAAA,QAAyEG;YAC1FE;QACF;IAAA,GACA;QAACH;QAAeF;QAAeC;KAAmB;IAGpD,OAAOM;AACT,EAAE"}
|
|
@@ -8,6 +8,8 @@ Object.defineProperty(exports, "Virtualizer", {
|
|
|
8
8
|
return Virtualizer;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
11
13
|
const _useVirtualizerStylesstyles = require("./useVirtualizerStyles.styles");
|
|
12
14
|
const _useVirtualizer = require("./useVirtualizer");
|
|
13
15
|
const _renderVirtualizer = require("./renderVirtualizer");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.ts"],"sourcesContent":["import type { VirtualizerProps } from './Virtualizer.types';\nimport { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles';\nimport { useVirtualizer_unstable } from './useVirtualizer';\nimport { renderVirtualizer_unstable } from './renderVirtualizer';\
|
|
1
|
+
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.ts"],"sourcesContent":["import * as React from 'react';\nimport type { VirtualizerProps } from './Virtualizer.types';\nimport { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles';\nimport { useVirtualizer_unstable } from './useVirtualizer';\nimport { renderVirtualizer_unstable } from './renderVirtualizer';\n\n/**\n * Virtualizer pseudo-component, this functional wrapper\n * provides a simple interface for reducing the total number\n * of elements rendered at one time in large lists.\n */\nexport const Virtualizer: React.FC<VirtualizerProps> = (props: VirtualizerProps) => {\n const state = useVirtualizer_unstable(props);\n useVirtualizerStyles_unstable(state);\n\n return renderVirtualizer_unstable(state);\n};\n\nVirtualizer.displayName = 'Virtualizer';\n"],"names":["Virtualizer","props","state","useVirtualizer_unstable","useVirtualizerStyles_unstable","renderVirtualizer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;4CAEuB;gCACN;mCACG;AAOpC,MAAMA,cAA0C,CAACC;IACtD,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBF;IACtCG,IAAAA,yDAAAA,EAA8BF;IAE9B,OAAOG,IAAAA,6CAAAA,EAA2BH;AACpC;AAEAF,YAAYM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { VirtualizerContextProps } from '../../Utilities';\
|
|
1
|
+
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { VirtualizerContextProps } from '../../Utilities';\n\nexport type VirtualizerSlots = {\n /**\n * The intersection observed 'before' element will detect when scrolling towards the beginning.\n */\n before: NonNullable<Slot<'div', 'td'>>;\n /**\n * A block place holding whitespace at the beginning of current DOM children.\n */\n beforeContainer: NonNullable<Slot<'div', 'tr'>>;\n /**\n * The intersection observed 'after' element will detect when scrolling towards the end.\n */\n after: NonNullable<Slot<'div', 'td'>>;\n /**\n * A block place holding whitespace after the end of current DOM children.\n */\n afterContainer: NonNullable<Slot<'div', 'tr'>>;\n};\n\nexport type VirtualizerConfigState = {\n /**\n * The current virtualized array of children to show in the DOM.\n */\n virtualizedChildren: React.ReactNode[];\n /**\n * The current start index for the virtualizer, all previous index's will be removed from DOM.\n */\n virtualizerStartIndex: number;\n /**\n * Current buffer height required at beginning of array.\n */\n afterBufferHeight: number;\n /**\n * Current buffer height required at end of array.\n */\n beforeBufferHeight: number;\n /**\n * The total current height of the scrollView/child content.\n */\n totalVirtualizerHeight: number;\n /**\n * The scroll direction\n * @default vertical\n */\n axis?: 'vertical' | 'horizontal';\n /**\n * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n */\n reversed?: boolean;\n /**\n * Enables the isScrolling property in the child render function\n * Default: false - to prevent nessecary render function calls\n */\n enableScrollLoad?: boolean;\n /**\n * Pixel size of intersection observers and how much they 'cross over' into the bufferItems index.\n * Minimum 1px.\n */\n bufferSize: number;\n /**\n * Ref for access to internal size knowledge, can be used to measure updates\n */\n childSizes: React.MutableRefObject<number[]>;\n /**\n * Ref for access to internal progressive size knowledge, can be used to measure updates\n */\n childProgressiveSizes: React.MutableRefObject<number[]>;\n};\n\nexport type VirtualizerState = ComponentState<VirtualizerSlots> & VirtualizerConfigState;\n\n/**\n * The main child render method of Virtualization\n * isScrolling will only be enabled when enableScrollLoad is set to true.\n */\nexport type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React.ReactNode;\n\nexport type VirtualizerDataRef = {\n progressiveSizes: React.RefObject<number[]>;\n nodeSizes: React.RefObject<number[]>;\n setFlaggedIndex: (index: number | null) => void;\n currentIndex: React.RefObject<number>;\n};\n\nexport type VirtualizerConfigProps = {\n /**\n * Child render function.\n * Iteratively called to return current virtualizer DOM children.\n * Will act as a row or column indexer depending on Virtualizer settings.\n * Can be used dynamically.\n */\n children: VirtualizerChildRenderFunction;\n\n /**\n * Default cell size to use if no custom callback provided.\n * If implementing `getItemSize` this should be the initial and ideally minimum cell size.\n */\n itemSize: number;\n\n /**\n * The total number of items to be virtualized.\n */\n numItems: number;\n\n /**\n * Number of children to render in the DOM during virtualization.\n * Constraints:\n * - Large enough that the items rendered in DOM cover the viewport\n * and intersection observer buffers (buffersize) at both ends.\n */\n virtualizerLength: number;\n\n /**\n * Defaults to 1/4th (or 1/3rd for dynamic items) of virtualizerLength.\n * RECOMMEND: Override this with a consistent value if using a dynamic virtualizer.\n *\n * Controls the number of elements rendered before the current index entering the virtualized viewport.\n * Constraints:\n * - Large enough to cover bufferSize (prevents buffers intersecting into the viewport during rest state).\n * - Small enough that the virtualizer only renders a few items outside of view.\n */\n bufferItems?: number;\n\n /**\n * Defaults to half of bufferItems * itemSize size (in pixels).\n * RECOMMEND: Override this with a consistent minimum item size value if using a dynamic virtualizer.\n * The length (in pixels) before the end/start DOM index where the virtualizer recalculation will be triggered.\n * Increasing this reduces whitespace on ultra-fast scroll, as additional elements\n * are buffered to appear while virtualization recalculates.\n * Constraints:\n * - At least 1px - although this will only trigger the recalculation after bookends (whitespace) enter viewport.\n * - BufferSize must be smaller than bufferItems pixel size, as it prevents bookends entering viewport at rest.\n */\n bufferSize?: number;\n\n /**\n * Enables users to override the intersectionObserverRoot.\n * We recommend passing this in for accurate distance assessment in IO\n */\n scrollViewRef?: React.MutableRefObject<HTMLElement | null>;\n\n /**\n * The scroll direction\n * @default vertical\n */\n axis?: 'vertical' | 'horizontal';\n\n /**\n * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n * This value should be flipped in RTL implementation (TBD whether automate RTL).\n */\n reversed?: boolean;\n\n /**\n * Enables the isScrolling property in the child render function\n * Default: false - to prevent nessecary render function calls\n */\n enableScrollLoad?: boolean;\n\n /**\n * Callback for acquiring size of individual items\n * @param index - the index of the requested size's child\n */\n getItemSize?: (index: number) => number;\n\n /**\n * Virtualizer context can be passed as a prop for extended class use\n */\n virtualizerContext?: VirtualizerContextProps;\n\n /**\n * Callback for notifying when a flagged index has been rendered\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onRenderedFlaggedIndex?: (index: number) => void;\n\n /*\n * Callback for notifying when a flagged index has been rendered\n */\n flaggedIndex?: React.MutableRefObject<number | null>;\n\n /**\n * Imperative ref contains our scrollTo index functionality for user control.\n */\n imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef>;\n\n /**\n * A ref that provides the size of container (vertical - height, horizontal - width), set by a resize observer.\n * Virtualizer Measure hooks provide a suitable reference.\n */\n containerSizeRef: React.RefObject<number>;\n\n /**\n * A callback that enables updating scroll position for calculating required dynamic lengths,\n * this should be passed in from useDynamicVirtualizerMeasure\n */\n updateScrollPosition?: (position: number) => void;\n\n /**\n * Spacing between rendered children for calculation, should match the container's gap CSS value.\n */\n gap?: number;\n};\n\nexport type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & VirtualizerConfigProps;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport type { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\
|
|
1
|
+
{"version":3,"sources":["../src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport type { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nexport const renderVirtualizer_unstable = (state: VirtualizerState) => {\n assertSlots<VirtualizerSlots>(state);\n return (\n <React.Fragment>\n {/* The 'before' bookend to hold items in place and detect scroll previous */}\n <state.beforeContainer>\n <state.before />\n </state.beforeContainer>\n {/* The reduced list of non-virtualized children to be rendered */}\n {state.virtualizedChildren}\n {/* The 'after' bookend to hold items in place and detect scroll next */}\n <state.afterContainer>\n <state.after />\n </state.afterContainer>\n </React.Fragment>\n );\n};\n\nexport const renderVirtualizerChildPlaceholder = (child: React.ReactNode, index: number) => {\n return (\n <React.Suspense key={`fui-virtualizer-placeholder-${index}`} fallback={null}>\n {child}\n </React.Suspense>\n );\n};\n"],"names":["renderVirtualizerChildPlaceholder","renderVirtualizer_unstable","state","assertSlots","_jsxs","React","Fragment","_jsx","beforeContainer","before","virtualizedChildren","afterContainer","after","child","index","Suspense","fallback"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0BaA,iCAAAA;eAAAA;;IAlBAC,0BAAAA;eAAAA;;;;4BAPb;iEAEuB;gCAGK;AAErB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAC9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACC,OAAMC,QAAQ,EAAA;;0BAEbC,IAAAA,eAAA,EAACL,MAAMM,eAAe,EAAA;0BACpB,WAAA,GAAAD,IAAAA,eAAA,EAACL,MAAMO,MAAM,EAAA,CAAA;;YAGdP,MAAMQ,mBAAmB;0BAE1BH,IAAAA,eAAA,EAACL,MAAMS,cAAc,EAAA;0BACnB,WAAA,GAAAJ,IAAAA,eAAA,EAACL,MAAMU,KAAK,EAAA,CAAA;;;;AAIpB;AAEO,MAAMZ,oCAAoC,CAACa,OAAwBC;IACxE,OAAA,WAAA,GACEP,IAAAA,eAAA,EAACF,OAAMU,QAAQ,EAAA;QAA8CC,UAAU;kBACpEH;OADkB,CAAC,4BAA4B,EAAEC,MAAM,CAAC;AAI/D"}
|
|
@@ -8,42 +8,43 @@ Object.defineProperty(exports, "useVirtualizer_unstable", {
|
|
|
8
8
|
return useVirtualizer_unstable;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
12
13
|
const _useIntersectionObserver = require("../../hooks/useIntersectionObserver");
|
|
13
14
|
const _Utilities = require("../../Utilities");
|
|
14
15
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
16
|
const _reactdom = require("react-dom");
|
|
16
17
|
function useVirtualizer_unstable(props) {
|
|
17
18
|
'use no memo';
|
|
18
|
-
const { itemSize, numItems, virtualizerLength, children: renderChild, getItemSize, bufferItems = Math.round(virtualizerLength / 4.0), bufferSize = Math.floor(bufferItems / 2.0) * itemSize, axis = 'vertical', reversed = false, virtualizerContext, onRenderedFlaggedIndex, imperativeVirtualizerRef, containerSizeRef, scrollViewRef, enableScrollLoad, updateScrollPosition } = props;
|
|
19
|
+
const { itemSize, numItems, virtualizerLength, children: renderChild, getItemSize, bufferItems = Math.round(virtualizerLength / 4.0), bufferSize = Math.floor(bufferItems / 2.0) * itemSize, axis = 'vertical', reversed = false, virtualizerContext, onRenderedFlaggedIndex, imperativeVirtualizerRef, containerSizeRef, scrollViewRef, enableScrollLoad, updateScrollPosition, gap = 0 } = props;
|
|
19
20
|
/* The context is optional, it's useful for injecting additional index logic, or performing uniform state updates*/ const _virtualizerContext = (0, _Utilities.useVirtualizerContextState_unstable)(virtualizerContext);
|
|
20
21
|
// We use this ref as a constant source to access the virtualizer's state imperatively
|
|
21
|
-
const actualIndexRef =
|
|
22
|
-
const flaggedIndex =
|
|
22
|
+
const actualIndexRef = _react.useRef(_virtualizerContext.contextIndex);
|
|
23
|
+
const flaggedIndex = _react.useRef(null);
|
|
23
24
|
const actualIndex = _virtualizerContext.contextIndex;
|
|
24
25
|
// Just in case our ref gets out of date vs the context during a re-render
|
|
25
26
|
if (_virtualizerContext.contextIndex !== actualIndexRef.current) {
|
|
26
27
|
actualIndexRef.current = _virtualizerContext.contextIndex;
|
|
27
28
|
}
|
|
28
|
-
const setActualIndex =
|
|
29
|
+
const setActualIndex = _react.useCallback((index)=>{
|
|
29
30
|
actualIndexRef.current = index;
|
|
30
31
|
_virtualizerContext.setContextIndex(index);
|
|
31
32
|
}, [
|
|
32
33
|
_virtualizerContext
|
|
33
34
|
]);
|
|
34
35
|
// Store ref to before padding element
|
|
35
|
-
const beforeElementRef =
|
|
36
|
+
const beforeElementRef = _react.useRef(null);
|
|
36
37
|
// Store ref to before padding element
|
|
37
|
-
const afterElementRef =
|
|
38
|
+
const afterElementRef = _react.useRef(null);
|
|
38
39
|
// We need to store an array to track dynamic sizes, we can use this to incrementally update changes
|
|
39
|
-
const childSizes =
|
|
40
|
+
const childSizes = _react.useRef(new Array(getItemSize ? numItems : 0));
|
|
40
41
|
/* We keep track of the progressive sizing/placement down the list,
|
|
41
|
-
this helps us skip re-calculations unless children/size changes */ const childProgressiveSizes =
|
|
42
|
+
this helps us skip re-calculations unless children/size changes */ const childProgressiveSizes = _react.useRef(new Array(getItemSize ? numItems : 0));
|
|
42
43
|
if (virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.childProgressiveSizes) {
|
|
43
44
|
virtualizerContext.childProgressiveSizes.current = childProgressiveSizes.current;
|
|
44
45
|
}
|
|
45
46
|
// The internal tracking REF for child array (updates often).
|
|
46
|
-
const childArray =
|
|
47
|
+
const childArray = _react.useRef(new Array(virtualizerLength));
|
|
47
48
|
const populateSizeArrays = ()=>{
|
|
48
49
|
if (!getItemSize) {
|
|
49
50
|
// Static sizes, never mind!
|
|
@@ -59,7 +60,8 @@ function useVirtualizer_unstable(props) {
|
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
for(let index = 0; index < numItems; index++){
|
|
62
|
-
|
|
63
|
+
const _gap = index < numItems - 1 ? gap : 0;
|
|
64
|
+
childSizes.current[index] = getItemSize(index) + _gap;
|
|
63
65
|
if (index === 0) {
|
|
64
66
|
childProgressiveSizes.current[index] = childSizes.current[index];
|
|
65
67
|
} else {
|
|
@@ -67,10 +69,10 @@ function useVirtualizer_unstable(props) {
|
|
|
67
69
|
}
|
|
68
70
|
}
|
|
69
71
|
};
|
|
70
|
-
const [isScrolling, setIsScrolling] =
|
|
72
|
+
const [isScrolling, setIsScrolling] = _react.useState(false);
|
|
71
73
|
const [setScrollTimer, clearScrollTimer] = (0, _reactutilities.useTimeout)();
|
|
72
|
-
const scrollCounter =
|
|
73
|
-
const initializeScrollingTimer =
|
|
74
|
+
const scrollCounter = _react.useRef(0);
|
|
75
|
+
const initializeScrollingTimer = _react.useCallback(()=>{
|
|
74
76
|
if (!enableScrollLoad) {
|
|
75
77
|
// Disabled by default for reduction of render callbacks
|
|
76
78
|
return;
|
|
@@ -96,13 +98,13 @@ function useVirtualizer_unstable(props) {
|
|
|
96
98
|
setScrollTimer,
|
|
97
99
|
enableScrollLoad
|
|
98
100
|
]);
|
|
99
|
-
|
|
101
|
+
_react.useEffect(()=>{
|
|
100
102
|
initializeScrollingTimer();
|
|
101
103
|
}, [
|
|
102
104
|
actualIndex,
|
|
103
105
|
initializeScrollingTimer
|
|
104
106
|
]);
|
|
105
|
-
const updateChildRows =
|
|
107
|
+
const updateChildRows = _react.useCallback((newIndex)=>{
|
|
106
108
|
if (numItems === 0) {
|
|
107
109
|
/* Nothing to virtualize */ return;
|
|
108
110
|
}
|
|
@@ -121,7 +123,7 @@ function useVirtualizer_unstable(props) {
|
|
|
121
123
|
renderChild,
|
|
122
124
|
virtualizerLength
|
|
123
125
|
]);
|
|
124
|
-
const updateCurrentItemSizes =
|
|
126
|
+
const updateCurrentItemSizes = _react.useCallback((newIndex)=>{
|
|
125
127
|
if (!getItemSize) {
|
|
126
128
|
// Static sizes, not required.
|
|
127
129
|
return;
|
|
@@ -132,7 +134,8 @@ function useVirtualizer_unstable(props) {
|
|
|
132
134
|
const startIndex = Math.max(newIndex, 0);
|
|
133
135
|
let didUpdate = false;
|
|
134
136
|
for(let i = startIndex; i < endIndex; i++){
|
|
135
|
-
const
|
|
137
|
+
const _gap = i < numItems - 1 ? gap : 0;
|
|
138
|
+
const newSize = getItemSize(i) + _gap;
|
|
136
139
|
if (newSize !== childSizes.current[i]) {
|
|
137
140
|
childSizes.current[i] = newSize;
|
|
138
141
|
didUpdate = true;
|
|
@@ -148,9 +151,10 @@ function useVirtualizer_unstable(props) {
|
|
|
148
151
|
}, [
|
|
149
152
|
getItemSize,
|
|
150
153
|
numItems,
|
|
151
|
-
virtualizerLength
|
|
154
|
+
virtualizerLength,
|
|
155
|
+
gap
|
|
152
156
|
]);
|
|
153
|
-
const batchUpdateNewIndex =
|
|
157
|
+
const batchUpdateNewIndex = _react.useCallback((index)=>{
|
|
154
158
|
// Local updates
|
|
155
159
|
updateChildRows(index);
|
|
156
160
|
updateCurrentItemSizes(index);
|
|
@@ -161,7 +165,7 @@ function useVirtualizer_unstable(props) {
|
|
|
161
165
|
updateChildRows,
|
|
162
166
|
updateCurrentItemSizes
|
|
163
167
|
]);
|
|
164
|
-
const findIndexRecursive =
|
|
168
|
+
const findIndexRecursive = _react.useCallback((scrollPos, lowIndex, highIndex)=>{
|
|
165
169
|
if (lowIndex > highIndex) {
|
|
166
170
|
// We shouldn't get here - but no-op the index if we do.
|
|
167
171
|
return actualIndex;
|
|
@@ -184,7 +188,7 @@ function useVirtualizer_unstable(props) {
|
|
|
184
188
|
}, [
|
|
185
189
|
actualIndex
|
|
186
190
|
]);
|
|
187
|
-
const getIndexFromSizeArray =
|
|
191
|
+
const getIndexFromSizeArray = _react.useCallback((scrollPos)=>{
|
|
188
192
|
/* Quick searches our progressive height array */ if (scrollPos === 0 || childProgressiveSizes.current.length === 0 || scrollPos <= childProgressiveSizes.current[0]) {
|
|
189
193
|
// Check start
|
|
190
194
|
return 0;
|
|
@@ -197,32 +201,34 @@ function useVirtualizer_unstable(props) {
|
|
|
197
201
|
}, [
|
|
198
202
|
findIndexRecursive
|
|
199
203
|
]);
|
|
200
|
-
const getIndexFromScrollPosition =
|
|
204
|
+
const getIndexFromScrollPosition = _react.useCallback((scrollPos)=>{
|
|
201
205
|
if (!getItemSize) {
|
|
202
|
-
return Math.round(scrollPos / itemSize);
|
|
206
|
+
return Math.round(scrollPos / (itemSize + gap));
|
|
203
207
|
}
|
|
204
208
|
return getIndexFromSizeArray(scrollPos);
|
|
205
209
|
}, [
|
|
206
210
|
getIndexFromSizeArray,
|
|
207
211
|
getItemSize,
|
|
208
|
-
itemSize
|
|
212
|
+
itemSize,
|
|
213
|
+
gap
|
|
209
214
|
]);
|
|
210
|
-
const calculateTotalSize =
|
|
215
|
+
const calculateTotalSize = _react.useCallback(()=>{
|
|
211
216
|
if (!getItemSize) {
|
|
212
|
-
return itemSize * numItems;
|
|
217
|
+
return (itemSize + gap) * numItems;
|
|
213
218
|
}
|
|
214
219
|
// Time for custom size calcs
|
|
215
220
|
return childProgressiveSizes.current[numItems - 1];
|
|
216
221
|
}, [
|
|
217
222
|
getItemSize,
|
|
218
223
|
itemSize,
|
|
219
|
-
numItems
|
|
224
|
+
numItems,
|
|
225
|
+
gap
|
|
220
226
|
]);
|
|
221
|
-
const calculateBefore =
|
|
227
|
+
const calculateBefore = _react.useCallback(()=>{
|
|
222
228
|
const currentIndex = Math.min(actualIndex, numItems - 1);
|
|
223
229
|
if (!getItemSize) {
|
|
224
230
|
// The missing items from before virtualization starts height
|
|
225
|
-
return currentIndex * itemSize;
|
|
231
|
+
return currentIndex * (itemSize + gap);
|
|
226
232
|
}
|
|
227
233
|
if (currentIndex <= 0) {
|
|
228
234
|
return 0;
|
|
@@ -233,9 +239,10 @@ function useVirtualizer_unstable(props) {
|
|
|
233
239
|
actualIndex,
|
|
234
240
|
getItemSize,
|
|
235
241
|
itemSize,
|
|
236
|
-
numItems
|
|
242
|
+
numItems,
|
|
243
|
+
gap
|
|
237
244
|
]);
|
|
238
|
-
const calculateAfter =
|
|
245
|
+
const calculateAfter = _react.useCallback(()=>{
|
|
239
246
|
if (numItems === 0 || actualIndex + virtualizerLength >= numItems) {
|
|
240
247
|
return 0;
|
|
241
248
|
}
|
|
@@ -243,7 +250,7 @@ function useVirtualizer_unstable(props) {
|
|
|
243
250
|
if (!getItemSize) {
|
|
244
251
|
// The missing items from after virtualization ends height
|
|
245
252
|
const remainingItems = numItems - lastItemIndex;
|
|
246
|
-
return remainingItems * itemSize;
|
|
253
|
+
return remainingItems * (itemSize + gap) - gap;
|
|
247
254
|
}
|
|
248
255
|
// Time for custom size calcs
|
|
249
256
|
return childProgressiveSizes.current[numItems - 1] - childProgressiveSizes.current[lastItemIndex - 1];
|
|
@@ -252,10 +259,11 @@ function useVirtualizer_unstable(props) {
|
|
|
252
259
|
getItemSize,
|
|
253
260
|
itemSize,
|
|
254
261
|
numItems,
|
|
255
|
-
virtualizerLength
|
|
262
|
+
virtualizerLength,
|
|
263
|
+
gap
|
|
256
264
|
]);
|
|
257
265
|
// Observe intersections of virtualized components
|
|
258
|
-
const { setObserverList } = (0, _useIntersectionObserver.useIntersectionObserver)(
|
|
266
|
+
const { setObserverList } = (0, _useIntersectionObserver.useIntersectionObserver)(_react.useCallback(// eslint-disable-next-line no-restricted-globals
|
|
259
267
|
(entries, observer)=>{
|
|
260
268
|
/* Sanity check - do we even need virtualization? */ if (virtualizerLength > numItems) {
|
|
261
269
|
if (actualIndex !== 0) {
|
|
@@ -374,7 +382,7 @@ function useVirtualizer_unstable(props) {
|
|
|
374
382
|
rootMargin: '0px',
|
|
375
383
|
threshold: 0
|
|
376
384
|
});
|
|
377
|
-
const setBeforeRef =
|
|
385
|
+
const setBeforeRef = _react.useCallback((element)=>{
|
|
378
386
|
if (!element || beforeElementRef.current === element) {
|
|
379
387
|
return;
|
|
380
388
|
}
|
|
@@ -389,7 +397,7 @@ function useVirtualizer_unstable(props) {
|
|
|
389
397
|
}, [
|
|
390
398
|
setObserverList
|
|
391
399
|
]);
|
|
392
|
-
const setAfterRef =
|
|
400
|
+
const setAfterRef = _react.useCallback((element)=>{
|
|
393
401
|
if (!element || afterElementRef.current === element) {
|
|
394
402
|
return;
|
|
395
403
|
}
|
|
@@ -405,14 +413,14 @@ function useVirtualizer_unstable(props) {
|
|
|
405
413
|
setObserverList
|
|
406
414
|
]);
|
|
407
415
|
// Initialize the size array before first render.
|
|
408
|
-
const hasInitialized =
|
|
416
|
+
const hasInitialized = _react.useRef(false);
|
|
409
417
|
const initializeSizeArray = ()=>{
|
|
410
418
|
if (hasInitialized.current === false) {
|
|
411
419
|
hasInitialized.current = true;
|
|
412
420
|
populateSizeArrays();
|
|
413
421
|
}
|
|
414
422
|
};
|
|
415
|
-
|
|
423
|
+
_react.useImperativeHandle(imperativeVirtualizerRef, ()=>{
|
|
416
424
|
return {
|
|
417
425
|
progressiveSizes: childProgressiveSizes,
|
|
418
426
|
nodeSizes: childSizes,
|
|
@@ -425,7 +433,7 @@ function useVirtualizer_unstable(props) {
|
|
|
425
433
|
]);
|
|
426
434
|
// Initialization on mount - update array index to 0 (ready state).
|
|
427
435
|
// Only fire on mount (no deps).
|
|
428
|
-
|
|
436
|
+
_react.useEffect(()=>{
|
|
429
437
|
if (actualIndex < 0) {
|
|
430
438
|
batchUpdateNewIndex(0);
|
|
431
439
|
}
|
|
@@ -435,9 +443,9 @@ function useVirtualizer_unstable(props) {
|
|
|
435
443
|
* forceUpdate:
|
|
436
444
|
* We only want to trigger this when scrollLoading is enabled and set to false,
|
|
437
445
|
* it will force re-render all children elements
|
|
438
|
-
*/ const forceUpdate =
|
|
446
|
+
*/ const forceUpdate = _react.useReducer(()=>({}), {})[1];
|
|
439
447
|
// If the user passes in an updated renderChild function - update current children
|
|
440
|
-
|
|
448
|
+
_react.useEffect(()=>{
|
|
441
449
|
if (actualIndex >= 0) {
|
|
442
450
|
updateChildRows(actualIndex);
|
|
443
451
|
if (enableScrollLoad && !isScrolling) {
|
|
@@ -449,16 +457,17 @@ function useVirtualizer_unstable(props) {
|
|
|
449
457
|
renderChild,
|
|
450
458
|
isScrolling
|
|
451
459
|
]);
|
|
452
|
-
|
|
460
|
+
_react.useEffect(()=>{
|
|
453
461
|
// Ensure we repopulate if getItemSize callback changes
|
|
454
462
|
populateSizeArrays();
|
|
455
463
|
// We only run this effect on getItemSize change (recalc dynamic sizes)
|
|
456
464
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
457
465
|
}, [
|
|
458
|
-
getItemSize
|
|
466
|
+
getItemSize,
|
|
467
|
+
gap
|
|
459
468
|
]);
|
|
460
469
|
// Effect to check flag index on updates
|
|
461
|
-
|
|
470
|
+
_react.useEffect(()=>{
|
|
462
471
|
if (!onRenderedFlaggedIndex || flaggedIndex.current === null) {
|
|
463
472
|
return;
|
|
464
473
|
}
|