@react-stately/layout 3.5.0 → 3.5.1-nightly.3287

package/dist/module.js

@@ -343,6 +343,305 @@ class $61ef60fc9b1041f4$export$cacbb3924155d68e extends $gtW1T$Layout {
 }
 
 
+var $a152112e902709bf$exports = {};
+
+$parcel$export($a152112e902709bf$exports, "TableLayout", () => $a152112e902709bf$export$62444c3c724b1b20);
+
+
+class $a152112e902709bf$export$62444c3c724b1b20 extends $61ef60fc9b1041f4$export$cacbb3924155d68e {
+    buildCollection() {
+        // If columns changed, clear layout cache.
+        if (!this.lastCollection || this.collection.columns.length !== this.lastCollection.columns.length || this.collection.columns.some((c, i)=>c.key !== this.lastCollection.columns[i].key
+        )) // Invalidate everything in this layout pass. Will be reset in ListLayout on the next pass.
+        this.invalidateEverything = true;
+        // Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
+        let loadingState = this.collection.body.props.loadingState;
+        this.wasLoading = this.isLoading;
+        this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+        let header = this.buildHeader();
+        let body = this.buildBody(0);
+        this.stickyColumnIndices = this.collection.columns.filter((c)=>c.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(c.key)
+        ).map((c)=>c.index
+        );
+        body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
+        this.contentSize = new $gtW1T$Size(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
+        return [
+            header,
+            body
+        ];
+    }
+    buildHeader() {
+        let rect = new $gtW1T$Rect(0, 0, 0, 0);
+        let layoutInfo = new $gtW1T$LayoutInfo('header', 'header', rect);
+        let y = 0;
+        let width = 0;
+        let children = [];
+        for (let headerRow of this.collection.headerRows){
+            let layoutNode = this.buildChild(headerRow, 0, y);
+            layoutNode.layoutInfo.parentKey = 'header';
+            y = layoutNode.layoutInfo.rect.maxY;
+            width = Math.max(width, layoutNode.layoutInfo.rect.width);
+            children.push(layoutNode);
+        }
+        rect.width = width;
+        rect.height = y;
+        this.layoutInfos.set('header', layoutInfo);
+        return {
+            layoutInfo: layoutInfo,
+            children: children
+        };
+    }
+    buildHeaderRow(headerRow, x, y) {
+        let rect = new $gtW1T$Rect(0, y, 0, 0);
+        let row = new $gtW1T$LayoutInfo('headerrow', headerRow.key, rect);
+        let height = 0;
+        let columns = [];
+        for (let cell of headerRow.childNodes){
+            let layoutNode = this.buildChild(cell, x, y);
+            layoutNode.layoutInfo.parentKey = row.key;
+            x = layoutNode.layoutInfo.rect.maxX;
+            height = Math.max(height, layoutNode.layoutInfo.rect.height);
+            columns.push(layoutNode);
+        }
+        this.setChildHeights(columns, height);
+        rect.height = height;
+        rect.width = x;
+        return {
+            layoutInfo: row,
+            children: columns
+        };
+    }
+    setChildHeights(children, height) {
+        for (let child of children)if (child.layoutInfo.rect.height !== height) {
+            // Need to copy the layout info before we mutate it.
+            child.layoutInfo = child.layoutInfo.copy();
+            this.layoutInfos.set(child.layoutInfo.key, child.layoutInfo);
+            child.layoutInfo.rect.height = height;
+        }
+    }
+    // used to get the column widths when rendering to the DOM
+    getColumnWidth_(node) {
+        var _colspan;
+        let colspan = (_colspan = node.colspan) !== null && _colspan !== void 0 ? _colspan : 1;
+        let width = 0;
+        for(let i = node.index; i < node.index + colspan; i++){
+            let column = this.collection.columns[i];
+            width += this.getColumnWidth(column.key);
+        }
+        return width;
+    }
+    getEstimatedHeight(node, width, height, estimatedHeight) {
+        let isEstimated = false;
+        // If no explicit height is available, use an estimated height.
+        if (height == null) {
+            // If a previous version of this layout info exists, reuse its height.
+            // Mark as estimated if the size of the overall collection view changed,
+            // or the content of the item changed.
+            let previousLayoutNode = this.layoutNodes.get(node.key);
+            if (previousLayoutNode) {
+                let curNode = this.collection.getItem(node.key);
+                let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
+                height = previousLayoutNode.layoutInfo.rect.height;
+                isEstimated = curNode !== lastNode || width !== previousLayoutNode.layoutInfo.rect.width || previousLayoutNode.layoutInfo.estimatedSize;
+            } else {
+                height = estimatedHeight;
+                isEstimated = true;
+            }
+        }
+        return {
+            height: height,
+            isEstimated: isEstimated
+        };
+    }
+    buildColumn(node, x, y) {
+        var ref;
+        let width = this.getColumnWidth_(node);
+        let { height: height , isEstimated: isEstimated  } = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
+        let rect = new $gtW1T$Rect(x, y, width, height);
+        let layoutInfo = new $gtW1T$LayoutInfo(node.type, node.key, rect);
+        layoutInfo.isSticky = (ref = node.props) === null || ref === void 0 ? void 0 : ref.isSelectionCell;
+        layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
+        layoutInfo.estimatedSize = isEstimated;
+        return {
+            layoutInfo: layoutInfo
+        };
+    }
+    buildBody(y) {
+        let rect = new $gtW1T$Rect(0, y, 0, 0);
+        let layoutInfo = new $gtW1T$LayoutInfo('rowgroup', 'body', rect);
+        let startY = y;
+        let width = 0;
+        let children = [];
+        for (let node of this.collection.body.childNodes){
+            let layoutNode = this.buildChild(node, 0, y);
+            layoutNode.layoutInfo.parentKey = 'body';
+            y = layoutNode.layoutInfo.rect.maxY;
+            width = Math.max(width, layoutNode.layoutInfo.rect.width);
+            children.push(layoutNode);
+        }
+        if (this.isLoading) {
+            let rect = new $gtW1T$Rect(0, y, width || this.virtualizer.visibleRect.width, children.length === 0 ? this.virtualizer.visibleRect.height : 60);
+            let loader = new $gtW1T$LayoutInfo('loader', 'loader', rect);
+            loader.parentKey = 'body';
+            loader.isSticky = children.length === 0;
+            this.layoutInfos.set('loader', loader);
+            children.push({
+                layoutInfo: loader
+            });
+            y = loader.rect.maxY;
+            width = Math.max(width, rect.width);
+        } else if (children.length === 0) {
+            let rect = new $gtW1T$Rect(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
+            let empty = new $gtW1T$LayoutInfo('empty', 'empty', rect);
+            empty.parentKey = 'body';
+            empty.isSticky = true;
+            this.layoutInfos.set('empty', empty);
+            children.push({
+                layoutInfo: empty
+            });
+            y = empty.rect.maxY;
+            width = Math.max(width, rect.width);
+        }
+        rect.width = width;
+        rect.height = y - startY;
+        this.layoutInfos.set('body', layoutInfo);
+        return {
+            layoutInfo: layoutInfo,
+            children: children
+        };
+    }
+    buildNode(node, x, y) {
+        switch(node.type){
+            case 'headerrow':
+                return this.buildHeaderRow(node, x, y);
+            case 'item':
+                return this.buildRow(node, x, y);
+            case 'column':
+            case 'placeholder':
+                return this.buildColumn(node, x, y);
+            case 'cell':
+                return this.buildCell(node, x, y);
+            default:
+                throw new Error('Unknown node type ' + node.type);
+        }
+    }
+    buildRow(node, x, y) {
+        let rect = new $gtW1T$Rect(x, y, 0, 0);
+        let layoutInfo = new $gtW1T$LayoutInfo('row', node.key, rect);
+        let children = [];
+        let height = 0;
+        for (let child of node.childNodes){
+            let layoutNode = this.buildChild(child, x, y);
+            x = layoutNode.layoutInfo.rect.maxX;
+            height = Math.max(height, layoutNode.layoutInfo.rect.height);
+            children.push(layoutNode);
+        }
+        this.setChildHeights(children, height);
+        rect.width = x;
+        rect.height = height + 1; // +1 for bottom border
+        return {
+            layoutInfo: layoutInfo,
+            children: children
+        };
+    }
+    buildCell(node, x, y) {
+        var ref;
+        let width = this.getColumnWidth_(node);
+        let { height: height , isEstimated: isEstimated  } = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
+        let rect = new $gtW1T$Rect(x, y, width, height);
+        let layoutInfo = new $gtW1T$LayoutInfo(node.type, node.key, rect);
+        layoutInfo.isSticky = (ref = node.props) === null || ref === void 0 ? void 0 : ref.isSelectionCell;
+        layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
+        layoutInfo.estimatedSize = isEstimated;
+        return {
+            layoutInfo: layoutInfo
+        };
+    }
+    getVisibleLayoutInfos(rect) {
+        let res = [];
+        for (let node of this.rootNodes){
+            res.push(node.layoutInfo);
+            this.addVisibleLayoutInfos(res, node, rect);
+        }
+        return res;
+    }
+    addVisibleLayoutInfos(res, node, rect) {
+        if (!node.children || node.children.length === 0) return;
+        switch(node.layoutInfo.type){
+            case 'header':
+                for (let child of node.children){
+                    res.push(child.layoutInfo);
+                    this.addVisibleLayoutInfos(res, child, rect);
+                }
+                break;
+            case 'rowgroup':
+                {
+                    let firstVisibleRow = this.binarySearch(node.children, rect.topLeft, 'y');
+                    let lastVisibleRow = this.binarySearch(node.children, rect.bottomRight, 'y');
+                    for(let i = firstVisibleRow; i <= lastVisibleRow; i++){
+                        res.push(node.children[i].layoutInfo);
+                        this.addVisibleLayoutInfos(res, node.children[i], rect);
+                    }
+                    break;
+                }
+            case 'headerrow':
+            case 'row':
+                {
+                    let firstVisibleCell = this.binarySearch(node.children, rect.topLeft, 'x');
+                    let lastVisibleCell = this.binarySearch(node.children, rect.topRight, 'x');
+                    let stickyIndex = 0;
+                    for(let i = firstVisibleCell; i <= lastVisibleCell; i++){
+                        // Sticky columns and row headers are always in the DOM. Interleave these
+                        // with the visible range so that they are in the right order.
+                        if (stickyIndex < this.stickyColumnIndices.length) {
+                            let idx = this.stickyColumnIndices[stickyIndex];
+                            while(idx < i){
+                                res.push(node.children[idx].layoutInfo);
+                                idx = this.stickyColumnIndices[stickyIndex++];
+                            }
+                        }
+                        res.push(node.children[i].layoutInfo);
+                    }
+                    while(stickyIndex < this.stickyColumnIndices.length){
+                        let idx = this.stickyColumnIndices[stickyIndex++];
+                        res.push(node.children[idx].layoutInfo);
+                    }
+                    break;
+                }
+            default:
+                throw new Error('Unknown node type ' + node.layoutInfo.type);
+        }
+    }
+    binarySearch(items, point, axis) {
+        let low = 0;
+        let high = items.length - 1;
+        while(low <= high){
+            let mid = low + high >> 1;
+            let item = items[mid];
+            if (axis === 'x' && item.layoutInfo.rect.maxX < point.x || axis === 'y' && item.layoutInfo.rect.maxY < point.y) low = mid + 1;
+            else if (axis === 'x' && item.layoutInfo.rect.x > point.x || axis === 'y' && item.layoutInfo.rect.y > point.y) high = mid - 1;
+            else return mid;
+        }
+        return Math.max(0, Math.min(items.length - 1, low));
+    }
+    getInitialLayoutInfo(layoutInfo) {
+        let res = super.getInitialLayoutInfo(layoutInfo);
+        // If this insert was the result of async loading, remove the zoom effect and just keep the fade in.
+        if (this.wasLoading) res.transform = null;
+        return res;
+    }
+    constructor(options){
+        super(options);
+        this.wasLoading = false;
+        this.isLoading = false;
+        this.stickyColumnIndices = [];
+    }
+}
+
+
+var $d0b780b1688f1001$exports = {};
+
+$parcel$export($d0b780b1688f1001$exports, "TableLayout_DEPRECATED", () => $d0b780b1688f1001$export$7e9c3f5c8fff54f);
 
 
 class $d0b780b1688f1001$export$7e9c3f5c8fff54f extends $61ef60fc9b1041f4$export$cacbb3924155d68e {
@@ -676,5 +975,5 @@ class $d0b780b1688f1001$export$7e9c3f5c8fff54f extends $61ef60fc9b1041f4$export$
 
 
 
-export {$d0b780b1688f1001$export$7e9c3f5c8fff54f as TableLayout, $61ef60fc9b1041f4$export$cacbb3924155d68e as ListLayout};
+export {$61ef60fc9b1041f4$export$cacbb3924155d68e as ListLayout, $a152112e902709bf$export$62444c3c724b1b20 as TableLayout, $d0b780b1688f1001$export$7e9c3f5c8fff54f as TableLayout_DEPRECATED};
 //# sourceMappingURL=module.js.map