@react-stately/layout 4.6.0 → 4.7.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.
@@ -1,237 +0,0 @@
1
- var $5TwTj$reactstatelyvirtualizer = require("@react-stately/virtualizer");
2
-
3
-
4
- function $parcel$export(e, n, v, s) {
5
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
6
- }
7
-
8
- $parcel$export(module.exports, "WaterfallLayout", () => $f2cd6b90da09fa37$export$e9f7cda058ba8df8);
9
- /*
10
- * Copyright 2024 Adobe. All rights reserved.
11
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
12
- * you may not use this file except in compliance with the License. You may obtain a copy
13
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
14
- *
15
- * Unless required by applicable law or agreed to in writing, software distributed under
16
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
17
- * OF ANY KIND, either express or implied. See the License for the specific language
18
- * governing permissions and limitations under the License.
19
- */
20
- class $f2cd6b90da09fa37$var$WaterfallLayoutInfo extends (0, $5TwTj$reactstatelyvirtualizer.LayoutInfo) {
21
- copy() {
22
- let res = super.copy();
23
- res.column = this.column;
24
- res.index = this.index;
25
- return res;
26
- }
27
- constructor(...args){
28
- super(...args), this.column = 0, this.index = 0;
29
- }
30
- }
31
- const $f2cd6b90da09fa37$var$DEFAULT_OPTIONS = {
32
- minItemSize: new (0, $5TwTj$reactstatelyvirtualizer.Size)(200, 200),
33
- maxItemSize: new (0, $5TwTj$reactstatelyvirtualizer.Size)(Infinity, Infinity),
34
- minSpace: new (0, $5TwTj$reactstatelyvirtualizer.Size)(18, 18),
35
- maxSpace: Infinity,
36
- maxColumns: Infinity,
37
- dropIndicatorThickness: 2,
38
- loaderHeight: 48
39
- };
40
- class $f2cd6b90da09fa37$export$e9f7cda058ba8df8 extends (0, $5TwTj$reactstatelyvirtualizer.Layout) {
41
- shouldInvalidateLayoutOptions(newOptions, oldOptions) {
42
- return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || !(newOptions.minItemSize || $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.minSpace) || newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace || newOptions.loaderHeight !== oldOptions.loaderHeight;
43
- }
44
- update(invalidationContext) {
45
- var _collection_getItem;
46
- let { minItemSize: minItemSize = $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.maxItemSize, minSpace: minSpace = $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.minSpace, maxHorizontalSpace: maxHorizontalSpace = $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.maxSpace, maxColumns: maxColumns = $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.dropIndicatorThickness, loaderHeight: loaderHeight = $f2cd6b90da09fa37$var$DEFAULT_OPTIONS.loaderHeight } = invalidationContext.layoutOptions || {};
47
- this.dropIndicatorThickness = dropIndicatorThickness;
48
- let visibleWidth = this.virtualizer.visibleRect.width;
49
- // The max item width is always the entire viewport.
50
- // If the max item height is infinity, scale in proportion to the max width.
51
- let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
52
- let maxItemHeight = Number.isFinite(maxItemSize.height) ? maxItemSize.height : Math.floor(minItemSize.height / minItemSize.width * maxItemWidth);
53
- // Compute the number of rows and columns needed to display the content
54
- let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
55
- let numColumns = Math.max(1, Math.min(maxColumns, columns));
56
- // Compute the available width (minus the space between items)
57
- let width = visibleWidth - minSpace.width * Math.max(0, numColumns);
58
- // Compute the item width based on the space available
59
- let itemWidth = Math.floor(width / numColumns);
60
- itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
61
- // Compute the item height, which is proportional to the item width
62
- let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
63
- let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
64
- itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
65
- // Compute the horizontal spacing, content height and horizontal margin
66
- let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));
67
- this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);
68
- // Setup an array of column heights
69
- let columnHeights = Array(numColumns).fill(minSpace.height);
70
- let newLayoutInfos = new Map();
71
- let index = 0;
72
- let addNode = (key, node)=>{
73
- let oldLayoutInfo = this.layoutInfos.get(key);
74
- let height = itemHeight;
75
- let estimatedSize = true;
76
- if (oldLayoutInfo) {
77
- height = oldLayoutInfo.rect.height / oldLayoutInfo.rect.width * itemWidth;
78
- estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;
79
- }
80
- // Figure out which column to place the item in, and compute its position.
81
- // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
82
- let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.index === index && oldLayoutInfo.rect.y < this.virtualizer.visibleRect.maxY ? oldLayoutInfo.column : undefined;
83
- let column = prevColumn !== null && prevColumn !== void 0 ? prevColumn : columnHeights.reduce((minIndex, h, i)=>h < columnHeights[minIndex] ? i : minIndex, 0);
84
- let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;
85
- let y = columnHeights[column];
86
- let rect = new (0, $5TwTj$reactstatelyvirtualizer.Rect)(x, y, itemWidth, height);
87
- let layoutInfo = new $f2cd6b90da09fa37$var$WaterfallLayoutInfo(node.type, key, rect);
88
- layoutInfo.estimatedSize = estimatedSize;
89
- layoutInfo.allowOverflow = true;
90
- layoutInfo.content = node;
91
- layoutInfo.column = column;
92
- layoutInfo.index = index++;
93
- newLayoutInfos.set(key, layoutInfo);
94
- columnHeights[column] += layoutInfo.rect.height + minSpace.height;
95
- };
96
- let collection = this.virtualizer.collection;
97
- let skeletonCount = 0;
98
- for (let node of collection){
99
- if (node.type === 'skeleton') {
100
- // Add skeleton cards until every column has at least one, and we fill the viewport.
101
- let startingHeights = [
102
- ...columnHeights
103
- ];
104
- while(!columnHeights.every((h, i)=>h !== startingHeights[i]) || Math.min(...columnHeights) < this.virtualizer.visibleRect.height){
105
- var _this_layoutInfos_get;
106
- let key = `${node.key}-${skeletonCount++}`;
107
- let content = ((_this_layoutInfos_get = this.layoutInfos.get(key)) === null || _this_layoutInfos_get === void 0 ? void 0 : _this_layoutInfos_get.content) || {
108
- ...node
109
- };
110
- addNode(key, content);
111
- }
112
- break;
113
- } else if (node.type !== 'loader') addNode(node.key, node);
114
- }
115
- // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,
116
- // except if we are performing skeleton loading
117
- let isEmptyOrLoading = (collection === null || collection === void 0 ? void 0 : collection.size) === 0 && ((_collection_getItem = collection.getItem(collection.getFirstKey())) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.type) !== 'skeleton';
118
- let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);
119
- // Always add the loader sentinel if present in the collection so we can make sure it is never virtualized out.
120
- // Add it under the first column for simplicity
121
- let lastNode = collection.getItem(collection.getLastKey());
122
- if ((lastNode === null || lastNode === void 0 ? void 0 : lastNode.type) === 'loader') {
123
- if (skeletonCount > 0 || !lastNode.props.isLoading) loaderHeight = 0;
124
- const loaderWidth = visibleWidth - horizontalSpacing * 2;
125
- // Note that if the user provides isLoading to their sentinel during a case where they only want to render the emptyState, this will reserve
126
- // room for the loader alongside rendering the emptyState
127
- let rect = new (0, $5TwTj$reactstatelyvirtualizer.Rect)(horizontalSpacing, maxHeight, loaderWidth, loaderHeight);
128
- let layoutInfo = new (0, $5TwTj$reactstatelyvirtualizer.LayoutInfo)('loader', lastNode.key, rect);
129
- newLayoutInfos.set(lastNode.key, layoutInfo);
130
- maxHeight = layoutInfo.rect.maxY;
131
- }
132
- this.contentSize = new (0, $5TwTj$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, maxHeight);
133
- this.layoutInfos = newLayoutInfos;
134
- this.numColumns = numColumns;
135
- }
136
- getLayoutInfo(key) {
137
- return this.layoutInfos.get(key);
138
- }
139
- getContentSize() {
140
- return this.contentSize;
141
- }
142
- getVisibleLayoutInfos(rect) {
143
- let layoutInfos = [];
144
- for (let layoutInfo of this.layoutInfos.values())if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key) || layoutInfo.type === 'loader') layoutInfos.push(layoutInfo);
145
- return layoutInfos;
146
- }
147
- updateItemSize(key, size) {
148
- let layoutInfo = this.layoutInfos.get(key);
149
- if (!size || !layoutInfo) return false;
150
- if (size.height !== layoutInfo.rect.height) {
151
- let newLayoutInfo = layoutInfo.copy();
152
- newLayoutInfo.rect.height = size.height;
153
- newLayoutInfo.estimatedSize = false;
154
- this.layoutInfos.set(key, newLayoutInfo);
155
- return true;
156
- }
157
- return false;
158
- }
159
- // Override keyboard navigation to work spatially.
160
- getKeyRightOf(key) {
161
- let layoutInfo = this.getLayoutInfo(key);
162
- if (!layoutInfo) return null;
163
- let rect = new (0, $5TwTj$reactstatelyvirtualizer.Rect)(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
164
- let layoutInfos = this.getVisibleLayoutInfos(rect);
165
- let bestKey = null;
166
- let bestDistance = Infinity;
167
- for (let candidate of layoutInfos){
168
- if (candidate.key === key) continue;
169
- // Find the closest item in the x direction with the most overlap in the y direction.
170
- let deltaX = candidate.rect.x - rect.x;
171
- let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
172
- let distance = deltaX - overlapY;
173
- if (distance < bestDistance) {
174
- bestDistance = distance;
175
- bestKey = candidate.key;
176
- }
177
- }
178
- return bestKey;
179
- }
180
- getKeyLeftOf(key) {
181
- let layoutInfo = this.getLayoutInfo(key);
182
- if (!layoutInfo) return null;
183
- let rect = new (0, $5TwTj$reactstatelyvirtualizer.Rect)(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);
184
- let layoutInfos = this.getVisibleLayoutInfos(rect);
185
- let bestKey = null;
186
- let bestDistance = Infinity;
187
- for (let candidate of layoutInfos){
188
- if (candidate.key === key) continue;
189
- // Find the closest item in the x direction with the most overlap in the y direction.
190
- let deltaX = rect.maxX - candidate.rect.maxX;
191
- let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
192
- let distance = deltaX - overlapY;
193
- if (distance < bestDistance) {
194
- bestDistance = distance;
195
- bestKey = candidate.key;
196
- }
197
- }
198
- return bestKey;
199
- }
200
- // This overrides the default behavior of shift selection to work spatially
201
- // rather than following the order of the items in the collection (which may appear unpredictable).
202
- getKeyRange(from, to) {
203
- let fromLayoutInfo = this.getLayoutInfo(from);
204
- let toLayoutInfo = this.getLayoutInfo(to);
205
- if (!fromLayoutInfo || !toLayoutInfo) return [];
206
- // Find items where half of the area intersects the rectangle
207
- // formed from the first item to the last item in the range.
208
- let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);
209
- let keys = [];
210
- for (let layoutInfo of this.layoutInfos.values())if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) keys.push(layoutInfo.key);
211
- return keys;
212
- }
213
- getDropTargetFromPoint(x, y) {
214
- if (this.layoutInfos.size === 0) return {
215
- type: 'root'
216
- };
217
- x += this.virtualizer.visibleRect.x;
218
- y += this.virtualizer.visibleRect.y;
219
- let key = this.virtualizer.keyAtPoint(new (0, $5TwTj$reactstatelyvirtualizer.Point)(x, y));
220
- if (key == null) return {
221
- type: 'root'
222
- };
223
- // Only support "on" drop position in waterfall layout.
224
- // Reordering doesn't make sense because the items don't have a deterministic order.
225
- return {
226
- type: 'item',
227
- key: key,
228
- dropPosition: 'on'
229
- };
230
- }
231
- constructor(...args){
232
- super(...args), this.contentSize = new (0, $5TwTj$reactstatelyvirtualizer.Size)(), this.layoutInfos = new Map(), this.numColumns = 0, this.dropIndicatorThickness = 2, this.margin = 0;
233
- }
234
- }
235
-
236
-
237
- //# sourceMappingURL=WaterfallLayout.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-stately/layout/src/WaterfallLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {DropTarget, DropTargetDelegate, Key, LayoutDelegate, Node} from '@react-types/shared';\nimport {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface WaterfallLayoutOptions {\n /**\n * The minimum item size.\n * @default 200 x 200\n */\n minItemSize?: Size,\n /**\n * The maximum item size.\n * @default Infinity\n */\n maxItemSize?: Size,\n /**\n * The minimum space required between items.\n * @default 18 x 18\n */\n minSpace?: Size,\n /**\n * The maximum allowed horizontal space between items.\n * @default Infinity\n */\n maxHorizontalSpace?: number,\n /**\n * The maximum number of columns.\n * @default Infinity\n */\n maxColumns?: number,\n /**\n * The thickness of the drop indicator.\n * @default 2\n */\n dropIndicatorThickness?: number,\n /**\n * The fixed height of a loader element in px. This loader is specifically for\n * \"load more\" elements rendered when loading more rows at the root level or inside nested row/sections.\n * @default 48\n */\n loaderHeight?: number\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n column = 0;\n index = 0;\n\n copy(): WaterfallLayoutInfo {\n let res = super.copy() as WaterfallLayoutInfo;\n res.column = this.column;\n res.index = this.index;\n return res;\n }\n}\n\nconst DEFAULT_OPTIONS = {\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(Infinity, Infinity),\n minSpace: new Size(18, 18),\n maxSpace: Infinity,\n maxColumns: Infinity,\n dropIndicatorThickness: 2,\n loaderHeight: 48\n};\n\nexport class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {\n private contentSize: Size = new Size();\n private layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n protected numColumns = 0;\n protected dropIndicatorThickness = 2;\n private margin: number = 0;\n\n shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {\n return newOptions.maxColumns !== oldOptions.maxColumns\n || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness\n || (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))\n || (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))\n || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace))\n || (newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace)\n || newOptions.loaderHeight !== oldOptions.loaderHeight;\n }\n\n update(invalidationContext: InvalidationContext<O>): void {\n let {\n minItemSize = DEFAULT_OPTIONS.minItemSize,\n maxItemSize = DEFAULT_OPTIONS.maxItemSize,\n minSpace = DEFAULT_OPTIONS.minSpace,\n maxHorizontalSpace = DEFAULT_OPTIONS.maxSpace,\n maxColumns = DEFAULT_OPTIONS.maxColumns,\n dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness,\n loaderHeight = DEFAULT_OPTIONS.loaderHeight\n } = invalidationContext.layoutOptions || {};\n this.dropIndicatorThickness = dropIndicatorThickness;\n let visibleWidth = this.virtualizer!.visibleRect.width;\n\n // The max item width is always the entire viewport.\n // If the max item height is infinity, scale in proportion to the max width.\n let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n let maxItemHeight = Number.isFinite(maxItemSize.height)\n ? maxItemSize.height\n : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n // Compute the number of rows and columns needed to display the content\n let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n // Compute the available width (minus the space between items)\n let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n // Compute the item width based on the space available\n let itemWidth = Math.floor(width / numColumns);\n itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n // Compute the item height, which is proportional to the item width\n let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);\n itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n // Compute the horizontal spacing, content height and horizontal margin\n let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));\n this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);\n\n // Setup an array of column heights\n let columnHeights = Array(numColumns).fill(minSpace.height);\n let newLayoutInfos = new Map();\n let index = 0;\n let addNode = (key: Key, node: Node<T>) => {\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height = itemHeight;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height / oldLayoutInfo.rect.width * itemWidth;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n }\n\n // Figure out which column to place the item in, and compute its position.\n // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.index === index && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;\n let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n layoutInfo.content = node;\n layoutInfo.column = column;\n layoutInfo.index = index++;\n newLayoutInfos.set(key, layoutInfo);\n\n columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n };\n\n let collection = this.virtualizer!.collection;\n let skeletonCount = 0;\n for (let node of collection) {\n if (node.type === 'skeleton') {\n // Add skeleton cards until every column has at least one, and we fill the viewport.\n let startingHeights = [...columnHeights];\n while (\n !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n Math.min(...columnHeights) < this.virtualizer!.visibleRect.height\n ) {\n let key = `${node.key}-${skeletonCount++}`;\n let content = this.layoutInfos.get(key)?.content || {...node};\n addNode(key, content);\n }\n break;\n } else if (node.type !== 'loader') {\n addNode(node.key, node);\n }\n }\n\n // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,\n // except if we are performing skeleton loading\n let isEmptyOrLoading = collection?.size === 0 && collection.getItem(collection.getFirstKey()!)?.type !== 'skeleton';\n let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);\n\n // Always add the loader sentinel if present in the collection so we can make sure it is never virtualized out.\n // Add it under the first column for simplicity\n let lastNode = collection.getItem(collection.getLastKey()!);\n if (lastNode?.type === 'loader') {\n if (skeletonCount > 0 || !lastNode.props.isLoading) {\n loaderHeight = 0;\n }\n const loaderWidth = visibleWidth - horizontalSpacing * 2;\n // Note that if the user provides isLoading to their sentinel during a case where they only want to render the emptyState, this will reserve\n // room for the loader alongside rendering the emptyState\n let rect = new Rect(horizontalSpacing, maxHeight, loaderWidth, loaderHeight);\n let layoutInfo = new LayoutInfo('loader', lastNode.key, rect);\n newLayoutInfos.set(lastNode.key, layoutInfo);\n maxHeight = layoutInfo.rect.maxY;\n }\n\n this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);\n this.layoutInfos = newLayoutInfos;\n this.numColumns = numColumns;\n }\n\n getLayoutInfo(key: Key): LayoutInfo {\n return this.layoutInfos.get(key)!;\n }\n\n getContentSize(): Size {\n return this.contentSize;\n }\n\n getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n let layoutInfos: LayoutInfo[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key) || layoutInfo.type === 'loader') {\n layoutInfos.push(layoutInfo);\n }\n }\n return layoutInfos;\n }\n\n updateItemSize(key: Key, size: Size): boolean {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n // Override keyboard navigation to work spatially.\n getKeyRightOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = candidate.rect.x - rect.x;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n getKeyLeftOf(key: Key): Key | null {\n let layoutInfo = this.getLayoutInfo(key);\n if (!layoutInfo) {\n return null;\n }\n\n let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n let layoutInfos = this.getVisibleLayoutInfos(rect);\n let bestKey: Key | null = null;\n let bestDistance = Infinity;\n for (let candidate of layoutInfos) {\n if (candidate.key === key) {\n continue;\n }\n\n // Find the closest item in the x direction with the most overlap in the y direction.\n let deltaX = rect.maxX - candidate.rect.maxX;\n let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n let distance = deltaX - overlapY;\n if (distance < bestDistance) {\n bestDistance = distance;\n bestKey = candidate.key;\n }\n }\n\n return bestKey;\n }\n\n // This overrides the default behavior of shift selection to work spatially\n // rather than following the order of the items in the collection (which may appear unpredictable).\n getKeyRange(from: Key, to: Key): Key[] {\n let fromLayoutInfo = this.getLayoutInfo(from);\n let toLayoutInfo = this.getLayoutInfo(to);\n if (!fromLayoutInfo || !toLayoutInfo) {\n return [];\n }\n\n // Find items where half of the area intersects the rectangle\n // formed from the first item to the last item in the range.\n let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n let keys: Key[] = [];\n for (let layoutInfo of this.layoutInfos.values()) {\n if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n keys.push(layoutInfo.key);\n }\n }\n return keys;\n }\n\n getDropTargetFromPoint(x: number, y: number): DropTarget {\n if (this.layoutInfos.size === 0) {\n return {type: 'root'};\n }\n\n x += this.virtualizer!.visibleRect.x;\n y += this.virtualizer!.visibleRect.y;\n let key = this.virtualizer!.keyAtPoint(new Point(x, y));\n if (key == null) {\n return {type: 'root'};\n }\n\n // Only support \"on\" drop position in waterfall layout.\n // Reordering doesn't make sense because the items don't have a deterministic order.\n return {\n type: 'item',\n key,\n dropPosition: 'on'\n };\n }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.main.js.map"}
@@ -1,232 +0,0 @@
1
- import {LayoutInfo as $lFzwI$LayoutInfo, Size as $lFzwI$Size, Rect as $lFzwI$Rect, Point as $lFzwI$Point, Layout as $lFzwI$Layout} from "@react-stately/virtualizer";
2
-
3
- /*
4
- * Copyright 2024 Adobe. All rights reserved.
5
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
6
- * you may not use this file except in compliance with the License. You may obtain a copy
7
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
8
- *
9
- * Unless required by applicable law or agreed to in writing, software distributed under
10
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
11
- * OF ANY KIND, either express or implied. See the License for the specific language
12
- * governing permissions and limitations under the License.
13
- */
14
- class $f483179558aa907f$var$WaterfallLayoutInfo extends (0, $lFzwI$LayoutInfo) {
15
- copy() {
16
- let res = super.copy();
17
- res.column = this.column;
18
- res.index = this.index;
19
- return res;
20
- }
21
- constructor(...args){
22
- super(...args), this.column = 0, this.index = 0;
23
- }
24
- }
25
- const $f483179558aa907f$var$DEFAULT_OPTIONS = {
26
- minItemSize: new (0, $lFzwI$Size)(200, 200),
27
- maxItemSize: new (0, $lFzwI$Size)(Infinity, Infinity),
28
- minSpace: new (0, $lFzwI$Size)(18, 18),
29
- maxSpace: Infinity,
30
- maxColumns: Infinity,
31
- dropIndicatorThickness: 2,
32
- loaderHeight: 48
33
- };
34
- class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
35
- shouldInvalidateLayoutOptions(newOptions, oldOptions) {
36
- return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || !(newOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace) || newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace || newOptions.loaderHeight !== oldOptions.loaderHeight;
37
- }
38
- update(invalidationContext) {
39
- var _collection_getItem;
40
- let { minItemSize: minItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize, minSpace: minSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace, maxHorizontalSpace: maxHorizontalSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.maxSpace, maxColumns: maxColumns = $f483179558aa907f$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $f483179558aa907f$var$DEFAULT_OPTIONS.dropIndicatorThickness, loaderHeight: loaderHeight = $f483179558aa907f$var$DEFAULT_OPTIONS.loaderHeight } = invalidationContext.layoutOptions || {};
41
- this.dropIndicatorThickness = dropIndicatorThickness;
42
- let visibleWidth = this.virtualizer.visibleRect.width;
43
- // The max item width is always the entire viewport.
44
- // If the max item height is infinity, scale in proportion to the max width.
45
- let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
46
- let maxItemHeight = Number.isFinite(maxItemSize.height) ? maxItemSize.height : Math.floor(minItemSize.height / minItemSize.width * maxItemWidth);
47
- // Compute the number of rows and columns needed to display the content
48
- let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
49
- let numColumns = Math.max(1, Math.min(maxColumns, columns));
50
- // Compute the available width (minus the space between items)
51
- let width = visibleWidth - minSpace.width * Math.max(0, numColumns);
52
- // Compute the item width based on the space available
53
- let itemWidth = Math.floor(width / numColumns);
54
- itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
55
- // Compute the item height, which is proportional to the item width
56
- let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
57
- let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
58
- itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
59
- // Compute the horizontal spacing, content height and horizontal margin
60
- let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));
61
- this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);
62
- // Setup an array of column heights
63
- let columnHeights = Array(numColumns).fill(minSpace.height);
64
- let newLayoutInfos = new Map();
65
- let index = 0;
66
- let addNode = (key, node)=>{
67
- let oldLayoutInfo = this.layoutInfos.get(key);
68
- let height = itemHeight;
69
- let estimatedSize = true;
70
- if (oldLayoutInfo) {
71
- height = oldLayoutInfo.rect.height / oldLayoutInfo.rect.width * itemWidth;
72
- estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;
73
- }
74
- // Figure out which column to place the item in, and compute its position.
75
- // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
76
- let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.index === index && oldLayoutInfo.rect.y < this.virtualizer.visibleRect.maxY ? oldLayoutInfo.column : undefined;
77
- let column = prevColumn !== null && prevColumn !== void 0 ? prevColumn : columnHeights.reduce((minIndex, h, i)=>h < columnHeights[minIndex] ? i : minIndex, 0);
78
- let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;
79
- let y = columnHeights[column];
80
- let rect = new (0, $lFzwI$Rect)(x, y, itemWidth, height);
81
- let layoutInfo = new $f483179558aa907f$var$WaterfallLayoutInfo(node.type, key, rect);
82
- layoutInfo.estimatedSize = estimatedSize;
83
- layoutInfo.allowOverflow = true;
84
- layoutInfo.content = node;
85
- layoutInfo.column = column;
86
- layoutInfo.index = index++;
87
- newLayoutInfos.set(key, layoutInfo);
88
- columnHeights[column] += layoutInfo.rect.height + minSpace.height;
89
- };
90
- let collection = this.virtualizer.collection;
91
- let skeletonCount = 0;
92
- for (let node of collection){
93
- if (node.type === 'skeleton') {
94
- // Add skeleton cards until every column has at least one, and we fill the viewport.
95
- let startingHeights = [
96
- ...columnHeights
97
- ];
98
- while(!columnHeights.every((h, i)=>h !== startingHeights[i]) || Math.min(...columnHeights) < this.virtualizer.visibleRect.height){
99
- var _this_layoutInfos_get;
100
- let key = `${node.key}-${skeletonCount++}`;
101
- let content = ((_this_layoutInfos_get = this.layoutInfos.get(key)) === null || _this_layoutInfos_get === void 0 ? void 0 : _this_layoutInfos_get.content) || {
102
- ...node
103
- };
104
- addNode(key, content);
105
- }
106
- break;
107
- } else if (node.type !== 'loader') addNode(node.key, node);
108
- }
109
- // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,
110
- // except if we are performing skeleton loading
111
- let isEmptyOrLoading = (collection === null || collection === void 0 ? void 0 : collection.size) === 0 && ((_collection_getItem = collection.getItem(collection.getFirstKey())) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.type) !== 'skeleton';
112
- let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);
113
- // Always add the loader sentinel if present in the collection so we can make sure it is never virtualized out.
114
- // Add it under the first column for simplicity
115
- let lastNode = collection.getItem(collection.getLastKey());
116
- if ((lastNode === null || lastNode === void 0 ? void 0 : lastNode.type) === 'loader') {
117
- if (skeletonCount > 0 || !lastNode.props.isLoading) loaderHeight = 0;
118
- const loaderWidth = visibleWidth - horizontalSpacing * 2;
119
- // Note that if the user provides isLoading to their sentinel during a case where they only want to render the emptyState, this will reserve
120
- // room for the loader alongside rendering the emptyState
121
- let rect = new (0, $lFzwI$Rect)(horizontalSpacing, maxHeight, loaderWidth, loaderHeight);
122
- let layoutInfo = new (0, $lFzwI$LayoutInfo)('loader', lastNode.key, rect);
123
- newLayoutInfos.set(lastNode.key, layoutInfo);
124
- maxHeight = layoutInfo.rect.maxY;
125
- }
126
- this.contentSize = new (0, $lFzwI$Size)(this.virtualizer.visibleRect.width, maxHeight);
127
- this.layoutInfos = newLayoutInfos;
128
- this.numColumns = numColumns;
129
- }
130
- getLayoutInfo(key) {
131
- return this.layoutInfos.get(key);
132
- }
133
- getContentSize() {
134
- return this.contentSize;
135
- }
136
- getVisibleLayoutInfos(rect) {
137
- let layoutInfos = [];
138
- for (let layoutInfo of this.layoutInfos.values())if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key) || layoutInfo.type === 'loader') layoutInfos.push(layoutInfo);
139
- return layoutInfos;
140
- }
141
- updateItemSize(key, size) {
142
- let layoutInfo = this.layoutInfos.get(key);
143
- if (!size || !layoutInfo) return false;
144
- if (size.height !== layoutInfo.rect.height) {
145
- let newLayoutInfo = layoutInfo.copy();
146
- newLayoutInfo.rect.height = size.height;
147
- newLayoutInfo.estimatedSize = false;
148
- this.layoutInfos.set(key, newLayoutInfo);
149
- return true;
150
- }
151
- return false;
152
- }
153
- // Override keyboard navigation to work spatially.
154
- getKeyRightOf(key) {
155
- let layoutInfo = this.getLayoutInfo(key);
156
- if (!layoutInfo) return null;
157
- let rect = new (0, $lFzwI$Rect)(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
158
- let layoutInfos = this.getVisibleLayoutInfos(rect);
159
- let bestKey = null;
160
- let bestDistance = Infinity;
161
- for (let candidate of layoutInfos){
162
- if (candidate.key === key) continue;
163
- // Find the closest item in the x direction with the most overlap in the y direction.
164
- let deltaX = candidate.rect.x - rect.x;
165
- let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
166
- let distance = deltaX - overlapY;
167
- if (distance < bestDistance) {
168
- bestDistance = distance;
169
- bestKey = candidate.key;
170
- }
171
- }
172
- return bestKey;
173
- }
174
- getKeyLeftOf(key) {
175
- let layoutInfo = this.getLayoutInfo(key);
176
- if (!layoutInfo) return null;
177
- let rect = new (0, $lFzwI$Rect)(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);
178
- let layoutInfos = this.getVisibleLayoutInfos(rect);
179
- let bestKey = null;
180
- let bestDistance = Infinity;
181
- for (let candidate of layoutInfos){
182
- if (candidate.key === key) continue;
183
- // Find the closest item in the x direction with the most overlap in the y direction.
184
- let deltaX = rect.maxX - candidate.rect.maxX;
185
- let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
186
- let distance = deltaX - overlapY;
187
- if (distance < bestDistance) {
188
- bestDistance = distance;
189
- bestKey = candidate.key;
190
- }
191
- }
192
- return bestKey;
193
- }
194
- // This overrides the default behavior of shift selection to work spatially
195
- // rather than following the order of the items in the collection (which may appear unpredictable).
196
- getKeyRange(from, to) {
197
- let fromLayoutInfo = this.getLayoutInfo(from);
198
- let toLayoutInfo = this.getLayoutInfo(to);
199
- if (!fromLayoutInfo || !toLayoutInfo) return [];
200
- // Find items where half of the area intersects the rectangle
201
- // formed from the first item to the last item in the range.
202
- let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);
203
- let keys = [];
204
- for (let layoutInfo of this.layoutInfos.values())if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) keys.push(layoutInfo.key);
205
- return keys;
206
- }
207
- getDropTargetFromPoint(x, y) {
208
- if (this.layoutInfos.size === 0) return {
209
- type: 'root'
210
- };
211
- x += this.virtualizer.visibleRect.x;
212
- y += this.virtualizer.visibleRect.y;
213
- let key = this.virtualizer.keyAtPoint(new (0, $lFzwI$Point)(x, y));
214
- if (key == null) return {
215
- type: 'root'
216
- };
217
- // Only support "on" drop position in waterfall layout.
218
- // Reordering doesn't make sense because the items don't have a deterministic order.
219
- return {
220
- type: 'item',
221
- key: key,
222
- dropPosition: 'on'
223
- };
224
- }
225
- constructor(...args){
226
- super(...args), this.contentSize = new (0, $lFzwI$Size)(), this.layoutInfos = new Map(), this.numColumns = 0, this.dropIndicatorThickness = 2, this.margin = 0;
227
- }
228
- }
229
-
230
-
231
- export {$f483179558aa907f$export$e9f7cda058ba8df8 as WaterfallLayout};
232
- //# sourceMappingURL=WaterfallLayout.module.js.map