@react-aria/virtualizer 4.1.13 → 4.2.0

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.
Files changed (40) hide show
  1. package/dist/import.mjs +6 -6
  2. package/dist/main.js +14 -14
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +6 -6
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +7 -0
  7. package/package.json +15 -16
  8. package/src/index.ts +8 -7
  9. package/dist/ScrollView.main.js +0 -228
  10. package/dist/ScrollView.main.js.map +0 -1
  11. package/dist/ScrollView.mjs +0 -218
  12. package/dist/ScrollView.module.js +0 -218
  13. package/dist/ScrollView.module.js.map +0 -1
  14. package/dist/Virtualizer.main.js +0 -84
  15. package/dist/Virtualizer.main.js.map +0 -1
  16. package/dist/Virtualizer.mjs +0 -75
  17. package/dist/Virtualizer.module.js +0 -75
  18. package/dist/Virtualizer.module.js.map +0 -1
  19. package/dist/VirtualizerItem.main.js +0 -90
  20. package/dist/VirtualizerItem.main.js.map +0 -1
  21. package/dist/VirtualizerItem.mjs +0 -80
  22. package/dist/VirtualizerItem.module.js +0 -80
  23. package/dist/VirtualizerItem.module.js.map +0 -1
  24. package/dist/types.d.ts +0 -60
  25. package/dist/types.d.ts.map +0 -1
  26. package/dist/useVirtualizerItem.main.js +0 -54
  27. package/dist/useVirtualizerItem.main.js.map +0 -1
  28. package/dist/useVirtualizerItem.mjs +0 -49
  29. package/dist/useVirtualizerItem.module.js +0 -49
  30. package/dist/useVirtualizerItem.module.js.map +0 -1
  31. package/dist/utils.main.js +0 -80
  32. package/dist/utils.main.js.map +0 -1
  33. package/dist/utils.mjs +0 -73
  34. package/dist/utils.module.js +0 -73
  35. package/dist/utils.module.js.map +0 -1
  36. package/src/ScrollView.tsx +0 -282
  37. package/src/Virtualizer.tsx +0 -113
  38. package/src/VirtualizerItem.tsx +0 -93
  39. package/src/useVirtualizerItem.ts +0 -55
  40. package/src/utils.ts +0 -107
@@ -1,218 +0,0 @@
1
- import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.mjs";
2
- import {flushSync as $f9kpT$flushSync} from "react-dom";
3
- import {useObjectRef as $f9kpT$useObjectRef, getEventTarget as $f9kpT$getEventTarget, useEvent as $f9kpT$useEvent, useEffectEvent as $f9kpT$useEffectEvent, useLayoutEffect as $f9kpT$useLayoutEffect, useResizeObserver as $f9kpT$useResizeObserver} from "@react-aria/utils";
4
- import $f9kpT$react, {useRef as $f9kpT$useRef, useState as $f9kpT$useState, useCallback as $f9kpT$useCallback, useEffect as $f9kpT$useEffect} from "react";
5
- import {Rect as $f9kpT$Rect} from "@react-stately/virtualizer";
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
- function $44a6ee657928b002$var$ScrollView(props, ref) {
26
- ref = (0, $f9kpT$useObjectRef)(ref);
27
- let { scrollViewProps: scrollViewProps, contentProps: contentProps } = $44a6ee657928b002$export$2ea0c4974da4731b(props, ref);
28
- return /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
29
- role: "presentation",
30
- ...scrollViewProps,
31
- ref: ref
32
- }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", contentProps, props.children));
33
- }
34
- const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView);
35
- function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
36
- let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, innerStyle: innerStyle, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = 'both', ...otherProps } = props;
37
- let state = (0, $f9kpT$useRef)({
38
- scrollTop: 0,
39
- scrollLeft: 0,
40
- scrollEndTime: 0,
41
- scrollTimeout: null,
42
- width: 0,
43
- height: 0,
44
- isScrolling: false
45
- }).current;
46
- let { direction: direction } = (0, $f9kpT$useLocale)();
47
- let [isScrolling, setScrolling] = (0, $f9kpT$useState)(false);
48
- let onScroll = (0, $f9kpT$useCallback)((e)=>{
49
- if ((0, $f9kpT$getEventTarget)(e) !== e.currentTarget) return;
50
- if (props.onScroll) props.onScroll(e);
51
- (0, $f9kpT$flushSync)(()=>{
52
- let scrollTop = e.currentTarget.scrollTop;
53
- let scrollLeft = (0, $ce415dc67314b753$export$1389d168952b34b5)(e.currentTarget, direction);
54
- // Prevent rubber band scrolling from shaking when scrolling out of bounds
55
- state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
56
- state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
57
- onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
58
- if (!state.isScrolling) {
59
- state.isScrolling = true;
60
- setScrolling(true);
61
- // Pause typekit MutationObserver during scrolling.
62
- window.dispatchEvent(new Event('tk.disconnect-observer'));
63
- if (onScrollStart) onScrollStart();
64
- }
65
- // So we don't constantly call clearTimeout and setTimeout,
66
- // keep track of the current timeout time and only reschedule
67
- // the timer when it is getting close.
68
- let now = Date.now();
69
- if (state.scrollEndTime <= now + 50) {
70
- state.scrollEndTime = now + 300;
71
- if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
72
- state.scrollTimeout = setTimeout(()=>{
73
- state.isScrolling = false;
74
- setScrolling(false);
75
- state.scrollTimeout = null;
76
- window.dispatchEvent(new Event('tk.connect-observer'));
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
- // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
91
- (0, $f9kpT$useEvent)(ref, 'scroll', onScroll);
92
- (0, $f9kpT$useEffect)(()=>{
93
- return ()=>{
94
- if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
95
- if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
96
- };
97
- // eslint-disable-next-line react-hooks/exhaustive-deps
98
- }, []);
99
- let isUpdatingSize = (0, $f9kpT$useRef)(false);
100
- let updateSize = (0, $f9kpT$useCallback)((flush)=>{
101
- let dom = ref.current;
102
- if (!dom || isUpdatingSize.current) return;
103
- // Prevent reentrancy when resize observer fires, triggers re-layout that results in
104
- // content size update, causing below layout effect to fire. This avoids infinite loops.
105
- isUpdatingSize.current = true;
106
- let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
107
- let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
108
- let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
109
- let clientWidth = dom.clientWidth;
110
- let clientHeight = dom.clientHeight;
111
- let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;
112
- let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;
113
- if (state.width !== w || state.height !== h) {
114
- state.width = w;
115
- state.height = h;
116
- flush(()=>{
117
- onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, w, h));
118
- });
119
- // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
120
- // a result of the layout update. In this case, re-layout again to account for the
121
- // adjusted space. In very specific cases this might result in the scrollbars disappearing
122
- // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
123
- // an infinite loop. This matches how browsers behavior with native CSS grid layout.
124
- if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
125
- state.width = dom.clientWidth;
126
- state.height = dom.clientHeight;
127
- flush(()=>{
128
- onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
129
- });
130
- }
131
- }
132
- isUpdatingSize.current = false;
133
- }, [
134
- ref,
135
- state,
136
- onVisibleRectChange
137
- ]);
138
- let updateSizeEvent = (0, $f9kpT$useEffectEvent)(updateSize);
139
- // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
140
- let lastContentSize = (0, $f9kpT$useRef)(null);
141
- let [update, setUpdate] = (0, $f9kpT$useState)({});
142
- // We only contain a call to setState in here for testing environments.
143
- // eslint-disable-next-line react-hooks/exhaustive-deps
144
- (0, $f9kpT$useLayoutEffect)(()=>{
145
- if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
146
- // React doesn't allow flushSync inside effects, so queue a microtask.
147
- // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
148
- // If we are in an `act` environment, update immediately without a microtask so you don't need
149
- // to mock timers in tests. In this case, the update is synchronous already.
150
- // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
151
- // https://github.com/reactwg/react-18/discussions/102
152
- // @ts-ignore
153
- if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {
154
- // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs
155
- // due to strict mode.
156
- setUpdate({});
157
- lastContentSize.current = contentSize;
158
- return;
159
- } else queueMicrotask(()=>updateSizeEvent((0, $f9kpT$flushSync)));
160
- }
161
- lastContentSize.current = contentSize;
162
- });
163
- // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
164
- (0, $f9kpT$useLayoutEffect)(()=>{
165
- updateSizeEvent((fn)=>fn());
166
- }, [
167
- update
168
- ]);
169
- let onResize = (0, $f9kpT$useCallback)(()=>{
170
- updateSize((0, $f9kpT$flushSync));
171
- }, [
172
- updateSize
173
- ]);
174
- // Watch border-box instead of of content-box so that we don't go into
175
- // an infinite loop when scrollbars appear or disappear.
176
- (0, $f9kpT$useResizeObserver)({
177
- ref: ref,
178
- box: 'border-box',
179
- onResize: onResize
180
- });
181
- let style = {
182
- // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
183
- padding: 0,
184
- ...otherProps.style
185
- };
186
- if (scrollDirection === 'horizontal') {
187
- style.overflowX = 'auto';
188
- style.overflowY = 'hidden';
189
- } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {
190
- // Set overflow-x: hidden if content size is equal to the width of the scroll view.
191
- // This prevents horizontal scrollbars from flickering during resizing due to resize observer
192
- // firing slower than the frame rate, which may cause an infinite re-render loop.
193
- style.overflowY = 'auto';
194
- style.overflowX = 'hidden';
195
- } else style.overflow = 'auto';
196
- innerStyle = {
197
- width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
198
- height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
199
- pointerEvents: isScrolling ? 'none' : 'auto',
200
- position: 'relative',
201
- ...innerStyle
202
- };
203
- return {
204
- isScrolling: isScrolling,
205
- scrollViewProps: {
206
- ...otherProps,
207
- style: style
208
- },
209
- contentProps: {
210
- role: 'presentation',
211
- style: innerStyle
212
- }
213
- };
214
- }
215
-
216
-
217
- export {$44a6ee657928b002$export$2ea0c4974da4731b as useScrollView, $44a6ee657928b002$export$5665e3d6be6adea as ScrollView};
218
- //# sourceMappingURL=ScrollView.module.js.map
@@ -1,218 +0,0 @@
1
- import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.module.js";
2
- import {flushSync as $f9kpT$flushSync} from "react-dom";
3
- import {useObjectRef as $f9kpT$useObjectRef, getEventTarget as $f9kpT$getEventTarget, useEvent as $f9kpT$useEvent, useEffectEvent as $f9kpT$useEffectEvent, useLayoutEffect as $f9kpT$useLayoutEffect, useResizeObserver as $f9kpT$useResizeObserver} from "@react-aria/utils";
4
- import $f9kpT$react, {useRef as $f9kpT$useRef, useState as $f9kpT$useState, useCallback as $f9kpT$useCallback, useEffect as $f9kpT$useEffect} from "react";
5
- import {Rect as $f9kpT$Rect} from "@react-stately/virtualizer";
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
- function $44a6ee657928b002$var$ScrollView(props, ref) {
26
- ref = (0, $f9kpT$useObjectRef)(ref);
27
- let { scrollViewProps: scrollViewProps, contentProps: contentProps } = $44a6ee657928b002$export$2ea0c4974da4731b(props, ref);
28
- return /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
29
- role: "presentation",
30
- ...scrollViewProps,
31
- ref: ref
32
- }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", contentProps, props.children));
33
- }
34
- const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView);
35
- function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
36
- let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, innerStyle: innerStyle, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = 'both', ...otherProps } = props;
37
- let state = (0, $f9kpT$useRef)({
38
- scrollTop: 0,
39
- scrollLeft: 0,
40
- scrollEndTime: 0,
41
- scrollTimeout: null,
42
- width: 0,
43
- height: 0,
44
- isScrolling: false
45
- }).current;
46
- let { direction: direction } = (0, $f9kpT$useLocale)();
47
- let [isScrolling, setScrolling] = (0, $f9kpT$useState)(false);
48
- let onScroll = (0, $f9kpT$useCallback)((e)=>{
49
- if ((0, $f9kpT$getEventTarget)(e) !== e.currentTarget) return;
50
- if (props.onScroll) props.onScroll(e);
51
- (0, $f9kpT$flushSync)(()=>{
52
- let scrollTop = e.currentTarget.scrollTop;
53
- let scrollLeft = (0, $ce415dc67314b753$export$1389d168952b34b5)(e.currentTarget, direction);
54
- // Prevent rubber band scrolling from shaking when scrolling out of bounds
55
- state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
56
- state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
57
- onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
58
- if (!state.isScrolling) {
59
- state.isScrolling = true;
60
- setScrolling(true);
61
- // Pause typekit MutationObserver during scrolling.
62
- window.dispatchEvent(new Event('tk.disconnect-observer'));
63
- if (onScrollStart) onScrollStart();
64
- }
65
- // So we don't constantly call clearTimeout and setTimeout,
66
- // keep track of the current timeout time and only reschedule
67
- // the timer when it is getting close.
68
- let now = Date.now();
69
- if (state.scrollEndTime <= now + 50) {
70
- state.scrollEndTime = now + 300;
71
- if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
72
- state.scrollTimeout = setTimeout(()=>{
73
- state.isScrolling = false;
74
- setScrolling(false);
75
- state.scrollTimeout = null;
76
- window.dispatchEvent(new Event('tk.connect-observer'));
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
- // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
91
- (0, $f9kpT$useEvent)(ref, 'scroll', onScroll);
92
- (0, $f9kpT$useEffect)(()=>{
93
- return ()=>{
94
- if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
95
- if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
96
- };
97
- // eslint-disable-next-line react-hooks/exhaustive-deps
98
- }, []);
99
- let isUpdatingSize = (0, $f9kpT$useRef)(false);
100
- let updateSize = (0, $f9kpT$useCallback)((flush)=>{
101
- let dom = ref.current;
102
- if (!dom || isUpdatingSize.current) return;
103
- // Prevent reentrancy when resize observer fires, triggers re-layout that results in
104
- // content size update, causing below layout effect to fire. This avoids infinite loops.
105
- isUpdatingSize.current = true;
106
- let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
107
- let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
108
- let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
109
- let clientWidth = dom.clientWidth;
110
- let clientHeight = dom.clientHeight;
111
- let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;
112
- let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;
113
- if (state.width !== w || state.height !== h) {
114
- state.width = w;
115
- state.height = h;
116
- flush(()=>{
117
- onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, w, h));
118
- });
119
- // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
120
- // a result of the layout update. In this case, re-layout again to account for the
121
- // adjusted space. In very specific cases this might result in the scrollbars disappearing
122
- // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
123
- // an infinite loop. This matches how browsers behavior with native CSS grid layout.
124
- if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
125
- state.width = dom.clientWidth;
126
- state.height = dom.clientHeight;
127
- flush(()=>{
128
- onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
129
- });
130
- }
131
- }
132
- isUpdatingSize.current = false;
133
- }, [
134
- ref,
135
- state,
136
- onVisibleRectChange
137
- ]);
138
- let updateSizeEvent = (0, $f9kpT$useEffectEvent)(updateSize);
139
- // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
140
- let lastContentSize = (0, $f9kpT$useRef)(null);
141
- let [update, setUpdate] = (0, $f9kpT$useState)({});
142
- // We only contain a call to setState in here for testing environments.
143
- // eslint-disable-next-line react-hooks/exhaustive-deps
144
- (0, $f9kpT$useLayoutEffect)(()=>{
145
- if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
146
- // React doesn't allow flushSync inside effects, so queue a microtask.
147
- // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
148
- // If we are in an `act` environment, update immediately without a microtask so you don't need
149
- // to mock timers in tests. In this case, the update is synchronous already.
150
- // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
151
- // https://github.com/reactwg/react-18/discussions/102
152
- // @ts-ignore
153
- if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {
154
- // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs
155
- // due to strict mode.
156
- setUpdate({});
157
- lastContentSize.current = contentSize;
158
- return;
159
- } else queueMicrotask(()=>updateSizeEvent((0, $f9kpT$flushSync)));
160
- }
161
- lastContentSize.current = contentSize;
162
- });
163
- // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
164
- (0, $f9kpT$useLayoutEffect)(()=>{
165
- updateSizeEvent((fn)=>fn());
166
- }, [
167
- update
168
- ]);
169
- let onResize = (0, $f9kpT$useCallback)(()=>{
170
- updateSize((0, $f9kpT$flushSync));
171
- }, [
172
- updateSize
173
- ]);
174
- // Watch border-box instead of of content-box so that we don't go into
175
- // an infinite loop when scrollbars appear or disappear.
176
- (0, $f9kpT$useResizeObserver)({
177
- ref: ref,
178
- box: 'border-box',
179
- onResize: onResize
180
- });
181
- let style = {
182
- // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
183
- padding: 0,
184
- ...otherProps.style
185
- };
186
- if (scrollDirection === 'horizontal') {
187
- style.overflowX = 'auto';
188
- style.overflowY = 'hidden';
189
- } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {
190
- // Set overflow-x: hidden if content size is equal to the width of the scroll view.
191
- // This prevents horizontal scrollbars from flickering during resizing due to resize observer
192
- // firing slower than the frame rate, which may cause an infinite re-render loop.
193
- style.overflowY = 'auto';
194
- style.overflowX = 'hidden';
195
- } else style.overflow = 'auto';
196
- innerStyle = {
197
- width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
198
- height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
199
- pointerEvents: isScrolling ? 'none' : 'auto',
200
- position: 'relative',
201
- ...innerStyle
202
- };
203
- return {
204
- isScrolling: isScrolling,
205
- scrollViewProps: {
206
- ...otherProps,
207
- style: style
208
- },
209
- contentProps: {
210
- role: 'presentation',
211
- style: innerStyle
212
- }
213
- };
214
- }
215
-
216
-
217
- export {$44a6ee657928b002$export$2ea0c4974da4731b as useScrollView, $44a6ee657928b002$export$5665e3d6be6adea as ScrollView};
218
- //# sourceMappingURL=ScrollView.module.js.map
@@ -1 +0,0 @@
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 {getEventTarget, useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {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 onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef:\n React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement | null>> =\nReact.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\ninterface ScrollViewAria {\n isScrolling: boolean,\n scrollViewProps: HTMLAttributes<HTMLElement>,\n contentProps: HTMLAttributes<HTMLElement>\n}\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>): ScrollViewAria {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null as ReturnType<typeof setTimeout> | null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n\n let onScroll = useCallback((e) => {\n if (getEventTarget(e) !== 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 onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n // Pause typekit MutationObserver during scrolling.\n window.dispatchEvent(new Event('tk.disconnect-observer'));\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n window.dispatchEvent(new Event('tk.connect-observer'));\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n useEffect(() => {\n return () => {\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n if (state.isScrolling) {\n window.dispatchEvent(new Event('tk.connect-observer'));\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let isUpdatingSize = useRef(false);\n let updateSize = useCallback((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom || isUpdatingSize.current) {\n return;\n }\n\n // Prevent reentrancy when resize observer fires, triggers re-layout that results in\n // content size update, causing below layout effect to fire. This avoids infinite loops.\n isUpdatingSize.current = true;\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n\n isUpdatingSize.current = false;\n }, [ref, state, onVisibleRectChange]);\n let updateSizeEvent = useEffectEvent(updateSize);\n\n // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.\n let lastContentSize = useRef<Size | null>(null);\n let [update, setUpdate] = useState({});\n // We only contain a call to setState in here for testing environments.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n // If we are in an `act` environment, update immediately without a microtask so you don't need\n // to mock timers in tests. In this case, the update is synchronous already.\n // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.\n // https://github.com/reactwg/react-18/discussions/102\n // @ts-ignore\n if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {\n // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs\n // due to strict mode.\n setUpdate({});\n lastContentSize.current = contentSize;\n return;\n } else {\n queueMicrotask(() => updateSizeEvent(flushSync));\n }\n }\n\n lastContentSize.current = contentSize;\n });\n\n // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.\n useLayoutEffect(() => {\n updateSizeEvent(fn => fn());\n }, [update]);\n\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n isScrolling,\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.module.js.map"}
@@ -1,84 +0,0 @@
1
- var $00ca8c0b29e3e07c$exports = require("./ScrollView.main.js");
2
- var $d6a26279cc31826b$exports = require("./VirtualizerItem.main.js");
3
- var $knrtk$reactstatelyvirtualizer = require("@react-stately/virtualizer");
4
- var $knrtk$reactariautils = require("@react-aria/utils");
5
- var $knrtk$react = require("react");
6
-
7
-
8
- function $parcel$interopDefault(a) {
9
- return a && a.__esModule ? a.default : a;
10
- }
11
-
12
- function $parcel$export(e, n, v, s) {
13
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
14
- }
15
-
16
- $parcel$export(module.exports, "Virtualizer", () => $e1fb6f3669e1c329$export$89be5a243e59c4b2);
17
- /*
18
- * Copyright 2020 Adobe. All rights reserved.
19
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
20
- * you may not use this file except in compliance with the License. You may obtain a copy
21
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
22
- *
23
- * Unless required by applicable law or agreed to in writing, software distributed under
24
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
25
- * OF ANY KIND, either express or implied. See the License for the specific language
26
- * governing permissions and limitations under the License.
27
- */
28
-
29
-
30
-
31
-
32
- const $e1fb6f3669e1c329$export$89be5a243e59c4b2 = /*#__PURE__*/ (0, ($parcel$interopDefault($knrtk$react))).forwardRef(function Virtualizer(props, forwardedRef) {
33
- let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: isLoading, onLoadMore: onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props;
34
- let ref = (0, $knrtk$reactariautils.useObjectRef)(forwardedRef);
35
- let state = (0, $knrtk$reactstatelyvirtualizer.useVirtualizerState)({
36
- layout: layout,
37
- collection: collection,
38
- renderView: renderView,
39
- onVisibleRectChange (rect) {
40
- if (ref.current) {
41
- ref.current.scrollLeft = rect.x;
42
- ref.current.scrollTop = rect.y;
43
- }
44
- },
45
- persistedKeys: persistedKeys,
46
- layoutOptions: layoutOptions
47
- });
48
- (0, $knrtk$reactariautils.useLoadMore)({
49
- isLoading: isLoading,
50
- onLoadMore: onLoadMore,
51
- scrollOffset: 1
52
- }, ref);
53
- let onVisibleRectChange = (0, $knrtk$react.useCallback)((rect)=>{
54
- state.setVisibleRect(rect);
55
- }, [
56
- state
57
- ]);
58
- return /*#__PURE__*/ (0, ($parcel$interopDefault($knrtk$react))).createElement((0, $00ca8c0b29e3e07c$exports.ScrollView), {
59
- ...(0, $knrtk$reactariautils.mergeProps)(otherProps, {
60
- onVisibleRectChange: onVisibleRectChange
61
- }),
62
- ref: ref,
63
- contentSize: state.contentSize,
64
- onScrollStart: state.startScrolling,
65
- onScrollEnd: state.endScrolling,
66
- scrollDirection: scrollDirection
67
- }, $e1fb6f3669e1c329$var$renderChildren(null, state.visibleViews, renderWrapper || $e1fb6f3669e1c329$var$defaultRenderWrapper));
68
- });
69
- function $e1fb6f3669e1c329$var$renderChildren(parent, views, renderWrapper) {
70
- return views.map((view)=>{
71
- return renderWrapper(parent, view, view.children ? Array.from(view.children) : [], (childViews)=>$e1fb6f3669e1c329$var$renderChildren(view, childViews, renderWrapper));
72
- });
73
- }
74
- function $e1fb6f3669e1c329$var$defaultRenderWrapper(parent, reusableView) {
75
- return /*#__PURE__*/ (0, ($parcel$interopDefault($knrtk$react))).createElement((0, $d6a26279cc31826b$exports.VirtualizerItem), {
76
- key: reusableView.key,
77
- layoutInfo: reusableView.layoutInfo,
78
- virtualizer: reusableView.virtualizer,
79
- parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
80
- }, reusableView.rendered);
81
- }
82
-
83
-
84
- //# sourceMappingURL=Virtualizer.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA8BM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAsD,KAAgC,EAAE,YAAiD;IAC5L,IAAI,EACF,UAAU,UAAU,iBACpB,aAAa,UACb,MAAM,cACN,UAAU,mBACV,eAAe,aACf,SAAS,cACT,UAAU,iBACV,aAAa,iBACb,aAAa,EACb,GAAG,YACJ,GAAG;IAEJ,IAAI,MAAM,CAAA,GAAA,kCAAW,EAAE;IAEvB,IAAI,QAAQ,CAAA,GAAA,kDAAkB,EAAE;gBAC9B;oBACA;oBACA;QACA,qBAAoB,IAAI;YACtB,IAAI,IAAI,OAAO,EAAE;gBACf,IAAI,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC/B,IAAI,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;YAChC;QACF;uBACA;uBACA;IACF;IAEA,CAAA,GAAA,iCAAU,EAAE;mBAAC;oBAAW;QAAY,cAAc;IAAC,GAAG;IACtD,IAAI,sBAAsB,CAAA,GAAA,wBAAU,EAAE,CAAC;QACrC,MAAM,cAAc,CAAC;IACvB,GAAG;QAAC;KAAM;IAEV,qBACE,0DAAC,CAAA,GAAA,oCAAS;QACP,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY;iCAAC;QAAmB,EAAE;QACjD,KAAK;QACL,aAAa,MAAM,WAAW;QAC9B,eAAe,MAAM,cAAc;QACnC,aAAa,MAAM,YAAY;QAC/B,iBAAiB;OAChB,qCAAe,MAAM,MAAM,YAAY,EAAE,iBAAiB;AAGjE;AAEA,SAAS,qCAAoC,MAAiC,EAAE,KAA2B,EAAE,aAAkC;IAC7I,OAAO,MAAM,GAAG,CAAC,CAAA;QACf,OAAO,cACL,QACA,MACA,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,QAAQ,IAAI,EAAE,EAC9C,CAAA,aAAc,qCAAe,MAAM,YAAY;IAEnD;AACF;AAEA,SAAS,2CACP,MAAiC,EACjC,YAAgC;IAEhC,qBACE,0DAAC,CAAA,GAAA,yCAAc;QACb,KAAK,aAAa,GAAG;QACrB,YAAY,aAAa,UAAU;QACnC,aAAa,aAAa,WAAW;QACrC,MAAM,EAAE,mBAAA,6BAAA,OAAQ,UAAU;OACzB,aAAa,QAAQ;AAG5B","sources":["packages/@react-aria/virtualizer/src/Virtualizer.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, Key, RefObject} from '@react-types/shared';\nimport {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';\nimport {mergeProps, useLoadMore, useObjectRef} from '@react-aria/utils';\nimport React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback} from 'react';\nimport {ScrollView} from './ScrollView';\nimport {VirtualizerItem} from './VirtualizerItem';\n\ntype RenderWrapper<T extends object, V> = (\n parent: ReusableView<T, V> | null,\n reusableView: ReusableView<T, V>,\n children: ReusableView<T, V>[],\n renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]\n) => ReactElement | null;\n\ninterface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n children: (type: string, content: T) => V,\n renderWrapper?: RenderWrapper<T, V>,\n layout: Layout<T, O>,\n collection: Collection<T>,\n persistedKeys?: Set<Key> | null,\n scrollDirection?: 'horizontal' | 'vertical' | 'both',\n isLoading?: boolean,\n onLoadMore?: () => void,\n layoutOptions?: O\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Virtualizer = React.forwardRef(function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {\n let {\n children: renderView,\n renderWrapper,\n layout,\n collection,\n scrollDirection,\n isLoading,\n onLoadMore,\n persistedKeys,\n layoutOptions,\n ...otherProps\n } = props;\n\n let ref = useObjectRef(forwardedRef);\n\n let state = useVirtualizerState({\n layout,\n collection,\n renderView,\n onVisibleRectChange(rect) {\n if (ref.current) {\n ref.current.scrollLeft = rect.x;\n ref.current.scrollTop = rect.y;\n }\n },\n persistedKeys,\n layoutOptions\n });\n\n useLoadMore({isLoading, onLoadMore, scrollOffset: 1}, ref);\n let onVisibleRectChange = useCallback((rect: Rect) => {\n state.setVisibleRect(rect);\n }, [state]);\n\n return (\n <ScrollView\n {...mergeProps(otherProps, {onVisibleRectChange})}\n ref={ref}\n contentSize={state.contentSize}\n onScrollStart={state.startScrolling}\n onScrollEnd={state.endScrolling}\n scrollDirection={scrollDirection}>\n {renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)}\n </ScrollView>\n );\n}) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\n\nfunction renderChildren<T extends object, V>(parent: ReusableView<T, V> | null, views: ReusableView<T, V>[], renderWrapper: RenderWrapper<T, V>) {\n return views.map(view => {\n return renderWrapper(\n parent,\n view,\n view.children ? Array.from(view.children) : [],\n childViews => renderChildren(view, childViews, renderWrapper)\n );\n });\n}\n\nfunction defaultRenderWrapper<T extends object, V extends ReactNode>(\n parent: ReusableView<T, V> | null,\n reusableView: ReusableView<T, V>\n) {\n return (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo!}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n );\n}\n"],"names":[],"version":3,"file":"Virtualizer.main.js.map"}
@@ -1,75 +0,0 @@
1
- import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea} from "./ScrollView.mjs";
2
- import {VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.mjs";
3
- import {useVirtualizerState as $9WwqA$useVirtualizerState} from "@react-stately/virtualizer";
4
- import {useObjectRef as $9WwqA$useObjectRef, useLoadMore as $9WwqA$useLoadMore, mergeProps as $9WwqA$mergeProps} from "@react-aria/utils";
5
- import $9WwqA$react, {useCallback as $9WwqA$useCallback} from "react";
6
-
7
- /*
8
- * Copyright 2020 Adobe. All rights reserved.
9
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
10
- * you may not use this file except in compliance with the License. You may obtain a copy
11
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
12
- *
13
- * Unless required by applicable law or agreed to in writing, software distributed under
14
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
15
- * OF ANY KIND, either express or implied. See the License for the specific language
16
- * governing permissions and limitations under the License.
17
- */
18
-
19
-
20
-
21
-
22
- const $6d0a5c394373ae64$export$89be5a243e59c4b2 = /*#__PURE__*/ (0, $9WwqA$react).forwardRef(function Virtualizer(props, forwardedRef) {
23
- let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: isLoading, onLoadMore: onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props;
24
- let ref = (0, $9WwqA$useObjectRef)(forwardedRef);
25
- let state = (0, $9WwqA$useVirtualizerState)({
26
- layout: layout,
27
- collection: collection,
28
- renderView: renderView,
29
- onVisibleRectChange (rect) {
30
- if (ref.current) {
31
- ref.current.scrollLeft = rect.x;
32
- ref.current.scrollTop = rect.y;
33
- }
34
- },
35
- persistedKeys: persistedKeys,
36
- layoutOptions: layoutOptions
37
- });
38
- (0, $9WwqA$useLoadMore)({
39
- isLoading: isLoading,
40
- onLoadMore: onLoadMore,
41
- scrollOffset: 1
42
- }, ref);
43
- let onVisibleRectChange = (0, $9WwqA$useCallback)((rect)=>{
44
- state.setVisibleRect(rect);
45
- }, [
46
- state
47
- ]);
48
- return /*#__PURE__*/ (0, $9WwqA$react).createElement((0, $44a6ee657928b002$export$5665e3d6be6adea), {
49
- ...(0, $9WwqA$mergeProps)(otherProps, {
50
- onVisibleRectChange: onVisibleRectChange
51
- }),
52
- ref: ref,
53
- contentSize: state.contentSize,
54
- onScrollStart: state.startScrolling,
55
- onScrollEnd: state.endScrolling,
56
- scrollDirection: scrollDirection
57
- }, $6d0a5c394373ae64$var$renderChildren(null, state.visibleViews, renderWrapper || $6d0a5c394373ae64$var$defaultRenderWrapper));
58
- });
59
- function $6d0a5c394373ae64$var$renderChildren(parent, views, renderWrapper) {
60
- return views.map((view)=>{
61
- return renderWrapper(parent, view, view.children ? Array.from(view.children) : [], (childViews)=>$6d0a5c394373ae64$var$renderChildren(view, childViews, renderWrapper));
62
- });
63
- }
64
- function $6d0a5c394373ae64$var$defaultRenderWrapper(parent, reusableView) {
65
- return /*#__PURE__*/ (0, $9WwqA$react).createElement((0, $ccf8a0a04e4175ae$export$6796df8ba7398521), {
66
- key: reusableView.key,
67
- layoutInfo: reusableView.layoutInfo,
68
- virtualizer: reusableView.virtualizer,
69
- parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
70
- }, reusableView.rendered);
71
- }
72
-
73
-
74
- export {$6d0a5c394373ae64$export$89be5a243e59c4b2 as Virtualizer};
75
- //# sourceMappingURL=Virtualizer.module.js.map