@react-aria/virtualizer 3.9.11-nightly.4555 → 3.9.11-nightly.4560
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 +180 -0
- package/dist/ScrollView.main.js.map +1 -0
- package/dist/ScrollView.mjs +171 -0
- package/dist/ScrollView.module.js +171 -0
- package/dist/ScrollView.module.js.map +1 -0
- package/dist/Virtualizer.main.js +210 -0
- package/dist/Virtualizer.main.js.map +1 -0
- package/dist/Virtualizer.mjs +200 -0
- package/dist/Virtualizer.module.js +200 -0
- package/dist/Virtualizer.module.js.map +1 -0
- package/dist/VirtualizerItem.main.js +86 -0
- package/dist/VirtualizerItem.main.js.map +1 -0
- package/dist/VirtualizerItem.mjs +76 -0
- package/dist/VirtualizerItem.module.js +76 -0
- package/dist/VirtualizerItem.module.js.map +1 -0
- package/dist/import.mjs +5 -535
- package/dist/main.js +14 -548
- package/dist/main.js.map +1 -1
- package/dist/module.js +5 -535
- package/dist/module.js.map +1 -1
- package/dist/useVirtualizerItem.main.js +51 -0
- package/dist/useVirtualizerItem.main.js.map +1 -0
- package/dist/useVirtualizerItem.mjs +46 -0
- package/dist/useVirtualizerItem.module.js +46 -0
- package/dist/useVirtualizerItem.module.js.map +1 -0
- package/dist/utils.main.js +80 -0
- package/dist/utils.main.js.map +1 -0
- package/dist/utils.mjs +73 -0
- package/dist/utils.module.js +73 -0
- package/dist/utils.module.js.map +1 -0
- package/package.json +7 -7
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
var $efdd61e59e023a1d$exports = require("./utils.main.js");
|
|
2
|
+
var $kvIfm$reactdom = require("react-dom");
|
|
3
|
+
var $kvIfm$react = require("react");
|
|
4
|
+
var $kvIfm$reactstatelyvirtualizer = require("@react-stately/virtualizer");
|
|
5
|
+
var $kvIfm$reactariautils = require("@react-aria/utils");
|
|
6
|
+
var $kvIfm$reactariai18n = require("@react-aria/i18n");
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
function $parcel$interopDefault(a) {
|
|
10
|
+
return a && a.__esModule ? a.default : a;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function $parcel$export(e, n, v, s) {
|
|
14
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
$parcel$export(module.exports, "ScrollView", () => $00ca8c0b29e3e07c$export$5665e3d6be6adea);
|
|
18
|
+
/*
|
|
19
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
21
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
22
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
23
|
+
*
|
|
24
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
25
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
26
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
27
|
+
* governing permissions and limitations under the License.
|
|
28
|
+
*/ // @ts-ignore
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
let $00ca8c0b29e3e07c$var$isOldReact = (0, ($parcel$interopDefault($kvIfm$react))).version.startsWith("16.") || (0, ($parcel$interopDefault($kvIfm$react))).version.startsWith("17.");
|
|
36
|
+
function $00ca8c0b29e3e07c$var$ScrollView(props, ref) {
|
|
37
|
+
let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, children: children, innerStyle: innerStyle, sizeToFit: sizeToFit, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = "both", ...otherProps } = props;
|
|
38
|
+
let defaultRef = (0, $kvIfm$react.useRef)();
|
|
39
|
+
ref = ref || defaultRef;
|
|
40
|
+
let state = (0, $kvIfm$react.useRef)({
|
|
41
|
+
scrollTop: 0,
|
|
42
|
+
scrollLeft: 0,
|
|
43
|
+
scrollEndTime: 0,
|
|
44
|
+
scrollTimeout: null,
|
|
45
|
+
width: 0,
|
|
46
|
+
height: 0,
|
|
47
|
+
isScrolling: false
|
|
48
|
+
}).current;
|
|
49
|
+
let { direction: direction } = (0, $kvIfm$reactariai18n.useLocale)();
|
|
50
|
+
let [isScrolling, setScrolling] = (0, $kvIfm$react.useState)(false);
|
|
51
|
+
let onScroll = (0, $kvIfm$react.useCallback)((e)=>{
|
|
52
|
+
if (e.target !== e.currentTarget) return;
|
|
53
|
+
if (props.onScroll) props.onScroll(e);
|
|
54
|
+
(0, $kvIfm$reactdom.flushSync)(()=>{
|
|
55
|
+
let scrollTop = e.currentTarget.scrollTop;
|
|
56
|
+
let scrollLeft = (0, $efdd61e59e023a1d$exports.getScrollLeft)(e.currentTarget, direction);
|
|
57
|
+
// Prevent rubber band scrolling from shaking when scrolling out of bounds
|
|
58
|
+
state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
|
|
59
|
+
state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
|
|
60
|
+
onVisibleRectChange(new (0, $kvIfm$reactstatelyvirtualizer.Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
|
|
61
|
+
if (!state.isScrolling) {
|
|
62
|
+
state.isScrolling = true;
|
|
63
|
+
setScrolling(true);
|
|
64
|
+
if (onScrollStart) onScrollStart();
|
|
65
|
+
}
|
|
66
|
+
// So we don't constantly call clearTimeout and setTimeout,
|
|
67
|
+
// keep track of the current timeout time and only reschedule
|
|
68
|
+
// the timer when it is getting close.
|
|
69
|
+
let now = Date.now();
|
|
70
|
+
if (state.scrollEndTime <= now + 50) {
|
|
71
|
+
state.scrollEndTime = now + 300;
|
|
72
|
+
clearTimeout(state.scrollTimeout);
|
|
73
|
+
state.scrollTimeout = setTimeout(()=>{
|
|
74
|
+
state.isScrolling = false;
|
|
75
|
+
setScrolling(false);
|
|
76
|
+
state.scrollTimeout = null;
|
|
77
|
+
if (onScrollEnd) onScrollEnd();
|
|
78
|
+
}, 300);
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}, [
|
|
82
|
+
props,
|
|
83
|
+
direction,
|
|
84
|
+
state,
|
|
85
|
+
contentSize,
|
|
86
|
+
onVisibleRectChange,
|
|
87
|
+
onScrollStart,
|
|
88
|
+
onScrollEnd
|
|
89
|
+
]);
|
|
90
|
+
// eslint-disable-next-line arrow-body-style
|
|
91
|
+
(0, $kvIfm$react.useEffect)(()=>{
|
|
92
|
+
return ()=>{
|
|
93
|
+
clearTimeout(state.scrollTimeout);
|
|
94
|
+
};
|
|
95
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
96
|
+
}, []);
|
|
97
|
+
let updateSize = (0, $kvIfm$react.useCallback)(()=>{
|
|
98
|
+
let dom = ref.current;
|
|
99
|
+
if (!dom) return;
|
|
100
|
+
let isTestEnv = false;
|
|
101
|
+
let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes("clientWidth");
|
|
102
|
+
let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes("clientHeight");
|
|
103
|
+
let w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;
|
|
104
|
+
let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.clientHeight;
|
|
105
|
+
if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {
|
|
106
|
+
if (sizeToFit === "width") w = Math.min(w, contentSize.width);
|
|
107
|
+
else if (sizeToFit === "height") h = Math.min(h, contentSize.height);
|
|
108
|
+
}
|
|
109
|
+
if (state.width !== w || state.height !== h) {
|
|
110
|
+
state.width = w;
|
|
111
|
+
state.height = h;
|
|
112
|
+
onVisibleRectChange(new (0, $kvIfm$reactstatelyvirtualizer.Rect)(state.scrollLeft, state.scrollTop, w, h));
|
|
113
|
+
}
|
|
114
|
+
}, [
|
|
115
|
+
onVisibleRectChange,
|
|
116
|
+
ref,
|
|
117
|
+
state,
|
|
118
|
+
sizeToFit,
|
|
119
|
+
contentSize
|
|
120
|
+
]);
|
|
121
|
+
(0, $kvIfm$reactariautils.useLayoutEffect)(()=>{
|
|
122
|
+
updateSize();
|
|
123
|
+
}, [
|
|
124
|
+
updateSize
|
|
125
|
+
]);
|
|
126
|
+
let raf = (0, $kvIfm$react.useRef)();
|
|
127
|
+
let onResize = ()=>{
|
|
128
|
+
var _raf;
|
|
129
|
+
var _current;
|
|
130
|
+
if ($00ca8c0b29e3e07c$var$isOldReact) (_current = (_raf = raf).current) !== null && _current !== void 0 ? _current : _raf.current = requestAnimationFrame(()=>{
|
|
131
|
+
updateSize();
|
|
132
|
+
raf.current = null;
|
|
133
|
+
});
|
|
134
|
+
else updateSize();
|
|
135
|
+
};
|
|
136
|
+
(0, $kvIfm$reactariautils.useResizeObserver)({
|
|
137
|
+
ref: ref,
|
|
138
|
+
onResize: onResize
|
|
139
|
+
});
|
|
140
|
+
(0, $kvIfm$react.useEffect)(()=>{
|
|
141
|
+
return ()=>{
|
|
142
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
143
|
+
};
|
|
144
|
+
}, []);
|
|
145
|
+
let style = {
|
|
146
|
+
// Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
|
|
147
|
+
padding: 0,
|
|
148
|
+
...otherProps.style
|
|
149
|
+
};
|
|
150
|
+
if (scrollDirection === "horizontal") {
|
|
151
|
+
style.overflowX = "auto";
|
|
152
|
+
style.overflowY = "hidden";
|
|
153
|
+
} else if (scrollDirection === "vertical" || contentSize.width === state.width) {
|
|
154
|
+
// Set overflow-x: hidden if content size is equal to the width of the scroll view.
|
|
155
|
+
// This prevents horizontal scrollbars from flickering during resizing due to resize observer
|
|
156
|
+
// firing slower than the frame rate, which may cause an infinite re-render loop.
|
|
157
|
+
style.overflowY = "auto";
|
|
158
|
+
style.overflowX = "hidden";
|
|
159
|
+
} else style.overflow = "auto";
|
|
160
|
+
innerStyle = {
|
|
161
|
+
width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
|
|
162
|
+
height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
|
|
163
|
+
pointerEvents: isScrolling ? "none" : "auto",
|
|
164
|
+
position: "relative",
|
|
165
|
+
...innerStyle
|
|
166
|
+
};
|
|
167
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", {
|
|
168
|
+
...otherProps,
|
|
169
|
+
style: style,
|
|
170
|
+
ref: ref,
|
|
171
|
+
onScroll: onScroll
|
|
172
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", {
|
|
173
|
+
role: "presentation",
|
|
174
|
+
style: innerStyle
|
|
175
|
+
}, children));
|
|
176
|
+
}
|
|
177
|
+
const $00ca8c0b29e3e07c$export$5665e3d6be6adea = /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).forwardRef($00ca8c0b29e3e07c$var$ScrollView);
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
//# sourceMappingURL=ScrollView.main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,aAAa;;;;;;;AA4Bb,IAAI,mCAAa,CAAA,GAAA,sCAAI,EAAE,OAAO,CAAC,UAAU,CAAC,UAAU,CAAA,GAAA,sCAAI,EAAE,OAAO,CAAC,UAAU,CAAC;AAE7E,SAAS,iCAAW,KAAsB,EAAE,GAA8B;IACxE,IAAI,eACF,WAAW,uBACX,mBAAmB,YACnB,QAAQ,cACR,UAAU,aACV,SAAS,iBACT,aAAa,eACb,WAAW,mBACX,kBAAkB,QAClB,GAAG,YACJ,GAAG;IAEJ,IAAI,aAAa,CAAA,GAAA,mBAAK;IACtB,MAAM,OAAO;IACb,IAAI,QAAQ,CAAA,GAAA,mBAAK,EAAE;QACjB,WAAW;QACX,YAAY;QACZ,eAAe;QACf,eAAe;QACf,OAAO;QACP,QAAQ;QACR,aAAa;IACf,GAAG,OAAO;IACV,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,IAAI,CAAC,aAAa,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC3C,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC1B,IAAI,EAAE,MAAM,KAAK,EAAE,aAAa,EAC9B;QAGF,IAAI,MAAM,QAAQ,EAChB,MAAM,QAAQ,CAAC;QAGjB,CAAA,GAAA,yBAAQ,EAAE;YACR,IAAI,YAAY,EAAE,aAAa,CAAC,SAAS;YACzC,IAAI,aAAa,CAAA,GAAA,uCAAY,EAAE,EAAE,aAAa,EAAE;YAEhD,0EAA0E;YAC1E,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,WAAW,YAAY,MAAM,GAAG,MAAM,MAAM;YACnF,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,YAAY,YAAY,KAAK,GAAG,MAAM,KAAK;YAEnF,oBAAoB,IAAI,CAAA,GAAA,mCAAG,EAAE,MAAM,UAAU,EAAE,MAAM,SAAS,EAAE,MAAM,KAAK,EAAE,MAAM,MAAM;YAEzF,IAAI,CAAC,MAAM,WAAW,EAAE;gBACtB,MAAM,WAAW,GAAG;gBACpB,aAAa;gBAEb,IAAI,eACF;YAEJ;YAEA,2DAA2D;YAC3D,6DAA6D;YAC7D,sCAAsC;YACtC,IAAI,MAAM,KAAK,GAAG;YAClB,IAAI,MAAM,aAAa,IAAI,MAAM,IAAI;gBACnC,MAAM,aAAa,GAAG,MAAM;gBAE5B,aAAa,MAAM,aAAa;gBAChC,MAAM,aAAa,GAAG,WAAW;oBAC/B,MAAM,WAAW,GAAG;oBACpB,aAAa;oBACb,MAAM,aAAa,GAAG;oBAEtB,IAAI,aACF;gBAEJ,GAAG;YACL;QACF;IACF,GAAG;QAAC;QAAO;QAAW;QAAO;QAAa;QAAqB;QAAe;KAAY;IAE1F,4CAA4C;IAC5C,CAAA,GAAA,sBAAQ,EAAE;QACR,OAAO;YACL,aAAa,MAAM,aAAa;QAClC;IACF,uDAAuD;IACvD,GAAG,EAAE;IAEL,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE;QAC3B,IAAI,MAAM,IAAI,OAAO;QACrB,IAAI,CAAC,KACH;QAGF,IAAI,YAAY;QAChB,IAAI,sBAAsB,OAAO,mBAAmB,CAAC,OAAO,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;QAC5F,IAAI,uBAAuB,OAAO,mBAAmB,CAAC,OAAO,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;QAC7F,IAAI,IAAI,aAAa,CAAC,sBAAsB,WAAW,IAAI,WAAW;QACtE,IAAI,IAAI,aAAa,CAAC,uBAAuB,WAAW,IAAI,YAAY;QAExE,IAAI,aAAa,YAAY,KAAK,GAAG,KAAK,YAAY,MAAM,GAAG,GAAG;YAChE,IAAI,cAAc,SAChB,IAAI,KAAK,GAAG,CAAC,GAAG,YAAY,KAAK;iBAC5B,IAAI,cAAc,UACvB,IAAI,KAAK,GAAG,CAAC,GAAG,YAAY,MAAM;QAEtC;QAEA,IAAI,MAAM,KAAK,KAAK,KAAK,MAAM,MAAM,KAAK,GAAG;YAC3C,MAAM,KAAK,GAAG;YACd,MAAM,MAAM,GAAG;YACf,oBAAoB,IAAI,CAAA,GAAA,mCAAG,EAAE,MAAM,UAAU,EAAE,MAAM,SAAS,EAAE,GAAG;QACrE;IACF,GAAG;QAAC;QAAqB;QAAK;QAAO;QAAW;KAAY;IAE5D,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAW;IACf,IAAI,MAAM,CAAA,GAAA,mBAAK;IACf,IAAI,WAAW;YAEX;;QADF,IAAI,kCACF,aAAA,OAAA,KAAI,sDAAJ,KAAI,UAAY,sBAAsB;YACpC;YACA,IAAI,OAAO,GAAG;QAChB;aAEA;IAEJ;IACA,CAAA,GAAA,uCAAgB,EAAE;aAAC;kBAAK;IAAQ;IAChC,CAAA,GAAA,sBAAQ,EAAE;QACR,OAAO;YACL,IAAI,IAAI,OAAO,EACb,qBAAqB,IAAI,OAAO;QAEpC;IACF,GAAG,EAAE;IAEL,IAAI,QAA6B;QAC/B,iGAAiG;QACjG,SAAS;QACT,GAAG,WAAW,KAAK;IACrB;IAEA,IAAI,oBAAoB,cAAc;QACpC,MAAM,SAAS,GAAG;QAClB,MAAM,SAAS,GAAG;IACpB,OAAO,IAAI,oBAAoB,cAAc,YAAY,KAAK,KAAK,MAAM,KAAK,EAAE;QAC9E,mFAAmF;QACnF,6FAA6F;QAC7F,iFAAiF;QACjF,MAAM,SAAS,GAAG;QAClB,MAAM,SAAS,GAAG;IACpB,OACE,MAAM,QAAQ,GAAG;IAGnB,aAAa;QACX,OAAO,OAAO,QAAQ,CAAC,YAAY,KAAK,IAAI,YAAY,KAAK,GAAG;QAChE,QAAQ,OAAO,QAAQ,CAAC,YAAY,MAAM,IAAI,YAAY,MAAM,GAAG;QACnE,eAAe,cAAc,SAAS;QACtC,UAAU;QACV,GAAG,UAAU;IACf;IAEA,qBACE,0DAAC;QAAK,GAAG,UAAU;QAAE,OAAO;QAAO,KAAK;QAAK,UAAU;qBACrD,0DAAC;QAAI,MAAK;QAAe,OAAO;OAC7B;AAIT;AAEA,MAAM,yDAAuB,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","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 {...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"}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.mjs";
|
|
2
|
+
import {flushSync as $f9kpT$flushSync} from "react-dom";
|
|
3
|
+
import $f9kpT$react, {useRef as $f9kpT$useRef, useState as $f9kpT$useState, useCallback as $f9kpT$useCallback, useEffect as $f9kpT$useEffect} from "react";
|
|
4
|
+
import {Rect as $f9kpT$Rect} from "@react-stately/virtualizer";
|
|
5
|
+
import {useLayoutEffect as $f9kpT$useLayoutEffect, useResizeObserver as $f9kpT$useResizeObserver} from "@react-aria/utils";
|
|
6
|
+
import {useLocale as $f9kpT$useLocale} from "@react-aria/i18n";
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
10
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
11
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
13
|
+
*
|
|
14
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
15
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
16
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
17
|
+
* governing permissions and limitations under the License.
|
|
18
|
+
*/ // @ts-ignore
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
let $44a6ee657928b002$var$isOldReact = (0, $f9kpT$react).version.startsWith("16.") || (0, $f9kpT$react).version.startsWith("17.");
|
|
26
|
+
function $44a6ee657928b002$var$ScrollView(props, ref) {
|
|
27
|
+
let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, children: children, innerStyle: innerStyle, sizeToFit: sizeToFit, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = "both", ...otherProps } = props;
|
|
28
|
+
let defaultRef = (0, $f9kpT$useRef)();
|
|
29
|
+
ref = ref || defaultRef;
|
|
30
|
+
let state = (0, $f9kpT$useRef)({
|
|
31
|
+
scrollTop: 0,
|
|
32
|
+
scrollLeft: 0,
|
|
33
|
+
scrollEndTime: 0,
|
|
34
|
+
scrollTimeout: null,
|
|
35
|
+
width: 0,
|
|
36
|
+
height: 0,
|
|
37
|
+
isScrolling: false
|
|
38
|
+
}).current;
|
|
39
|
+
let { direction: direction } = (0, $f9kpT$useLocale)();
|
|
40
|
+
let [isScrolling, setScrolling] = (0, $f9kpT$useState)(false);
|
|
41
|
+
let onScroll = (0, $f9kpT$useCallback)((e)=>{
|
|
42
|
+
if (e.target !== e.currentTarget) return;
|
|
43
|
+
if (props.onScroll) props.onScroll(e);
|
|
44
|
+
(0, $f9kpT$flushSync)(()=>{
|
|
45
|
+
let scrollTop = e.currentTarget.scrollTop;
|
|
46
|
+
let scrollLeft = (0, $ce415dc67314b753$export$1389d168952b34b5)(e.currentTarget, direction);
|
|
47
|
+
// Prevent rubber band scrolling from shaking when scrolling out of bounds
|
|
48
|
+
state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
|
|
49
|
+
state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
|
|
50
|
+
onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
|
|
51
|
+
if (!state.isScrolling) {
|
|
52
|
+
state.isScrolling = true;
|
|
53
|
+
setScrolling(true);
|
|
54
|
+
if (onScrollStart) onScrollStart();
|
|
55
|
+
}
|
|
56
|
+
// So we don't constantly call clearTimeout and setTimeout,
|
|
57
|
+
// keep track of the current timeout time and only reschedule
|
|
58
|
+
// the timer when it is getting close.
|
|
59
|
+
let now = Date.now();
|
|
60
|
+
if (state.scrollEndTime <= now + 50) {
|
|
61
|
+
state.scrollEndTime = now + 300;
|
|
62
|
+
clearTimeout(state.scrollTimeout);
|
|
63
|
+
state.scrollTimeout = setTimeout(()=>{
|
|
64
|
+
state.isScrolling = false;
|
|
65
|
+
setScrolling(false);
|
|
66
|
+
state.scrollTimeout = null;
|
|
67
|
+
if (onScrollEnd) onScrollEnd();
|
|
68
|
+
}, 300);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}, [
|
|
72
|
+
props,
|
|
73
|
+
direction,
|
|
74
|
+
state,
|
|
75
|
+
contentSize,
|
|
76
|
+
onVisibleRectChange,
|
|
77
|
+
onScrollStart,
|
|
78
|
+
onScrollEnd
|
|
79
|
+
]);
|
|
80
|
+
// eslint-disable-next-line arrow-body-style
|
|
81
|
+
(0, $f9kpT$useEffect)(()=>{
|
|
82
|
+
return ()=>{
|
|
83
|
+
clearTimeout(state.scrollTimeout);
|
|
84
|
+
};
|
|
85
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
86
|
+
}, []);
|
|
87
|
+
let updateSize = (0, $f9kpT$useCallback)(()=>{
|
|
88
|
+
let dom = ref.current;
|
|
89
|
+
if (!dom) return;
|
|
90
|
+
let isTestEnv = false;
|
|
91
|
+
let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes("clientWidth");
|
|
92
|
+
let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes("clientHeight");
|
|
93
|
+
let w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;
|
|
94
|
+
let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.clientHeight;
|
|
95
|
+
if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {
|
|
96
|
+
if (sizeToFit === "width") w = Math.min(w, contentSize.width);
|
|
97
|
+
else if (sizeToFit === "height") h = Math.min(h, contentSize.height);
|
|
98
|
+
}
|
|
99
|
+
if (state.width !== w || state.height !== h) {
|
|
100
|
+
state.width = w;
|
|
101
|
+
state.height = h;
|
|
102
|
+
onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, w, h));
|
|
103
|
+
}
|
|
104
|
+
}, [
|
|
105
|
+
onVisibleRectChange,
|
|
106
|
+
ref,
|
|
107
|
+
state,
|
|
108
|
+
sizeToFit,
|
|
109
|
+
contentSize
|
|
110
|
+
]);
|
|
111
|
+
(0, $f9kpT$useLayoutEffect)(()=>{
|
|
112
|
+
updateSize();
|
|
113
|
+
}, [
|
|
114
|
+
updateSize
|
|
115
|
+
]);
|
|
116
|
+
let raf = (0, $f9kpT$useRef)();
|
|
117
|
+
let onResize = ()=>{
|
|
118
|
+
var _raf;
|
|
119
|
+
var _current;
|
|
120
|
+
if ($44a6ee657928b002$var$isOldReact) (_current = (_raf = raf).current) !== null && _current !== void 0 ? _current : _raf.current = requestAnimationFrame(()=>{
|
|
121
|
+
updateSize();
|
|
122
|
+
raf.current = null;
|
|
123
|
+
});
|
|
124
|
+
else updateSize();
|
|
125
|
+
};
|
|
126
|
+
(0, $f9kpT$useResizeObserver)({
|
|
127
|
+
ref: ref,
|
|
128
|
+
onResize: onResize
|
|
129
|
+
});
|
|
130
|
+
(0, $f9kpT$useEffect)(()=>{
|
|
131
|
+
return ()=>{
|
|
132
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
133
|
+
};
|
|
134
|
+
}, []);
|
|
135
|
+
let style = {
|
|
136
|
+
// Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
|
|
137
|
+
padding: 0,
|
|
138
|
+
...otherProps.style
|
|
139
|
+
};
|
|
140
|
+
if (scrollDirection === "horizontal") {
|
|
141
|
+
style.overflowX = "auto";
|
|
142
|
+
style.overflowY = "hidden";
|
|
143
|
+
} else if (scrollDirection === "vertical" || contentSize.width === state.width) {
|
|
144
|
+
// Set overflow-x: hidden if content size is equal to the width of the scroll view.
|
|
145
|
+
// This prevents horizontal scrollbars from flickering during resizing due to resize observer
|
|
146
|
+
// firing slower than the frame rate, which may cause an infinite re-render loop.
|
|
147
|
+
style.overflowY = "auto";
|
|
148
|
+
style.overflowX = "hidden";
|
|
149
|
+
} else style.overflow = "auto";
|
|
150
|
+
innerStyle = {
|
|
151
|
+
width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
|
|
152
|
+
height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
|
|
153
|
+
pointerEvents: isScrolling ? "none" : "auto",
|
|
154
|
+
position: "relative",
|
|
155
|
+
...innerStyle
|
|
156
|
+
};
|
|
157
|
+
return /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
|
|
158
|
+
...otherProps,
|
|
159
|
+
style: style,
|
|
160
|
+
ref: ref,
|
|
161
|
+
onScroll: onScroll
|
|
162
|
+
}, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
|
|
163
|
+
role: "presentation",
|
|
164
|
+
style: innerStyle
|
|
165
|
+
}, children));
|
|
166
|
+
}
|
|
167
|
+
const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView);
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
export {$44a6ee657928b002$export$5665e3d6be6adea as ScrollView};
|
|
171
|
+
//# sourceMappingURL=ScrollView.mjs.map
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.module.js";
|
|
2
|
+
import {flushSync as $f9kpT$flushSync} from "react-dom";
|
|
3
|
+
import $f9kpT$react, {useRef as $f9kpT$useRef, useState as $f9kpT$useState, useCallback as $f9kpT$useCallback, useEffect as $f9kpT$useEffect} from "react";
|
|
4
|
+
import {Rect as $f9kpT$Rect} from "@react-stately/virtualizer";
|
|
5
|
+
import {useLayoutEffect as $f9kpT$useLayoutEffect, useResizeObserver as $f9kpT$useResizeObserver} from "@react-aria/utils";
|
|
6
|
+
import {useLocale as $f9kpT$useLocale} from "@react-aria/i18n";
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
10
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
11
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
13
|
+
*
|
|
14
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
15
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
16
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
17
|
+
* governing permissions and limitations under the License.
|
|
18
|
+
*/ // @ts-ignore
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
let $44a6ee657928b002$var$isOldReact = (0, $f9kpT$react).version.startsWith("16.") || (0, $f9kpT$react).version.startsWith("17.");
|
|
26
|
+
function $44a6ee657928b002$var$ScrollView(props, ref) {
|
|
27
|
+
let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, children: children, innerStyle: innerStyle, sizeToFit: sizeToFit, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = "both", ...otherProps } = props;
|
|
28
|
+
let defaultRef = (0, $f9kpT$useRef)();
|
|
29
|
+
ref = ref || defaultRef;
|
|
30
|
+
let state = (0, $f9kpT$useRef)({
|
|
31
|
+
scrollTop: 0,
|
|
32
|
+
scrollLeft: 0,
|
|
33
|
+
scrollEndTime: 0,
|
|
34
|
+
scrollTimeout: null,
|
|
35
|
+
width: 0,
|
|
36
|
+
height: 0,
|
|
37
|
+
isScrolling: false
|
|
38
|
+
}).current;
|
|
39
|
+
let { direction: direction } = (0, $f9kpT$useLocale)();
|
|
40
|
+
let [isScrolling, setScrolling] = (0, $f9kpT$useState)(false);
|
|
41
|
+
let onScroll = (0, $f9kpT$useCallback)((e)=>{
|
|
42
|
+
if (e.target !== e.currentTarget) return;
|
|
43
|
+
if (props.onScroll) props.onScroll(e);
|
|
44
|
+
(0, $f9kpT$flushSync)(()=>{
|
|
45
|
+
let scrollTop = e.currentTarget.scrollTop;
|
|
46
|
+
let scrollLeft = (0, $ce415dc67314b753$export$1389d168952b34b5)(e.currentTarget, direction);
|
|
47
|
+
// Prevent rubber band scrolling from shaking when scrolling out of bounds
|
|
48
|
+
state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
|
|
49
|
+
state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
|
|
50
|
+
onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
|
|
51
|
+
if (!state.isScrolling) {
|
|
52
|
+
state.isScrolling = true;
|
|
53
|
+
setScrolling(true);
|
|
54
|
+
if (onScrollStart) onScrollStart();
|
|
55
|
+
}
|
|
56
|
+
// So we don't constantly call clearTimeout and setTimeout,
|
|
57
|
+
// keep track of the current timeout time and only reschedule
|
|
58
|
+
// the timer when it is getting close.
|
|
59
|
+
let now = Date.now();
|
|
60
|
+
if (state.scrollEndTime <= now + 50) {
|
|
61
|
+
state.scrollEndTime = now + 300;
|
|
62
|
+
clearTimeout(state.scrollTimeout);
|
|
63
|
+
state.scrollTimeout = setTimeout(()=>{
|
|
64
|
+
state.isScrolling = false;
|
|
65
|
+
setScrolling(false);
|
|
66
|
+
state.scrollTimeout = null;
|
|
67
|
+
if (onScrollEnd) onScrollEnd();
|
|
68
|
+
}, 300);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}, [
|
|
72
|
+
props,
|
|
73
|
+
direction,
|
|
74
|
+
state,
|
|
75
|
+
contentSize,
|
|
76
|
+
onVisibleRectChange,
|
|
77
|
+
onScrollStart,
|
|
78
|
+
onScrollEnd
|
|
79
|
+
]);
|
|
80
|
+
// eslint-disable-next-line arrow-body-style
|
|
81
|
+
(0, $f9kpT$useEffect)(()=>{
|
|
82
|
+
return ()=>{
|
|
83
|
+
clearTimeout(state.scrollTimeout);
|
|
84
|
+
};
|
|
85
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
86
|
+
}, []);
|
|
87
|
+
let updateSize = (0, $f9kpT$useCallback)(()=>{
|
|
88
|
+
let dom = ref.current;
|
|
89
|
+
if (!dom) return;
|
|
90
|
+
let isTestEnv = false;
|
|
91
|
+
let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes("clientWidth");
|
|
92
|
+
let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes("clientHeight");
|
|
93
|
+
let w = isTestEnv && !isClientWidthMocked ? Infinity : dom.clientWidth;
|
|
94
|
+
let h = isTestEnv && !isClientHeightMocked ? Infinity : dom.clientHeight;
|
|
95
|
+
if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {
|
|
96
|
+
if (sizeToFit === "width") w = Math.min(w, contentSize.width);
|
|
97
|
+
else if (sizeToFit === "height") h = Math.min(h, contentSize.height);
|
|
98
|
+
}
|
|
99
|
+
if (state.width !== w || state.height !== h) {
|
|
100
|
+
state.width = w;
|
|
101
|
+
state.height = h;
|
|
102
|
+
onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, w, h));
|
|
103
|
+
}
|
|
104
|
+
}, [
|
|
105
|
+
onVisibleRectChange,
|
|
106
|
+
ref,
|
|
107
|
+
state,
|
|
108
|
+
sizeToFit,
|
|
109
|
+
contentSize
|
|
110
|
+
]);
|
|
111
|
+
(0, $f9kpT$useLayoutEffect)(()=>{
|
|
112
|
+
updateSize();
|
|
113
|
+
}, [
|
|
114
|
+
updateSize
|
|
115
|
+
]);
|
|
116
|
+
let raf = (0, $f9kpT$useRef)();
|
|
117
|
+
let onResize = ()=>{
|
|
118
|
+
var _raf;
|
|
119
|
+
var _current;
|
|
120
|
+
if ($44a6ee657928b002$var$isOldReact) (_current = (_raf = raf).current) !== null && _current !== void 0 ? _current : _raf.current = requestAnimationFrame(()=>{
|
|
121
|
+
updateSize();
|
|
122
|
+
raf.current = null;
|
|
123
|
+
});
|
|
124
|
+
else updateSize();
|
|
125
|
+
};
|
|
126
|
+
(0, $f9kpT$useResizeObserver)({
|
|
127
|
+
ref: ref,
|
|
128
|
+
onResize: onResize
|
|
129
|
+
});
|
|
130
|
+
(0, $f9kpT$useEffect)(()=>{
|
|
131
|
+
return ()=>{
|
|
132
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
133
|
+
};
|
|
134
|
+
}, []);
|
|
135
|
+
let style = {
|
|
136
|
+
// Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
|
|
137
|
+
padding: 0,
|
|
138
|
+
...otherProps.style
|
|
139
|
+
};
|
|
140
|
+
if (scrollDirection === "horizontal") {
|
|
141
|
+
style.overflowX = "auto";
|
|
142
|
+
style.overflowY = "hidden";
|
|
143
|
+
} else if (scrollDirection === "vertical" || contentSize.width === state.width) {
|
|
144
|
+
// Set overflow-x: hidden if content size is equal to the width of the scroll view.
|
|
145
|
+
// This prevents horizontal scrollbars from flickering during resizing due to resize observer
|
|
146
|
+
// firing slower than the frame rate, which may cause an infinite re-render loop.
|
|
147
|
+
style.overflowY = "auto";
|
|
148
|
+
style.overflowX = "hidden";
|
|
149
|
+
} else style.overflow = "auto";
|
|
150
|
+
innerStyle = {
|
|
151
|
+
width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
|
|
152
|
+
height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
|
|
153
|
+
pointerEvents: isScrolling ? "none" : "auto",
|
|
154
|
+
position: "relative",
|
|
155
|
+
...innerStyle
|
|
156
|
+
};
|
|
157
|
+
return /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
|
|
158
|
+
...otherProps,
|
|
159
|
+
style: style,
|
|
160
|
+
ref: ref,
|
|
161
|
+
onScroll: onScroll
|
|
162
|
+
}, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
|
|
163
|
+
role: "presentation",
|
|
164
|
+
style: innerStyle
|
|
165
|
+
}, children));
|
|
166
|
+
}
|
|
167
|
+
const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView);
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
export {$44a6ee657928b002$export$5665e3d6be6adea as ScrollView};
|
|
171
|
+
//# sourceMappingURL=ScrollView.module.js.map
|
|
@@ -0,0 +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 {...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"}
|