@fluentui/react-virtualizer 9.0.0-alpha.6 → 9.0.0-alpha.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +552 -2
- package/dist/index.d.ts +240 -30
- package/lib/Hooks.js +0 -1
- package/lib/Hooks.js.map +1 -1
- package/lib/Utilities.js +1 -0
- package/lib/Utilities.js.map +1 -0
- package/lib/Virtualizer.js +0 -1
- package/lib/Virtualizer.js.map +1 -1
- package/lib/VirtualizerScrollView.js +1 -0
- package/lib/VirtualizerScrollView.js.map +1 -0
- package/lib/VirtualizerScrollViewDynamic.js +1 -0
- package/lib/VirtualizerScrollViewDynamic.js.map +1 -0
- package/lib/components/Virtualizer/Virtualizer.js +5 -7
- package/lib/components/Virtualizer/Virtualizer.js.map +1 -1
- package/lib/components/Virtualizer/Virtualizer.types.js +1 -2
- package/lib/components/Virtualizer/Virtualizer.types.js.map +1 -1
- package/lib/components/Virtualizer/index.js +1 -2
- package/lib/components/Virtualizer/index.js.map +1 -1
- package/lib/components/Virtualizer/renderVirtualizer.js +21 -16
- package/lib/components/Virtualizer/renderVirtualizer.js.map +1 -1
- package/lib/components/Virtualizer/useVirtualizer.js +434 -355
- package/lib/components/Virtualizer/useVirtualizer.js.map +1 -1
- package/lib/components/Virtualizer/{useVirtualizerStyles.js → useVirtualizerStyles.styles.js} +3 -3
- package/lib/components/Virtualizer/useVirtualizerStyles.styles.js.map +1 -0
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.js +12 -0
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.js.map +1 -0
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js +1 -0
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -0
- package/lib/components/VirtualizerScrollView/index.js +5 -0
- package/lib/components/VirtualizerScrollView/index.js.map +1 -0
- package/lib/components/VirtualizerScrollView/renderVirtualizerScrollView.js +9 -0
- package/lib/components/VirtualizerScrollView/renderVirtualizerScrollView.js.map +1 -0
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js +76 -0
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -0
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +45 -0
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js.map +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js +12 -0
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js.map +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/index.js +5 -0
- package/lib/components/VirtualizerScrollViewDynamic/index.js.map +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js +9 -0
- package/lib/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js.map +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +137 -0
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +45 -0
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map +1 -0
- package/lib/hooks/hooks.types.js +1 -0
- package/lib/hooks/hooks.types.js.map +1 -0
- package/lib/hooks/index.js +4 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useDynamicVirtualizerMeasure.js +99 -0
- package/lib/hooks/useDynamicVirtualizerMeasure.js.map +1 -0
- package/lib/hooks/useIntersectionObserver.js +108 -40
- package/lib/hooks/useIntersectionObserver.js.map +1 -1
- package/lib/hooks/useMeasureList.js +101 -0
- package/lib/hooks/useMeasureList.js.map +1 -0
- package/lib/hooks/useMutationObserver.js +28 -0
- package/lib/hooks/useMutationObserver.js.map +1 -0
- package/lib/hooks/useResizeObserverRef.js +47 -0
- package/lib/hooks/useResizeObserverRef.js.map +1 -0
- package/lib/hooks/useVirtualizerMeasure.js +44 -0
- package/lib/hooks/useVirtualizerMeasure.js.map +1 -0
- package/lib/index.js +4 -2
- package/lib/index.js.map +1 -1
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.js +32 -0
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -0
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js +1 -0
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -0
- package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js +45 -0
- package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -0
- package/lib/utilities/ImperativeScrolling/index.js +3 -0
- package/lib/utilities/ImperativeScrolling/index.js.map +1 -0
- package/lib/utilities/VirtualizerContext/VirtualizerContext.js +33 -0
- package/lib/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -0
- package/lib/utilities/VirtualizerContext/index.js +2 -0
- package/lib/utilities/VirtualizerContext/index.js.map +1 -0
- package/lib/utilities/VirtualizerContext/types.js +3 -0
- package/lib/utilities/VirtualizerContext/types.js.map +1 -0
- package/lib/utilities/createResizeObserverFromDocument.js +13 -0
- package/lib/utilities/createResizeObserverFromDocument.js.map +1 -0
- package/lib/utilities/debounce.js +19 -0
- package/lib/utilities/debounce.js.map +1 -0
- package/lib/utilities/index.js +2 -0
- package/lib/utilities/index.js.map +1 -0
- package/lib-commonjs/Hooks.js +3 -5
- package/lib-commonjs/Hooks.js.map +1 -1
- package/lib-commonjs/Utilities.js +6 -0
- package/lib-commonjs/Utilities.js.map +1 -0
- package/lib-commonjs/Virtualizer.js +3 -5
- package/lib-commonjs/Virtualizer.js.map +1 -1
- package/lib-commonjs/VirtualizerScrollView.js +6 -0
- package/lib-commonjs/VirtualizerScrollView.js.map +1 -0
- package/lib-commonjs/VirtualizerScrollViewDynamic.js +6 -0
- package/lib-commonjs/VirtualizerScrollViewDynamic.js.map +1 -0
- package/lib-commonjs/components/Virtualizer/Virtualizer.js +15 -18
- package/lib-commonjs/components/Virtualizer/Virtualizer.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/Virtualizer.types.js +3 -3
- package/lib-commonjs/components/Virtualizer/Virtualizer.types.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/index.js +7 -9
- package/lib-commonjs/components/Virtualizer/index.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/renderVirtualizer.js +38 -21
- package/lib-commonjs/components/Virtualizer/renderVirtualizer.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/useVirtualizer.js +443 -361
- package/lib-commonjs/components/Virtualizer/useVirtualizer.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js +122 -0
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js +21 -0
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js +4 -0
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/index.js +10 -0
- package/lib-commonjs/components/VirtualizerScrollView/index.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/renderVirtualizerScrollView.js +19 -0
- package/lib-commonjs/components/VirtualizerScrollView/renderVirtualizerScrollView.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js +86 -0
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +69 -0
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js +21 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +4 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/index.js +10 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/index.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js +19 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +147 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +69 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map +1 -0
- package/lib-commonjs/hooks/hooks.types.js +4 -0
- package/lib-commonjs/hooks/hooks.types.js.map +1 -0
- package/lib-commonjs/hooks/index.js +7 -5
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js +107 -0
- package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js.map +1 -0
- package/lib-commonjs/hooks/useIntersectionObserver.js +120 -53
- package/lib-commonjs/hooks/useIntersectionObserver.js.map +1 -1
- package/lib-commonjs/hooks/useMeasureList.js +108 -0
- package/lib-commonjs/hooks/useMeasureList.js.map +1 -0
- package/lib-commonjs/hooks/useMutationObserver.js +38 -0
- package/lib-commonjs/hooks/useMutationObserver.js.map +1 -0
- package/lib-commonjs/hooks/useResizeObserverRef.js +56 -0
- package/lib-commonjs/hooks/useResizeObserverRef.js.map +1 -0
- package/lib-commonjs/hooks/useVirtualizerMeasure.js +53 -0
- package/lib-commonjs/hooks/useVirtualizerMeasure.js.map +1 -0
- package/lib-commonjs/index.js +82 -41
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.js +42 -0
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -0
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js +4 -0
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -0
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrollingDynamic.js +55 -0
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -0
- package/lib-commonjs/utilities/ImperativeScrolling/index.js +8 -0
- package/lib-commonjs/utilities/ImperativeScrolling/index.js.map +1 -0
- package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js +54 -0
- package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -0
- package/lib-commonjs/utilities/VirtualizerContext/index.js +7 -0
- package/lib-commonjs/utilities/VirtualizerContext/index.js.map +1 -0
- package/lib-commonjs/utilities/VirtualizerContext/types.js +6 -0
- package/lib-commonjs/utilities/VirtualizerContext/types.js.map +1 -0
- package/lib-commonjs/utilities/createResizeObserverFromDocument.js +23 -0
- package/lib-commonjs/utilities/createResizeObserverFromDocument.js.map +1 -0
- package/lib-commonjs/utilities/debounce.js +29 -0
- package/lib-commonjs/utilities/debounce.js.map +1 -0
- package/lib-commonjs/utilities/index.js +7 -0
- package/lib-commonjs/utilities/index.js.map +1 -0
- package/package.json +22 -12
- package/CHANGELOG.json +0 -95
- package/lib/components/Virtualizer/useVirtualizerStyles.js.map +0 -1
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.js +0 -115
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["renderVirtualizerScrollViewDynamic.js"],"sourcesContent":[" import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { renderVirtualizer_unstable } from '../Virtualizer/renderVirtualizer';\nexport const renderVirtualizerScrollViewDynamic_unstable = (state)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(state.container, {\n children: renderVirtualizer_unstable(state)\n });\n};\n"],"names":["renderVirtualizerScrollViewDynamic_unstable","state","assertSlots","_jsx","container","children","renderVirtualizer_unstable"],"mappings":";;;;+BAGaA;;;eAAAA;;;4BAHiB;gCACF;mCACe;AACpC,MAAMA,8CAA8C,CAACC;IACxDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,eAAI,EAACF,MAAMG,SAAS,EAAE;QACvCC,UAAUC,IAAAA,6CAA0B,EAACL;IACzC;AACJ"}
|
package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useVirtualizerScrollViewDynamic_unstable", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return useVirtualizerScrollViewDynamic_unstable;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
+
const _useVirtualizer = require("../Virtualizer/useVirtualizer");
|
|
15
|
+
const _Hooks = require("../../Hooks");
|
|
16
|
+
const _Utilities = require("../../Utilities");
|
|
17
|
+
const _useMeasureList = require("../../hooks/useMeasureList");
|
|
18
|
+
function useVirtualizerScrollViewDynamic_unstable(props) {
|
|
19
|
+
const contextState = (0, _Utilities.useVirtualizerContextState_unstable)(props.virtualizerContext);
|
|
20
|
+
const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;
|
|
21
|
+
let sizeTrackingArray = _react.useRef(new Array(props.numItems).fill(props.itemSize));
|
|
22
|
+
const getChildSizeAuto = _react.useCallback((index)=>{
|
|
23
|
+
if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {
|
|
24
|
+
// Default size for initial state or untracked
|
|
25
|
+
return props.itemSize;
|
|
26
|
+
}
|
|
27
|
+
/* Required to be defined prior to our measure function
|
|
28
|
+
* we use a sizing array ref that we will update post-render
|
|
29
|
+
*/ return sizeTrackingArray.current[index];
|
|
30
|
+
}, [
|
|
31
|
+
sizeTrackingArray,
|
|
32
|
+
props.itemSize
|
|
33
|
+
]);
|
|
34
|
+
var _props_axis, _props_getItemSize, _contextState_contextIndex;
|
|
35
|
+
const { virtualizerLength, bufferItems, bufferSize, scrollRef } = (0, _Hooks.useDynamicVirtualizerMeasure)({
|
|
36
|
+
defaultItemSize: props.itemSize,
|
|
37
|
+
direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',
|
|
38
|
+
getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,
|
|
39
|
+
currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,
|
|
40
|
+
numItems: props.numItems
|
|
41
|
+
});
|
|
42
|
+
// Store the virtualizer length as a ref for imperative ref access
|
|
43
|
+
const virtualizerLengthRef = _react.useRef(virtualizerLength);
|
|
44
|
+
if (virtualizerLengthRef.current !== virtualizerLength) {
|
|
45
|
+
virtualizerLengthRef.current = virtualizerLength;
|
|
46
|
+
}
|
|
47
|
+
const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef);
|
|
48
|
+
const scrollCallbackRef = _react.useRef(null);
|
|
49
|
+
const _imperativeVirtualizerRef = (0, _reactutilities.useMergedRefs)(_react.useRef(null), imperativeVirtualizerRef);
|
|
50
|
+
(0, _react.useImperativeHandle)(imperativeRef, ()=>{
|
|
51
|
+
var _imperativeVirtualizerRef_current;
|
|
52
|
+
return {
|
|
53
|
+
scrollTo (index, behavior = 'auto', callback) {
|
|
54
|
+
scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;
|
|
55
|
+
if (_imperativeVirtualizerRef.current) {
|
|
56
|
+
var _imperativeVirtualizerRef_current;
|
|
57
|
+
const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;
|
|
58
|
+
const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;
|
|
59
|
+
_imperativeVirtualizerRef.current.setFlaggedIndex(index);
|
|
60
|
+
(0, _Utilities.scrollToItemDynamic)({
|
|
61
|
+
index,
|
|
62
|
+
itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,
|
|
63
|
+
totalSize,
|
|
64
|
+
scrollViewRef,
|
|
65
|
+
axis,
|
|
66
|
+
reversed,
|
|
67
|
+
behavior
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,
|
|
72
|
+
virtualizerLength: virtualizerLengthRef
|
|
73
|
+
};
|
|
74
|
+
}, [
|
|
75
|
+
axis,
|
|
76
|
+
scrollViewRef,
|
|
77
|
+
reversed,
|
|
78
|
+
_imperativeVirtualizerRef
|
|
79
|
+
]);
|
|
80
|
+
const handleRenderedIndex = (index)=>{
|
|
81
|
+
if (scrollCallbackRef.current) {
|
|
82
|
+
scrollCallbackRef.current(index);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
var _props_getItemSize1;
|
|
86
|
+
const virtualizerState = (0, _useVirtualizer.useVirtualizer_unstable)({
|
|
87
|
+
...props,
|
|
88
|
+
getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,
|
|
89
|
+
virtualizerLength,
|
|
90
|
+
bufferItems,
|
|
91
|
+
bufferSize,
|
|
92
|
+
scrollViewRef,
|
|
93
|
+
virtualizerContext: contextState,
|
|
94
|
+
imperativeVirtualizerRef: _imperativeVirtualizerRef,
|
|
95
|
+
onRenderedFlaggedIndex: handleRenderedIndex
|
|
96
|
+
});
|
|
97
|
+
const measureObject = (0, _useMeasureList.useMeasureList)(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);
|
|
98
|
+
if (axis === 'horizontal') {
|
|
99
|
+
sizeTrackingArray = measureObject.widthArray;
|
|
100
|
+
} else {
|
|
101
|
+
sizeTrackingArray = measureObject.heightArray;
|
|
102
|
+
}
|
|
103
|
+
if (!props.getItemSize) {
|
|
104
|
+
// Auto-measuring is required
|
|
105
|
+
_react.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{
|
|
106
|
+
if (/*#__PURE__*/ _react.isValidElement(child)) {
|
|
107
|
+
virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ _react.createElement(child.type, {
|
|
108
|
+
...child.props,
|
|
109
|
+
key: child.key,
|
|
110
|
+
ref: (element)=>{
|
|
111
|
+
// If a ref exists in props, call it
|
|
112
|
+
if (typeof child.props.ref === 'function') {
|
|
113
|
+
child.props.ref(element);
|
|
114
|
+
} else if (child.props.ref) {
|
|
115
|
+
child.props.ref.current = element;
|
|
116
|
+
}
|
|
117
|
+
if (child.hasOwnProperty('ref')) {
|
|
118
|
+
// We must access this from the child directly, not props (forward ref).
|
|
119
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
120
|
+
const localRef = child === null || child === void 0 ? void 0 : child.ref;
|
|
121
|
+
if (typeof localRef === 'function') {
|
|
122
|
+
localRef(element);
|
|
123
|
+
} else if (localRef) {
|
|
124
|
+
localRef.current = element;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
// Call the auto-measure ref attachment.
|
|
128
|
+
measureObject.createIndexedRef(index)(element);
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
return {
|
|
135
|
+
...virtualizerState,
|
|
136
|
+
components: {
|
|
137
|
+
...virtualizerState.components,
|
|
138
|
+
container: 'div'
|
|
139
|
+
},
|
|
140
|
+
container: _reactutilities.slot.always(props.container, {
|
|
141
|
+
defaultProps: {
|
|
142
|
+
ref: scrollViewRef
|
|
143
|
+
},
|
|
144
|
+
elementType: 'div'
|
|
145
|
+
})
|
|
146
|
+
};
|
|
147
|
+
}
|
package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useVirtualizerScrollViewDynamic.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport { useDynamicVirtualizerMeasure } from '../../Hooks';\nimport { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';\nimport { useImperativeHandle } from 'react';\nimport { useMeasureList } from '../../hooks/useMeasureList';\nexport function useVirtualizerScrollViewDynamic_unstable(props) {\n const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;\n let sizeTrackingArray = React.useRef(new Array(props.numItems).fill(props.itemSize));\n const getChildSizeAuto = React.useCallback((index)=>{\n if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {\n // Default size for initial state or untracked\n return props.itemSize;\n }\n /* Required to be defined prior to our measure function\n * we use a sizing array ref that we will update post-render\n */ return sizeTrackingArray.current[index];\n }, [\n sizeTrackingArray,\n props.itemSize\n ]);\n var _props_axis, _props_getItemSize, _contextState_contextIndex;\n const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useDynamicVirtualizerMeasure({\n defaultItemSize: props.itemSize,\n direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',\n getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,\n currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,\n numItems: props.numItems\n });\n // Store the virtualizer length as a ref for imperative ref access\n const virtualizerLengthRef = React.useRef(virtualizerLength);\n if (virtualizerLengthRef.current !== virtualizerLength) {\n virtualizerLengthRef.current = virtualizerLength;\n }\n const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef);\n const scrollCallbackRef = React.useRef(null);\n const _imperativeVirtualizerRef = useMergedRefs(React.useRef(null), imperativeVirtualizerRef);\n useImperativeHandle(imperativeRef, ()=>{\n var _imperativeVirtualizerRef_current;\n return {\n scrollTo (index, behavior = 'auto', callback) {\n scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;\n if (_imperativeVirtualizerRef.current) {\n var _imperativeVirtualizerRef_current;\n const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;\n const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;\n _imperativeVirtualizerRef.current.setFlaggedIndex(index);\n scrollToItemDynamic({\n index,\n itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,\n totalSize,\n scrollViewRef,\n axis,\n reversed,\n behavior\n });\n }\n },\n currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,\n virtualizerLength: virtualizerLengthRef\n };\n }, [\n axis,\n scrollViewRef,\n reversed,\n _imperativeVirtualizerRef\n ]);\n const handleRenderedIndex = (index)=>{\n if (scrollCallbackRef.current) {\n scrollCallbackRef.current(index);\n }\n };\n var _props_getItemSize1;\n const virtualizerState = useVirtualizer_unstable({\n ...props,\n getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,\n virtualizerLength,\n bufferItems,\n bufferSize,\n scrollViewRef,\n virtualizerContext: contextState,\n imperativeVirtualizerRef: _imperativeVirtualizerRef,\n onRenderedFlaggedIndex: handleRenderedIndex\n });\n const measureObject = useMeasureList(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);\n if (axis === 'horizontal') {\n sizeTrackingArray = measureObject.widthArray;\n } else {\n sizeTrackingArray = measureObject.heightArray;\n }\n if (!props.getItemSize) {\n // Auto-measuring is required\n React.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{\n if (/*#__PURE__*/ React.isValidElement(child)) {\n virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ React.createElement(child.type, {\n ...child.props,\n key: child.key,\n ref: (element)=>{\n // If a ref exists in props, call it\n if (typeof child.props.ref === 'function') {\n child.props.ref(element);\n } else if (child.props.ref) {\n child.props.ref.current = element;\n }\n if (child.hasOwnProperty('ref')) {\n // We must access this from the child directly, not props (forward ref).\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const localRef = child === null || child === void 0 ? void 0 : child.ref;\n if (typeof localRef === 'function') {\n localRef(element);\n } else if (localRef) {\n localRef.current = element;\n }\n }\n // Call the auto-measure ref attachment.\n measureObject.createIndexedRef(index)(element);\n }\n });\n }\n });\n }\n return {\n ...virtualizerState,\n components: {\n ...virtualizerState.components,\n container: 'div'\n },\n container: slot.always(props.container, {\n defaultProps: {\n ref: scrollViewRef\n },\n elementType: 'div'\n })\n };\n}\n"],"names":["useVirtualizerScrollViewDynamic_unstable","props","contextState","useVirtualizerContextState_unstable","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","sizeTrackingArray","React","useRef","Array","numItems","fill","itemSize","getChildSizeAuto","useCallback","index","current","length","_props_axis","_props_getItemSize","_contextState_contextIndex","virtualizerLength","bufferItems","bufferSize","scrollRef","useDynamicVirtualizerMeasure","defaultItemSize","direction","getItemSize","currentIndex","contextIndex","virtualizerLengthRef","scrollViewRef","useMergedRefs","scrollCallbackRef","_imperativeVirtualizerRef","useImperativeHandle","_imperativeVirtualizerRef_current","scrollTo","behavior","callback","progressiveSizes","totalSize","Math","max","setFlaggedIndex","scrollToItemDynamic","itemSizes","nodeSizes","handleRenderedIndex","_props_getItemSize1","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","measureObject","useMeasureList","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","createElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","slot","always","defaultProps","elementType"],"mappings":"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"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
virtualizerScrollViewDynamicClassNames: function() {
|
|
13
|
+
return virtualizerScrollViewDynamicClassNames;
|
|
14
|
+
},
|
|
15
|
+
useVirtualizerScrollViewDynamicStyles_unstable: function() {
|
|
16
|
+
return useVirtualizerScrollViewDynamicStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _useVirtualizerStylesstyles = require("../Virtualizer/useVirtualizerStyles.styles");
|
|
20
|
+
const _react = require("@griffel/react");
|
|
21
|
+
const virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';
|
|
22
|
+
const virtualizerScrollViewDynamicClassNames = {
|
|
23
|
+
..._useVirtualizerStylesstyles.virtualizerClassNames,
|
|
24
|
+
container: `${virtualizerScrollViewDynamicClassName}__container`
|
|
25
|
+
};
|
|
26
|
+
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
27
|
+
base: {
|
|
28
|
+
mc9l5x: "f22iagw",
|
|
29
|
+
a9b677: "fly5x3f",
|
|
30
|
+
Bqenvij: "f1l02sjl"
|
|
31
|
+
},
|
|
32
|
+
vertical: {
|
|
33
|
+
Beiy3e4: "f1vx9l62",
|
|
34
|
+
Bmxbyg5: "f5zp4f"
|
|
35
|
+
},
|
|
36
|
+
horizontal: {
|
|
37
|
+
Beiy3e4: "f1063pyq",
|
|
38
|
+
B68tc82: "f1oy3dpc"
|
|
39
|
+
},
|
|
40
|
+
verticalReversed: {
|
|
41
|
+
Beiy3e4: "f1gkdon0",
|
|
42
|
+
Bmxbyg5: "f5zp4f"
|
|
43
|
+
},
|
|
44
|
+
horizontalReversed: {
|
|
45
|
+
Beiy3e4: "f1oztnx0",
|
|
46
|
+
B68tc82: "f1oy3dpc"
|
|
47
|
+
}
|
|
48
|
+
}, {
|
|
49
|
+
d: [
|
|
50
|
+
".f22iagw{display:flex;}",
|
|
51
|
+
".fly5x3f{width:100%;}",
|
|
52
|
+
".f1l02sjl{height:100%;}",
|
|
53
|
+
".f1vx9l62{flex-direction:column;}",
|
|
54
|
+
".f5zp4f{overflow-y:auto;}",
|
|
55
|
+
".f1063pyq{flex-direction:row;}",
|
|
56
|
+
".f1oy3dpc{overflow-x:auto;}",
|
|
57
|
+
".f1gkdon0{flex-direction:column-reverse;}",
|
|
58
|
+
".f1oztnx0{flex-direction:row-reverse;}"
|
|
59
|
+
]
|
|
60
|
+
});
|
|
61
|
+
const useVirtualizerScrollViewDynamicStyles_unstable = (state)=>{
|
|
62
|
+
const styles = useStyles();
|
|
63
|
+
// Default virtualizer styles base
|
|
64
|
+
(0, _useVirtualizerStylesstyles.useVirtualizerStyles_unstable)(state);
|
|
65
|
+
const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
|
|
66
|
+
// Add container styles
|
|
67
|
+
state.container.className = (0, _react.mergeClasses)(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);
|
|
68
|
+
return state;
|
|
69
|
+
}; //# sourceMappingURL=useVirtualizerScrollViewDynamicStyles.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useVirtualizerScrollViewDynamicStyles.styles.js"],"sourcesContent":["import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { __styles, mergeClasses } from '@griffel/react';\nconst virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';\nexport const virtualizerScrollViewDynamicClassNames = {\n ...virtualizerClassNames,\n container: `${virtualizerScrollViewDynamicClassName}__container`\n};\nconst useStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n a9b677: \"fly5x3f\",\n Bqenvij: \"f1l02sjl\"\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n Bmxbyg5: \"f5zp4f\"\n },\n horizontal: {\n Beiy3e4: \"f1063pyq\",\n B68tc82: \"f1oy3dpc\"\n },\n verticalReversed: {\n Beiy3e4: \"f1gkdon0\",\n Bmxbyg5: \"f5zp4f\"\n },\n horizontalReversed: {\n Beiy3e4: \"f1oztnx0\",\n B68tc82: \"f1oy3dpc\"\n }\n}, {\n d: [\".f22iagw{display:flex;}\", \".fly5x3f{width:100%;}\", \".f1l02sjl{height:100%;}\", \".f1vx9l62{flex-direction:column;}\", \".f5zp4f{overflow-y:auto;}\", \".f1063pyq{flex-direction:row;}\", \".f1oy3dpc{overflow-x:auto;}\", \".f1gkdon0{flex-direction:column-reverse;}\", \".f1oztnx0{flex-direction:row-reverse;}\"]\n});\n/**\n * Apply styling to the Virtualizer states\n */\nexport const useVirtualizerScrollViewDynamicStyles_unstable = state => {\n const styles = useStyles();\n // Default virtualizer styles base\n useVirtualizerStyles_unstable(state);\n const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;\n // Add container styles\n state.container.className = mergeClasses(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);\n return state;\n};\n//# sourceMappingURL=useVirtualizerScrollViewDynamicStyles.styles.js.map"],"names":["virtualizerScrollViewDynamicClassNames","useVirtualizerScrollViewDynamicStyles_unstable","virtualizerScrollViewDynamicClassName","virtualizerClassNames","container","useStyles","__styles","base","mc9l5x","a9b677","Bqenvij","vertical","Beiy3e4","Bmxbyg5","horizontal","B68tc82","verticalReversed","horizontalReversed","d","state","styles","useVirtualizerStyles_unstable","containerStyle","axis","reversed","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,sCAAsC;eAAtCA;;IAgCAC,8CAA8C;eAA9CA;;;4CAnCwD;uBAC9B;AACvC,MAAMC,wCAAwC;AACvC,MAAMF,yCAAyC;IACpD,GAAGG,iDAAqB;IACxBC,WAAW,CAAC,EAAEF,sCAAsC,WAAW,CAAC;AAClE;AACA,MAAMG,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,YAAY;QACVF,SAAS;QACTG,SAAS;IACX;IACAC,kBAAkB;QAChBJ,SAAS;QACTC,SAAS;IACX;IACAI,oBAAoB;QAClBL,SAAS;QACTG,SAAS;IACX;AACF,GAAG;IACDG,GAAG;QAAC;QAA2B;QAAyB;QAA2B;QAAqC;QAA6B;QAAkC;QAA+B;QAA6C;KAAyC;AAC9S;AAIO,MAAMjB,iDAAiDkB,CAAAA;IAC5D,MAAMC,SAASf;IACf,kCAAkC;IAClCgB,IAAAA,yDAA6B,EAACF;IAC9B,MAAMG,iBAAiBH,MAAMI,IAAI,KAAK,eAAeJ,MAAMK,QAAQ,GAAGJ,OAAOH,kBAAkB,GAAGG,OAAON,UAAU,GAAGK,MAAMK,QAAQ,GAAGJ,OAAOJ,gBAAgB,GAAGI,OAAOT,QAAQ;IAChL,uBAAuB;IACvBQ,MAAMf,SAAS,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,uCAAuCI,SAAS,EAAEgB,OAAOb,IAAI,EAAEe,gBAAgBH,MAAMf,SAAS,CAACqB,SAAS;IACjJ,OAAON;AACT,GACA,wEAAwE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
|
6
|
+
_export_star._(require("./useIntersectionObserver"), exports);
|
|
7
|
+
_export_star._(require("./useVirtualizerMeasure"), exports);
|
|
8
|
+
_export_star._(require("./useDynamicVirtualizerMeasure"), exports);
|
|
9
|
+
_export_star._(require("./useResizeObserverRef"), exports);
|
|
10
|
+
_export_star._(require("./hooks.types"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useIntersectionObserver';\nexport * from './useVirtualizerMeasure';\nexport * from './useDynamicVirtualizerMeasure';\nexport * from './useResizeObserverRef';\nexport * from './hooks.types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useDynamicVirtualizerMeasure", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return useDynamicVirtualizerMeasure;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
+
const _useResizeObserverRef = require("./useResizeObserverRef");
|
|
15
|
+
const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
|
|
16
|
+
const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;
|
|
17
|
+
const indexRef = (0, _react.useRef)(currentIndex);
|
|
18
|
+
indexRef.current = currentIndex;
|
|
19
|
+
const [state, setState] = _react.useState({
|
|
20
|
+
virtualizerLength: 0,
|
|
21
|
+
virtualizerBufferItems: 0,
|
|
22
|
+
virtualizerBufferSize: 0
|
|
23
|
+
});
|
|
24
|
+
const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
|
|
25
|
+
const container = _react.useRef(null);
|
|
26
|
+
const handleScrollResize = _react.useCallback((scrollRef)=>{
|
|
27
|
+
if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
28
|
+
// Error? ignore?
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
if (scrollRef.current !== container.current) {
|
|
32
|
+
container.current = scrollRef.current;
|
|
33
|
+
}
|
|
34
|
+
const containerSize = direction === 'vertical' ? scrollRef.current.getBoundingClientRect().height : scrollRef.current.getBoundingClientRect().width;
|
|
35
|
+
let indexSizer = 0;
|
|
36
|
+
let length = 0;
|
|
37
|
+
while(indexSizer <= containerSize && length < numItems){
|
|
38
|
+
const iItemSize = getItemSize(indexRef.current + length);
|
|
39
|
+
// Increment
|
|
40
|
+
indexSizer += iItemSize;
|
|
41
|
+
length++;
|
|
42
|
+
}
|
|
43
|
+
/*
|
|
44
|
+
* Number of items to append at each end, i.e. 'preload' each side before entering view.
|
|
45
|
+
*/ const bufferItems = Math.max(Math.floor(length / 4), 4);
|
|
46
|
+
/*
|
|
47
|
+
* This is how far we deviate into the bufferItems to detect a redraw.
|
|
48
|
+
*/ const bufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);
|
|
49
|
+
const totalLength = length + bufferItems * 2 + 1;
|
|
50
|
+
setState({
|
|
51
|
+
virtualizerLength: totalLength,
|
|
52
|
+
virtualizerBufferSize: bufferSize,
|
|
53
|
+
virtualizerBufferItems: bufferItems
|
|
54
|
+
});
|
|
55
|
+
}, [
|
|
56
|
+
defaultItemSize,
|
|
57
|
+
direction,
|
|
58
|
+
getItemSize,
|
|
59
|
+
numItems
|
|
60
|
+
]);
|
|
61
|
+
const resizeCallback = _react.useCallback((_entries, _observer, scrollRef)=>{
|
|
62
|
+
if (scrollRef) {
|
|
63
|
+
handleScrollResize(scrollRef);
|
|
64
|
+
}
|
|
65
|
+
}, [
|
|
66
|
+
handleScrollResize
|
|
67
|
+
]);
|
|
68
|
+
const scrollRef = (0, _useResizeObserverRef.useResizeObserverRef_unstable)(resizeCallback);
|
|
69
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
70
|
+
var _container_current, _container_current1;
|
|
71
|
+
if (!container.current) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const containerSize = direction === 'vertical' ? ((_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().height) * 1.5 : ((_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.getBoundingClientRect().width) * 1.5;
|
|
75
|
+
let couldBeSmaller = false;
|
|
76
|
+
let recheckTotal = 0;
|
|
77
|
+
for(let i = currentIndex; i < currentIndex + virtualizerLength; i++){
|
|
78
|
+
const newItemSize = getItemSize(i);
|
|
79
|
+
recheckTotal += newItemSize;
|
|
80
|
+
const newLength = i - currentIndex;
|
|
81
|
+
const bufferItems = Math.max(Math.floor(newLength / 4), 2);
|
|
82
|
+
const totalNewLength = newLength + bufferItems * 2 + 4;
|
|
83
|
+
const compareLengths = totalNewLength < virtualizerLength;
|
|
84
|
+
if (recheckTotal > containerSize && compareLengths) {
|
|
85
|
+
couldBeSmaller = true;
|
|
86
|
+
break;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
// Check if the render has caused us to need a re-calc of virtualizer length
|
|
90
|
+
if (recheckTotal < containerSize || couldBeSmaller) {
|
|
91
|
+
handleScrollResize(container);
|
|
92
|
+
}
|
|
93
|
+
}, [
|
|
94
|
+
getItemSize,
|
|
95
|
+
currentIndex,
|
|
96
|
+
direction,
|
|
97
|
+
virtualizerLength,
|
|
98
|
+
resizeCallback,
|
|
99
|
+
handleScrollResize
|
|
100
|
+
]);
|
|
101
|
+
return {
|
|
102
|
+
virtualizerLength,
|
|
103
|
+
bufferItems: virtualizerBufferItems,
|
|
104
|
+
bufferSize: virtualizerBufferSize,
|
|
105
|
+
scrollRef
|
|
106
|
+
};
|
|
107
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useDynamicVirtualizerMeasure.js"],"sourcesContent":["import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useResizeObserverRef_unstable } from './useResizeObserverRef';\nimport { useRef } from 'react';\n/**\n * React hook that measures virtualized space dynamically to ensure optimized virtualization length.\n */ export const useDynamicVirtualizerMeasure = (virtualizerProps)=>{\n const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;\n const indexRef = useRef(currentIndex);\n indexRef.current = currentIndex;\n const [state, setState] = React.useState({\n virtualizerLength: 0,\n virtualizerBufferItems: 0,\n virtualizerBufferSize: 0\n });\n const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;\n const container = React.useRef(null);\n const handleScrollResize = React.useCallback((scrollRef)=>{\n if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {\n // Error? ignore?\n return;\n }\n if (scrollRef.current !== container.current) {\n container.current = scrollRef.current;\n }\n const containerSize = direction === 'vertical' ? scrollRef.current.getBoundingClientRect().height : scrollRef.current.getBoundingClientRect().width;\n let indexSizer = 0;\n let length = 0;\n while(indexSizer <= containerSize && length < numItems){\n const iItemSize = getItemSize(indexRef.current + length);\n // Increment\n indexSizer += iItemSize;\n length++;\n }\n /*\n * Number of items to append at each end, i.e. 'preload' each side before entering view.\n */ const bufferItems = Math.max(Math.floor(length / 4), 4);\n /*\n * This is how far we deviate into the bufferItems to detect a redraw.\n */ const bufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);\n const totalLength = length + bufferItems * 2 + 1;\n setState({\n virtualizerLength: totalLength,\n virtualizerBufferSize: bufferSize,\n virtualizerBufferItems: bufferItems\n });\n }, [\n defaultItemSize,\n direction,\n getItemSize,\n numItems\n ]);\n const resizeCallback = React.useCallback((_entries, _observer, scrollRef)=>{\n if (scrollRef) {\n handleScrollResize(scrollRef);\n }\n }, [\n handleScrollResize\n ]);\n const scrollRef = useResizeObserverRef_unstable(resizeCallback);\n useIsomorphicLayoutEffect(()=>{\n var _container_current, _container_current1;\n if (!container.current) {\n return;\n }\n const containerSize = direction === 'vertical' ? ((_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().height) * 1.5 : ((_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.getBoundingClientRect().width) * 1.5;\n let couldBeSmaller = false;\n let recheckTotal = 0;\n for(let i = currentIndex; i < currentIndex + virtualizerLength; i++){\n const newItemSize = getItemSize(i);\n recheckTotal += newItemSize;\n const newLength = i - currentIndex;\n const bufferItems = Math.max(Math.floor(newLength / 4), 2);\n const totalNewLength = newLength + bufferItems * 2 + 4;\n const compareLengths = totalNewLength < virtualizerLength;\n if (recheckTotal > containerSize && compareLengths) {\n couldBeSmaller = true;\n break;\n }\n }\n // Check if the render has caused us to need a re-calc of virtualizer length\n if (recheckTotal < containerSize || couldBeSmaller) {\n handleScrollResize(container);\n }\n }, [\n getItemSize,\n currentIndex,\n direction,\n virtualizerLength,\n resizeCallback,\n handleScrollResize\n ]);\n return {\n virtualizerLength,\n bufferItems: virtualizerBufferItems,\n bufferSize: virtualizerBufferSize,\n scrollRef\n };\n};\n"],"names":["useDynamicVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","numItems","getItemSize","currentIndex","indexRef","useRef","current","state","setState","React","useState","virtualizerLength","virtualizerBufferItems","virtualizerBufferSize","container","handleScrollResize","useCallback","scrollRef","containerSize","getBoundingClientRect","height","width","indexSizer","length","iItemSize","bufferItems","Math","max","floor","bufferSize","totalLength","resizeCallback","_entries","_observer","useResizeObserverRef_unstable","useIsomorphicLayoutEffect","_container_current","_container_current1","couldBeSmaller","recheckTotal","i","newItemSize","newLength","totalNewLength","compareLengths"],"mappings":"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"}
|
|
@@ -1,59 +1,126 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
* enough to trigger a callback).
|
|
19
|
-
* @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to
|
|
20
|
-
* update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.
|
|
21
|
-
*/
|
|
22
|
-
const useIntersectionObserver = (callback, options) => {
|
|
23
|
-
// export const useIntersectionObserver = (
|
|
24
|
-
// callback: IntersectionObserverCallback,
|
|
25
|
-
// options?: IntersectionObserverInit,
|
|
26
|
-
// ): [
|
|
27
|
-
// Dispatch<SetStateAction<Element[] | undefined>>,
|
|
28
|
-
// Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,
|
|
29
|
-
// MutableRefObject<IntersectionObserver | undefined>,
|
|
30
|
-
// ] => {
|
|
31
|
-
const observer = useRef();
|
|
32
|
-
const [observerList, setObserverList] = useState();
|
|
33
|
-
const [observerInit, setObserverInit] = useState(options);
|
|
34
|
-
// Observer elements in passed in list and clean up previous list
|
|
35
|
-
// This effect is only triggered when observerList is updated
|
|
36
|
-
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
|
37
|
-
observer.current = new IntersectionObserver(callback, observerInit);
|
|
38
|
-
// If we have an instance of IO and a list with elements, observer the elements
|
|
39
|
-
if (observer.current && observerList && observerList.length > 0) {
|
|
40
|
-
observerList.forEach(element => {
|
|
41
|
-
var _a;
|
|
42
|
-
(_a = observer.current) === null || _a === void 0 ? void 0 : _a.observe(element);
|
|
43
|
-
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
getRTLRootMargin: function() {
|
|
13
|
+
return getRTLRootMargin;
|
|
14
|
+
},
|
|
15
|
+
useIntersectionObserver: function() {
|
|
16
|
+
return useIntersectionObserver;
|
|
44
17
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
18
|
+
});
|
|
19
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
20
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
21
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
22
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
23
|
+
const _useMutationObserver = require("./useMutationObserver");
|
|
24
|
+
const { useCallback, useState, useRef } = _react;
|
|
25
|
+
const getRTLRootMargin = (ltrRootMargin, target)=>{
|
|
26
|
+
if (target) {
|
|
27
|
+
// get the computed dir for the target element
|
|
28
|
+
const newDir = getComputedStyle(target).direction;
|
|
29
|
+
// If we're in rtl reading direction, we might need to flip the margins on the left/right sides
|
|
30
|
+
if (newDir === 'rtl') {
|
|
31
|
+
let newMargin = ltrRootMargin;
|
|
32
|
+
const splitMargins = ltrRootMargin.split(' ');
|
|
33
|
+
// We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.
|
|
34
|
+
if (splitMargins.length === 4) {
|
|
35
|
+
newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;
|
|
36
|
+
}
|
|
37
|
+
return newMargin;
|
|
38
|
+
} else {
|
|
39
|
+
return ltrRootMargin;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return ltrRootMargin;
|
|
43
|
+
};
|
|
44
|
+
const useIntersectionObserver = (callback, options)=>{
|
|
45
|
+
const observer = useRef();
|
|
46
|
+
const [observerList, setObserverList] = useState();
|
|
47
|
+
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
48
|
+
var _options_rootMargin;
|
|
49
|
+
// set the initial init with corrected margins based on the observed root's calculated reading direction.
|
|
50
|
+
const [observerInit, setObserverInit] = useState(options && {
|
|
51
|
+
...options,
|
|
52
|
+
rootMargin: getRTLRootMargin((_options_rootMargin = options.rootMargin) !== null && _options_rootMargin !== void 0 ? _options_rootMargin : '0px', options.root)
|
|
53
|
+
});
|
|
54
|
+
var _options_rootMargin1;
|
|
55
|
+
// We have to assume that any values passed in for rootMargin by the consuming app are ltr values. As such we will store the ltr value.
|
|
56
|
+
const ltrRootMargin = useRef((_options_rootMargin1 = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _options_rootMargin1 !== void 0 ? _options_rootMargin1 : '0px');
|
|
57
|
+
// Callback function to execute when mutations are observed
|
|
58
|
+
const mutationObserverCallback = useCallback((mutationList)=>{
|
|
59
|
+
for (const mutation of mutationList){
|
|
60
|
+
// Ensuring that the right attribute is being observed and that the root is within the tree of the element being mutated.
|
|
61
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'dir' && (options === null || options === void 0 ? void 0 : options.root) && mutation.target.contains(options === null || options === void 0 ? void 0 : options.root)) {
|
|
62
|
+
setObserverInit({
|
|
63
|
+
...observerInit,
|
|
64
|
+
rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}, [
|
|
69
|
+
ltrRootMargin,
|
|
70
|
+
observerInit,
|
|
71
|
+
options === null || options === void 0 ? void 0 : options.root
|
|
72
|
+
]);
|
|
73
|
+
// Mutation observer for dir attribute changes in the document
|
|
74
|
+
(0, _useMutationObserver.useMutationObserver)(targetDocument, mutationObserverCallback, {
|
|
75
|
+
attributes: true,
|
|
76
|
+
subtree: true,
|
|
77
|
+
attributeFilter: [
|
|
78
|
+
'dir'
|
|
79
|
+
]
|
|
80
|
+
});
|
|
81
|
+
// Observer elements in passed in list and clean up previous list
|
|
82
|
+
// This effect is only triggered when observerList is updated
|
|
83
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
84
|
+
observer.current = new IntersectionObserver(callback, {
|
|
85
|
+
...observerInit,
|
|
86
|
+
rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)
|
|
87
|
+
});
|
|
88
|
+
observer.current = new IntersectionObserver(callback, observerInit);
|
|
89
|
+
// If we have an instance of IO and a list with elements, observer the elements
|
|
90
|
+
if (observer.current && observerList && observerList.length > 0) {
|
|
91
|
+
observerList.forEach((element)=>{
|
|
92
|
+
var _observer_current;
|
|
93
|
+
(_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(element);
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
// clean up previous elements being listened to
|
|
97
|
+
return ()=>{
|
|
98
|
+
if (observer.current) {
|
|
99
|
+
observer.current.disconnect();
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
}, [
|
|
103
|
+
observerList,
|
|
104
|
+
observerInit,
|
|
105
|
+
callback
|
|
106
|
+
]);
|
|
107
|
+
// Do not use internally, we need to track external settings only here
|
|
108
|
+
const setObserverInitExternal = useCallback((newInit)=>{
|
|
109
|
+
var _newInit_rootMargin;
|
|
110
|
+
// Since we know this is coming from consumers, we can store this value as LTR somewhat safely.
|
|
111
|
+
ltrRootMargin.current = (_newInit_rootMargin = newInit === null || newInit === void 0 ? void 0 : newInit.rootMargin) !== null && _newInit_rootMargin !== void 0 ? _newInit_rootMargin : '0px';
|
|
112
|
+
// Call the internal setter to update the value and ensure if our calculated direction is rtl, we flip the margin
|
|
113
|
+
setObserverInit({
|
|
114
|
+
...newInit,
|
|
115
|
+
rootMargin: getRTLRootMargin(ltrRootMargin.current, newInit === null || newInit === void 0 ? void 0 : newInit.root)
|
|
116
|
+
});
|
|
117
|
+
}, [
|
|
118
|
+
ltrRootMargin,
|
|
119
|
+
setObserverInit
|
|
120
|
+
]);
|
|
121
|
+
return {
|
|
122
|
+
setObserverList,
|
|
123
|
+
setObserverInit: setObserverInitExternal,
|
|
124
|
+
observer
|
|
50
125
|
};
|
|
51
|
-
}, [observerList, observerInit, callback]);
|
|
52
|
-
return {
|
|
53
|
-
setObserverList,
|
|
54
|
-
setObserverInit,
|
|
55
|
-
observer
|
|
56
|
-
};
|
|
57
126
|
};
|
|
58
|
-
exports.useIntersectionObserver = useIntersectionObserver;
|
|
59
|
-
//# sourceMappingURL=useIntersectionObserver.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AACA;AACA;AAEA,MAAM;EAAEA,QAAQ;EAAEC;AAAM,CAAE,GAAGC,KAAK;AAElC;;;;;;;;;AAUO,MAAMC,uBAAuB,GAAG,CACrCC,QAAsC,EACtCC,OAAkC,KAKhC;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMC,QAAQ,GAAGL,MAAM,EAAwB;EAC/C,MAAM,CAACM,YAAY,EAAEC,eAAe,CAAC,GAAGR,QAAQ,EAAa;EAC7D,MAAM,CAACS,YAAY,EAAEC,eAAe,CAAC,GAAGV,QAAQ,CAAuCK,OAAO,CAAC;EAE/F;EACA;EACAM,2CAAyB,CAAC,MAAK;IAC7BL,QAAQ,CAACM,OAAO,GAAG,IAAIC,oBAAoB,CAACT,QAAQ,EAAEK,YAAY,CAAC;IAEnE;IACA,IAAIH,QAAQ,CAACM,OAAO,IAAIL,YAAY,IAAIA,YAAY,CAACO,MAAM,GAAG,CAAC,EAAE;MAC/DP,YAAY,CAACQ,OAAO,CAACC,OAAO,IAAG;;QAC7B,cAAQ,CAACJ,OAAO,0CAAEK,OAAO,CAACD,OAAO,CAAC;MACpC,CAAC,CAAC;;IAGJ;IACA,OAAO,MAAK;MACV,IAAIV,QAAQ,CAACM,OAAO,EAAE;QACpBN,QAAQ,CAACM,OAAO,CAACM,UAAU,EAAE;;IAEjC,CAAC;EACH,CAAC,EAAE,CAACX,YAAY,EAAEE,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAE1C,OAAO;IAAEI,eAAe;IAAEE,eAAe;IAAEJ;EAAQ,CAAE;AACvD,CAAC;AAzCYa,+BAAuB","names":["useState","useRef","React","useIntersectionObserver","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","react_utilities_1","current","IntersectionObserver","length","forEach","element","observe","disconnect","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import type { Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nconst { useState, useRef } = React;\n\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */\n\nexport const useIntersectionObserver = (\n callback: IntersectionObserverCallback,\n options?: IntersectionObserverInit,\n): {\n setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;\n setObserverInit: Dispatch<SetStateAction<IntersectionObserverInit | undefined>>;\n observer: MutableRefObject<IntersectionObserver | undefined>;\n} => {\n // export const useIntersectionObserver = (\n // callback: IntersectionObserverCallback,\n // options?: IntersectionObserverInit,\n // ): [\n // Dispatch<SetStateAction<Element[] | undefined>>,\n // Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,\n // MutableRefObject<IntersectionObserver | undefined>,\n // ] => {\n const observer = useRef<IntersectionObserver>();\n const [observerList, setObserverList] = useState<Element[]>();\n const [observerInit, setObserverInit] = useState<IntersectionObserverInit | undefined>(options);\n\n // Observer elements in passed in list and clean up previous list\n // This effect is only triggered when observerList is updated\n useIsomorphicLayoutEffect(() => {\n observer.current = new IntersectionObserver(callback, observerInit);\n\n // If we have an instance of IO and a list with elements, observer the elements\n if (observer.current && observerList && observerList.length > 0) {\n observerList.forEach(element => {\n observer.current?.observe(element);\n });\n }\n\n // clean up previous elements being listened to\n return () => {\n if (observer.current) {\n observer.current.disconnect();\n }\n };\n }, [observerList, observerInit, callback]);\n\n return { setObserverList, setObserverInit, observer };\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["useIntersectionObserver.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nconst { useCallback, useState, useRef } = React;\nimport { useMutationObserver } from './useMutationObserver';\n/**\n * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.\n * @param ltrRootMargin the margin to be processed and flipped if required\n * @param target target element that will have its current reading direction determined\n * @returns the corrected rootMargin (if it was necessary to correct)\n */ export const getRTLRootMargin = (ltrRootMargin, target)=>{\n if (target) {\n // get the computed dir for the target element\n const newDir = getComputedStyle(target).direction;\n // If we're in rtl reading direction, we might need to flip the margins on the left/right sides\n if (newDir === 'rtl') {\n let newMargin = ltrRootMargin;\n const splitMargins = ltrRootMargin.split(' ');\n // We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.\n if (splitMargins.length === 4) {\n newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;\n }\n return newMargin;\n } else {\n return ltrRootMargin;\n }\n }\n return ltrRootMargin;\n};\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */ export const useIntersectionObserver = (callback, options)=>{\n const observer = useRef();\n const [observerList, setObserverList] = useState();\n const { targetDocument } = useFluent();\n var _options_rootMargin;\n // set the initial init with corrected margins based on the observed root's calculated reading direction.\n const [observerInit, setObserverInit] = useState(options && {\n ...options,\n rootMargin: getRTLRootMargin((_options_rootMargin = options.rootMargin) !== null && _options_rootMargin !== void 0 ? _options_rootMargin : '0px', options.root)\n });\n var _options_rootMargin1;\n // We have to assume that any values passed in for rootMargin by the consuming app are ltr values. As such we will store the ltr value.\n const ltrRootMargin = useRef((_options_rootMargin1 = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _options_rootMargin1 !== void 0 ? _options_rootMargin1 : '0px');\n // Callback function to execute when mutations are observed\n const mutationObserverCallback = useCallback((mutationList)=>{\n for (const mutation of mutationList){\n // Ensuring that the right attribute is being observed and that the root is within the tree of the element being mutated.\n if (mutation.type === 'attributes' && mutation.attributeName === 'dir' && (options === null || options === void 0 ? void 0 : options.root) && mutation.target.contains(options === null || options === void 0 ? void 0 : options.root)) {\n setObserverInit({\n ...observerInit,\n rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)\n });\n }\n }\n }, [\n ltrRootMargin,\n observerInit,\n options === null || options === void 0 ? void 0 : options.root\n ]);\n // Mutation observer for dir attribute changes in the document\n useMutationObserver(targetDocument, mutationObserverCallback, {\n attributes: true,\n subtree: true,\n attributeFilter: [\n 'dir'\n ]\n });\n // Observer elements in passed in list and clean up previous list\n // This effect is only triggered when observerList is updated\n useIsomorphicLayoutEffect(()=>{\n observer.current = new IntersectionObserver(callback, {\n ...observerInit,\n rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)\n });\n observer.current = new IntersectionObserver(callback, observerInit);\n // If we have an instance of IO and a list with elements, observer the elements\n if (observer.current && observerList && observerList.length > 0) {\n observerList.forEach((element)=>{\n var _observer_current;\n (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(element);\n });\n }\n // clean up previous elements being listened to\n return ()=>{\n if (observer.current) {\n observer.current.disconnect();\n }\n };\n }, [\n observerList,\n observerInit,\n callback\n ]);\n // Do not use internally, we need to track external settings only here\n const setObserverInitExternal = useCallback((newInit)=>{\n var _newInit_rootMargin;\n // Since we know this is coming from consumers, we can store this value as LTR somewhat safely.\n ltrRootMargin.current = (_newInit_rootMargin = newInit === null || newInit === void 0 ? void 0 : newInit.rootMargin) !== null && _newInit_rootMargin !== void 0 ? _newInit_rootMargin : '0px';\n // Call the internal setter to update the value and ensure if our calculated direction is rtl, we flip the margin\n setObserverInit({\n ...newInit,\n rootMargin: getRTLRootMargin(ltrRootMargin.current, newInit === null || newInit === void 0 ? void 0 : newInit.root)\n });\n }, [\n ltrRootMargin,\n setObserverInit\n ]);\n return {\n setObserverList,\n setObserverInit: setObserverInitExternal,\n observer\n };\n};\n"],"names":["getRTLRootMargin","useIntersectionObserver","useCallback","useState","useRef","React","ltrRootMargin","target","newDir","getComputedStyle","direction","newMargin","splitMargins","split","length","callback","options","observer","observerList","setObserverList","targetDocument","useFluent","_options_rootMargin","observerInit","setObserverInit","rootMargin","root","_options_rootMargin1","mutationObserverCallback","mutationList","mutation","type","attributeName","contains","current","useMutationObserver","attributes","subtree","attributeFilter","useIsomorphicLayoutEffect","IntersectionObserver","forEach","element","_observer_current","observe","disconnect","setObserverInitExternal","newInit","_newInit_rootMargin"],"mappings":"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"}
|