@react-aria/virtualizer 3.10.2-nightly.4649 → 3.10.2-nightly.4654
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 -2
- package/dist/ScrollView.main.js.map +1 -1
- package/dist/ScrollView.mjs +4 -2
- package/dist/ScrollView.module.js +4 -2
- package/dist/ScrollView.module.js.map +1 -1
- package/dist/Virtualizer.main.js +16 -98
- package/dist/Virtualizer.main.js.map +1 -1
- package/dist/Virtualizer.mjs +17 -99
- package/dist/Virtualizer.module.js +17 -99
- package/dist/Virtualizer.module.js.map +1 -1
- package/dist/VirtualizerItem.main.js +0 -4
- package/dist/VirtualizerItem.main.js.map +1 -1
- package/dist/VirtualizerItem.mjs +0 -4
- package/dist/VirtualizerItem.module.js +0 -4
- package/dist/VirtualizerItem.module.js.map +1 -1
- package/dist/types.d.ts +6 -16
- package/dist/types.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/ScrollView.tsx +2 -2
- package/src/Virtualizer.tsx +18 -109
- package/src/VirtualizerItem.tsx +0 -4
package/dist/ScrollView.main.js
CHANGED
|
@@ -124,7 +124,7 @@ function $00ca8c0b29e3e07c$var$ScrollView(props, ref) {
|
|
|
124
124
|
updateSize
|
|
125
125
|
]);
|
|
126
126
|
let raf = (0, $kvIfm$react.useRef)();
|
|
127
|
-
let onResize = ()=>{
|
|
127
|
+
let onResize = (0, $kvIfm$react.useCallback)(()=>{
|
|
128
128
|
var _raf;
|
|
129
129
|
var _current;
|
|
130
130
|
if ($00ca8c0b29e3e07c$var$isOldReact) (_current = (_raf = raf).current) !== null && _current !== void 0 ? _current : _raf.current = requestAnimationFrame(()=>{
|
|
@@ -132,7 +132,9 @@ function $00ca8c0b29e3e07c$var$ScrollView(props, ref) {
|
|
|
132
132
|
raf.current = null;
|
|
133
133
|
});
|
|
134
134
|
else updateSize();
|
|
135
|
-
}
|
|
135
|
+
}, [
|
|
136
|
+
updateSize
|
|
137
|
+
]);
|
|
136
138
|
(0, $kvIfm$reactariautils.useResizeObserver)({
|
|
137
139
|
ref: ref,
|
|
138
140
|
onResize: onResize
|
|
@@ -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 HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useLayoutEffect, 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\nlet isOldReact = React.version.startsWith('16.') || React.version.startsWith('17.');\n\nfunction ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {\n let {\n contentSize,\n onVisibleRectChange,\n children,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let defaultRef = useRef();\n ref = ref || defaultRef;\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 // 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 = useCallback(() => {\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 w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.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 onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n }\n }, [onVisibleRectChange, ref, state, sizeToFit, contentSize]);\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n let raf = useRef<ReturnType<typeof requestAnimationFrame> | null>();\n let onResize = () => {\n if (isOldReact) {\n raf.current ??= requestAnimationFrame(() => {\n updateSize();\n raf.current = null;\n });\n } else {\n updateSize();\n }\n };\n useResizeObserver({ref, onResize});\n useEffect(() => {\n return () => {\n if (raf.current) {\n cancelAnimationFrame(raf.current);\n }\n };\n }, []);\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 <div role=\"presentation\" {...otherProps} style={style} ref={ref} onScroll={onScroll}>\n <div role=\"presentation\" style={innerStyle}>\n {children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\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 HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useLayoutEffect, 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\nlet isOldReact = React.version.startsWith('16.') || React.version.startsWith('17.');\n\nfunction ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {\n let {\n contentSize,\n onVisibleRectChange,\n children,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let defaultRef = useRef();\n ref = ref || defaultRef;\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 // 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 = useCallback(() => {\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 w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.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 onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n }\n }, [onVisibleRectChange, ref, state, sizeToFit, contentSize]);\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n let raf = useRef<ReturnType<typeof requestAnimationFrame> | null>();\n let onResize = useCallback(() => {\n if (isOldReact) {\n raf.current ??= requestAnimationFrame(() => {\n updateSize();\n raf.current = null;\n });\n } else {\n updateSize();\n }\n }, [updateSize]);\n useResizeObserver({ref, onResize});\n useEffect(() => {\n return () => {\n if (raf.current) {\n cancelAnimationFrame(raf.current);\n }\n };\n }, []);\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 <div role=\"presentation\" {...otherProps} style={style} ref={ref} onScroll={onScroll}>\n <div role=\"presentation\" style={innerStyle}>\n {children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n"],"names":[],"version":3,"file":"ScrollView.main.js.map"}
|
package/dist/ScrollView.mjs
CHANGED
|
@@ -114,7 +114,7 @@ function $44a6ee657928b002$var$ScrollView(props, ref) {
|
|
|
114
114
|
updateSize
|
|
115
115
|
]);
|
|
116
116
|
let raf = (0, $f9kpT$useRef)();
|
|
117
|
-
let onResize = ()=>{
|
|
117
|
+
let onResize = (0, $f9kpT$useCallback)(()=>{
|
|
118
118
|
var _raf;
|
|
119
119
|
var _current;
|
|
120
120
|
if ($44a6ee657928b002$var$isOldReact) (_current = (_raf = raf).current) !== null && _current !== void 0 ? _current : _raf.current = requestAnimationFrame(()=>{
|
|
@@ -122,7 +122,9 @@ function $44a6ee657928b002$var$ScrollView(props, ref) {
|
|
|
122
122
|
raf.current = null;
|
|
123
123
|
});
|
|
124
124
|
else updateSize();
|
|
125
|
-
}
|
|
125
|
+
}, [
|
|
126
|
+
updateSize
|
|
127
|
+
]);
|
|
126
128
|
(0, $f9kpT$useResizeObserver)({
|
|
127
129
|
ref: ref,
|
|
128
130
|
onResize: onResize
|
|
@@ -114,7 +114,7 @@ function $44a6ee657928b002$var$ScrollView(props, ref) {
|
|
|
114
114
|
updateSize
|
|
115
115
|
]);
|
|
116
116
|
let raf = (0, $f9kpT$useRef)();
|
|
117
|
-
let onResize = ()=>{
|
|
117
|
+
let onResize = (0, $f9kpT$useCallback)(()=>{
|
|
118
118
|
var _raf;
|
|
119
119
|
var _current;
|
|
120
120
|
if ($44a6ee657928b002$var$isOldReact) (_current = (_raf = raf).current) !== null && _current !== void 0 ? _current : _raf.current = requestAnimationFrame(()=>{
|
|
@@ -122,7 +122,9 @@ function $44a6ee657928b002$var$ScrollView(props, ref) {
|
|
|
122
122
|
raf.current = null;
|
|
123
123
|
});
|
|
124
124
|
else updateSize();
|
|
125
|
-
}
|
|
125
|
+
}, [
|
|
126
|
+
updateSize
|
|
127
|
+
]);
|
|
126
128
|
(0, $f9kpT$useResizeObserver)({
|
|
127
129
|
ref: ref,
|
|
128
130
|
onResize: onResize
|
|
@@ -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 HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useLayoutEffect, 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\nlet isOldReact = React.version.startsWith('16.') || React.version.startsWith('17.');\n\nfunction ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {\n let {\n contentSize,\n onVisibleRectChange,\n children,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let defaultRef = useRef();\n ref = ref || defaultRef;\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 // 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 = useCallback(() => {\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 w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.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 onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n }\n }, [onVisibleRectChange, ref, state, sizeToFit, contentSize]);\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n let raf = useRef<ReturnType<typeof requestAnimationFrame> | null>();\n let onResize = () => {\n if (isOldReact) {\n raf.current ??= requestAnimationFrame(() => {\n updateSize();\n raf.current = null;\n });\n } else {\n updateSize();\n }\n };\n useResizeObserver({ref, onResize});\n useEffect(() => {\n return () => {\n if (raf.current) {\n cancelAnimationFrame(raf.current);\n }\n };\n }, []);\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 <div role=\"presentation\" {...otherProps} style={style} ref={ref} onScroll={onScroll}>\n <div role=\"presentation\" style={innerStyle}>\n {children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\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 HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useLayoutEffect, 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\nlet isOldReact = React.version.startsWith('16.') || React.version.startsWith('17.');\n\nfunction ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {\n let {\n contentSize,\n onVisibleRectChange,\n children,\n innerStyle,\n sizeToFit,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let defaultRef = useRef();\n ref = ref || defaultRef;\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 // 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 = useCallback(() => {\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 w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.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 onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n }\n }, [onVisibleRectChange, ref, state, sizeToFit, contentSize]);\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n let raf = useRef<ReturnType<typeof requestAnimationFrame> | null>();\n let onResize = useCallback(() => {\n if (isOldReact) {\n raf.current ??= requestAnimationFrame(() => {\n updateSize();\n raf.current = null;\n });\n } else {\n updateSize();\n }\n }, [updateSize]);\n useResizeObserver({ref, onResize});\n useEffect(() => {\n return () => {\n if (raf.current) {\n cancelAnimationFrame(raf.current);\n }\n };\n }, []);\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 <div role=\"presentation\" {...otherProps} style={style} ref={ref} onScroll={onScroll}>\n <div role=\"presentation\" style={innerStyle}>\n {children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n"],"names":[],"version":3,"file":"ScrollView.module.js.map"}
|
package/dist/Virtualizer.main.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
var $00ca8c0b29e3e07c$exports = require("./ScrollView.main.js");
|
|
2
2
|
var $d6a26279cc31826b$exports = require("./VirtualizerItem.main.js");
|
|
3
|
-
var $knrtk$reactariainteractions = require("@react-aria/interactions");
|
|
4
3
|
var $knrtk$reactstatelyvirtualizer = require("@react-stately/virtualizer");
|
|
5
4
|
var $knrtk$reactariautils = require("@react-aria/utils");
|
|
6
5
|
var $knrtk$react = require("react");
|
|
@@ -32,20 +31,14 @@ $parcel$export(module.exports, "Virtualizer", () => $e1fb6f3669e1c329$export$89b
|
|
|
32
31
|
|
|
33
32
|
|
|
34
33
|
|
|
35
|
-
|
|
36
34
|
const $e1fb6f3669e1c329$export$d288a7dd40372bc = /*#__PURE__*/ (0, $knrtk$react.createContext)(null);
|
|
37
35
|
function $e1fb6f3669e1c329$var$Virtualizer(props, ref) {
|
|
38
|
-
let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, sizeToFit: sizeToFit, scrollDirection: scrollDirection,
|
|
36
|
+
let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, sizeToFit: sizeToFit, scrollDirection: scrollDirection, isLoading: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
39
37
|
isLoading, onLoadMore: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
40
|
-
onLoadMore, focusedKey:
|
|
41
|
-
focusedKey, shouldUseVirtualFocus: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
42
|
-
shouldUseVirtualFocus, scrollToItem: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
43
|
-
scrollToItem, autoFocus: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
44
|
-
autoFocus, ...otherProps } = props;
|
|
38
|
+
onLoadMore, focusedKey: focusedKey, layoutOptions: layoutOptions, ...otherProps } = props;
|
|
45
39
|
let fallbackRef = (0, $knrtk$react.useRef)();
|
|
46
40
|
ref = ref || fallbackRef;
|
|
47
41
|
let state = (0, $knrtk$reactstatelyvirtualizer.useVirtualizerState)({
|
|
48
|
-
transitionDuration: transitionDuration,
|
|
49
42
|
layout: layout,
|
|
50
43
|
collection: collection,
|
|
51
44
|
renderView: renderView,
|
|
@@ -53,15 +46,18 @@ function $e1fb6f3669e1c329$var$Virtualizer(props, ref) {
|
|
|
53
46
|
onVisibleRectChange (rect) {
|
|
54
47
|
ref.current.scrollLeft = rect.x;
|
|
55
48
|
ref.current.scrollTop = rect.y;
|
|
56
|
-
}
|
|
49
|
+
},
|
|
50
|
+
persistedKeys: (0, $knrtk$react.useMemo)(()=>focusedKey ? new Set([
|
|
51
|
+
focusedKey
|
|
52
|
+
]) : new Set(), [
|
|
53
|
+
focusedKey
|
|
54
|
+
]),
|
|
55
|
+
layoutOptions: layoutOptions
|
|
57
56
|
});
|
|
58
57
|
let { virtualizerProps: virtualizerProps, scrollViewProps: scrollViewProps } = $e1fb6f3669e1c329$export$dd6d526d88b5a137(props, state, ref);
|
|
59
58
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($knrtk$react))).createElement((0, $00ca8c0b29e3e07c$exports.ScrollView), {
|
|
60
59
|
...(0, $knrtk$reactariautils.mergeProps)(otherProps, virtualizerProps, scrollViewProps),
|
|
61
60
|
ref: ref,
|
|
62
|
-
innerStyle: state.isAnimating ? {
|
|
63
|
-
transition: `none ${state.virtualizer.transitionDuration}ms`
|
|
64
|
-
} : undefined,
|
|
65
61
|
contentSize: state.contentSize,
|
|
66
62
|
onScrollStart: state.startScrolling,
|
|
67
63
|
onScrollEnd: state.endScrolling,
|
|
@@ -72,87 +68,15 @@ function $e1fb6f3669e1c329$var$Virtualizer(props, ref) {
|
|
|
72
68
|
}, state.visibleViews));
|
|
73
69
|
}
|
|
74
70
|
function $e1fb6f3669e1c329$export$dd6d526d88b5a137(props, state, ref) {
|
|
75
|
-
let {
|
|
76
|
-
let { virtualizer: virtualizer } = state;
|
|
77
|
-
// Scroll to the focusedKey when it changes. Actually focusing the focusedKey
|
|
78
|
-
// is up to the implementation using Virtualizer since we don't have refs
|
|
79
|
-
// to all of the item DOM nodes.
|
|
80
|
-
let lastFocusedKey = (0, $knrtk$react.useRef)(null);
|
|
81
|
-
let isFocusWithin = (0, $knrtk$react.useRef)(false);
|
|
82
|
-
let autoFocus = (0, $knrtk$react.useRef)(props.autoFocus);
|
|
83
|
-
(0, $knrtk$react.useEffect)(()=>{
|
|
84
|
-
if (virtualizer.visibleRect.height === 0) return;
|
|
85
|
-
// Only scroll the focusedKey into view if the modality is not pointer to avoid jumps in position when clicking/pressing tall items.
|
|
86
|
-
let modality = (0, $knrtk$reactariainteractions.getInteractionModality)();
|
|
87
|
-
if (focusedKey !== lastFocusedKey.current && (modality !== 'pointer' || autoFocus.current)) {
|
|
88
|
-
autoFocus.current = false;
|
|
89
|
-
if (scrollToItem) // If user provides scrolltoitem, then it is their responsibility to call scrollIntoViewport if desired
|
|
90
|
-
// since we don't know if their scrollToItem may take some time to actually bring the active element into the virtualizer's visible rect.
|
|
91
|
-
scrollToItem(focusedKey);
|
|
92
|
-
else virtualizer.scrollToItem(focusedKey, {
|
|
93
|
-
duration: 0
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
lastFocusedKey.current = focusedKey;
|
|
97
|
-
}, [
|
|
98
|
-
focusedKey,
|
|
99
|
-
virtualizer.visibleRect.height,
|
|
100
|
-
virtualizer,
|
|
101
|
-
lastFocusedKey,
|
|
102
|
-
scrollToItem,
|
|
103
|
-
ref
|
|
104
|
-
]);
|
|
105
|
-
// Persist the focusedKey and prevent it from being removed from the DOM when scrolled out of view.
|
|
106
|
-
virtualizer.persistedKeys = (0, $knrtk$react.useMemo)(()=>focusedKey ? new Set([
|
|
107
|
-
focusedKey
|
|
108
|
-
]) : new Set(), [
|
|
109
|
-
focusedKey
|
|
110
|
-
]);
|
|
111
|
-
let onFocus = (0, $knrtk$react.useCallback)((e)=>{
|
|
112
|
-
// If the focused item is scrolled out of view and is not in the DOM, the collection
|
|
113
|
-
// will have tabIndex={0}. When tabbing in from outside, scroll the focused item into view.
|
|
114
|
-
// Ignore focus events that bubble through portals (e.g. focus that happens on a menu popover child of the virtualizer)
|
|
115
|
-
// Don't scroll focused key into view if modality is pointer to prevent sudden jump in position (e.g. CardView).
|
|
116
|
-
let modality = (0, $knrtk$reactariainteractions.getInteractionModality)();
|
|
117
|
-
if (!isFocusWithin.current && ref.current.contains(e.target) && modality !== 'pointer') {
|
|
118
|
-
if (scrollToItem) scrollToItem(focusedKey);
|
|
119
|
-
else virtualizer.scrollToItem(focusedKey, {
|
|
120
|
-
duration: 0
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
isFocusWithin.current = e.target !== ref.current;
|
|
124
|
-
}, [
|
|
125
|
-
ref,
|
|
126
|
-
virtualizer,
|
|
127
|
-
focusedKey,
|
|
128
|
-
scrollToItem
|
|
129
|
-
]);
|
|
130
|
-
let onBlur = (0, $knrtk$react.useCallback)((e)=>{
|
|
131
|
-
isFocusWithin.current = ref.current.contains(e.relatedTarget);
|
|
132
|
-
}, [
|
|
133
|
-
ref
|
|
134
|
-
]);
|
|
135
|
-
// Set tabIndex to -1 if there is a focused key, otherwise 0 so that the collection
|
|
136
|
-
// itself is tabbable. When the collection receives focus, we scroll the focused item back into
|
|
137
|
-
// view, which will allow it to be properly focused. If using virtual focus, don't set a
|
|
138
|
-
// tabIndex at all so that VoiceOver on iOS 14 doesn't try to move real DOM focus to the element anyway.
|
|
139
|
-
let tabIndex;
|
|
140
|
-
if (!shouldUseVirtualFocus) {
|
|
141
|
-
// When there is no focusedKey the default tabIndex is 0. We include logic for empty collections too.
|
|
142
|
-
// For collections that are empty, but have a link in the empty children we want to skip focusing this
|
|
143
|
-
// and let focus move to the link similar to link moving to children.
|
|
144
|
-
tabIndex = focusedKey != null ? -1 : 0;
|
|
145
|
-
// If the collection is empty, we want the tabIndex provided from props (if any)
|
|
146
|
-
// so that we handle when tabbable items are added to the empty state.
|
|
147
|
-
if (virtualizer.collection.size === 0 && props.tabIndex != null) tabIndex = props.tabIndex;
|
|
148
|
-
}
|
|
71
|
+
let { isLoading: isLoading, onLoadMore: onLoadMore } = props;
|
|
72
|
+
let { setVisibleRect: setVisibleRect, virtualizer: virtualizer } = state;
|
|
149
73
|
// Handle scrolling, and call onLoadMore when nearing the bottom.
|
|
150
74
|
let isLoadingRef = (0, $knrtk$react.useRef)(isLoading);
|
|
151
75
|
let prevProps = (0, $knrtk$react.useRef)(props);
|
|
152
76
|
let onVisibleRectChange = (0, $knrtk$react.useCallback)((rect)=>{
|
|
153
|
-
|
|
77
|
+
setVisibleRect(rect);
|
|
154
78
|
if (!isLoadingRef.current && onLoadMore) {
|
|
155
|
-
let scrollOffset =
|
|
79
|
+
let scrollOffset = virtualizer.contentSize.height - rect.height * 2;
|
|
156
80
|
if (rect.y > scrollOffset) {
|
|
157
81
|
isLoadingRef.current = true;
|
|
158
82
|
onLoadMore();
|
|
@@ -160,12 +84,11 @@ function $e1fb6f3669e1c329$export$dd6d526d88b5a137(props, state, ref) {
|
|
|
160
84
|
}
|
|
161
85
|
}, [
|
|
162
86
|
onLoadMore,
|
|
163
|
-
|
|
87
|
+
setVisibleRect,
|
|
88
|
+
virtualizer
|
|
164
89
|
]);
|
|
165
90
|
let lastContentSize = (0, $knrtk$react.useRef)(0);
|
|
166
91
|
(0, $knrtk$reactariautils.useLayoutEffect)(()=>{
|
|
167
|
-
// If animating, wait until we're done.
|
|
168
|
-
if (state.isAnimating) return;
|
|
169
92
|
// Only update isLoadingRef if props object actually changed,
|
|
170
93
|
// not if a local state change occurred.
|
|
171
94
|
let wasLoading = isLoadingRef.current;
|
|
@@ -181,18 +104,13 @@ function $e1fb6f3669e1c329$export$dd6d526d88b5a137(props, state, ref) {
|
|
|
181
104
|
lastContentSize.current = state.contentSize.height;
|
|
182
105
|
}, [
|
|
183
106
|
state.contentSize,
|
|
184
|
-
state.isAnimating,
|
|
185
107
|
state.virtualizer,
|
|
186
108
|
isLoading,
|
|
187
109
|
onLoadMore,
|
|
188
110
|
props
|
|
189
111
|
]);
|
|
190
112
|
return {
|
|
191
|
-
virtualizerProps: {
|
|
192
|
-
tabIndex: tabIndex,
|
|
193
|
-
onFocus: onFocus,
|
|
194
|
-
onBlur: onBlur
|
|
195
|
-
},
|
|
113
|
+
virtualizerProps: {},
|
|
196
114
|
scrollViewProps: {
|
|
197
115
|
onVisibleRectChange: onVisibleRectChange
|
|
198
116
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","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} from '@react-types/shared';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport {Layout, Rect, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport React, {createContext, FocusEvent, HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef} from 'react';\nimport {ScrollView} from './ScrollView';\nimport {VirtualizerItem} from './VirtualizerItem';\n\ninterface VirtualizerProps<T extends object, V> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n children: (type: string, content: T) => V,\n renderWrapper?: (\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 layout: Layout<T>,\n collection: Collection<T>,\n focusedKey?: Key,\n sizeToFit?: 'width' | 'height',\n scrollDirection?: 'horizontal' | 'vertical' | 'both',\n transitionDuration?: number,\n isLoading?: boolean,\n onLoadMore?: () => void,\n shouldUseVirtualFocus?: boolean,\n scrollToItem?: (key: Key) => void,\n autoFocus?: boolean\n}\n\nexport const VirtualizerContext = createContext<VirtualizerState<any, any, any> | null>(null);\n\nfunction Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerProps<T, V>, ref: RefObject<HTMLDivElement>) {\n let {\n children: renderView,\n renderWrapper,\n layout,\n collection,\n sizeToFit,\n scrollDirection,\n transitionDuration,\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\n focusedKey,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n shouldUseVirtualFocus,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n scrollToItem,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n autoFocus,\n ...otherProps\n } = props;\n\n let fallbackRef = useRef<HTMLDivElement>();\n ref = ref || fallbackRef;\n\n let state = useVirtualizerState({\n transitionDuration,\n layout,\n collection,\n renderView,\n renderWrapper: renderWrapper || defaultRenderWrapper,\n onVisibleRectChange(rect) {\n ref.current.scrollLeft = rect.x;\n ref.current.scrollTop = rect.y;\n }\n });\n\n let {virtualizerProps, scrollViewProps} = useVirtualizer(props, state, ref);\n\n return (\n <ScrollView\n {...mergeProps(otherProps, virtualizerProps, scrollViewProps)}\n ref={ref}\n innerStyle={state.isAnimating ? {transition: `none ${state.virtualizer.transitionDuration}ms`} : undefined}\n contentSize={state.contentSize}\n onScrollStart={state.startScrolling}\n onScrollEnd={state.endScrolling}\n sizeToFit={sizeToFit}\n scrollDirection={scrollDirection}>\n <VirtualizerContext.Provider value={state}>\n {state.visibleViews}\n </VirtualizerContext.Provider>\n </ScrollView>\n );\n}\n\ninterface VirtualizerOptions {\n tabIndex?: number,\n focusedKey?: Key,\n scrollToItem?: (key: Key) => void,\n shouldUseVirtualFocus?: boolean,\n autoFocus?: boolean,\n isLoading?: boolean,\n onLoadMore?: () => void\n}\n\nexport function useVirtualizer<T extends object, V extends ReactNode, W>(props: VirtualizerOptions, state: VirtualizerState<T, V, W>, ref: RefObject<HTMLElement>) {\n let {focusedKey, scrollToItem, shouldUseVirtualFocus, isLoading, onLoadMore} = props;\n let {virtualizer} = state;\n // Scroll to the focusedKey when it changes. Actually focusing the focusedKey\n // is up to the implementation using Virtualizer since we don't have refs\n // to all of the item DOM nodes.\n let lastFocusedKey = useRef(null);\n let isFocusWithin = useRef(false);\n let autoFocus = useRef(props.autoFocus);\n useEffect(() => {\n if (virtualizer.visibleRect.height === 0) {\n return;\n }\n\n // Only scroll the focusedKey into view if the modality is not pointer to avoid jumps in position when clicking/pressing tall items.\n let modality = getInteractionModality();\n if (focusedKey !== lastFocusedKey.current && (modality !== 'pointer' || autoFocus.current)) {\n autoFocus.current = false;\n if (scrollToItem) {\n // If user provides scrolltoitem, then it is their responsibility to call scrollIntoViewport if desired\n // since we don't know if their scrollToItem may take some time to actually bring the active element into the virtualizer's visible rect.\n scrollToItem(focusedKey);\n } else {\n virtualizer.scrollToItem(focusedKey, {duration: 0});\n\n }\n }\n\n lastFocusedKey.current = focusedKey;\n }, [focusedKey, virtualizer.visibleRect.height, virtualizer, lastFocusedKey, scrollToItem, ref]);\n\n // Persist the focusedKey and prevent it from being removed from the DOM when scrolled out of view.\n virtualizer.persistedKeys = useMemo(() => focusedKey ? new Set([focusedKey]) : new Set(), [focusedKey]);\n\n let onFocus = useCallback((e: FocusEvent) => {\n // If the focused item is scrolled out of view and is not in the DOM, the collection\n // will have tabIndex={0}. When tabbing in from outside, scroll the focused item into view.\n // Ignore focus events that bubble through portals (e.g. focus that happens on a menu popover child of the virtualizer)\n // Don't scroll focused key into view if modality is pointer to prevent sudden jump in position (e.g. CardView).\n let modality = getInteractionModality();\n if (!isFocusWithin.current && ref.current.contains(e.target) && modality !== 'pointer') {\n if (scrollToItem) {\n scrollToItem(focusedKey);\n } else {\n virtualizer.scrollToItem(focusedKey, {duration: 0});\n }\n }\n\n isFocusWithin.current = e.target !== ref.current;\n }, [ref, virtualizer, focusedKey, scrollToItem]);\n\n let onBlur = useCallback((e: FocusEvent) => {\n isFocusWithin.current = ref.current.contains(e.relatedTarget as Element);\n }, [ref]);\n\n // Set tabIndex to -1 if there is a focused key, otherwise 0 so that the collection\n // itself is tabbable. When the collection receives focus, we scroll the focused item back into\n // view, which will allow it to be properly focused. If using virtual focus, don't set a\n // tabIndex at all so that VoiceOver on iOS 14 doesn't try to move real DOM focus to the element anyway.\n let tabIndex: number;\n if (!shouldUseVirtualFocus) {\n // When there is no focusedKey the default tabIndex is 0. We include logic for empty collections too.\n // For collections that are empty, but have a link in the empty children we want to skip focusing this\n // and let focus move to the link similar to link moving to children.\n tabIndex = focusedKey != null ? -1 : 0;\n\n // If the collection is empty, we want the tabIndex provided from props (if any)\n // so that we handle when tabbable items are added to the empty state.\n if (virtualizer.collection.size === 0 && props.tabIndex != null) {\n tabIndex = props.tabIndex;\n }\n }\n\n // Handle scrolling, and call onLoadMore when nearing the bottom.\n let isLoadingRef = useRef(isLoading);\n let prevProps = useRef(props);\n let onVisibleRectChange = useCallback((rect: Rect) => {\n state.setVisibleRect(rect);\n\n if (!isLoadingRef.current && onLoadMore) {\n let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;\n if (rect.y > scrollOffset) {\n isLoadingRef.current = true;\n onLoadMore();\n }\n }\n }, [onLoadMore, state]);\n\n let lastContentSize = useRef(0);\n useLayoutEffect(() => {\n // If animating, wait until we're done.\n if (state.isAnimating) {\n return;\n }\n\n // Only update isLoadingRef if props object actually changed,\n // not if a local state change occurred.\n let wasLoading = isLoadingRef.current;\n if (props !== prevProps.current) {\n isLoadingRef.current = isLoading;\n prevProps.current = props;\n }\n\n let shouldLoadMore = !isLoadingRef.current\n && onLoadMore\n && state.contentSize.height > 0\n && state.contentSize.height <= state.virtualizer.visibleRect.height\n // Only try loading more if the content size changed, or if we just finished\n // loading and still have room for more items.\n && (wasLoading || state.contentSize.height !== lastContentSize.current);\n\n if (shouldLoadMore) {\n isLoadingRef.current = true;\n onLoadMore();\n }\n lastContentSize.current = state.contentSize.height;\n }, [state.contentSize, state.isAnimating, state.virtualizer, isLoading, onLoadMore, props]);\n\n return {\n virtualizerProps: {\n tabIndex,\n onFocus,\n onBlur\n },\n scrollViewProps: {\n onVisibleRectChange\n }\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>(props: VirtualizerProps<T, V> & {ref?: RefObject<HTMLDivElement>}) => ReactElement;\nexport {_Virtualizer as Virtualizer};\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"}
|
|
1
|
+
{"mappings":"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","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} from '@react-types/shared';\nimport {Layout, Rect, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport React, {createContext, HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useMemo, useRef} from 'react';\nimport {ScrollView} from './ScrollView';\nimport {VirtualizerItem} from './VirtualizerItem';\n\ninterface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n children: (type: string, content: T) => V,\n renderWrapper?: (\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 layout: Layout<T, O>,\n collection: Collection<T>,\n focusedKey?: Key,\n sizeToFit?: 'width' | 'height',\n scrollDirection?: 'horizontal' | 'vertical' | 'both',\n isLoading?: boolean,\n onLoadMore?: () => void,\n layoutOptions?: O\n}\n\nexport const VirtualizerContext = createContext<VirtualizerState<any, any, any> | null>(null);\n\nfunction Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement>) {\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 focusedKey,\n layoutOptions,\n ...otherProps\n } = props;\n\n let fallbackRef = useRef<HTMLDivElement>();\n ref = ref || fallbackRef;\n\n let state = useVirtualizerState({\n layout,\n collection,\n renderView,\n renderWrapper: renderWrapper || defaultRenderWrapper,\n onVisibleRectChange(rect) {\n ref.current.scrollLeft = rect.x;\n ref.current.scrollTop = rect.y;\n },\n persistedKeys: useMemo(() => focusedKey ? new Set([focusedKey]) : new Set(), [focusedKey]),\n layoutOptions\n });\n\n let {virtualizerProps, scrollViewProps} = useVirtualizer(props, state, ref);\n\n return (\n <ScrollView\n {...mergeProps(otherProps, virtualizerProps, scrollViewProps)}\n ref={ref}\n contentSize={state.contentSize}\n onScrollStart={state.startScrolling}\n onScrollEnd={state.endScrolling}\n sizeToFit={sizeToFit}\n scrollDirection={scrollDirection}>\n <VirtualizerContext.Provider value={state}>\n {state.visibleViews}\n </VirtualizerContext.Provider>\n </ScrollView>\n );\n}\n\ninterface VirtualizerOptions {\n tabIndex?: number,\n focusedKey?: Key,\n isLoading?: boolean,\n onLoadMore?: () => void\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function useVirtualizer<T extends object, V extends ReactNode, W>(props: VirtualizerOptions, state: VirtualizerState<T, V, W>, ref: RefObject<HTMLElement>) {\n let {isLoading, onLoadMore} = props;\n let {setVisibleRect, virtualizer} = state;\n\n // Handle scrolling, and call onLoadMore when nearing the bottom.\n let isLoadingRef = useRef(isLoading);\n let prevProps = useRef(props);\n let onVisibleRectChange = useCallback((rect: Rect) => {\n setVisibleRect(rect);\n\n if (!isLoadingRef.current && onLoadMore) {\n let scrollOffset = virtualizer.contentSize.height - rect.height * 2;\n if (rect.y > scrollOffset) {\n isLoadingRef.current = true;\n onLoadMore();\n }\n }\n }, [onLoadMore, setVisibleRect, virtualizer]);\n\n let lastContentSize = useRef(0);\n useLayoutEffect(() => {\n // Only update isLoadingRef if props object actually changed,\n // not if a local state change occurred.\n let wasLoading = isLoadingRef.current;\n if (props !== prevProps.current) {\n isLoadingRef.current = isLoading;\n prevProps.current = props;\n }\n\n let shouldLoadMore = !isLoadingRef.current\n && onLoadMore\n && state.contentSize.height > 0\n && state.contentSize.height <= state.virtualizer.visibleRect.height\n // Only try loading more if the content size changed, or if we just finished\n // loading and still have room for more items.\n && (wasLoading || state.contentSize.height !== lastContentSize.current);\n\n if (shouldLoadMore) {\n isLoadingRef.current = true;\n onLoadMore();\n }\n lastContentSize.current = state.contentSize.height;\n }, [state.contentSize, state.virtualizer, isLoading, onLoadMore, props]);\n\n return {\n virtualizerProps: {},\n scrollViewProps: {\n onVisibleRectChange\n }\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>}) => ReactElement;\nexport {_Virtualizer as Virtualizer};\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,9 +1,8 @@
|
|
|
1
1
|
import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea} from "./ScrollView.mjs";
|
|
2
2
|
import {VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.mjs";
|
|
3
|
-
import {getInteractionModality as $9WwqA$getInteractionModality} from "@react-aria/interactions";
|
|
4
3
|
import {useVirtualizerState as $9WwqA$useVirtualizerState} from "@react-stately/virtualizer";
|
|
5
4
|
import {mergeProps as $9WwqA$mergeProps, useLayoutEffect as $9WwqA$useLayoutEffect} from "@react-aria/utils";
|
|
6
|
-
import $9WwqA$react, {createContext as $9WwqA$createContext, useRef as $9WwqA$useRef,
|
|
5
|
+
import $9WwqA$react, {createContext as $9WwqA$createContext, useRef as $9WwqA$useRef, useMemo as $9WwqA$useMemo, useCallback as $9WwqA$useCallback} from "react";
|
|
7
6
|
|
|
8
7
|
/*
|
|
9
8
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -20,20 +19,14 @@ import $9WwqA$react, {createContext as $9WwqA$createContext, useRef as $9WwqA$us
|
|
|
20
19
|
|
|
21
20
|
|
|
22
21
|
|
|
23
|
-
|
|
24
22
|
const $6d0a5c394373ae64$export$d288a7dd40372bc = /*#__PURE__*/ (0, $9WwqA$createContext)(null);
|
|
25
23
|
function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
26
|
-
let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, sizeToFit: sizeToFit, scrollDirection: scrollDirection,
|
|
24
|
+
let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, sizeToFit: sizeToFit, scrollDirection: scrollDirection, isLoading: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
27
25
|
isLoading, onLoadMore: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
28
|
-
onLoadMore, focusedKey:
|
|
29
|
-
focusedKey, shouldUseVirtualFocus: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
30
|
-
shouldUseVirtualFocus, scrollToItem: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
31
|
-
scrollToItem, autoFocus: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
32
|
-
autoFocus, ...otherProps } = props;
|
|
26
|
+
onLoadMore, focusedKey: focusedKey, layoutOptions: layoutOptions, ...otherProps } = props;
|
|
33
27
|
let fallbackRef = (0, $9WwqA$useRef)();
|
|
34
28
|
ref = ref || fallbackRef;
|
|
35
29
|
let state = (0, $9WwqA$useVirtualizerState)({
|
|
36
|
-
transitionDuration: transitionDuration,
|
|
37
30
|
layout: layout,
|
|
38
31
|
collection: collection,
|
|
39
32
|
renderView: renderView,
|
|
@@ -41,15 +34,18 @@ function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
|
41
34
|
onVisibleRectChange (rect) {
|
|
42
35
|
ref.current.scrollLeft = rect.x;
|
|
43
36
|
ref.current.scrollTop = rect.y;
|
|
44
|
-
}
|
|
37
|
+
},
|
|
38
|
+
persistedKeys: (0, $9WwqA$useMemo)(()=>focusedKey ? new Set([
|
|
39
|
+
focusedKey
|
|
40
|
+
]) : new Set(), [
|
|
41
|
+
focusedKey
|
|
42
|
+
]),
|
|
43
|
+
layoutOptions: layoutOptions
|
|
45
44
|
});
|
|
46
45
|
let { virtualizerProps: virtualizerProps, scrollViewProps: scrollViewProps } = $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref);
|
|
47
46
|
return /*#__PURE__*/ (0, $9WwqA$react).createElement((0, $44a6ee657928b002$export$5665e3d6be6adea), {
|
|
48
47
|
...(0, $9WwqA$mergeProps)(otherProps, virtualizerProps, scrollViewProps),
|
|
49
48
|
ref: ref,
|
|
50
|
-
innerStyle: state.isAnimating ? {
|
|
51
|
-
transition: `none ${state.virtualizer.transitionDuration}ms`
|
|
52
|
-
} : undefined,
|
|
53
49
|
contentSize: state.contentSize,
|
|
54
50
|
onScrollStart: state.startScrolling,
|
|
55
51
|
onScrollEnd: state.endScrolling,
|
|
@@ -60,87 +56,15 @@ function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
|
60
56
|
}, state.visibleViews));
|
|
61
57
|
}
|
|
62
58
|
function $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref) {
|
|
63
|
-
let {
|
|
64
|
-
let { virtualizer: virtualizer } = state;
|
|
65
|
-
// Scroll to the focusedKey when it changes. Actually focusing the focusedKey
|
|
66
|
-
// is up to the implementation using Virtualizer since we don't have refs
|
|
67
|
-
// to all of the item DOM nodes.
|
|
68
|
-
let lastFocusedKey = (0, $9WwqA$useRef)(null);
|
|
69
|
-
let isFocusWithin = (0, $9WwqA$useRef)(false);
|
|
70
|
-
let autoFocus = (0, $9WwqA$useRef)(props.autoFocus);
|
|
71
|
-
(0, $9WwqA$useEffect)(()=>{
|
|
72
|
-
if (virtualizer.visibleRect.height === 0) return;
|
|
73
|
-
// Only scroll the focusedKey into view if the modality is not pointer to avoid jumps in position when clicking/pressing tall items.
|
|
74
|
-
let modality = (0, $9WwqA$getInteractionModality)();
|
|
75
|
-
if (focusedKey !== lastFocusedKey.current && (modality !== 'pointer' || autoFocus.current)) {
|
|
76
|
-
autoFocus.current = false;
|
|
77
|
-
if (scrollToItem) // If user provides scrolltoitem, then it is their responsibility to call scrollIntoViewport if desired
|
|
78
|
-
// since we don't know if their scrollToItem may take some time to actually bring the active element into the virtualizer's visible rect.
|
|
79
|
-
scrollToItem(focusedKey);
|
|
80
|
-
else virtualizer.scrollToItem(focusedKey, {
|
|
81
|
-
duration: 0
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
lastFocusedKey.current = focusedKey;
|
|
85
|
-
}, [
|
|
86
|
-
focusedKey,
|
|
87
|
-
virtualizer.visibleRect.height,
|
|
88
|
-
virtualizer,
|
|
89
|
-
lastFocusedKey,
|
|
90
|
-
scrollToItem,
|
|
91
|
-
ref
|
|
92
|
-
]);
|
|
93
|
-
// Persist the focusedKey and prevent it from being removed from the DOM when scrolled out of view.
|
|
94
|
-
virtualizer.persistedKeys = (0, $9WwqA$useMemo)(()=>focusedKey ? new Set([
|
|
95
|
-
focusedKey
|
|
96
|
-
]) : new Set(), [
|
|
97
|
-
focusedKey
|
|
98
|
-
]);
|
|
99
|
-
let onFocus = (0, $9WwqA$useCallback)((e)=>{
|
|
100
|
-
// If the focused item is scrolled out of view and is not in the DOM, the collection
|
|
101
|
-
// will have tabIndex={0}. When tabbing in from outside, scroll the focused item into view.
|
|
102
|
-
// Ignore focus events that bubble through portals (e.g. focus that happens on a menu popover child of the virtualizer)
|
|
103
|
-
// Don't scroll focused key into view if modality is pointer to prevent sudden jump in position (e.g. CardView).
|
|
104
|
-
let modality = (0, $9WwqA$getInteractionModality)();
|
|
105
|
-
if (!isFocusWithin.current && ref.current.contains(e.target) && modality !== 'pointer') {
|
|
106
|
-
if (scrollToItem) scrollToItem(focusedKey);
|
|
107
|
-
else virtualizer.scrollToItem(focusedKey, {
|
|
108
|
-
duration: 0
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
isFocusWithin.current = e.target !== ref.current;
|
|
112
|
-
}, [
|
|
113
|
-
ref,
|
|
114
|
-
virtualizer,
|
|
115
|
-
focusedKey,
|
|
116
|
-
scrollToItem
|
|
117
|
-
]);
|
|
118
|
-
let onBlur = (0, $9WwqA$useCallback)((e)=>{
|
|
119
|
-
isFocusWithin.current = ref.current.contains(e.relatedTarget);
|
|
120
|
-
}, [
|
|
121
|
-
ref
|
|
122
|
-
]);
|
|
123
|
-
// Set tabIndex to -1 if there is a focused key, otherwise 0 so that the collection
|
|
124
|
-
// itself is tabbable. When the collection receives focus, we scroll the focused item back into
|
|
125
|
-
// view, which will allow it to be properly focused. If using virtual focus, don't set a
|
|
126
|
-
// tabIndex at all so that VoiceOver on iOS 14 doesn't try to move real DOM focus to the element anyway.
|
|
127
|
-
let tabIndex;
|
|
128
|
-
if (!shouldUseVirtualFocus) {
|
|
129
|
-
// When there is no focusedKey the default tabIndex is 0. We include logic for empty collections too.
|
|
130
|
-
// For collections that are empty, but have a link in the empty children we want to skip focusing this
|
|
131
|
-
// and let focus move to the link similar to link moving to children.
|
|
132
|
-
tabIndex = focusedKey != null ? -1 : 0;
|
|
133
|
-
// If the collection is empty, we want the tabIndex provided from props (if any)
|
|
134
|
-
// so that we handle when tabbable items are added to the empty state.
|
|
135
|
-
if (virtualizer.collection.size === 0 && props.tabIndex != null) tabIndex = props.tabIndex;
|
|
136
|
-
}
|
|
59
|
+
let { isLoading: isLoading, onLoadMore: onLoadMore } = props;
|
|
60
|
+
let { setVisibleRect: setVisibleRect, virtualizer: virtualizer } = state;
|
|
137
61
|
// Handle scrolling, and call onLoadMore when nearing the bottom.
|
|
138
62
|
let isLoadingRef = (0, $9WwqA$useRef)(isLoading);
|
|
139
63
|
let prevProps = (0, $9WwqA$useRef)(props);
|
|
140
64
|
let onVisibleRectChange = (0, $9WwqA$useCallback)((rect)=>{
|
|
141
|
-
|
|
65
|
+
setVisibleRect(rect);
|
|
142
66
|
if (!isLoadingRef.current && onLoadMore) {
|
|
143
|
-
let scrollOffset =
|
|
67
|
+
let scrollOffset = virtualizer.contentSize.height - rect.height * 2;
|
|
144
68
|
if (rect.y > scrollOffset) {
|
|
145
69
|
isLoadingRef.current = true;
|
|
146
70
|
onLoadMore();
|
|
@@ -148,12 +72,11 @@ function $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref) {
|
|
|
148
72
|
}
|
|
149
73
|
}, [
|
|
150
74
|
onLoadMore,
|
|
151
|
-
|
|
75
|
+
setVisibleRect,
|
|
76
|
+
virtualizer
|
|
152
77
|
]);
|
|
153
78
|
let lastContentSize = (0, $9WwqA$useRef)(0);
|
|
154
79
|
(0, $9WwqA$useLayoutEffect)(()=>{
|
|
155
|
-
// If animating, wait until we're done.
|
|
156
|
-
if (state.isAnimating) return;
|
|
157
80
|
// Only update isLoadingRef if props object actually changed,
|
|
158
81
|
// not if a local state change occurred.
|
|
159
82
|
let wasLoading = isLoadingRef.current;
|
|
@@ -169,18 +92,13 @@ function $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref) {
|
|
|
169
92
|
lastContentSize.current = state.contentSize.height;
|
|
170
93
|
}, [
|
|
171
94
|
state.contentSize,
|
|
172
|
-
state.isAnimating,
|
|
173
95
|
state.virtualizer,
|
|
174
96
|
isLoading,
|
|
175
97
|
onLoadMore,
|
|
176
98
|
props
|
|
177
99
|
]);
|
|
178
100
|
return {
|
|
179
|
-
virtualizerProps: {
|
|
180
|
-
tabIndex: tabIndex,
|
|
181
|
-
onFocus: onFocus,
|
|
182
|
-
onBlur: onBlur
|
|
183
|
-
},
|
|
101
|
+
virtualizerProps: {},
|
|
184
102
|
scrollViewProps: {
|
|
185
103
|
onVisibleRectChange: onVisibleRectChange
|
|
186
104
|
}
|