@react-spectrum/card 3.0.0-nightly.4613 → 3.0.0-nightly.4618
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.
|
@@ -84,7 +84,7 @@ class $8019a3d2c7d098ea$export$8e52095834484b61 extends (0, $5ee605f09afaa4de$ex
|
|
|
84
84
|
let visibleHeight = this.virtualizer.visibleRect.height;
|
|
85
85
|
let y = this.margin;
|
|
86
86
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
87
|
-
// If
|
|
87
|
+
// If available width is not greater than 0, skip node layout calculations
|
|
88
88
|
if (availableWidth > 0) {
|
|
89
89
|
// Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
|
|
90
90
|
let ratios = [];
|
|
@@ -147,7 +147,7 @@ class $8019a3d2c7d098ea$export$8e52095834484b61 extends (0, $5ee605f09afaa4de$ex
|
|
|
147
147
|
if (this.isLoading) {
|
|
148
148
|
let loaderY = y;
|
|
149
149
|
let loaderHeight = 60;
|
|
150
|
-
// If there aren't any items, make loader take all
|
|
150
|
+
// If there aren't any items, make loader take all available room and remove margin from y calculation
|
|
151
151
|
// so it doesn't scroll
|
|
152
152
|
if (this.collection.size === 0) {
|
|
153
153
|
loaderY = 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/GalleryLayout.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 {LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface GalleryLayoutOptions extends BaseLayoutOptions {\n // /**\n // * The card size in the grid.\n // */\n // cardSize?: 'S' | 'M' | 'L',\n /**\n * The the default row height. Note this must be larger than the min item height.\n * @default 208\n */\n idealRowHeight?: number,\n /**\n * The spacing between items.\n * @default 18 x 18\n */\n itemSpacing?: Size,\n /**\n * The vertical padding for an item.\n * @default 78\n */\n itemPadding?: number,\n /**\n * Minimum size for a item in the grid.\n * @default 136 x 136\n */\n minItemSize?: Size,\n /**\n * Target for adding extra weight to elements during linear partitioning. Anything with an aspect ratio smaler than this value\n * will be targeted.\n * @type {number}\n */\n threshold?: number\n}\n\nconst DEFAULT_OPTIONS = {\n S: {\n idealRowHeight: 112,\n minItemSize: new Size(96, 96),\n itemSpacing: new Size(8, 16),\n itemPadding: 24,\n dropSpacing: 50,\n margin: 8\n },\n L: {\n idealRowHeight: 208,\n minItemSize: new Size(136, 136),\n itemSpacing: new Size(18, 18),\n itemPadding: {\n 'medium': 78,\n 'large': 99\n },\n dropSpacing: 100,\n margin: 24\n }\n};\n\nexport class GalleryLayout<T> extends BaseLayout<T> {\n protected idealRowHeight: number;\n protected itemSpacing: Size;\n itemPadding: number;\n protected minItemSize: Size;\n protected threshold: number;\n\n constructor(options: GalleryLayoutOptions = {}) {\n super(options);\n let cardSize = 'L';\n this.idealRowHeight = options.idealRowHeight || DEFAULT_OPTIONS[cardSize].idealRowHeight;\n this.itemSpacing = options.itemSpacing || DEFAULT_OPTIONS[cardSize].itemSpacing;\n this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];\n this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;\n this.threshold = options.threshold || 1;\n this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;\n }\n\n get layoutType() {\n return 'gallery';\n }\n\n /**\n * Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from\n * the widest in the row until it can't give anymore, then move to the second widest and so forth.\n * Do this until all assets meet the min-width.\n * */\n _distributeWidths(widths) {\n // create a copy of the widths array and sort it largest to smallest\n let sortedWidths = widths.concat().sort((a, b) => a[1] > b[1] ? -1 : 1);\n for (let width of widths) {\n // for each width, if it's smaller than the min width\n if (width[1] < this.minItemSize.width) {\n // then figure out how much smaller\n let delta = this.minItemSize.width - width[1];\n for (let item of sortedWidths) {\n // go from the largest width in the row to the smallest\n // if the width is greater than the min width\n if (widths[item[0]][1] > this.minItemSize.width) {\n // subtract the delta from the width, if it's still greater than the min width\n // then we have finished, subtract the delta permanently from that width\n // eslint-disable-next-line max-depth\n if (widths[item[0]][1] - delta > this.minItemSize.width) {\n widths[item[0]][1] -= delta;\n delta = 0;\n break;\n } else {\n // otherwise, we take as much as we can from the current width and then move on to\n // the next largest and take some width from it\n let maxChange = widths[item[0]][1] - this.minItemSize.width;\n delta -= maxChange;\n widths[item[0]][1] -= maxChange;\n }\n }\n }\n if (delta > 0) {\n return false;\n }\n // force the width to be the min width that we just rebalanced for\n width[1] = this.minItemSize.width;\n }\n }\n return true;\n }\n\n buildCollection() {\n let visibleWidth = this.virtualizer.visibleRect.width;\n let visibleHeight = this.virtualizer.visibleRect.height;\n let y = this.margin;\n let availableWidth = visibleWidth - this.margin * 2;\n\n // If avaliable width is not greater than 0, skip node layout calculations\n if (availableWidth > 0) {\n // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.\n let ratios = [];\n let totalWidth = 0;\n let minRatio = this.minItemSize.width / this.minItemSize.height;\n let maxRatio = availableWidth / this.minItemSize.height;\n\n for (let node of this.collection) {\n let ratio = node.props.width / node.props.height;\n if (ratio < minRatio) {\n ratio = minRatio;\n } else if (ratio > maxRatio && ratio !== minRatio) {\n ratio = maxRatio;\n }\n\n let itemWidth = ratio * this.minItemSize.height;\n ratios.push(ratio);\n totalWidth += itemWidth;\n }\n\n totalWidth += this.itemSpacing.width * (this.collection.size - 1);\n\n // Determine how many rows we'll need, and partition the items into rows\n // using the aspect ratios as weights.\n let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));\n // if the available width can't hold two items, then every item will get its own row\n // this leads to a faster run through linear partition and more dependable output for small row widths\n if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {\n rows = this.collection.size;\n }\n\n let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);\n let partition = linearPartition(weightedRatios, rows);\n\n let index = 0;\n for (let row of partition) {\n // Compute the total weight for this row\n let totalWeight = 0;\n for (let j = index; j < index + row.length; j++) {\n totalWeight += ratios[j];\n }\n\n // Determine the row height based on the total available width and weight of this row.\n let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;\n\n // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height\n // probably doing this because if the last row has one extremely tall image, then the row becomes huge\n // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters\n if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {\n bestRowHeight = this.idealRowHeight;\n }\n let itemHeight = Math.round(bestRowHeight) + this.itemPadding;\n let x = this.margin;\n\n // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects\n let widths = [];\n for (let j = index; j < index + row.length; j++) {\n let width = Math.round(bestRowHeight * ratios[j]);\n widths.push([j - index, width]);\n }\n this._distributeWidths(widths);\n\n // Create items for this row.\n for (let j = index; j < index + row.length; j++) {\n let node = this.collection.rows[j];\n let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);\n let rect = new Rect(x, y, itemWidth, itemHeight);\n let layoutInfo = new LayoutInfo(node.type, node.key, rect);\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(node.key, layoutInfo);\n x += itemWidth + this.itemSpacing.width;\n }\n\n y += itemHeight + this.itemSpacing.height;\n index += row.length;\n }\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 = visibleHeight || 60;\n }\n\n let rect = new Rect(0, loaderY, visibleWidth, 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, visibleWidth, visibleHeight);\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(visibleWidth, y);\n }\n}\n\n// https://www8.cs.umu.se/kurser/TDBA77/VT06/algorithms/BOOK/BOOK2/NODE45.HTM\nfunction linearPartition(seq, k) {\n let n = seq.length;\n if (k <= 0) {\n return [];\n }\n\n if (k >= n) {\n return seq.map(x => [x]);\n }\n\n if (n === 1) {\n return [seq];\n }\n\n let table = Array(n).fill(0).map(() => Array(k).fill(0));\n let solution = Array(n - 1).fill(0).map(() => Array(k - 1).fill(0));\n\n for (let i = 0; i < n; i++) {\n table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);\n }\n\n for (let i = 0; i < k; i++) {\n table[0][i] = seq[0];\n }\n\n for (let i = 1; i < n; i++) {\n for (let j = 1; j < k; j++) {\n let currentMin = 0;\n let minX = Infinity;\n\n for (let x = 0; x < i; x++) {\n let c1 = table[x][j - 1];\n let c2 = table[i][0] - table[x][0];\n let cost = Math.max(c1, c2);\n\n if (!x || cost < currentMin) {\n currentMin = cost;\n minX = x;\n }\n }\n\n table[i][j] = currentMin;\n solution[i - 1][j - 1] = minX;\n }\n }\n\n n = n - 1;\n k = k - 2;\n\n let result = [];\n while (k >= 0) {\n if (n >= 1) {\n let row = [];\n for (let i = solution[n - 1][k] + 1; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n n = solution[n - 1][k];\n }\n\n k--;\n }\n\n let row = [];\n for (let i = 0; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n\n return result;\n}\n"],"names":[],"version":3,"file":"GalleryLayout.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/GalleryLayout.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 {LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface GalleryLayoutOptions extends BaseLayoutOptions {\n // /**\n // * The card size in the grid.\n // */\n // cardSize?: 'S' | 'M' | 'L',\n /**\n * The the default row height. Note this must be larger than the min item height.\n * @default 208\n */\n idealRowHeight?: number,\n /**\n * The spacing between items.\n * @default 18 x 18\n */\n itemSpacing?: Size,\n /**\n * The vertical padding for an item.\n * @default 78\n */\n itemPadding?: number,\n /**\n * Minimum size for a item in the grid.\n * @default 136 x 136\n */\n minItemSize?: Size,\n /**\n * Target for adding extra weight to elements during linear partitioning. Anything with an aspect ratio smaler than this value\n * will be targeted.\n * @type {number}\n */\n threshold?: number\n}\n\nconst DEFAULT_OPTIONS = {\n S: {\n idealRowHeight: 112,\n minItemSize: new Size(96, 96),\n itemSpacing: new Size(8, 16),\n itemPadding: 24,\n dropSpacing: 50,\n margin: 8\n },\n L: {\n idealRowHeight: 208,\n minItemSize: new Size(136, 136),\n itemSpacing: new Size(18, 18),\n itemPadding: {\n 'medium': 78,\n 'large': 99\n },\n dropSpacing: 100,\n margin: 24\n }\n};\n\nexport class GalleryLayout<T> extends BaseLayout<T> {\n protected idealRowHeight: number;\n protected itemSpacing: Size;\n itemPadding: number;\n protected minItemSize: Size;\n protected threshold: number;\n\n constructor(options: GalleryLayoutOptions = {}) {\n super(options);\n let cardSize = 'L';\n this.idealRowHeight = options.idealRowHeight || DEFAULT_OPTIONS[cardSize].idealRowHeight;\n this.itemSpacing = options.itemSpacing || DEFAULT_OPTIONS[cardSize].itemSpacing;\n this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];\n this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;\n this.threshold = options.threshold || 1;\n this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;\n }\n\n get layoutType() {\n return 'gallery';\n }\n\n /**\n * Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from\n * the widest in the row until it can't give anymore, then move to the second widest and so forth.\n * Do this until all assets meet the min-width.\n * */\n _distributeWidths(widths) {\n // create a copy of the widths array and sort it largest to smallest\n let sortedWidths = widths.concat().sort((a, b) => a[1] > b[1] ? -1 : 1);\n for (let width of widths) {\n // for each width, if it's smaller than the min width\n if (width[1] < this.minItemSize.width) {\n // then figure out how much smaller\n let delta = this.minItemSize.width - width[1];\n for (let item of sortedWidths) {\n // go from the largest width in the row to the smallest\n // if the width is greater than the min width\n if (widths[item[0]][1] > this.minItemSize.width) {\n // subtract the delta from the width, if it's still greater than the min width\n // then we have finished, subtract the delta permanently from that width\n // eslint-disable-next-line max-depth\n if (widths[item[0]][1] - delta > this.minItemSize.width) {\n widths[item[0]][1] -= delta;\n delta = 0;\n break;\n } else {\n // otherwise, we take as much as we can from the current width and then move on to\n // the next largest and take some width from it\n let maxChange = widths[item[0]][1] - this.minItemSize.width;\n delta -= maxChange;\n widths[item[0]][1] -= maxChange;\n }\n }\n }\n if (delta > 0) {\n return false;\n }\n // force the width to be the min width that we just rebalanced for\n width[1] = this.minItemSize.width;\n }\n }\n return true;\n }\n\n buildCollection() {\n let visibleWidth = this.virtualizer.visibleRect.width;\n let visibleHeight = this.virtualizer.visibleRect.height;\n let y = this.margin;\n let availableWidth = visibleWidth - this.margin * 2;\n\n // If available width is not greater than 0, skip node layout calculations\n if (availableWidth > 0) {\n // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.\n let ratios = [];\n let totalWidth = 0;\n let minRatio = this.minItemSize.width / this.minItemSize.height;\n let maxRatio = availableWidth / this.minItemSize.height;\n\n for (let node of this.collection) {\n let ratio = node.props.width / node.props.height;\n if (ratio < minRatio) {\n ratio = minRatio;\n } else if (ratio > maxRatio && ratio !== minRatio) {\n ratio = maxRatio;\n }\n\n let itemWidth = ratio * this.minItemSize.height;\n ratios.push(ratio);\n totalWidth += itemWidth;\n }\n\n totalWidth += this.itemSpacing.width * (this.collection.size - 1);\n\n // Determine how many rows we'll need, and partition the items into rows\n // using the aspect ratios as weights.\n let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));\n // if the available width can't hold two items, then every item will get its own row\n // this leads to a faster run through linear partition and more dependable output for small row widths\n if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {\n rows = this.collection.size;\n }\n\n let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);\n let partition = linearPartition(weightedRatios, rows);\n\n let index = 0;\n for (let row of partition) {\n // Compute the total weight for this row\n let totalWeight = 0;\n for (let j = index; j < index + row.length; j++) {\n totalWeight += ratios[j];\n }\n\n // Determine the row height based on the total available width and weight of this row.\n let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;\n\n // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height\n // probably doing this because if the last row has one extremely tall image, then the row becomes huge\n // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters\n if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {\n bestRowHeight = this.idealRowHeight;\n }\n let itemHeight = Math.round(bestRowHeight) + this.itemPadding;\n let x = this.margin;\n\n // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects\n let widths = [];\n for (let j = index; j < index + row.length; j++) {\n let width = Math.round(bestRowHeight * ratios[j]);\n widths.push([j - index, width]);\n }\n this._distributeWidths(widths);\n\n // Create items for this row.\n for (let j = index; j < index + row.length; j++) {\n let node = this.collection.rows[j];\n let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);\n let rect = new Rect(x, y, itemWidth, itemHeight);\n let layoutInfo = new LayoutInfo(node.type, node.key, rect);\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(node.key, layoutInfo);\n x += itemWidth + this.itemSpacing.width;\n }\n\n y += itemHeight + this.itemSpacing.height;\n index += row.length;\n }\n\n if (this.isLoading) {\n let loaderY = y;\n let loaderHeight = 60;\n // If there aren't any items, make loader take all available room and remove margin from y calculation\n // so it doesn't scroll\n if (this.collection.size === 0) {\n loaderY = 0;\n loaderHeight = visibleHeight || 60;\n }\n\n let rect = new Rect(0, loaderY, visibleWidth, 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, visibleWidth, visibleHeight);\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(visibleWidth, y);\n }\n}\n\n// https://www8.cs.umu.se/kurser/TDBA77/VT06/algorithms/BOOK/BOOK2/NODE45.HTM\nfunction linearPartition(seq, k) {\n let n = seq.length;\n if (k <= 0) {\n return [];\n }\n\n if (k >= n) {\n return seq.map(x => [x]);\n }\n\n if (n === 1) {\n return [seq];\n }\n\n let table = Array(n).fill(0).map(() => Array(k).fill(0));\n let solution = Array(n - 1).fill(0).map(() => Array(k - 1).fill(0));\n\n for (let i = 0; i < n; i++) {\n table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);\n }\n\n for (let i = 0; i < k; i++) {\n table[0][i] = seq[0];\n }\n\n for (let i = 1; i < n; i++) {\n for (let j = 1; j < k; j++) {\n let currentMin = 0;\n let minX = Infinity;\n\n for (let x = 0; x < i; x++) {\n let c1 = table[x][j - 1];\n let c2 = table[i][0] - table[x][0];\n let cost = Math.max(c1, c2);\n\n if (!x || cost < currentMin) {\n currentMin = cost;\n minX = x;\n }\n }\n\n table[i][j] = currentMin;\n solution[i - 1][j - 1] = minX;\n }\n }\n\n n = n - 1;\n k = k - 2;\n\n let result = [];\n while (k >= 0) {\n if (n >= 1) {\n let row = [];\n for (let i = solution[n - 1][k] + 1; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n n = solution[n - 1][k];\n }\n\n k--;\n }\n\n let row = [];\n for (let i = 0; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n\n return result;\n}\n"],"names":[],"version":3,"file":"GalleryLayout.main.js.map"}
|
package/dist/GalleryLayout.mjs
CHANGED
|
@@ -78,7 +78,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends (0, $3d424c147206bac9$ex
|
|
|
78
78
|
let visibleHeight = this.virtualizer.visibleRect.height;
|
|
79
79
|
let y = this.margin;
|
|
80
80
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
81
|
-
// If
|
|
81
|
+
// If available width is not greater than 0, skip node layout calculations
|
|
82
82
|
if (availableWidth > 0) {
|
|
83
83
|
// Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
|
|
84
84
|
let ratios = [];
|
|
@@ -141,7 +141,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends (0, $3d424c147206bac9$ex
|
|
|
141
141
|
if (this.isLoading) {
|
|
142
142
|
let loaderY = y;
|
|
143
143
|
let loaderHeight = 60;
|
|
144
|
-
// If there aren't any items, make loader take all
|
|
144
|
+
// If there aren't any items, make loader take all available room and remove margin from y calculation
|
|
145
145
|
// so it doesn't scroll
|
|
146
146
|
if (this.collection.size === 0) {
|
|
147
147
|
loaderY = 0;
|
|
@@ -78,7 +78,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends (0, $3d424c147206bac9$ex
|
|
|
78
78
|
let visibleHeight = this.virtualizer.visibleRect.height;
|
|
79
79
|
let y = this.margin;
|
|
80
80
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
81
|
-
// If
|
|
81
|
+
// If available width is not greater than 0, skip node layout calculations
|
|
82
82
|
if (availableWidth > 0) {
|
|
83
83
|
// Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
|
|
84
84
|
let ratios = [];
|
|
@@ -141,7 +141,7 @@ class $c0ba81539c443916$export$8e52095834484b61 extends (0, $3d424c147206bac9$ex
|
|
|
141
141
|
if (this.isLoading) {
|
|
142
142
|
let loaderY = y;
|
|
143
143
|
let loaderHeight = 60;
|
|
144
|
-
// If there aren't any items, make loader take all
|
|
144
|
+
// If there aren't any items, make loader take all available room and remove margin from y calculation
|
|
145
145
|
// so it doesn't scroll
|
|
146
146
|
if (this.collection.size === 0) {
|
|
147
147
|
loaderY = 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/GalleryLayout.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 {LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface GalleryLayoutOptions extends BaseLayoutOptions {\n // /**\n // * The card size in the grid.\n // */\n // cardSize?: 'S' | 'M' | 'L',\n /**\n * The the default row height. Note this must be larger than the min item height.\n * @default 208\n */\n idealRowHeight?: number,\n /**\n * The spacing between items.\n * @default 18 x 18\n */\n itemSpacing?: Size,\n /**\n * The vertical padding for an item.\n * @default 78\n */\n itemPadding?: number,\n /**\n * Minimum size for a item in the grid.\n * @default 136 x 136\n */\n minItemSize?: Size,\n /**\n * Target for adding extra weight to elements during linear partitioning. Anything with an aspect ratio smaler than this value\n * will be targeted.\n * @type {number}\n */\n threshold?: number\n}\n\nconst DEFAULT_OPTIONS = {\n S: {\n idealRowHeight: 112,\n minItemSize: new Size(96, 96),\n itemSpacing: new Size(8, 16),\n itemPadding: 24,\n dropSpacing: 50,\n margin: 8\n },\n L: {\n idealRowHeight: 208,\n minItemSize: new Size(136, 136),\n itemSpacing: new Size(18, 18),\n itemPadding: {\n 'medium': 78,\n 'large': 99\n },\n dropSpacing: 100,\n margin: 24\n }\n};\n\nexport class GalleryLayout<T> extends BaseLayout<T> {\n protected idealRowHeight: number;\n protected itemSpacing: Size;\n itemPadding: number;\n protected minItemSize: Size;\n protected threshold: number;\n\n constructor(options: GalleryLayoutOptions = {}) {\n super(options);\n let cardSize = 'L';\n this.idealRowHeight = options.idealRowHeight || DEFAULT_OPTIONS[cardSize].idealRowHeight;\n this.itemSpacing = options.itemSpacing || DEFAULT_OPTIONS[cardSize].itemSpacing;\n this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];\n this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;\n this.threshold = options.threshold || 1;\n this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;\n }\n\n get layoutType() {\n return 'gallery';\n }\n\n /**\n * Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from\n * the widest in the row until it can't give anymore, then move to the second widest and so forth.\n * Do this until all assets meet the min-width.\n * */\n _distributeWidths(widths) {\n // create a copy of the widths array and sort it largest to smallest\n let sortedWidths = widths.concat().sort((a, b) => a[1] > b[1] ? -1 : 1);\n for (let width of widths) {\n // for each width, if it's smaller than the min width\n if (width[1] < this.minItemSize.width) {\n // then figure out how much smaller\n let delta = this.minItemSize.width - width[1];\n for (let item of sortedWidths) {\n // go from the largest width in the row to the smallest\n // if the width is greater than the min width\n if (widths[item[0]][1] > this.minItemSize.width) {\n // subtract the delta from the width, if it's still greater than the min width\n // then we have finished, subtract the delta permanently from that width\n // eslint-disable-next-line max-depth\n if (widths[item[0]][1] - delta > this.minItemSize.width) {\n widths[item[0]][1] -= delta;\n delta = 0;\n break;\n } else {\n // otherwise, we take as much as we can from the current width and then move on to\n // the next largest and take some width from it\n let maxChange = widths[item[0]][1] - this.minItemSize.width;\n delta -= maxChange;\n widths[item[0]][1] -= maxChange;\n }\n }\n }\n if (delta > 0) {\n return false;\n }\n // force the width to be the min width that we just rebalanced for\n width[1] = this.minItemSize.width;\n }\n }\n return true;\n }\n\n buildCollection() {\n let visibleWidth = this.virtualizer.visibleRect.width;\n let visibleHeight = this.virtualizer.visibleRect.height;\n let y = this.margin;\n let availableWidth = visibleWidth - this.margin * 2;\n\n // If avaliable width is not greater than 0, skip node layout calculations\n if (availableWidth > 0) {\n // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.\n let ratios = [];\n let totalWidth = 0;\n let minRatio = this.minItemSize.width / this.minItemSize.height;\n let maxRatio = availableWidth / this.minItemSize.height;\n\n for (let node of this.collection) {\n let ratio = node.props.width / node.props.height;\n if (ratio < minRatio) {\n ratio = minRatio;\n } else if (ratio > maxRatio && ratio !== minRatio) {\n ratio = maxRatio;\n }\n\n let itemWidth = ratio * this.minItemSize.height;\n ratios.push(ratio);\n totalWidth += itemWidth;\n }\n\n totalWidth += this.itemSpacing.width * (this.collection.size - 1);\n\n // Determine how many rows we'll need, and partition the items into rows\n // using the aspect ratios as weights.\n let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));\n // if the available width can't hold two items, then every item will get its own row\n // this leads to a faster run through linear partition and more dependable output for small row widths\n if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {\n rows = this.collection.size;\n }\n\n let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);\n let partition = linearPartition(weightedRatios, rows);\n\n let index = 0;\n for (let row of partition) {\n // Compute the total weight for this row\n let totalWeight = 0;\n for (let j = index; j < index + row.length; j++) {\n totalWeight += ratios[j];\n }\n\n // Determine the row height based on the total available width and weight of this row.\n let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;\n\n // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height\n // probably doing this because if the last row has one extremely tall image, then the row becomes huge\n // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters\n if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {\n bestRowHeight = this.idealRowHeight;\n }\n let itemHeight = Math.round(bestRowHeight) + this.itemPadding;\n let x = this.margin;\n\n // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects\n let widths = [];\n for (let j = index; j < index + row.length; j++) {\n let width = Math.round(bestRowHeight * ratios[j]);\n widths.push([j - index, width]);\n }\n this._distributeWidths(widths);\n\n // Create items for this row.\n for (let j = index; j < index + row.length; j++) {\n let node = this.collection.rows[j];\n let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);\n let rect = new Rect(x, y, itemWidth, itemHeight);\n let layoutInfo = new LayoutInfo(node.type, node.key, rect);\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(node.key, layoutInfo);\n x += itemWidth + this.itemSpacing.width;\n }\n\n y += itemHeight + this.itemSpacing.height;\n index += row.length;\n }\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 = visibleHeight || 60;\n }\n\n let rect = new Rect(0, loaderY, visibleWidth, 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, visibleWidth, visibleHeight);\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(visibleWidth, y);\n }\n}\n\n// https://www8.cs.umu.se/kurser/TDBA77/VT06/algorithms/BOOK/BOOK2/NODE45.HTM\nfunction linearPartition(seq, k) {\n let n = seq.length;\n if (k <= 0) {\n return [];\n }\n\n if (k >= n) {\n return seq.map(x => [x]);\n }\n\n if (n === 1) {\n return [seq];\n }\n\n let table = Array(n).fill(0).map(() => Array(k).fill(0));\n let solution = Array(n - 1).fill(0).map(() => Array(k - 1).fill(0));\n\n for (let i = 0; i < n; i++) {\n table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);\n }\n\n for (let i = 0; i < k; i++) {\n table[0][i] = seq[0];\n }\n\n for (let i = 1; i < n; i++) {\n for (let j = 1; j < k; j++) {\n let currentMin = 0;\n let minX = Infinity;\n\n for (let x = 0; x < i; x++) {\n let c1 = table[x][j - 1];\n let c2 = table[i][0] - table[x][0];\n let cost = Math.max(c1, c2);\n\n if (!x || cost < currentMin) {\n currentMin = cost;\n minX = x;\n }\n }\n\n table[i][j] = currentMin;\n solution[i - 1][j - 1] = minX;\n }\n }\n\n n = n - 1;\n k = k - 2;\n\n let result = [];\n while (k >= 0) {\n if (n >= 1) {\n let row = [];\n for (let i = solution[n - 1][k] + 1; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n n = solution[n - 1][k];\n }\n\n k--;\n }\n\n let row = [];\n for (let i = 0; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n\n return result;\n}\n"],"names":[],"version":3,"file":"GalleryLayout.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/GalleryLayout.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 {LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface GalleryLayoutOptions extends BaseLayoutOptions {\n // /**\n // * The card size in the grid.\n // */\n // cardSize?: 'S' | 'M' | 'L',\n /**\n * The the default row height. Note this must be larger than the min item height.\n * @default 208\n */\n idealRowHeight?: number,\n /**\n * The spacing between items.\n * @default 18 x 18\n */\n itemSpacing?: Size,\n /**\n * The vertical padding for an item.\n * @default 78\n */\n itemPadding?: number,\n /**\n * Minimum size for a item in the grid.\n * @default 136 x 136\n */\n minItemSize?: Size,\n /**\n * Target for adding extra weight to elements during linear partitioning. Anything with an aspect ratio smaler than this value\n * will be targeted.\n * @type {number}\n */\n threshold?: number\n}\n\nconst DEFAULT_OPTIONS = {\n S: {\n idealRowHeight: 112,\n minItemSize: new Size(96, 96),\n itemSpacing: new Size(8, 16),\n itemPadding: 24,\n dropSpacing: 50,\n margin: 8\n },\n L: {\n idealRowHeight: 208,\n minItemSize: new Size(136, 136),\n itemSpacing: new Size(18, 18),\n itemPadding: {\n 'medium': 78,\n 'large': 99\n },\n dropSpacing: 100,\n margin: 24\n }\n};\n\nexport class GalleryLayout<T> extends BaseLayout<T> {\n protected idealRowHeight: number;\n protected itemSpacing: Size;\n itemPadding: number;\n protected minItemSize: Size;\n protected threshold: number;\n\n constructor(options: GalleryLayoutOptions = {}) {\n super(options);\n let cardSize = 'L';\n this.idealRowHeight = options.idealRowHeight || DEFAULT_OPTIONS[cardSize].idealRowHeight;\n this.itemSpacing = options.itemSpacing || DEFAULT_OPTIONS[cardSize].itemSpacing;\n this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];\n this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;\n this.threshold = options.threshold || 1;\n this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;\n }\n\n get layoutType() {\n return 'gallery';\n }\n\n /**\n * Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from\n * the widest in the row until it can't give anymore, then move to the second widest and so forth.\n * Do this until all assets meet the min-width.\n * */\n _distributeWidths(widths) {\n // create a copy of the widths array and sort it largest to smallest\n let sortedWidths = widths.concat().sort((a, b) => a[1] > b[1] ? -1 : 1);\n for (let width of widths) {\n // for each width, if it's smaller than the min width\n if (width[1] < this.minItemSize.width) {\n // then figure out how much smaller\n let delta = this.minItemSize.width - width[1];\n for (let item of sortedWidths) {\n // go from the largest width in the row to the smallest\n // if the width is greater than the min width\n if (widths[item[0]][1] > this.minItemSize.width) {\n // subtract the delta from the width, if it's still greater than the min width\n // then we have finished, subtract the delta permanently from that width\n // eslint-disable-next-line max-depth\n if (widths[item[0]][1] - delta > this.minItemSize.width) {\n widths[item[0]][1] -= delta;\n delta = 0;\n break;\n } else {\n // otherwise, we take as much as we can from the current width and then move on to\n // the next largest and take some width from it\n let maxChange = widths[item[0]][1] - this.minItemSize.width;\n delta -= maxChange;\n widths[item[0]][1] -= maxChange;\n }\n }\n }\n if (delta > 0) {\n return false;\n }\n // force the width to be the min width that we just rebalanced for\n width[1] = this.minItemSize.width;\n }\n }\n return true;\n }\n\n buildCollection() {\n let visibleWidth = this.virtualizer.visibleRect.width;\n let visibleHeight = this.virtualizer.visibleRect.height;\n let y = this.margin;\n let availableWidth = visibleWidth - this.margin * 2;\n\n // If available width is not greater than 0, skip node layout calculations\n if (availableWidth > 0) {\n // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.\n let ratios = [];\n let totalWidth = 0;\n let minRatio = this.minItemSize.width / this.minItemSize.height;\n let maxRatio = availableWidth / this.minItemSize.height;\n\n for (let node of this.collection) {\n let ratio = node.props.width / node.props.height;\n if (ratio < minRatio) {\n ratio = minRatio;\n } else if (ratio > maxRatio && ratio !== minRatio) {\n ratio = maxRatio;\n }\n\n let itemWidth = ratio * this.minItemSize.height;\n ratios.push(ratio);\n totalWidth += itemWidth;\n }\n\n totalWidth += this.itemSpacing.width * (this.collection.size - 1);\n\n // Determine how many rows we'll need, and partition the items into rows\n // using the aspect ratios as weights.\n let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));\n // if the available width can't hold two items, then every item will get its own row\n // this leads to a faster run through linear partition and more dependable output for small row widths\n if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {\n rows = this.collection.size;\n }\n\n let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);\n let partition = linearPartition(weightedRatios, rows);\n\n let index = 0;\n for (let row of partition) {\n // Compute the total weight for this row\n let totalWeight = 0;\n for (let j = index; j < index + row.length; j++) {\n totalWeight += ratios[j];\n }\n\n // Determine the row height based on the total available width and weight of this row.\n let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;\n\n // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height\n // probably doing this because if the last row has one extremely tall image, then the row becomes huge\n // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters\n if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {\n bestRowHeight = this.idealRowHeight;\n }\n let itemHeight = Math.round(bestRowHeight) + this.itemPadding;\n let x = this.margin;\n\n // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects\n let widths = [];\n for (let j = index; j < index + row.length; j++) {\n let width = Math.round(bestRowHeight * ratios[j]);\n widths.push([j - index, width]);\n }\n this._distributeWidths(widths);\n\n // Create items for this row.\n for (let j = index; j < index + row.length; j++) {\n let node = this.collection.rows[j];\n let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);\n let rect = new Rect(x, y, itemWidth, itemHeight);\n let layoutInfo = new LayoutInfo(node.type, node.key, rect);\n layoutInfo.allowOverflow = true;\n this.layoutInfos.set(node.key, layoutInfo);\n x += itemWidth + this.itemSpacing.width;\n }\n\n y += itemHeight + this.itemSpacing.height;\n index += row.length;\n }\n\n if (this.isLoading) {\n let loaderY = y;\n let loaderHeight = 60;\n // If there aren't any items, make loader take all available room and remove margin from y calculation\n // so it doesn't scroll\n if (this.collection.size === 0) {\n loaderY = 0;\n loaderHeight = visibleHeight || 60;\n }\n\n let rect = new Rect(0, loaderY, visibleWidth, 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, visibleWidth, visibleHeight);\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(visibleWidth, y);\n }\n}\n\n// https://www8.cs.umu.se/kurser/TDBA77/VT06/algorithms/BOOK/BOOK2/NODE45.HTM\nfunction linearPartition(seq, k) {\n let n = seq.length;\n if (k <= 0) {\n return [];\n }\n\n if (k >= n) {\n return seq.map(x => [x]);\n }\n\n if (n === 1) {\n return [seq];\n }\n\n let table = Array(n).fill(0).map(() => Array(k).fill(0));\n let solution = Array(n - 1).fill(0).map(() => Array(k - 1).fill(0));\n\n for (let i = 0; i < n; i++) {\n table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);\n }\n\n for (let i = 0; i < k; i++) {\n table[0][i] = seq[0];\n }\n\n for (let i = 1; i < n; i++) {\n for (let j = 1; j < k; j++) {\n let currentMin = 0;\n let minX = Infinity;\n\n for (let x = 0; x < i; x++) {\n let c1 = table[x][j - 1];\n let c2 = table[i][0] - table[x][0];\n let cost = Math.max(c1, c2);\n\n if (!x || cost < currentMin) {\n currentMin = cost;\n minX = x;\n }\n }\n\n table[i][j] = currentMin;\n solution[i - 1][j - 1] = minX;\n }\n }\n\n n = n - 1;\n k = k - 2;\n\n let result = [];\n while (k >= 0) {\n if (n >= 1) {\n let row = [];\n for (let i = solution[n - 1][k] + 1; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n n = solution[n - 1][k];\n }\n\n k--;\n }\n\n let row = [];\n for (let i = 0; i < n + 1; i++) {\n row.push(seq[i]);\n }\n\n result.unshift(row);\n\n return result;\n}\n"],"names":[],"version":3,"file":"GalleryLayout.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/card",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.4618+87d1e199b",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,26 +36,26 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
40
|
-
"@react-aria/grid": "3.9.1-nightly.
|
|
41
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
42
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
43
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
44
|
-
"@react-aria/virtualizer": "3.10.1-nightly.
|
|
45
|
-
"@react-spectrum/checkbox": "3.0.0-nightly.
|
|
46
|
-
"@react-spectrum/progress": "3.0.0-nightly.
|
|
47
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
48
|
-
"@react-stately/collections": "3.0.0-nightly.
|
|
49
|
-
"@react-stately/grid": "3.8.7-nightly.
|
|
50
|
-
"@react-stately/list": "3.10.5-nightly.
|
|
51
|
-
"@react-stately/virtualizer": "3.7.1-nightly.
|
|
52
|
-
"@react-types/card": "3.0.0-nightly.
|
|
53
|
-
"@react-types/provider": "3.8.1-nightly.
|
|
54
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
39
|
+
"@react-aria/focus": "3.0.0-nightly.2906+87d1e199b",
|
|
40
|
+
"@react-aria/grid": "3.9.1-nightly.4618+87d1e199b",
|
|
41
|
+
"@react-aria/i18n": "3.0.0-nightly.2906+87d1e199b",
|
|
42
|
+
"@react-aria/interactions": "3.0.0-nightly.2906+87d1e199b",
|
|
43
|
+
"@react-aria/utils": "3.0.0-nightly.2906+87d1e199b",
|
|
44
|
+
"@react-aria/virtualizer": "3.10.1-nightly.4618+87d1e199b",
|
|
45
|
+
"@react-spectrum/checkbox": "3.0.0-nightly.2906+87d1e199b",
|
|
46
|
+
"@react-spectrum/progress": "3.0.0-nightly.2906+87d1e199b",
|
|
47
|
+
"@react-spectrum/utils": "3.0.0-nightly.2906+87d1e199b",
|
|
48
|
+
"@react-stately/collections": "3.0.0-nightly.2906+87d1e199b",
|
|
49
|
+
"@react-stately/grid": "3.8.7-nightly.4618+87d1e199b",
|
|
50
|
+
"@react-stately/list": "3.10.5-nightly.4618+87d1e199b",
|
|
51
|
+
"@react-stately/virtualizer": "3.7.1-nightly.4618+87d1e199b",
|
|
52
|
+
"@react-types/card": "3.0.0-nightly.4618+87d1e199b",
|
|
53
|
+
"@react-types/provider": "3.8.1-nightly.4618+87d1e199b",
|
|
54
|
+
"@react-types/shared": "3.0.0-nightly.2906+87d1e199b",
|
|
55
55
|
"@swc/helpers": "^0.5.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
58
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2906+87d1e199b"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "87d1e199b1575bf6745220bb807a498809de41d3"
|
|
69
69
|
}
|
package/src/GalleryLayout.tsx
CHANGED
|
@@ -139,7 +139,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
|
|
|
139
139
|
let y = this.margin;
|
|
140
140
|
let availableWidth = visibleWidth - this.margin * 2;
|
|
141
141
|
|
|
142
|
-
// If
|
|
142
|
+
// If available width is not greater than 0, skip node layout calculations
|
|
143
143
|
if (availableWidth > 0) {
|
|
144
144
|
// Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
|
|
145
145
|
let ratios = [];
|
|
@@ -220,7 +220,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
|
|
|
220
220
|
if (this.isLoading) {
|
|
221
221
|
let loaderY = y;
|
|
222
222
|
let loaderHeight = 60;
|
|
223
|
-
// If there aren't any items, make loader take all
|
|
223
|
+
// If there aren't any items, make loader take all available room and remove margin from y calculation
|
|
224
224
|
// so it doesn't scroll
|
|
225
225
|
if (this.collection.size === 0) {
|
|
226
226
|
loaderY = 0;
|