@react-aria/virtualizer 3.10.2-nightly.4704 → 3.10.2-nightly.4718
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/dist/ScrollView.main.js +4 -0
- package/dist/ScrollView.main.js.map +1 -1
- package/dist/ScrollView.mjs +4 -0
- package/dist/ScrollView.module.js +4 -0
- package/dist/ScrollView.module.js.map +1 -1
- package/dist/Virtualizer.main.js +13 -52
- package/dist/Virtualizer.main.js.map +1 -1
- package/dist/Virtualizer.mjs +15 -53
- package/dist/Virtualizer.module.js +15 -53
- package/dist/Virtualizer.module.js.map +1 -1
- package/dist/import.mjs +2 -2
- package/dist/main.js +0 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -2
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -13
- package/dist/types.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/ScrollView.tsx +6 -0
- package/src/Virtualizer.tsx +7 -64
- package/src/index.ts +1 -1
package/dist/ScrollView.main.js
CHANGED
|
@@ -72,6 +72,8 @@ function $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref) {
|
|
|
72
72
|
if (!state.isScrolling) {
|
|
73
73
|
state.isScrolling = true;
|
|
74
74
|
setScrolling(true);
|
|
75
|
+
// Pause typekit MutationObserver during scrolling.
|
|
76
|
+
window.dispatchEvent(new Event('tk.disconnect-observer'));
|
|
75
77
|
if (onScrollStart) onScrollStart();
|
|
76
78
|
}
|
|
77
79
|
// So we don't constantly call clearTimeout and setTimeout,
|
|
@@ -85,6 +87,7 @@ function $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref) {
|
|
|
85
87
|
state.isScrolling = false;
|
|
86
88
|
setScrolling(false);
|
|
87
89
|
state.scrollTimeout = null;
|
|
90
|
+
window.dispatchEvent(new Event('tk.connect-observer'));
|
|
88
91
|
if (onScrollEnd) onScrollEnd();
|
|
89
92
|
}, 300);
|
|
90
93
|
}
|
|
@@ -104,6 +107,7 @@ function $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref) {
|
|
|
104
107
|
(0, $kvIfm$react.useEffect)(()=>{
|
|
105
108
|
return ()=>{
|
|
106
109
|
clearTimeout(state.scrollTimeout);
|
|
110
|
+
if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
|
|
107
111
|
};
|
|
108
112
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
109
113
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n sizeToFit?: 'width' | 'height',\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div role=\"presentation\" {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>) {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n clearTimeout(state.scrollTimeout);\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n // eslint-disable-next-line arrow-body-style\n useEffect(() => {\n return () => {\n clearTimeout(state.scrollTimeout);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let updateSize = useEffectEvent((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom) {\n return;\n }\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {\n if (sizeToFit === 'width') {\n w = Math.min(w, contentSize.width);\n } else if (sizeToFit === 'height') {\n h = Math.min(h, contentSize.height);\n }\n }\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n });\n\n let didUpdateSize = useRef(false);\n useLayoutEffect(() => {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n queueMicrotask(() => {\n if (!didUpdateSize.current) {\n didUpdateSize.current = true;\n updateSize(flushSync);\n }\n });\n }, [updateSize]);\n useEffect(() => {\n if (!didUpdateSize.current) {\n // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).\n // Update the size here so that you don't need to mock timers in tests.\n didUpdateSize.current = true;\n updateSize(fn => fn());\n }\n }, [updateSize]);\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n sizeToFit?: 'width' | 'height',\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div role=\"presentation\" {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>) {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n // Pause typekit MutationObserver during scrolling.\n window.dispatchEvent(new Event('tk.disconnect-observer'));\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n clearTimeout(state.scrollTimeout);\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n window.dispatchEvent(new Event('tk.connect-observer'));\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n // eslint-disable-next-line arrow-body-style\n useEffect(() => {\n return () => {\n clearTimeout(state.scrollTimeout);\n if (state.isScrolling) {\n window.dispatchEvent(new Event('tk.connect-observer'));\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let updateSize = useEffectEvent((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom) {\n return;\n }\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {\n if (sizeToFit === 'width') {\n w = Math.min(w, contentSize.width);\n } else if (sizeToFit === 'height') {\n h = Math.min(h, contentSize.height);\n }\n }\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n });\n\n let didUpdateSize = useRef(false);\n useLayoutEffect(() => {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n queueMicrotask(() => {\n if (!didUpdateSize.current) {\n didUpdateSize.current = true;\n updateSize(flushSync);\n }\n });\n }, [updateSize]);\n useEffect(() => {\n if (!didUpdateSize.current) {\n // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).\n // Update the size here so that you don't need to mock timers in tests.\n didUpdateSize.current = true;\n updateSize(fn => fn());\n }\n }, [updateSize]);\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.main.js.map"}
|
package/dist/ScrollView.mjs
CHANGED
|
@@ -61,6 +61,8 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
61
61
|
if (!state.isScrolling) {
|
|
62
62
|
state.isScrolling = true;
|
|
63
63
|
setScrolling(true);
|
|
64
|
+
// Pause typekit MutationObserver during scrolling.
|
|
65
|
+
window.dispatchEvent(new Event('tk.disconnect-observer'));
|
|
64
66
|
if (onScrollStart) onScrollStart();
|
|
65
67
|
}
|
|
66
68
|
// So we don't constantly call clearTimeout and setTimeout,
|
|
@@ -74,6 +76,7 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
74
76
|
state.isScrolling = false;
|
|
75
77
|
setScrolling(false);
|
|
76
78
|
state.scrollTimeout = null;
|
|
79
|
+
window.dispatchEvent(new Event('tk.connect-observer'));
|
|
77
80
|
if (onScrollEnd) onScrollEnd();
|
|
78
81
|
}, 300);
|
|
79
82
|
}
|
|
@@ -93,6 +96,7 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
93
96
|
(0, $f9kpT$useEffect)(()=>{
|
|
94
97
|
return ()=>{
|
|
95
98
|
clearTimeout(state.scrollTimeout);
|
|
99
|
+
if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
|
|
96
100
|
};
|
|
97
101
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
98
102
|
}, []);
|
|
@@ -61,6 +61,8 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
61
61
|
if (!state.isScrolling) {
|
|
62
62
|
state.isScrolling = true;
|
|
63
63
|
setScrolling(true);
|
|
64
|
+
// Pause typekit MutationObserver during scrolling.
|
|
65
|
+
window.dispatchEvent(new Event('tk.disconnect-observer'));
|
|
64
66
|
if (onScrollStart) onScrollStart();
|
|
65
67
|
}
|
|
66
68
|
// So we don't constantly call clearTimeout and setTimeout,
|
|
@@ -74,6 +76,7 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
74
76
|
state.isScrolling = false;
|
|
75
77
|
setScrolling(false);
|
|
76
78
|
state.scrollTimeout = null;
|
|
79
|
+
window.dispatchEvent(new Event('tk.connect-observer'));
|
|
77
80
|
if (onScrollEnd) onScrollEnd();
|
|
78
81
|
}, 300);
|
|
79
82
|
}
|
|
@@ -93,6 +96,7 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
93
96
|
(0, $f9kpT$useEffect)(()=>{
|
|
94
97
|
return ()=>{
|
|
95
98
|
clearTimeout(state.scrollTimeout);
|
|
99
|
+
if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
|
|
96
100
|
};
|
|
97
101
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
98
102
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n sizeToFit?: 'width' | 'height',\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div role=\"presentation\" {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>) {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n clearTimeout(state.scrollTimeout);\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n // eslint-disable-next-line arrow-body-style\n useEffect(() => {\n return () => {\n clearTimeout(state.scrollTimeout);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let updateSize = useEffectEvent((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom) {\n return;\n }\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {\n if (sizeToFit === 'width') {\n w = Math.min(w, contentSize.width);\n } else if (sizeToFit === 'height') {\n h = Math.min(h, contentSize.height);\n }\n }\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n });\n\n let didUpdateSize = useRef(false);\n useLayoutEffect(() => {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n queueMicrotask(() => {\n if (!didUpdateSize.current) {\n didUpdateSize.current = true;\n updateSize(flushSync);\n }\n });\n }, [updateSize]);\n useEffect(() => {\n if (!didUpdateSize.current) {\n // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).\n // Update the size here so that you don't need to mock timers in tests.\n didUpdateSize.current = true;\n updateSize(fn => fn());\n }\n }, [updateSize]);\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n sizeToFit?: 'width' | 'height',\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div role=\"presentation\" {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>) {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n // Pause typekit MutationObserver during scrolling.\n window.dispatchEvent(new Event('tk.disconnect-observer'));\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n clearTimeout(state.scrollTimeout);\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n window.dispatchEvent(new Event('tk.connect-observer'));\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n // eslint-disable-next-line arrow-body-style\n useEffect(() => {\n return () => {\n clearTimeout(state.scrollTimeout);\n if (state.isScrolling) {\n window.dispatchEvent(new Event('tk.connect-observer'));\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let updateSize = useEffectEvent((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom) {\n return;\n }\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {\n if (sizeToFit === 'width') {\n w = Math.min(w, contentSize.width);\n } else if (sizeToFit === 'height') {\n h = Math.min(h, contentSize.height);\n }\n }\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n });\n\n let didUpdateSize = useRef(false);\n useLayoutEffect(() => {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n queueMicrotask(() => {\n if (!didUpdateSize.current) {\n didUpdateSize.current = true;\n updateSize(flushSync);\n }\n });\n }, [updateSize]);\n useEffect(() => {\n if (!didUpdateSize.current) {\n // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).\n // Update the size here so that you don't need to mock timers in tests.\n didUpdateSize.current = true;\n updateSize(fn => fn());\n }\n }, [updateSize]);\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.module.js.map"}
|
package/dist/Virtualizer.main.js
CHANGED
|
@@ -13,7 +13,6 @@ function $parcel$export(e, n, v, s) {
|
|
|
13
13
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
$parcel$export(module.exports, "useVirtualizer", () => $e1fb6f3669e1c329$export$dd6d526d88b5a137);
|
|
17
16
|
$parcel$export(module.exports, "Virtualizer", () => $e1fb6f3669e1c329$export$89be5a243e59c4b2);
|
|
18
17
|
/*
|
|
19
18
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -47,9 +46,20 @@ function $e1fb6f3669e1c329$var$Virtualizer(props, ref) {
|
|
|
47
46
|
persistedKeys: persistedKeys,
|
|
48
47
|
layoutOptions: layoutOptions
|
|
49
48
|
});
|
|
50
|
-
|
|
49
|
+
(0, $knrtk$reactariautils.useLoadMore)({
|
|
50
|
+
isLoading: isLoading,
|
|
51
|
+
onLoadMore: onLoadMore,
|
|
52
|
+
scrollOffset: 1
|
|
53
|
+
}, ref);
|
|
54
|
+
let onVisibleRectChange = (0, $knrtk$react.useCallback)((rect)=>{
|
|
55
|
+
state.setVisibleRect(rect);
|
|
56
|
+
}, [
|
|
57
|
+
state
|
|
58
|
+
]);
|
|
51
59
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($knrtk$react))).createElement((0, $00ca8c0b29e3e07c$exports.ScrollView), {
|
|
52
|
-
...(0, $knrtk$reactariautils.mergeProps)(otherProps,
|
|
60
|
+
...(0, $knrtk$reactariautils.mergeProps)(otherProps, {
|
|
61
|
+
onVisibleRectChange: onVisibleRectChange
|
|
62
|
+
}),
|
|
53
63
|
ref: ref,
|
|
54
64
|
contentSize: state.contentSize,
|
|
55
65
|
onScrollStart: state.startScrolling,
|
|
@@ -58,55 +68,6 @@ function $e1fb6f3669e1c329$var$Virtualizer(props, ref) {
|
|
|
58
68
|
scrollDirection: scrollDirection
|
|
59
69
|
}, $e1fb6f3669e1c329$var$renderChildren(null, state.visibleViews, renderWrapper || $e1fb6f3669e1c329$var$defaultRenderWrapper));
|
|
60
70
|
}
|
|
61
|
-
function $e1fb6f3669e1c329$export$dd6d526d88b5a137(props, state, ref) {
|
|
62
|
-
let { isLoading: isLoading, onLoadMore: onLoadMore } = props;
|
|
63
|
-
let { setVisibleRect: setVisibleRect, virtualizer: virtualizer } = state;
|
|
64
|
-
// Handle scrolling, and call onLoadMore when nearing the bottom.
|
|
65
|
-
let isLoadingRef = (0, $knrtk$react.useRef)(isLoading);
|
|
66
|
-
let prevProps = (0, $knrtk$react.useRef)(props);
|
|
67
|
-
let onVisibleRectChange = (0, $knrtk$react.useCallback)((rect)=>{
|
|
68
|
-
setVisibleRect(rect);
|
|
69
|
-
if (!isLoadingRef.current && onLoadMore) {
|
|
70
|
-
let scrollOffset = virtualizer.contentSize.height - rect.height * 2;
|
|
71
|
-
if (rect.y > scrollOffset) {
|
|
72
|
-
isLoadingRef.current = true;
|
|
73
|
-
onLoadMore();
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}, [
|
|
77
|
-
onLoadMore,
|
|
78
|
-
setVisibleRect,
|
|
79
|
-
virtualizer
|
|
80
|
-
]);
|
|
81
|
-
let lastContentSize = (0, $knrtk$react.useRef)(0);
|
|
82
|
-
(0, $knrtk$reactariautils.useLayoutEffect)(()=>{
|
|
83
|
-
// Only update isLoadingRef if props object actually changed,
|
|
84
|
-
// not if a local state change occurred.
|
|
85
|
-
let wasLoading = isLoadingRef.current;
|
|
86
|
-
if (props !== prevProps.current) {
|
|
87
|
-
isLoadingRef.current = isLoading;
|
|
88
|
-
prevProps.current = props;
|
|
89
|
-
}
|
|
90
|
-
let shouldLoadMore = !isLoadingRef.current && onLoadMore && state.contentSize.height > 0 && state.contentSize.height <= state.virtualizer.visibleRect.height && (wasLoading || state.contentSize.height !== lastContentSize.current);
|
|
91
|
-
if (shouldLoadMore) {
|
|
92
|
-
isLoadingRef.current = true;
|
|
93
|
-
onLoadMore();
|
|
94
|
-
}
|
|
95
|
-
lastContentSize.current = state.contentSize.height;
|
|
96
|
-
}, [
|
|
97
|
-
state.contentSize,
|
|
98
|
-
state.virtualizer,
|
|
99
|
-
isLoading,
|
|
100
|
-
onLoadMore,
|
|
101
|
-
props
|
|
102
|
-
]);
|
|
103
|
-
return {
|
|
104
|
-
virtualizerProps: {},
|
|
105
|
-
scrollViewProps: {
|
|
106
|
-
onVisibleRectChange: onVisibleRectChange
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
71
|
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
111
72
|
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
112
73
|
const $e1fb6f3669e1c329$export$89be5a243e59c4b2 = /*#__PURE__*/ (0, ($parcel$interopDefault($knrtk$react))).forwardRef($e1fb6f3669e1c329$var$Virtualizer);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA6BD,SAAS,kCAAsD,KAAgC,EAAE,GAAqC;IACpI,IAAI,EACF,UAAU,UAAU,iBACpB,aAAa,UACb,MAAM,cACN,UAAU,aACV,SAAS,mBACT,eAAe,aACf,6DAA6D;IAC7D,SAAS,cACT,6DAA6D;IAC7D,UAAU,iBACV,aAAa,iBACb,aAAa,EACb,GAAG,YACJ,GAAG;IAEJ,IAAI,cAAc,CAAA,GAAA,mBAAK,EAAkB;IACzC,MAAM,OAAO;IAEb,IAAI,QAAQ,CAAA,GAAA,kDAAkB,EAAE;gBAC9B;oBACA;oBACA;QACA,qBAAoB,IAAI;YACtB,IAAI,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;YAC/B,IAAI,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;QAChC;uBACA;uBACA;IACF;IAEA,CAAA,GAAA,iCAAU,EAAE;mBAAC;oBAAW;QAAY,cAAc;IAAC,GAAG;IACtD,IAAI,sBAAsB,CAAA,GAAA,wBAAU,EAAE,CAAC;QACrC,MAAM,cAAc,CAAC;IACvB,GAAG;QAAC;KAAM;IAEV,qBACE,0DAAC,CAAA,GAAA,oCAAS;QACP,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY;iCAAC;QAAmB,EAAE;QACjD,KAAK;QACL,aAAa,MAAM,WAAW;QAC9B,eAAe,MAAM,cAAc;QACnC,aAAa,MAAM,YAAY;QAC/B,WAAW;QACX,iBAAiB;OAChB,qCAAe,MAAM,MAAM,YAAY,EAAE,iBAAiB;AAGjE;AAEA,wFAAwF;AACxF,2GAA2G;AAC3G,MAAM,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC;AAGtC,SAAS,qCAAoC,MAAiC,EAAE,KAA2B,EAAE,aAAkC;IAC7I,OAAO,MAAM,GAAG,CAAC,CAAA;QACf,OAAO,cACL,QACA,MACA,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,QAAQ,IAAI,EAAE,EAC9C,CAAA,aAAc,qCAAe,MAAM,YAAY;IAEnD;AACF;AAEA,SAAS,2CACP,MAAiC,EACjC,YAAgC;IAEhC,qBACE,0DAAC,CAAA,GAAA,yCAAc;QACb,KAAK,aAAa,GAAG;QACrB,YAAY,aAAa,UAAU;QACnC,aAAa,aAAa,WAAW;QACrC,MAAM,EAAE,mBAAA,6BAAA,OAAQ,UAAU;OACzB,aAAa,QAAQ;AAG5B","sources":["packages/@react-aria/virtualizer/src/Virtualizer.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, Key, RefObject} from '@react-types/shared';\nimport {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';\nimport {mergeProps, useLoadMore} from '@react-aria/utils';\nimport React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useRef} from 'react';\nimport {ScrollView} from './ScrollView';\nimport {VirtualizerItem} from './VirtualizerItem';\n\ntype RenderWrapper<T extends object, V> = (\n parent: ReusableView<T, V> | null,\n reusableView: ReusableView<T, V>,\n children: ReusableView<T, V>[],\n renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]\n) => ReactElement;\n\ninterface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n children: (type: string, content: T) => V,\n renderWrapper?: RenderWrapper<T, V>,\n layout: Layout<T, O>,\n collection: Collection<T>,\n persistedKeys?: Set<Key> | null,\n sizeToFit?: 'width' | 'height',\n scrollDirection?: 'horizontal' | 'vertical' | 'both',\n isLoading?: boolean,\n onLoadMore?: () => void,\n layoutOptions?: O\n}\n\nfunction Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement | null>) {\n let {\n children: renderView,\n renderWrapper,\n layout,\n collection,\n sizeToFit,\n scrollDirection,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isLoading,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onLoadMore,\n persistedKeys,\n layoutOptions,\n ...otherProps\n } = props;\n\n let fallbackRef = useRef<HTMLDivElement>(undefined);\n ref = ref || fallbackRef;\n\n let state = useVirtualizerState({\n layout,\n collection,\n renderView,\n onVisibleRectChange(rect) {\n ref.current.scrollLeft = rect.x;\n ref.current.scrollTop = rect.y;\n },\n persistedKeys,\n layoutOptions\n });\n\n useLoadMore({isLoading, onLoadMore, scrollOffset: 1}, ref);\n let onVisibleRectChange = useCallback((rect: Rect) => {\n state.setVisibleRect(rect);\n }, [state]);\n\n return (\n <ScrollView\n {...mergeProps(otherProps, {onVisibleRectChange})}\n ref={ref}\n contentSize={state.contentSize}\n onScrollStart={state.startScrolling}\n onScrollEnd={state.endScrolling}\n sizeToFit={sizeToFit}\n scrollDirection={scrollDirection}>\n {renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)}\n </ScrollView>\n );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\nexport {_Virtualizer as Virtualizer};\n\nfunction renderChildren<T extends object, V>(parent: ReusableView<T, V> | null, views: ReusableView<T, V>[], renderWrapper: RenderWrapper<T, V>) {\n return views.map(view => {\n return renderWrapper(\n parent,\n view,\n view.children ? Array.from(view.children) : [],\n childViews => renderChildren(view, childViews, renderWrapper)\n );\n });\n}\n\nfunction defaultRenderWrapper<T extends object, V extends ReactNode>(\n parent: ReusableView<T, V> | null,\n reusableView: ReusableView<T, V>\n) {\n return (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n );\n}\n"],"names":[],"version":3,"file":"Virtualizer.main.js.map"}
|
package/dist/Virtualizer.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea} from "./ScrollView.mjs";
|
|
2
2
|
import {VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.mjs";
|
|
3
3
|
import {useVirtualizerState as $9WwqA$useVirtualizerState} from "@react-stately/virtualizer";
|
|
4
|
-
import {
|
|
4
|
+
import {useLoadMore as $9WwqA$useLoadMore, mergeProps as $9WwqA$mergeProps} from "@react-aria/utils";
|
|
5
5
|
import $9WwqA$react, {useRef as $9WwqA$useRef, useCallback as $9WwqA$useCallback} from "react";
|
|
6
6
|
|
|
7
7
|
/*
|
|
@@ -36,9 +36,20 @@ function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
|
36
36
|
persistedKeys: persistedKeys,
|
|
37
37
|
layoutOptions: layoutOptions
|
|
38
38
|
});
|
|
39
|
-
|
|
39
|
+
(0, $9WwqA$useLoadMore)({
|
|
40
|
+
isLoading: isLoading,
|
|
41
|
+
onLoadMore: onLoadMore,
|
|
42
|
+
scrollOffset: 1
|
|
43
|
+
}, ref);
|
|
44
|
+
let onVisibleRectChange = (0, $9WwqA$useCallback)((rect)=>{
|
|
45
|
+
state.setVisibleRect(rect);
|
|
46
|
+
}, [
|
|
47
|
+
state
|
|
48
|
+
]);
|
|
40
49
|
return /*#__PURE__*/ (0, $9WwqA$react).createElement((0, $44a6ee657928b002$export$5665e3d6be6adea), {
|
|
41
|
-
...(0, $9WwqA$mergeProps)(otherProps,
|
|
50
|
+
...(0, $9WwqA$mergeProps)(otherProps, {
|
|
51
|
+
onVisibleRectChange: onVisibleRectChange
|
|
52
|
+
}),
|
|
42
53
|
ref: ref,
|
|
43
54
|
contentSize: state.contentSize,
|
|
44
55
|
onScrollStart: state.startScrolling,
|
|
@@ -47,55 +58,6 @@ function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
|
47
58
|
scrollDirection: scrollDirection
|
|
48
59
|
}, $6d0a5c394373ae64$var$renderChildren(null, state.visibleViews, renderWrapper || $6d0a5c394373ae64$var$defaultRenderWrapper));
|
|
49
60
|
}
|
|
50
|
-
function $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref) {
|
|
51
|
-
let { isLoading: isLoading, onLoadMore: onLoadMore } = props;
|
|
52
|
-
let { setVisibleRect: setVisibleRect, virtualizer: virtualizer } = state;
|
|
53
|
-
// Handle scrolling, and call onLoadMore when nearing the bottom.
|
|
54
|
-
let isLoadingRef = (0, $9WwqA$useRef)(isLoading);
|
|
55
|
-
let prevProps = (0, $9WwqA$useRef)(props);
|
|
56
|
-
let onVisibleRectChange = (0, $9WwqA$useCallback)((rect)=>{
|
|
57
|
-
setVisibleRect(rect);
|
|
58
|
-
if (!isLoadingRef.current && onLoadMore) {
|
|
59
|
-
let scrollOffset = virtualizer.contentSize.height - rect.height * 2;
|
|
60
|
-
if (rect.y > scrollOffset) {
|
|
61
|
-
isLoadingRef.current = true;
|
|
62
|
-
onLoadMore();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}, [
|
|
66
|
-
onLoadMore,
|
|
67
|
-
setVisibleRect,
|
|
68
|
-
virtualizer
|
|
69
|
-
]);
|
|
70
|
-
let lastContentSize = (0, $9WwqA$useRef)(0);
|
|
71
|
-
(0, $9WwqA$useLayoutEffect)(()=>{
|
|
72
|
-
// Only update isLoadingRef if props object actually changed,
|
|
73
|
-
// not if a local state change occurred.
|
|
74
|
-
let wasLoading = isLoadingRef.current;
|
|
75
|
-
if (props !== prevProps.current) {
|
|
76
|
-
isLoadingRef.current = isLoading;
|
|
77
|
-
prevProps.current = props;
|
|
78
|
-
}
|
|
79
|
-
let shouldLoadMore = !isLoadingRef.current && onLoadMore && state.contentSize.height > 0 && state.contentSize.height <= state.virtualizer.visibleRect.height && (wasLoading || state.contentSize.height !== lastContentSize.current);
|
|
80
|
-
if (shouldLoadMore) {
|
|
81
|
-
isLoadingRef.current = true;
|
|
82
|
-
onLoadMore();
|
|
83
|
-
}
|
|
84
|
-
lastContentSize.current = state.contentSize.height;
|
|
85
|
-
}, [
|
|
86
|
-
state.contentSize,
|
|
87
|
-
state.virtualizer,
|
|
88
|
-
isLoading,
|
|
89
|
-
onLoadMore,
|
|
90
|
-
props
|
|
91
|
-
]);
|
|
92
|
-
return {
|
|
93
|
-
virtualizerProps: {},
|
|
94
|
-
scrollViewProps: {
|
|
95
|
-
onVisibleRectChange: onVisibleRectChange
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
61
|
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
100
62
|
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
101
63
|
const $6d0a5c394373ae64$export$89be5a243e59c4b2 = /*#__PURE__*/ (0, $9WwqA$react).forwardRef($6d0a5c394373ae64$var$Virtualizer);
|
|
@@ -114,5 +76,5 @@ function $6d0a5c394373ae64$var$defaultRenderWrapper(parent, reusableView) {
|
|
|
114
76
|
}
|
|
115
77
|
|
|
116
78
|
|
|
117
|
-
export {$6d0a5c394373ae64$export$
|
|
79
|
+
export {$6d0a5c394373ae64$export$89be5a243e59c4b2 as Virtualizer};
|
|
118
80
|
//# sourceMappingURL=Virtualizer.module.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea} from "./ScrollView.module.js";
|
|
2
2
|
import {VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.module.js";
|
|
3
3
|
import {useVirtualizerState as $9WwqA$useVirtualizerState} from "@react-stately/virtualizer";
|
|
4
|
-
import {
|
|
4
|
+
import {useLoadMore as $9WwqA$useLoadMore, mergeProps as $9WwqA$mergeProps} from "@react-aria/utils";
|
|
5
5
|
import $9WwqA$react, {useRef as $9WwqA$useRef, useCallback as $9WwqA$useCallback} from "react";
|
|
6
6
|
|
|
7
7
|
/*
|
|
@@ -36,9 +36,20 @@ function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
|
36
36
|
persistedKeys: persistedKeys,
|
|
37
37
|
layoutOptions: layoutOptions
|
|
38
38
|
});
|
|
39
|
-
|
|
39
|
+
(0, $9WwqA$useLoadMore)({
|
|
40
|
+
isLoading: isLoading,
|
|
41
|
+
onLoadMore: onLoadMore,
|
|
42
|
+
scrollOffset: 1
|
|
43
|
+
}, ref);
|
|
44
|
+
let onVisibleRectChange = (0, $9WwqA$useCallback)((rect)=>{
|
|
45
|
+
state.setVisibleRect(rect);
|
|
46
|
+
}, [
|
|
47
|
+
state
|
|
48
|
+
]);
|
|
40
49
|
return /*#__PURE__*/ (0, $9WwqA$react).createElement((0, $44a6ee657928b002$export$5665e3d6be6adea), {
|
|
41
|
-
...(0, $9WwqA$mergeProps)(otherProps,
|
|
50
|
+
...(0, $9WwqA$mergeProps)(otherProps, {
|
|
51
|
+
onVisibleRectChange: onVisibleRectChange
|
|
52
|
+
}),
|
|
42
53
|
ref: ref,
|
|
43
54
|
contentSize: state.contentSize,
|
|
44
55
|
onScrollStart: state.startScrolling,
|
|
@@ -47,55 +58,6 @@ function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
|
47
58
|
scrollDirection: scrollDirection
|
|
48
59
|
}, $6d0a5c394373ae64$var$renderChildren(null, state.visibleViews, renderWrapper || $6d0a5c394373ae64$var$defaultRenderWrapper));
|
|
49
60
|
}
|
|
50
|
-
function $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref) {
|
|
51
|
-
let { isLoading: isLoading, onLoadMore: onLoadMore } = props;
|
|
52
|
-
let { setVisibleRect: setVisibleRect, virtualizer: virtualizer } = state;
|
|
53
|
-
// Handle scrolling, and call onLoadMore when nearing the bottom.
|
|
54
|
-
let isLoadingRef = (0, $9WwqA$useRef)(isLoading);
|
|
55
|
-
let prevProps = (0, $9WwqA$useRef)(props);
|
|
56
|
-
let onVisibleRectChange = (0, $9WwqA$useCallback)((rect)=>{
|
|
57
|
-
setVisibleRect(rect);
|
|
58
|
-
if (!isLoadingRef.current && onLoadMore) {
|
|
59
|
-
let scrollOffset = virtualizer.contentSize.height - rect.height * 2;
|
|
60
|
-
if (rect.y > scrollOffset) {
|
|
61
|
-
isLoadingRef.current = true;
|
|
62
|
-
onLoadMore();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}, [
|
|
66
|
-
onLoadMore,
|
|
67
|
-
setVisibleRect,
|
|
68
|
-
virtualizer
|
|
69
|
-
]);
|
|
70
|
-
let lastContentSize = (0, $9WwqA$useRef)(0);
|
|
71
|
-
(0, $9WwqA$useLayoutEffect)(()=>{
|
|
72
|
-
// Only update isLoadingRef if props object actually changed,
|
|
73
|
-
// not if a local state change occurred.
|
|
74
|
-
let wasLoading = isLoadingRef.current;
|
|
75
|
-
if (props !== prevProps.current) {
|
|
76
|
-
isLoadingRef.current = isLoading;
|
|
77
|
-
prevProps.current = props;
|
|
78
|
-
}
|
|
79
|
-
let shouldLoadMore = !isLoadingRef.current && onLoadMore && state.contentSize.height > 0 && state.contentSize.height <= state.virtualizer.visibleRect.height && (wasLoading || state.contentSize.height !== lastContentSize.current);
|
|
80
|
-
if (shouldLoadMore) {
|
|
81
|
-
isLoadingRef.current = true;
|
|
82
|
-
onLoadMore();
|
|
83
|
-
}
|
|
84
|
-
lastContentSize.current = state.contentSize.height;
|
|
85
|
-
}, [
|
|
86
|
-
state.contentSize,
|
|
87
|
-
state.virtualizer,
|
|
88
|
-
isLoading,
|
|
89
|
-
onLoadMore,
|
|
90
|
-
props
|
|
91
|
-
]);
|
|
92
|
-
return {
|
|
93
|
-
virtualizerProps: {},
|
|
94
|
-
scrollViewProps: {
|
|
95
|
-
onVisibleRectChange: onVisibleRectChange
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
61
|
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
100
62
|
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
101
63
|
const $6d0a5c394373ae64$export$89be5a243e59c4b2 = /*#__PURE__*/ (0, $9WwqA$react).forwardRef($6d0a5c394373ae64$var$Virtualizer);
|
|
@@ -114,5 +76,5 @@ function $6d0a5c394373ae64$var$defaultRenderWrapper(parent, reusableView) {
|
|
|
114
76
|
}
|
|
115
77
|
|
|
116
78
|
|
|
117
|
-
export {$6d0a5c394373ae64$export$
|
|
79
|
+
export {$6d0a5c394373ae64$export$89be5a243e59c4b2 as Virtualizer};
|
|
118
80
|
//# sourceMappingURL=Virtualizer.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA6BD,SAAS,kCAAsD,KAAgC,EAAE,GAAqC;IACpI,IAAI,EACF,UAAU,UAAU,iBACpB,aAAa,UACb,MAAM,cACN,UAAU,aACV,SAAS,mBACT,eAAe,aACf,6DAA6D;IAC7D,SAAS,cACT,6DAA6D;IAC7D,UAAU,iBACV,aAAa,iBACb,aAAa,EACb,GAAG,YACJ,GAAG;IAEJ,IAAI,cAAc,CAAA,GAAA,aAAK,EAAkB;IACzC,MAAM,OAAO;IAEb,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;gBAC9B;oBACA;oBACA;QACA,qBAAoB,IAAI;YACtB,IAAI,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;YAC/B,IAAI,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;QAChC;uBACA;uBACA;IACF;IAEA,
|
|
1
|
+
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA6BD,SAAS,kCAAsD,KAAgC,EAAE,GAAqC;IACpI,IAAI,EACF,UAAU,UAAU,iBACpB,aAAa,UACb,MAAM,cACN,UAAU,aACV,SAAS,mBACT,eAAe,aACf,6DAA6D;IAC7D,SAAS,cACT,6DAA6D;IAC7D,UAAU,iBACV,aAAa,iBACb,aAAa,EACb,GAAG,YACJ,GAAG;IAEJ,IAAI,cAAc,CAAA,GAAA,aAAK,EAAkB;IACzC,MAAM,OAAO;IAEb,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;gBAC9B;oBACA;oBACA;QACA,qBAAoB,IAAI;YACtB,IAAI,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;YAC/B,IAAI,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;QAChC;uBACA;uBACA;IACF;IAEA,CAAA,GAAA,kBAAU,EAAE;mBAAC;oBAAW;QAAY,cAAc;IAAC,GAAG;IACtD,IAAI,sBAAsB,CAAA,GAAA,kBAAU,EAAE,CAAC;QACrC,MAAM,cAAc,CAAC;IACvB,GAAG;QAAC;KAAM;IAEV,qBACE,gCAAC,CAAA,GAAA,wCAAS;QACP,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY;iCAAC;QAAmB,EAAE;QACjD,KAAK;QACL,aAAa,MAAM,WAAW;QAC9B,eAAe,MAAM,cAAc;QACnC,aAAa,MAAM,YAAY;QAC/B,WAAW;QACX,iBAAiB;OAChB,qCAAe,MAAM,MAAM,YAAY,EAAE,iBAAiB;AAGjE;AAEA,wFAAwF;AACxF,2GAA2G;AAC3G,MAAM,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC;AAGtC,SAAS,qCAAoC,MAAiC,EAAE,KAA2B,EAAE,aAAkC;IAC7I,OAAO,MAAM,GAAG,CAAC,CAAA;QACf,OAAO,cACL,QACA,MACA,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,QAAQ,IAAI,EAAE,EAC9C,CAAA,aAAc,qCAAe,MAAM,YAAY;IAEnD;AACF;AAEA,SAAS,2CACP,MAAiC,EACjC,YAAgC;IAEhC,qBACE,gCAAC,CAAA,GAAA,yCAAc;QACb,KAAK,aAAa,GAAG;QACrB,YAAY,aAAa,UAAU;QACnC,aAAa,aAAa,WAAW;QACrC,MAAM,EAAE,mBAAA,6BAAA,OAAQ,UAAU;OACzB,aAAa,QAAQ;AAG5B","sources":["packages/@react-aria/virtualizer/src/Virtualizer.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, Key, RefObject} from '@react-types/shared';\nimport {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';\nimport {mergeProps, useLoadMore} from '@react-aria/utils';\nimport React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useRef} from 'react';\nimport {ScrollView} from './ScrollView';\nimport {VirtualizerItem} from './VirtualizerItem';\n\ntype RenderWrapper<T extends object, V> = (\n parent: ReusableView<T, V> | null,\n reusableView: ReusableView<T, V>,\n children: ReusableView<T, V>[],\n renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]\n) => ReactElement;\n\ninterface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n children: (type: string, content: T) => V,\n renderWrapper?: RenderWrapper<T, V>,\n layout: Layout<T, O>,\n collection: Collection<T>,\n persistedKeys?: Set<Key> | null,\n sizeToFit?: 'width' | 'height',\n scrollDirection?: 'horizontal' | 'vertical' | 'both',\n isLoading?: boolean,\n onLoadMore?: () => void,\n layoutOptions?: O\n}\n\nfunction Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement | null>) {\n let {\n children: renderView,\n renderWrapper,\n layout,\n collection,\n sizeToFit,\n scrollDirection,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isLoading,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onLoadMore,\n persistedKeys,\n layoutOptions,\n ...otherProps\n } = props;\n\n let fallbackRef = useRef<HTMLDivElement>(undefined);\n ref = ref || fallbackRef;\n\n let state = useVirtualizerState({\n layout,\n collection,\n renderView,\n onVisibleRectChange(rect) {\n ref.current.scrollLeft = rect.x;\n ref.current.scrollTop = rect.y;\n },\n persistedKeys,\n layoutOptions\n });\n\n useLoadMore({isLoading, onLoadMore, scrollOffset: 1}, ref);\n let onVisibleRectChange = useCallback((rect: Rect) => {\n state.setVisibleRect(rect);\n }, [state]);\n\n return (\n <ScrollView\n {...mergeProps(otherProps, {onVisibleRectChange})}\n ref={ref}\n contentSize={state.contentSize}\n onScrollStart={state.startScrolling}\n onScrollEnd={state.endScrolling}\n sizeToFit={sizeToFit}\n scrollDirection={scrollDirection}>\n {renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)}\n </ScrollView>\n );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\nexport {_Virtualizer as Virtualizer};\n\nfunction renderChildren<T extends object, V>(parent: ReusableView<T, V> | null, views: ReusableView<T, V>[], renderWrapper: RenderWrapper<T, V>) {\n return views.map(view => {\n return renderWrapper(\n parent,\n view,\n view.children ? Array.from(view.children) : [],\n childViews => renderChildren(view, childViews, renderWrapper)\n );\n });\n}\n\nfunction defaultRenderWrapper<T extends object, V extends ReactNode>(\n parent: ReusableView<T, V> | null,\n reusableView: ReusableView<T, V>\n) {\n return (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n );\n}\n"],"names":[],"version":3,"file":"Virtualizer.module.js.map"}
|
package/dist/import.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Virtualizer as $6d0a5c394373ae64$export$89be5a243e59c4b2} from "./Virtualizer.mjs";
|
|
2
2
|
import {useVirtualizerItem as $47736c1e63ba1c6d$export$1da781778207e0a2} from "./useVirtualizerItem.mjs";
|
|
3
3
|
import {layoutInfoToStyle as $ccf8a0a04e4175ae$export$1481e64fbe01b8b3, VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.mjs";
|
|
4
4
|
import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea, useScrollView as $44a6ee657928b002$export$2ea0c4974da4731b} from "./ScrollView.mjs";
|
|
@@ -21,5 +21,5 @@ import {getRTLOffsetType as $ce415dc67314b753$export$faf7630257ad4304, getScroll
|
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
export {$6d0a5c394373ae64$export$
|
|
24
|
+
export {$6d0a5c394373ae64$export$89be5a243e59c4b2 as Virtualizer, $47736c1e63ba1c6d$export$1da781778207e0a2 as useVirtualizerItem, $ccf8a0a04e4175ae$export$6796df8ba7398521 as VirtualizerItem, $ccf8a0a04e4175ae$export$1481e64fbe01b8b3 as layoutInfoToStyle, $44a6ee657928b002$export$5665e3d6be6adea as ScrollView, $44a6ee657928b002$export$2ea0c4974da4731b as useScrollView, $ce415dc67314b753$export$faf7630257ad4304 as getRTLOffsetType, $ce415dc67314b753$export$1389d168952b34b5 as getScrollLeft, $ce415dc67314b753$export$ed5fd5ffe5ab0ac as setScrollLeft};
|
|
25
25
|
//# sourceMappingURL=module.js.map
|
package/dist/main.js
CHANGED
|
@@ -9,7 +9,6 @@ function $parcel$export(e, n, v, s) {
|
|
|
9
9
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
$parcel$export(module.exports, "useVirtualizer", () => $e1fb6f3669e1c329$exports.useVirtualizer);
|
|
13
12
|
$parcel$export(module.exports, "Virtualizer", () => $e1fb6f3669e1c329$exports.Virtualizer);
|
|
14
13
|
$parcel$export(module.exports, "useVirtualizerItem", () => $7d70e069fceb2deb$exports.useVirtualizerItem);
|
|
15
14
|
$parcel$export(module.exports, "VirtualizerItem", () => $d6a26279cc31826b$exports.VirtualizerItem);
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/virtualizer/src/index.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {RTLOffsetType} from './utils';\nexport type {VirtualizerItemOptions} from './useVirtualizerItem';\nexport {Virtualizer} from './Virtualizer';\nexport {useVirtualizerItem} from './useVirtualizerItem';\nexport {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';\nexport {ScrollView, useScrollView} from './ScrollView';\nexport {getRTLOffsetType, getScrollLeft, setScrollLeft} from './utils';\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Virtualizer as $6d0a5c394373ae64$export$89be5a243e59c4b2} from "./Virtualizer.module.js";
|
|
2
2
|
import {useVirtualizerItem as $47736c1e63ba1c6d$export$1da781778207e0a2} from "./useVirtualizerItem.module.js";
|
|
3
3
|
import {layoutInfoToStyle as $ccf8a0a04e4175ae$export$1481e64fbe01b8b3, VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.module.js";
|
|
4
4
|
import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea, useScrollView as $44a6ee657928b002$export$2ea0c4974da4731b} from "./ScrollView.module.js";
|
|
@@ -21,5 +21,5 @@ import {getRTLOffsetType as $ce415dc67314b753$export$faf7630257ad4304, getScroll
|
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
export {$6d0a5c394373ae64$export$
|
|
24
|
+
export {$6d0a5c394373ae64$export$89be5a243e59c4b2 as Virtualizer, $47736c1e63ba1c6d$export$1da781778207e0a2 as useVirtualizerItem, $ccf8a0a04e4175ae$export$6796df8ba7398521 as VirtualizerItem, $ccf8a0a04e4175ae$export$1481e64fbe01b8b3 as layoutInfoToStyle, $44a6ee657928b002$export$5665e3d6be6adea as ScrollView, $44a6ee657928b002$export$2ea0c4974da4731b as useScrollView, $ce415dc67314b753$export$faf7630257ad4304 as getRTLOffsetType, $ce415dc67314b753$export$1389d168952b34b5 as getScrollLeft, $ce415dc67314b753$export$ed5fd5ffe5ab0ac as setScrollLeft};
|
|
25
25
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/virtualizer/src/index.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {RTLOffsetType} from './utils';\nexport type {VirtualizerItemOptions} from './useVirtualizerItem';\nexport {
|
|
1
|
+
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/virtualizer/src/index.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {RTLOffsetType} from './utils';\nexport type {VirtualizerItemOptions} from './useVirtualizerItem';\nexport {Virtualizer} from './Virtualizer';\nexport {useVirtualizerItem} from './useVirtualizerItem';\nexport {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';\nexport {ScrollView, useScrollView} from './ScrollView';\nexport {getRTLOffsetType, getScrollLeft, setScrollLeft} from './utils';\n"],"names":[],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Direction, Key, RefObject, Collection } from "@react-types/shared";
|
|
2
|
-
import { LayoutInfo, Size, Rect, Layout, ReusableView
|
|
2
|
+
import { LayoutInfo, Size, Rect, Layout, ReusableView } from "@react-stately/virtualizer";
|
|
3
3
|
import React, { CSSProperties, HTMLAttributes, ReactNode, RefObject as _RefObject1, ReactElement } from "react";
|
|
4
4
|
export type RTLOffsetType = 'negative' | 'positive-descending' | 'positive-ascending';
|
|
5
5
|
export function getRTLOffsetType(recalculate?: boolean): RTLOffsetType;
|
|
@@ -332,18 +332,6 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
|
|
|
332
332
|
onLoadMore?: () => void;
|
|
333
333
|
layoutOptions?: O;
|
|
334
334
|
}
|
|
335
|
-
interface VirtualizerOptions {
|
|
336
|
-
tabIndex?: number;
|
|
337
|
-
focusedKey?: Key;
|
|
338
|
-
isLoading?: boolean;
|
|
339
|
-
onLoadMore?: () => void;
|
|
340
|
-
}
|
|
341
|
-
export function useVirtualizer<T extends object, V extends ReactNode, W>(props: VirtualizerOptions, state: VirtualizerState<T, V>, ref: RefObject<HTMLElement | null>): {
|
|
342
|
-
virtualizerProps: {};
|
|
343
|
-
scrollViewProps: {
|
|
344
|
-
onVisibleRectChange: (rect: Rect) => void;
|
|
345
|
-
};
|
|
346
|
-
};
|
|
347
335
|
export const Virtualizer: <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {
|
|
348
336
|
ref?: RefObject<HTMLDivElement | null>;
|
|
349
337
|
}) => ReactElement;
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAcA,4BACI,UAAU,GACV,qBAAqB,GACrB,oBAAoB,CAAC;AAezB,iCAAiC,WAAW,GAAE,OAAe,GAAG,aAAa,CAmC5E;AAED,8BAA8B,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,CAkBzE;AAED,8BAA8B,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAiBpF;ACzFD;IACE,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;CAC3C;AAED;IACE,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,YAAY,CAAC;IAC1B,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,CAAA;CACnC;AAED,mCAAmC,OAAO,EAAE,sBAAsB;;EAiBjE;ACdD,yBAA0B,SAAQ,eAAe,WAAW,CAAC;IAC3D,WAAW,EAAE,IAAI,CAAC;IAClB,mBAAmB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAA;CACrD;AAeD,OAAA,MAAM,kGAAmD,CAAC;AAG1D,8BAA8B,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,YAAU,WAAW,GAAG,IAAI,CAAC;;;mBAxB3E,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/utils.ts","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/ScrollView.tsx","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/Virtualizer.tsx","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/index.ts","packages/@react-aria/virtualizer/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {RTLOffsetType} from './utils';\nexport type {VirtualizerItemOptions} from './useVirtualizerItem';\nexport {Virtualizer} from './Virtualizer';\nexport {useVirtualizerItem} from './useVirtualizerItem';\nexport {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';\nexport {ScrollView, useScrollView} from './ScrollView';\nexport {getRTLOffsetType, getScrollLeft, setScrollLeft} from './utils';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/virtualizer",
|
|
3
|
-
"version": "3.10.2-nightly.
|
|
3
|
+
"version": "3.10.2-nightly.4718+4b27a0c02",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
26
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
27
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
28
|
-
"@react-stately/virtualizer": "3.7.2-nightly.
|
|
29
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/i18n": "3.0.0-nightly.3006+4b27a0c02",
|
|
26
|
+
"@react-aria/interactions": "3.0.0-nightly.3006+4b27a0c02",
|
|
27
|
+
"@react-aria/utils": "3.0.0-nightly.3006+4b27a0c02",
|
|
28
|
+
"@react-stately/virtualizer": "3.7.2-nightly.4718+4b27a0c02",
|
|
29
|
+
"@react-types/shared": "3.0.0-nightly.3006+4b27a0c02",
|
|
30
30
|
"@swc/helpers": "^0.5.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "4b27a0c027f4fbab9ed1070c748966c902b13429"
|
|
40
40
|
}
|
package/src/ScrollView.tsx
CHANGED
|
@@ -102,6 +102,8 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
|
|
|
102
102
|
state.isScrolling = true;
|
|
103
103
|
setScrolling(true);
|
|
104
104
|
|
|
105
|
+
// Pause typekit MutationObserver during scrolling.
|
|
106
|
+
window.dispatchEvent(new Event('tk.disconnect-observer'));
|
|
105
107
|
if (onScrollStart) {
|
|
106
108
|
onScrollStart();
|
|
107
109
|
}
|
|
@@ -120,6 +122,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
|
|
|
120
122
|
setScrolling(false);
|
|
121
123
|
state.scrollTimeout = null;
|
|
122
124
|
|
|
125
|
+
window.dispatchEvent(new Event('tk.connect-observer'));
|
|
123
126
|
if (onScrollEnd) {
|
|
124
127
|
onScrollEnd();
|
|
125
128
|
}
|
|
@@ -135,6 +138,9 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
|
|
|
135
138
|
useEffect(() => {
|
|
136
139
|
return () => {
|
|
137
140
|
clearTimeout(state.scrollTimeout);
|
|
141
|
+
if (state.isScrolling) {
|
|
142
|
+
window.dispatchEvent(new Event('tk.connect-observer'));
|
|
143
|
+
}
|
|
138
144
|
};
|
|
139
145
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
140
146
|
}, []);
|
package/src/Virtualizer.tsx
CHANGED
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {Collection, Key, RefObject} from '@react-types/shared';
|
|
14
|
-
import {Layout, Rect, ReusableView, useVirtualizerState
|
|
15
|
-
import {mergeProps,
|
|
14
|
+
import {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';
|
|
15
|
+
import {mergeProps, useLoadMore} from '@react-aria/utils';
|
|
16
16
|
import React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useRef} from 'react';
|
|
17
17
|
import {ScrollView} from './ScrollView';
|
|
18
18
|
import {VirtualizerItem} from './VirtualizerItem';
|
|
@@ -69,11 +69,14 @@ function Virtualizer<T extends object, V extends ReactNode, O>(props: Virtualize
|
|
|
69
69
|
layoutOptions
|
|
70
70
|
});
|
|
71
71
|
|
|
72
|
-
|
|
72
|
+
useLoadMore({isLoading, onLoadMore, scrollOffset: 1}, ref);
|
|
73
|
+
let onVisibleRectChange = useCallback((rect: Rect) => {
|
|
74
|
+
state.setVisibleRect(rect);
|
|
75
|
+
}, [state]);
|
|
73
76
|
|
|
74
77
|
return (
|
|
75
78
|
<ScrollView
|
|
76
|
-
{...mergeProps(otherProps,
|
|
79
|
+
{...mergeProps(otherProps, {onVisibleRectChange})}
|
|
77
80
|
ref={ref}
|
|
78
81
|
contentSize={state.contentSize}
|
|
79
82
|
onScrollStart={state.startScrolling}
|
|
@@ -85,66 +88,6 @@ function Virtualizer<T extends object, V extends ReactNode, O>(props: Virtualize
|
|
|
85
88
|
);
|
|
86
89
|
}
|
|
87
90
|
|
|
88
|
-
interface VirtualizerOptions {
|
|
89
|
-
tabIndex?: number,
|
|
90
|
-
focusedKey?: Key,
|
|
91
|
-
isLoading?: boolean,
|
|
92
|
-
onLoadMore?: () => void
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
96
|
-
export function useVirtualizer<T extends object, V extends ReactNode, W>(props: VirtualizerOptions, state: VirtualizerState<T, V>, ref: RefObject<HTMLElement | null>) {
|
|
97
|
-
let {isLoading, onLoadMore} = props;
|
|
98
|
-
let {setVisibleRect, virtualizer} = state;
|
|
99
|
-
|
|
100
|
-
// Handle scrolling, and call onLoadMore when nearing the bottom.
|
|
101
|
-
let isLoadingRef = useRef(isLoading);
|
|
102
|
-
let prevProps = useRef(props);
|
|
103
|
-
let onVisibleRectChange = useCallback((rect: Rect) => {
|
|
104
|
-
setVisibleRect(rect);
|
|
105
|
-
|
|
106
|
-
if (!isLoadingRef.current && onLoadMore) {
|
|
107
|
-
let scrollOffset = virtualizer.contentSize.height - rect.height * 2;
|
|
108
|
-
if (rect.y > scrollOffset) {
|
|
109
|
-
isLoadingRef.current = true;
|
|
110
|
-
onLoadMore();
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}, [onLoadMore, setVisibleRect, virtualizer]);
|
|
114
|
-
|
|
115
|
-
let lastContentSize = useRef(0);
|
|
116
|
-
useLayoutEffect(() => {
|
|
117
|
-
// Only update isLoadingRef if props object actually changed,
|
|
118
|
-
// not if a local state change occurred.
|
|
119
|
-
let wasLoading = isLoadingRef.current;
|
|
120
|
-
if (props !== prevProps.current) {
|
|
121
|
-
isLoadingRef.current = isLoading;
|
|
122
|
-
prevProps.current = props;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
let shouldLoadMore = !isLoadingRef.current
|
|
126
|
-
&& onLoadMore
|
|
127
|
-
&& state.contentSize.height > 0
|
|
128
|
-
&& state.contentSize.height <= state.virtualizer.visibleRect.height
|
|
129
|
-
// Only try loading more if the content size changed, or if we just finished
|
|
130
|
-
// loading and still have room for more items.
|
|
131
|
-
&& (wasLoading || state.contentSize.height !== lastContentSize.current);
|
|
132
|
-
|
|
133
|
-
if (shouldLoadMore) {
|
|
134
|
-
isLoadingRef.current = true;
|
|
135
|
-
onLoadMore();
|
|
136
|
-
}
|
|
137
|
-
lastContentSize.current = state.contentSize.height;
|
|
138
|
-
}, [state.contentSize, state.virtualizer, isLoading, onLoadMore, props]);
|
|
139
|
-
|
|
140
|
-
return {
|
|
141
|
-
virtualizerProps: {},
|
|
142
|
-
scrollViewProps: {
|
|
143
|
-
onVisibleRectChange
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
|
|
148
91
|
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
149
92
|
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
150
93
|
const _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
|
package/src/index.ts
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
export type {RTLOffsetType} from './utils';
|
|
14
14
|
export type {VirtualizerItemOptions} from './useVirtualizerItem';
|
|
15
|
-
export {
|
|
15
|
+
export {Virtualizer} from './Virtualizer';
|
|
16
16
|
export {useVirtualizerItem} from './useVirtualizerItem';
|
|
17
17
|
export {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';
|
|
18
18
|
export {ScrollView, useScrollView} from './ScrollView';
|