@react-spectrum/card 3.0.0-nightly.3066 → 3.0.0-nightly.3074

package/dist/module.js

@@ -974,84 +974,87 @@ class $22fcfd471bc7ee86$export$8e52095834484b61 extends $ce95ffe2429f6396$export
         let visibleHeight = this.virtualizer.visibleRect.height;
         let y = this.margin;
         let availableWidth = visibleWidth - this.margin * 2;
-        // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
-        let ratios = [];
-        let totalWidth = 0;
-        let minRatio = this.minItemSize.width / this.minItemSize.height;
-        let maxRatio = availableWidth / this.minItemSize.height;
-        for (let node of this.collection){
-            let ratio = node.props.width / node.props.height;
-            if (ratio < minRatio) ratio = minRatio;
-            else if (ratio > maxRatio && ratio !== minRatio) ratio = maxRatio;
-            let itemWidth = ratio * this.minItemSize.height;
-            ratios.push(ratio);
-            totalWidth += itemWidth;
-        }
-        totalWidth += this.itemSpacing.width * (this.collection.size - 1);
-        // Determine how many rows we'll need, and partition the items into rows
-        // using the aspect ratios as weights.
-        let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));
-        // if the available width can't hold two items, then every item will get its own row
-        // this leads to a faster run through linear partition and more dependable output for small row widths
-        if (availableWidth <= this.minItemSize.width * 2 + this.itemPadding * 2) rows = this.collection.size;
-        let weightedRatios = ratios.map((ratio)=>ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio
-        );
-        let partition = $22fcfd471bc7ee86$var$linearPartition(weightedRatios, rows);
-        let index = 0;
-        for (let row of partition){
-            // Compute the total weight for this row
-            let totalWeight = 0;
-            for(let j = index; j < index + row.length; j++)totalWeight += ratios[j];
-            // Determine the row height based on the total available width and weight of this row.
-            let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
-            // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
-            // probably doing this because if the last row has one extremely tall image, then the row becomes huge
-            // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
-            if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) bestRowHeight = this.idealRowHeight;
-            let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
-            let x = this.margin;
-            // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
-            let widths = [];
-            for(let j1 = index; j1 < index + row.length; j1++){
-                let width = Math.round(bestRowHeight * ratios[j1]);
-                widths.push([
-                    j1 - index,
-                    width
-                ]);
+        // If avaliable width is not greater than 0, skip node layout calculations
+        if (availableWidth > 0) {
+            // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
+            let ratios = [];
+            let totalWidth = 0;
+            let minRatio = this.minItemSize.width / this.minItemSize.height;
+            let maxRatio = availableWidth / this.minItemSize.height;
+            for (let node of this.collection){
+                let ratio = node.props.width / node.props.height;
+                if (ratio < minRatio) ratio = minRatio;
+                else if (ratio > maxRatio && ratio !== minRatio) ratio = maxRatio;
+                let itemWidth = ratio * this.minItemSize.height;
+                ratios.push(ratio);
+                totalWidth += itemWidth;
             }
-            this._distributeWidths(widths);
-            // Create items for this row.
-            for(let j2 = index; j2 < index + row.length; j2++){
-                let node = this.collection.rows[j2];
-                let itemWidth = Math.max(widths[j2 - index][1], this.minItemSize.width);
-                let rect = new $k8Xpo$Rect(x, y, itemWidth, itemHeight);
-                let layoutInfo = new $k8Xpo$LayoutInfo(node.type, node.key, rect);
-                layoutInfo.allowOverflow = true;
-                this.layoutInfos.set(node.key, layoutInfo);
-                x += itemWidth + this.itemSpacing.width;
+            totalWidth += this.itemSpacing.width * (this.collection.size - 1);
+            // Determine how many rows we'll need, and partition the items into rows
+            // using the aspect ratios as weights.
+            let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));
+            // if the available width can't hold two items, then every item will get its own row
+            // this leads to a faster run through linear partition and more dependable output for small row widths
+            if (availableWidth <= this.minItemSize.width * 2 + this.itemPadding * 2) rows = this.collection.size;
+            let weightedRatios = ratios.map((ratio)=>ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio
+            );
+            let partition = $22fcfd471bc7ee86$var$linearPartition(weightedRatios, rows);
+            let index = 0;
+            for (let row of partition){
+                // Compute the total weight for this row
+                let totalWeight = 0;
+                for(let j = index; j < index + row.length; j++)totalWeight += ratios[j];
+                // Determine the row height based on the total available width and weight of this row.
+                let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
+                // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
+                // probably doing this because if the last row has one extremely tall image, then the row becomes huge
+                // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
+                if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) bestRowHeight = this.idealRowHeight;
+                let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
+                let x = this.margin;
+                // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
+                let widths = [];
+                for(let j1 = index; j1 < index + row.length; j1++){
+                    let width = Math.round(bestRowHeight * ratios[j1]);
+                    widths.push([
+                        j1 - index,
+                        width
+                    ]);
+                }
+                this._distributeWidths(widths);
+                // Create items for this row.
+                for(let j2 = index; j2 < index + row.length; j2++){
+                    let node = this.collection.rows[j2];
+                    let itemWidth = Math.max(widths[j2 - index][1], this.minItemSize.width);
+                    let rect = new $k8Xpo$Rect(x, y, itemWidth, itemHeight);
+                    let layoutInfo = new $k8Xpo$LayoutInfo(node.type, node.key, rect);
+                    layoutInfo.allowOverflow = true;
+                    this.layoutInfos.set(node.key, layoutInfo);
+                    x += itemWidth + this.itemSpacing.width;
+                }
+                y += itemHeight + this.itemSpacing.height;
+                index += row.length;
             }
-            y += itemHeight + this.itemSpacing.height;
-            index += row.length;
-        }
-        if (this.isLoading) {
-            let loaderY = y;
-            let loaderHeight = 60;
-            // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
-            // so it doesn't scroll
-            if (this.collection.size === 0) {
-                loaderY = 0;
-                loaderHeight = visibleHeight || 60;
+            if (this.isLoading) {
+                let loaderY = y;
+                let loaderHeight = 60;
+                // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
+                // so it doesn't scroll
+                if (this.collection.size === 0) {
+                    loaderY = 0;
+                    loaderHeight = visibleHeight || 60;
+                }
+                let rect = new $k8Xpo$Rect(0, loaderY, visibleWidth, loaderHeight);
+                let loader = new $k8Xpo$LayoutInfo('loader', 'loader', rect);
+                this.layoutInfos.set('loader', loader);
+                y = loader.rect.maxY;
+            }
+            if (this.collection.size === 0 && !this.isLoading) {
+                let rect = new $k8Xpo$Rect(0, 0, visibleWidth, visibleHeight);
+                let placeholder = new $k8Xpo$LayoutInfo('placeholder', 'placeholder', rect);
+                this.layoutInfos.set('placeholder', placeholder);
+                y = placeholder.rect.maxY;
             }
-            let rect = new $k8Xpo$Rect(0, loaderY, visibleWidth, loaderHeight);
-            let loader = new $k8Xpo$LayoutInfo('loader', 'loader', rect);
-            this.layoutInfos.set('loader', loader);
-            y = loader.rect.maxY;
-        }
-        if (this.collection.size === 0 && !this.isLoading) {
-            let rect = new $k8Xpo$Rect(0, 0, visibleWidth, visibleHeight);
-            let placeholder = new $k8Xpo$LayoutInfo('placeholder', 'placeholder', rect);
-            this.layoutInfos.set('placeholder', placeholder);
-            y = placeholder.rect.maxY;
         }
         this.contentSize = new $k8Xpo$Size(visibleWidth, y);
     }