@react-spectrum/card 3.0.0-alpha.32 → 3.0.0-alpha.34
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/BaseLayout.main.js +21 -26
- package/dist/BaseLayout.main.js.map +1 -1
- package/dist/BaseLayout.mjs +22 -27
- package/dist/BaseLayout.module.js +21 -26
- package/dist/BaseLayout.module.js.map +1 -1
- package/dist/Card.main.js +2 -2
- package/dist/Card.mjs +3 -3
- package/dist/Card.module.js +2 -2
- package/dist/CardBase.main.js +37 -37
- package/dist/CardBase.main.js.map +1 -1
- package/dist/CardBase.mjs +38 -38
- package/dist/CardBase.module.js +37 -37
- package/dist/CardBase.module.js.map +1 -1
- package/dist/CardView.main.js +56 -48
- package/dist/CardView.main.js.map +1 -1
- package/dist/CardView.mjs +58 -50
- package/dist/CardView.module.js +57 -49
- package/dist/CardView.module.js.map +1 -1
- package/dist/CardViewContext.mjs +1 -1
- package/dist/GalleryLayout.main.js +10 -10
- package/dist/GalleryLayout.main.js.map +1 -1
- package/dist/GalleryLayout.mjs +11 -11
- package/dist/GalleryLayout.module.js +10 -10
- package/dist/GalleryLayout.module.js.map +1 -1
- package/dist/GridLayout.main.js +18 -42
- package/dist/GridLayout.main.js.map +1 -1
- package/dist/GridLayout.mjs +19 -43
- package/dist/GridLayout.module.js +18 -42
- package/dist/GridLayout.module.js.map +1 -1
- package/dist/WaterfallLayout.main.js +7 -7
- package/dist/WaterfallLayout.main.js.map +1 -1
- package/dist/WaterfallLayout.mjs +8 -8
- package/dist/WaterfallLayout.module.js +7 -7
- package/dist/WaterfallLayout.module.js.map +1 -1
- package/dist/ar-AE.mjs +1 -1
- package/dist/bg-BG.mjs +1 -1
- package/dist/card_vars_css.mjs +1 -1
- package/dist/cs-CZ.mjs +1 -1
- package/dist/da-DK.mjs +1 -1
- package/dist/de-DE.mjs +1 -1
- package/dist/el-GR.mjs +1 -1
- package/dist/en-US.mjs +1 -1
- package/dist/es-ES.mjs +1 -1
- package/dist/et-EE.mjs +1 -1
- package/dist/fi-FI.mjs +1 -1
- package/dist/fr-FR.mjs +1 -1
- package/dist/he-IL.mjs +1 -1
- package/dist/hr-HR.mjs +1 -1
- package/dist/hu-HU.mjs +1 -1
- package/dist/intlStrings.mjs +1 -1
- package/dist/it-IT.mjs +1 -1
- package/dist/ja-JP.mjs +1 -1
- package/dist/ko-KR.mjs +1 -1
- package/dist/lt-LT.mjs +1 -1
- package/dist/lv-LV.mjs +1 -1
- package/dist/nb-NO.mjs +1 -1
- package/dist/nl-NL.mjs +1 -1
- package/dist/pl-PL.mjs +1 -1
- package/dist/pt-BR.mjs +1 -1
- package/dist/pt-PT.mjs +1 -1
- package/dist/ro-RO.mjs +1 -1
- package/dist/ru-RU.mjs +1 -1
- package/dist/sk-SK.mjs +1 -1
- package/dist/sl-SI.mjs +1 -1
- package/dist/sr-SP.mjs +1 -1
- package/dist/sv-SE.mjs +1 -1
- package/dist/tr-TR.mjs +1 -1
- package/dist/types.d.ts +12 -11
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.mjs +1 -1
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.main.js +1 -1
- package/dist/zh-TW.main.js.map +1 -1
- package/dist/zh-TW.mjs +2 -2
- package/dist/zh-TW.module.js +1 -1
- package/dist/zh-TW.module.js.map +1 -1
- package/package.json +20 -20
- package/src/BaseLayout.tsx +22 -19
- package/src/CardBase.tsx +1 -1
- package/src/CardView.tsx +42 -38
- package/src/GalleryLayout.tsx +2 -2
- package/src/GridLayout.tsx +0 -35
- package/src/WaterfallLayout.tsx +2 -2
|
@@ -23,7 +23,7 @@ $parcel$export(module.exports, "WaterfallLayout", () => $632abf8fbf0ad57b$export
|
|
|
23
23
|
|
|
24
24
|
class $632abf8fbf0ad57b$export$e9f7cda058ba8df8 extends (0, $5ee605f09afaa4de$exports.BaseLayout) {
|
|
25
25
|
get layoutType() {
|
|
26
|
-
return
|
|
26
|
+
return 'waterfall';
|
|
27
27
|
}
|
|
28
28
|
buildCollection(invalidationContext) {
|
|
29
29
|
// Compute the number of columns needed to display the content
|
|
@@ -89,14 +89,14 @@ class $632abf8fbf0ad57b$export$e9f7cda058ba8df8 extends (0, $5ee605f09afaa4de$ex
|
|
|
89
89
|
loaderHeight = this.virtualizer.visibleRect.height || 60;
|
|
90
90
|
}
|
|
91
91
|
let rect = new (0, $eKgYB$reactstatelyvirtualizer.Rect)(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);
|
|
92
|
-
let loader = new (0, $eKgYB$reactstatelyvirtualizer.LayoutInfo)(
|
|
93
|
-
this.layoutInfos.set(
|
|
92
|
+
let loader = new (0, $eKgYB$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
|
|
93
|
+
this.layoutInfos.set('loader', loader);
|
|
94
94
|
y = loader.rect.maxY;
|
|
95
95
|
}
|
|
96
96
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
97
97
|
let rect = new (0, $eKgYB$reactstatelyvirtualizer.Rect)(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
|
|
98
|
-
let placeholder = new (0, $eKgYB$reactstatelyvirtualizer.LayoutInfo)(
|
|
99
|
-
this.layoutInfos.set(
|
|
98
|
+
let placeholder = new (0, $eKgYB$reactstatelyvirtualizer.LayoutInfo)('placeholder', 'placeholder', rect);
|
|
99
|
+
this.layoutInfos.set('placeholder', placeholder);
|
|
100
100
|
y = placeholder.rect.maxY;
|
|
101
101
|
}
|
|
102
102
|
this.contentSize = new (0, $eKgYB$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, y);
|
|
@@ -154,12 +154,12 @@ class $632abf8fbf0ad57b$export$e9f7cda058ba8df8 extends (0, $5ee605f09afaa4de$ex
|
|
|
154
154
|
getKeyRightOf(key) {
|
|
155
155
|
// Expected key is the currently focused cell so we need the parent row key
|
|
156
156
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
157
|
-
return this.direction ===
|
|
157
|
+
return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
|
|
158
158
|
}
|
|
159
159
|
getKeyLeftOf(key) {
|
|
160
160
|
// Expected key is the currently focused cell so we need the parent row key
|
|
161
161
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
162
|
-
return this.direction ===
|
|
162
|
+
return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
|
|
163
163
|
}
|
|
164
164
|
constructor(options = {}){
|
|
165
165
|
// TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/WaterfallLayout.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {BaseLayout, BaseLayoutOptions} from './BaseLayout';\nimport {getChildNodes, getFirstItem} from '@react-stately/collections';\nimport {InvalidationContext, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {Key, KeyboardDelegate, Node} from '@react-types/shared';\n\nexport interface WaterfallLayoutOptions extends BaseLayoutOptions {\n /**\n * The minimum item size.\n * @default 240 x 136\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 number of columns.\n * @default Infinity\n */\n maxColumns?: number\n}\n\n// TODO: this didn't have any options that varied with card size, should it have?\nexport class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {\n protected minItemSize: Size;\n protected maxItemSize: Size;\n protected minSpace: Size;\n protected maxColumns: number;\n protected numColumns: number;\n protected itemWidth: number;\n protected horizontalSpacing: number;\n\n constructor(options: WaterfallLayoutOptions = {}) {\n // TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify\n // minItemSize defaults or other things\n super(options);\n this.minItemSize = options.minItemSize || new Size(240, 136);\n this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n this.margin = options.margin != null ? options.margin : 24;\n this.minSpace = options.minSpace || new Size(18, 18);\n this.maxColumns = options.maxColumns || Infinity;\n\n this.itemWidth = 0;\n this.numColumns = 0;\n\n this.lastCollection = null;\n this.collator = options.collator;\n }\n\n get layoutType() {\n return 'waterfall';\n }\n\n buildCollection(invalidationContext: InvalidationContext<Node<T>, unknown>) {\n // Compute the number of columns needed to display the content\n let visibleWidth = this.virtualizer.visibleRect.width;\n let availableWidth = visibleWidth - this.margin * 2;\n let columns = Math.floor((availableWidth + this.minSpace.width) / (this.minItemSize.width + this.minSpace.width));\n this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n\n // Compute the available width (minus the space between items)\n let width = availableWidth - (this.minSpace.width * (this.numColumns - 1));\n\n // Compute the item width based on the space available\n let itemWidth = Math.round(width / this.numColumns);\n itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));\n this.itemWidth = itemWidth;\n\n // Compute the horizontal spacing\n // if only one column, we cannot divide by zero, so set it to 1\n let horizontalSpacing = Math.round((availableWidth - this.numColumns * itemWidth) / Math.max(1, this.numColumns - 1));\n this.horizontalSpacing = horizontalSpacing;\n\n // Setup an array of column heights\n let columnHeights = Array(this.numColumns).fill(this.margin);\n for (let node of this.collection) {\n let key = node.key;\n // Compute the height of the item. Use the existing height if available,\n // otherwise call the delegate to estimate the size.\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n } else if (node.props.width && node.props.height) {\n let nodeWidth = node.props.width;\n let nodeHeight = node.props.height;\n let scaledHeight = Math.round(nodeHeight * ((itemWidth) / nodeWidth));\n height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));\n } else {\n height = itemWidth;\n }\n\n // Figure out which column to place the item in, and compute its position.\n let column = this.getNextColumnIndex(columnHeights);\n let x = this.margin + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(key, layoutInfo);\n\n // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?\n // Removing it from v2 doesn't seem to do anything?\n // if (layoutInfo.estimatedSize && !invalidationContext.contentChanged && !this.collectionView._transaction) {\n // this.updateItemSize(new IndexPath(section, i));\n // }\n\n columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;\n columnHeights.fill(maxHeight);\n let y = columnHeights[0];\n\n if (this.isLoading) {\n let loaderY = y;\n let loaderHeight = 60;\n // If there aren't any items, make loader take all avaliable room and remove margin from y calculation\n // so it doesn't scroll\n if (this.collection.size === 0) {\n loaderY = 0;\n loaderHeight = this.virtualizer.visibleRect.height || 60;\n }\n\n let rect = new Rect(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);\n let loader = new LayoutInfo('loader', 'loader', rect);\n this.layoutInfos.set('loader', loader);\n y = loader.rect.maxY;\n }\n\n if (this.collection.size === 0 && !this.isLoading) {\n let rect = new Rect(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);\n let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n this.layoutInfos.set('placeholder', placeholder);\n y = placeholder.rect.maxY;\n }\n\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below\n // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n getNextColumnIndex(columnHeights) {\n let minIndex = 0;\n for (let i = 0; i < columnHeights.length; i++) {\n if (columnHeights[i] < columnHeights[minIndex]) {\n minIndex = i;\n }\n }\n\n return minIndex;\n }\n\n getClosestRight(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // Refactored from v2. Current strategy is to find the closest card in the adjacent column.\n // This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall\n // and thus the top corner to top corner distance was massive.\n\n // First look for a card to the immediate right of the current card. If we can't find any, look for the nearest card in the entire column to the right of the card\n let rect = new Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getClosestLeft(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card\n let rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getKeyRightOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);\n }\n\n getKeyLeftOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);\n }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/WaterfallLayout.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {BaseLayout, BaseLayoutOptions} from './BaseLayout';\nimport {getChildNodes, getFirstItem} from '@react-stately/collections';\nimport {InvalidationContext, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {Key, KeyboardDelegate} from '@react-types/shared';\n\nexport interface WaterfallLayoutOptions extends BaseLayoutOptions {\n /**\n * The minimum item size.\n * @default 240 x 136\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 number of columns.\n * @default Infinity\n */\n maxColumns?: number\n}\n\n// TODO: this didn't have any options that varied with card size, should it have?\nexport class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {\n protected minItemSize: Size;\n protected maxItemSize: Size;\n protected minSpace: Size;\n protected maxColumns: number;\n protected numColumns: number;\n protected itemWidth: number;\n protected horizontalSpacing: number;\n\n constructor(options: WaterfallLayoutOptions = {}) {\n // TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify\n // minItemSize defaults or other things\n super(options);\n this.minItemSize = options.minItemSize || new Size(240, 136);\n this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n this.margin = options.margin != null ? options.margin : 24;\n this.minSpace = options.minSpace || new Size(18, 18);\n this.maxColumns = options.maxColumns || Infinity;\n\n this.itemWidth = 0;\n this.numColumns = 0;\n\n this.lastCollection = null;\n this.collator = options.collator;\n }\n\n get layoutType() {\n return 'waterfall';\n }\n\n buildCollection(invalidationContext: InvalidationContext) {\n // Compute the number of columns needed to display the content\n let visibleWidth = this.virtualizer.visibleRect.width;\n let availableWidth = visibleWidth - this.margin * 2;\n let columns = Math.floor((availableWidth + this.minSpace.width) / (this.minItemSize.width + this.minSpace.width));\n this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n\n // Compute the available width (minus the space between items)\n let width = availableWidth - (this.minSpace.width * (this.numColumns - 1));\n\n // Compute the item width based on the space available\n let itemWidth = Math.round(width / this.numColumns);\n itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));\n this.itemWidth = itemWidth;\n\n // Compute the horizontal spacing\n // if only one column, we cannot divide by zero, so set it to 1\n let horizontalSpacing = Math.round((availableWidth - this.numColumns * itemWidth) / Math.max(1, this.numColumns - 1));\n this.horizontalSpacing = horizontalSpacing;\n\n // Setup an array of column heights\n let columnHeights = Array(this.numColumns).fill(this.margin);\n for (let node of this.collection) {\n let key = node.key;\n // Compute the height of the item. Use the existing height if available,\n // otherwise call the delegate to estimate the size.\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n } else if (node.props.width && node.props.height) {\n let nodeWidth = node.props.width;\n let nodeHeight = node.props.height;\n let scaledHeight = Math.round(nodeHeight * ((itemWidth) / nodeWidth));\n height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));\n } else {\n height = itemWidth;\n }\n\n // Figure out which column to place the item in, and compute its position.\n let column = this.getNextColumnIndex(columnHeights);\n let x = this.margin + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(key, layoutInfo);\n\n // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?\n // Removing it from v2 doesn't seem to do anything?\n // if (layoutInfo.estimatedSize && !invalidationContext.contentChanged && !this.collectionView._transaction) {\n // this.updateItemSize(new IndexPath(section, i));\n // }\n\n columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;\n columnHeights.fill(maxHeight);\n let y = columnHeights[0];\n\n if (this.isLoading) {\n let loaderY = y;\n let loaderHeight = 60;\n // If there aren't any items, make loader take all avaliable room and remove margin from y calculation\n // so it doesn't scroll\n if (this.collection.size === 0) {\n loaderY = 0;\n loaderHeight = this.virtualizer.visibleRect.height || 60;\n }\n\n let rect = new Rect(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);\n let loader = new LayoutInfo('loader', 'loader', rect);\n this.layoutInfos.set('loader', loader);\n y = loader.rect.maxY;\n }\n\n if (this.collection.size === 0 && !this.isLoading) {\n let rect = new Rect(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);\n let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n this.layoutInfos.set('placeholder', placeholder);\n y = placeholder.rect.maxY;\n }\n\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below\n // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n getNextColumnIndex(columnHeights) {\n let minIndex = 0;\n for (let i = 0; i < columnHeights.length; i++) {\n if (columnHeights[i] < columnHeights[minIndex]) {\n minIndex = i;\n }\n }\n\n return minIndex;\n }\n\n getClosestRight(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // Refactored from v2. Current strategy is to find the closest card in the adjacent column.\n // This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall\n // and thus the top corner to top corner distance was massive.\n\n // First look for a card to the immediate right of the current card. If we can't find any, look for the nearest card in the entire column to the right of the card\n let rect = new Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getClosestLeft(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card\n let rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getKeyRightOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);\n }\n\n getKeyLeftOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);\n }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.main.js.map"}
|
package/dist/WaterfallLayout.mjs
CHANGED
|
@@ -17,7 +17,7 @@ import {Rect as $bRzF0$Rect, LayoutInfo as $bRzF0$LayoutInfo, Size as $bRzF0$Siz
|
|
|
17
17
|
|
|
18
18
|
class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
19
19
|
get layoutType() {
|
|
20
|
-
return
|
|
20
|
+
return 'waterfall';
|
|
21
21
|
}
|
|
22
22
|
buildCollection(invalidationContext) {
|
|
23
23
|
// Compute the number of columns needed to display the content
|
|
@@ -83,14 +83,14 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
83
83
|
loaderHeight = this.virtualizer.visibleRect.height || 60;
|
|
84
84
|
}
|
|
85
85
|
let rect = new (0, $bRzF0$Rect)(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);
|
|
86
|
-
let loader = new (0, $bRzF0$LayoutInfo)(
|
|
87
|
-
this.layoutInfos.set(
|
|
86
|
+
let loader = new (0, $bRzF0$LayoutInfo)('loader', 'loader', rect);
|
|
87
|
+
this.layoutInfos.set('loader', loader);
|
|
88
88
|
y = loader.rect.maxY;
|
|
89
89
|
}
|
|
90
90
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
91
91
|
let rect = new (0, $bRzF0$Rect)(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
|
|
92
|
-
let placeholder = new (0, $bRzF0$LayoutInfo)(
|
|
93
|
-
this.layoutInfos.set(
|
|
92
|
+
let placeholder = new (0, $bRzF0$LayoutInfo)('placeholder', 'placeholder', rect);
|
|
93
|
+
this.layoutInfos.set('placeholder', placeholder);
|
|
94
94
|
y = placeholder.rect.maxY;
|
|
95
95
|
}
|
|
96
96
|
this.contentSize = new (0, $bRzF0$Size)(this.virtualizer.visibleRect.width, y);
|
|
@@ -148,12 +148,12 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
148
148
|
getKeyRightOf(key) {
|
|
149
149
|
// Expected key is the currently focused cell so we need the parent row key
|
|
150
150
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
151
|
-
return this.direction ===
|
|
151
|
+
return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
|
|
152
152
|
}
|
|
153
153
|
getKeyLeftOf(key) {
|
|
154
154
|
// Expected key is the currently focused cell so we need the parent row key
|
|
155
155
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
156
|
-
return this.direction ===
|
|
156
|
+
return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
|
|
157
157
|
}
|
|
158
158
|
constructor(options = {}){
|
|
159
159
|
// TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify
|
|
@@ -173,4 +173,4 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
export {$03278f8d0f6860bb$export$e9f7cda058ba8df8 as WaterfallLayout};
|
|
176
|
-
//# sourceMappingURL=WaterfallLayout.
|
|
176
|
+
//# sourceMappingURL=WaterfallLayout.module.js.map
|
|
@@ -17,7 +17,7 @@ import {Rect as $bRzF0$Rect, LayoutInfo as $bRzF0$LayoutInfo, Size as $bRzF0$Siz
|
|
|
17
17
|
|
|
18
18
|
class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
19
19
|
get layoutType() {
|
|
20
|
-
return
|
|
20
|
+
return 'waterfall';
|
|
21
21
|
}
|
|
22
22
|
buildCollection(invalidationContext) {
|
|
23
23
|
// Compute the number of columns needed to display the content
|
|
@@ -83,14 +83,14 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
83
83
|
loaderHeight = this.virtualizer.visibleRect.height || 60;
|
|
84
84
|
}
|
|
85
85
|
let rect = new (0, $bRzF0$Rect)(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);
|
|
86
|
-
let loader = new (0, $bRzF0$LayoutInfo)(
|
|
87
|
-
this.layoutInfos.set(
|
|
86
|
+
let loader = new (0, $bRzF0$LayoutInfo)('loader', 'loader', rect);
|
|
87
|
+
this.layoutInfos.set('loader', loader);
|
|
88
88
|
y = loader.rect.maxY;
|
|
89
89
|
}
|
|
90
90
|
if (this.collection.size === 0 && !this.isLoading) {
|
|
91
91
|
let rect = new (0, $bRzF0$Rect)(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
|
|
92
|
-
let placeholder = new (0, $bRzF0$LayoutInfo)(
|
|
93
|
-
this.layoutInfos.set(
|
|
92
|
+
let placeholder = new (0, $bRzF0$LayoutInfo)('placeholder', 'placeholder', rect);
|
|
93
|
+
this.layoutInfos.set('placeholder', placeholder);
|
|
94
94
|
y = placeholder.rect.maxY;
|
|
95
95
|
}
|
|
96
96
|
this.contentSize = new (0, $bRzF0$Size)(this.virtualizer.visibleRect.width, y);
|
|
@@ -148,12 +148,12 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
148
148
|
getKeyRightOf(key) {
|
|
149
149
|
// Expected key is the currently focused cell so we need the parent row key
|
|
150
150
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
151
|
-
return this.direction ===
|
|
151
|
+
return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
|
|
152
152
|
}
|
|
153
153
|
getKeyLeftOf(key) {
|
|
154
154
|
// Expected key is the currently focused cell so we need the parent row key
|
|
155
155
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
156
|
-
return this.direction ===
|
|
156
|
+
return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
|
|
157
157
|
}
|
|
158
158
|
constructor(options = {}){
|
|
159
159
|
// TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/WaterfallLayout.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {BaseLayout, BaseLayoutOptions} from './BaseLayout';\nimport {getChildNodes, getFirstItem} from '@react-stately/collections';\nimport {InvalidationContext, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {Key, KeyboardDelegate, Node} from '@react-types/shared';\n\nexport interface WaterfallLayoutOptions extends BaseLayoutOptions {\n /**\n * The minimum item size.\n * @default 240 x 136\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 number of columns.\n * @default Infinity\n */\n maxColumns?: number\n}\n\n// TODO: this didn't have any options that varied with card size, should it have?\nexport class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {\n protected minItemSize: Size;\n protected maxItemSize: Size;\n protected minSpace: Size;\n protected maxColumns: number;\n protected numColumns: number;\n protected itemWidth: number;\n protected horizontalSpacing: number;\n\n constructor(options: WaterfallLayoutOptions = {}) {\n // TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify\n // minItemSize defaults or other things\n super(options);\n this.minItemSize = options.minItemSize || new Size(240, 136);\n this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n this.margin = options.margin != null ? options.margin : 24;\n this.minSpace = options.minSpace || new Size(18, 18);\n this.maxColumns = options.maxColumns || Infinity;\n\n this.itemWidth = 0;\n this.numColumns = 0;\n\n this.lastCollection = null;\n this.collator = options.collator;\n }\n\n get layoutType() {\n return 'waterfall';\n }\n\n buildCollection(invalidationContext: InvalidationContext<Node<T>, unknown>) {\n // Compute the number of columns needed to display the content\n let visibleWidth = this.virtualizer.visibleRect.width;\n let availableWidth = visibleWidth - this.margin * 2;\n let columns = Math.floor((availableWidth + this.minSpace.width) / (this.minItemSize.width + this.minSpace.width));\n this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n\n // Compute the available width (minus the space between items)\n let width = availableWidth - (this.minSpace.width * (this.numColumns - 1));\n\n // Compute the item width based on the space available\n let itemWidth = Math.round(width / this.numColumns);\n itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));\n this.itemWidth = itemWidth;\n\n // Compute the horizontal spacing\n // if only one column, we cannot divide by zero, so set it to 1\n let horizontalSpacing = Math.round((availableWidth - this.numColumns * itemWidth) / Math.max(1, this.numColumns - 1));\n this.horizontalSpacing = horizontalSpacing;\n\n // Setup an array of column heights\n let columnHeights = Array(this.numColumns).fill(this.margin);\n for (let node of this.collection) {\n let key = node.key;\n // Compute the height of the item. Use the existing height if available,\n // otherwise call the delegate to estimate the size.\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n } else if (node.props.width && node.props.height) {\n let nodeWidth = node.props.width;\n let nodeHeight = node.props.height;\n let scaledHeight = Math.round(nodeHeight * ((itemWidth) / nodeWidth));\n height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));\n } else {\n height = itemWidth;\n }\n\n // Figure out which column to place the item in, and compute its position.\n let column = this.getNextColumnIndex(columnHeights);\n let x = this.margin + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(key, layoutInfo);\n\n // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?\n // Removing it from v2 doesn't seem to do anything?\n // if (layoutInfo.estimatedSize && !invalidationContext.contentChanged && !this.collectionView._transaction) {\n // this.updateItemSize(new IndexPath(section, i));\n // }\n\n columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;\n columnHeights.fill(maxHeight);\n let y = columnHeights[0];\n\n if (this.isLoading) {\n let loaderY = y;\n let loaderHeight = 60;\n // If there aren't any items, make loader take all avaliable room and remove margin from y calculation\n // so it doesn't scroll\n if (this.collection.size === 0) {\n loaderY = 0;\n loaderHeight = this.virtualizer.visibleRect.height || 60;\n }\n\n let rect = new Rect(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);\n let loader = new LayoutInfo('loader', 'loader', rect);\n this.layoutInfos.set('loader', loader);\n y = loader.rect.maxY;\n }\n\n if (this.collection.size === 0 && !this.isLoading) {\n let rect = new Rect(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);\n let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n this.layoutInfos.set('placeholder', placeholder);\n y = placeholder.rect.maxY;\n }\n\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below\n // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n getNextColumnIndex(columnHeights) {\n let minIndex = 0;\n for (let i = 0; i < columnHeights.length; i++) {\n if (columnHeights[i] < columnHeights[minIndex]) {\n minIndex = i;\n }\n }\n\n return minIndex;\n }\n\n getClosestRight(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // Refactored from v2. Current strategy is to find the closest card in the adjacent column.\n // This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall\n // and thus the top corner to top corner distance was massive.\n\n // First look for a card to the immediate right of the current card. If we can't find any, look for the nearest card in the entire column to the right of the card\n let rect = new Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getClosestLeft(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card\n let rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getKeyRightOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);\n }\n\n getKeyLeftOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);\n }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/WaterfallLayout.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {BaseLayout, BaseLayoutOptions} from './BaseLayout';\nimport {getChildNodes, getFirstItem} from '@react-stately/collections';\nimport {InvalidationContext, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {Key, KeyboardDelegate} from '@react-types/shared';\n\nexport interface WaterfallLayoutOptions extends BaseLayoutOptions {\n /**\n * The minimum item size.\n * @default 240 x 136\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 number of columns.\n * @default Infinity\n */\n maxColumns?: number\n}\n\n// TODO: this didn't have any options that varied with card size, should it have?\nexport class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {\n protected minItemSize: Size;\n protected maxItemSize: Size;\n protected minSpace: Size;\n protected maxColumns: number;\n protected numColumns: number;\n protected itemWidth: number;\n protected horizontalSpacing: number;\n\n constructor(options: WaterfallLayoutOptions = {}) {\n // TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify\n // minItemSize defaults or other things\n super(options);\n this.minItemSize = options.minItemSize || new Size(240, 136);\n this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n this.margin = options.margin != null ? options.margin : 24;\n this.minSpace = options.minSpace || new Size(18, 18);\n this.maxColumns = options.maxColumns || Infinity;\n\n this.itemWidth = 0;\n this.numColumns = 0;\n\n this.lastCollection = null;\n this.collator = options.collator;\n }\n\n get layoutType() {\n return 'waterfall';\n }\n\n buildCollection(invalidationContext: InvalidationContext) {\n // Compute the number of columns needed to display the content\n let visibleWidth = this.virtualizer.visibleRect.width;\n let availableWidth = visibleWidth - this.margin * 2;\n let columns = Math.floor((availableWidth + this.minSpace.width) / (this.minItemSize.width + this.minSpace.width));\n this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n\n // Compute the available width (minus the space between items)\n let width = availableWidth - (this.minSpace.width * (this.numColumns - 1));\n\n // Compute the item width based on the space available\n let itemWidth = Math.round(width / this.numColumns);\n itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));\n this.itemWidth = itemWidth;\n\n // Compute the horizontal spacing\n // if only one column, we cannot divide by zero, so set it to 1\n let horizontalSpacing = Math.round((availableWidth - this.numColumns * itemWidth) / Math.max(1, this.numColumns - 1));\n this.horizontalSpacing = horizontalSpacing;\n\n // Setup an array of column heights\n let columnHeights = Array(this.numColumns).fill(this.margin);\n for (let node of this.collection) {\n let key = node.key;\n // Compute the height of the item. Use the existing height if available,\n // otherwise call the delegate to estimate the size.\n let oldLayoutInfo = this.layoutInfos.get(key);\n let height;\n let estimatedSize = true;\n if (oldLayoutInfo) {\n height = oldLayoutInfo.rect.height;\n estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n } else if (node.props.width && node.props.height) {\n let nodeWidth = node.props.width;\n let nodeHeight = node.props.height;\n let scaledHeight = Math.round(nodeHeight * ((itemWidth) / nodeWidth));\n height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));\n } else {\n height = itemWidth;\n }\n\n // Figure out which column to place the item in, and compute its position.\n let column = this.getNextColumnIndex(columnHeights);\n let x = this.margin + column * (itemWidth + horizontalSpacing);\n let y = columnHeights[column];\n\n let rect = new Rect(x, y, itemWidth, height);\n let layoutInfo = new LayoutInfo(node.type, key, rect);\n layoutInfo.estimatedSize = estimatedSize;\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(key, layoutInfo);\n\n // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?\n // Removing it from v2 doesn't seem to do anything?\n // if (layoutInfo.estimatedSize && !invalidationContext.contentChanged && !this.collectionView._transaction) {\n // this.updateItemSize(new IndexPath(section, i));\n // }\n\n columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;\n }\n\n // Reset all columns to the maximum for the next section\n let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;\n columnHeights.fill(maxHeight);\n let y = columnHeights[0];\n\n if (this.isLoading) {\n let loaderY = y;\n let loaderHeight = 60;\n // If there aren't any items, make loader take all avaliable room and remove margin from y calculation\n // so it doesn't scroll\n if (this.collection.size === 0) {\n loaderY = 0;\n loaderHeight = this.virtualizer.visibleRect.height || 60;\n }\n\n let rect = new Rect(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);\n let loader = new LayoutInfo('loader', 'loader', rect);\n this.layoutInfos.set('loader', loader);\n y = loader.rect.maxY;\n }\n\n if (this.collection.size === 0 && !this.isLoading) {\n let rect = new Rect(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);\n let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n this.layoutInfos.set('placeholder', placeholder);\n y = placeholder.rect.maxY;\n }\n\n this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n }\n\n updateItemSize(key: Key, size: Size) {\n let layoutInfo = this.layoutInfos.get(key);\n if (!size || !layoutInfo) {\n return false;\n }\n\n if (size.height !== layoutInfo.rect.height) {\n // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below\n // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have\n let newLayoutInfo = layoutInfo.copy();\n newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;\n newLayoutInfo.estimatedSize = false;\n this.layoutInfos.set(key, newLayoutInfo);\n return true;\n }\n\n return false;\n }\n\n getNextColumnIndex(columnHeights) {\n let minIndex = 0;\n for (let i = 0; i < columnHeights.length; i++) {\n if (columnHeights[i] < columnHeights[minIndex]) {\n minIndex = i;\n }\n }\n\n return minIndex;\n }\n\n getClosestRight(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // Refactored from v2. Current strategy is to find the closest card in the adjacent column.\n // This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall\n // and thus the top corner to top corner distance was massive.\n\n // First look for a card to the immediate right of the current card. If we can't find any, look for the nearest card in the entire column to the right of the card\n let rect = new Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getClosestLeft(key: Key) {\n let layoutInfo = this.getLayoutInfo(key);\n // First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card\n let rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n\n if (!key) {\n rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);\n key = this._findClosest(layoutInfo.rect, rect)?.key;\n }\n\n let item = this.collection.getItem(key);\n return getFirstItem(getChildNodes(item, this.collection))?.key;\n }\n\n getKeyRightOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);\n }\n\n getKeyLeftOf(key: Key) {\n // Expected key is the currently focused cell so we need the parent row key\n let parentRowKey = this.collection.getItem(key).parentKey;\n return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);\n }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.module.js.map"}
|
package/dist/ar-AE.mjs
CHANGED
package/dist/bg-BG.mjs
CHANGED
package/dist/card_vars_css.mjs
CHANGED
package/dist/cs-CZ.mjs
CHANGED
package/dist/da-DK.mjs
CHANGED
package/dist/de-DE.mjs
CHANGED
package/dist/el-GR.mjs
CHANGED
package/dist/en-US.mjs
CHANGED
package/dist/es-ES.mjs
CHANGED
package/dist/et-EE.mjs
CHANGED
package/dist/fi-FI.mjs
CHANGED
package/dist/fr-FR.mjs
CHANGED
package/dist/he-IL.mjs
CHANGED
package/dist/hr-HR.mjs
CHANGED
package/dist/hu-HU.mjs
CHANGED
package/dist/intlStrings.mjs
CHANGED
package/dist/it-IT.mjs
CHANGED
package/dist/ja-JP.mjs
CHANGED
package/dist/ko-KR.mjs
CHANGED
package/dist/lt-LT.mjs
CHANGED
package/dist/lv-LV.mjs
CHANGED
package/dist/nb-NO.mjs
CHANGED
package/dist/nl-NL.mjs
CHANGED
package/dist/pl-PL.mjs
CHANGED
package/dist/pt-BR.mjs
CHANGED
package/dist/pt-PT.mjs
CHANGED
package/dist/ro-RO.mjs
CHANGED
package/dist/ru-RU.mjs
CHANGED
package/dist/sk-SK.mjs
CHANGED
package/dist/sl-SI.mjs
CHANGED
package/dist/sr-SP.mjs
CHANGED
package/dist/sv-SE.mjs
CHANGED
package/dist/tr-TR.mjs
CHANGED
package/dist/types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { Direction, Key, KeyboardDelegate, Node, Orientation, DOMRef, DOMRefValu
|
|
|
2
2
|
import { GridCollection } from "@react-stately/grid";
|
|
3
3
|
import { InvalidationContext, Layout, LayoutInfo, Rect, Size } from "@react-stately/virtualizer";
|
|
4
4
|
import { Scale } from "@react-types/provider";
|
|
5
|
-
import
|
|
5
|
+
import { ReactElement, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
|
|
6
6
|
import { SpectrumCardViewProps, SpectrumCardProps } from "@react-types/card";
|
|
7
7
|
interface BaseLayoutOptions {
|
|
8
8
|
collator?: Intl.Collator;
|
|
@@ -13,7 +13,11 @@ interface BaseLayoutOptions {
|
|
|
13
13
|
*/
|
|
14
14
|
margin?: number;
|
|
15
15
|
}
|
|
16
|
-
|
|
16
|
+
interface CardViewLayoutOptions {
|
|
17
|
+
isLoading: boolean;
|
|
18
|
+
direction: Direction;
|
|
19
|
+
}
|
|
20
|
+
declare class BaseLayout<T> extends Layout<Node<T>, CardViewLayoutOptions> implements KeyboardDelegate {
|
|
17
21
|
protected contentSize: Size;
|
|
18
22
|
protected layoutInfos: Map<Key, LayoutInfo>;
|
|
19
23
|
protected collator: Intl.Collator;
|
|
@@ -25,14 +29,12 @@ declare class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate
|
|
|
25
29
|
scale: Scale;
|
|
26
30
|
margin: number;
|
|
27
31
|
constructor(options?: BaseLayoutOptions);
|
|
28
|
-
|
|
29
|
-
buildCollection(invalidationContext?: InvalidationContext
|
|
32
|
+
update(invalidationContext: InvalidationContext<CardViewLayoutOptions>): void;
|
|
33
|
+
buildCollection(invalidationContext?: InvalidationContext): void;
|
|
30
34
|
getContentSize(): Size;
|
|
31
35
|
getLayoutInfo(key: Key): LayoutInfo;
|
|
32
|
-
getVisibleLayoutInfos(rect:
|
|
33
|
-
isVisible(layoutInfo: LayoutInfo, rect: Rect): boolean;
|
|
34
|
-
getInitialLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo;
|
|
35
|
-
getFinalLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo;
|
|
36
|
+
getVisibleLayoutInfos(rect: Rect, excludePersistedKeys?: boolean): LayoutInfo[];
|
|
37
|
+
isVisible(layoutInfo: LayoutInfo, rect: Rect, excludePersistedKeys: boolean): boolean;
|
|
36
38
|
_findClosestLayoutInfo(target: Rect, rect: Rect): any;
|
|
37
39
|
_findClosest(target: Rect, rect: Rect): any;
|
|
38
40
|
getKeyBelow(key: Key): Key;
|
|
@@ -135,7 +137,6 @@ export class GridLayout<T> extends BaseLayout<T> {
|
|
|
135
137
|
constructor(options?: GridLayoutOptions);
|
|
136
138
|
get layoutType(): string;
|
|
137
139
|
getIndexAtPoint(x: any, y: any, allowInsertingAtEnd?: boolean): number;
|
|
138
|
-
getVisibleLayoutInfos(rect: any): LayoutInfo[];
|
|
139
140
|
buildCollection(): void;
|
|
140
141
|
buildChild(node: Node<T>, y: number, index: number): LayoutInfo;
|
|
141
142
|
getKeyBelow(key: Key): Key;
|
|
@@ -173,7 +174,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
173
174
|
protected horizontalSpacing: number;
|
|
174
175
|
constructor(options?: WaterfallLayoutOptions);
|
|
175
176
|
get layoutType(): string;
|
|
176
|
-
buildCollection(invalidationContext: InvalidationContext
|
|
177
|
+
buildCollection(invalidationContext: InvalidationContext): void;
|
|
177
178
|
updateItemSize(key: Key, size: Size): boolean;
|
|
178
179
|
getNextColumnIndex(columnHeights: any): number;
|
|
179
180
|
getClosestRight(key: Key): Key;
|
|
@@ -187,7 +188,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
187
188
|
export const CardView: <T>(props: SpectrumCardViewProps<T> & {
|
|
188
189
|
ref?: DOMRef<HTMLDivElement>;
|
|
189
190
|
}) => ReactElement;
|
|
190
|
-
export let Card:
|
|
191
|
+
export let Card: ForwardRefExoticComponent<ItemProps<SpectrumCardProps> & PropsWithoutRef<SpectrumCardProps> & RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
191
192
|
export type { SpectrumCardViewProps } from '@react-types/card';
|
|
192
193
|
|
|
193
194
|
//# sourceMappingURL=types.d.ts.map
|