@blueprintjs/table - npm Package Compare versions

Comparing version 1.8.1 to 1.9.0

dist/cell/cell.d.ts

@@ -28,2 +28,8 @@ import * as React from "react";
     truncated?: boolean;
+    /**
+     * If `true`, the cell contents will be wrapped in a `div` with
+     * styling that will cause text to wrap, rather than displaying it on a single line.
+     * @default false
+     */
+    wrapText?: boolean;
 }
@@ -35,4 +41,5 @@ export declare type ICellRenderer = (rowIndex: number, columnIndex: number) => React.ReactElement<ICellProps>;
         truncated: boolean;
+        wrapText: boolean;
     };
     render(): JSX.Element;
 }

dist/cell/cell.js

@@ -23,12 +23,16 @@ /**
     Cell.prototype.render = function () {
-        var _a = this.props, style = _a.style, intent = _a.intent, interactive = _a.interactive, loading = _a.loading, tooltip = _a.tooltip, truncated = _a.truncated, className = _a.className;
+        var _a = this.props, style = _a.style, intent = _a.intent, interactive = _a.interactive, loading = _a.loading, tooltip = _a.tooltip, truncated = _a.truncated, className = _a.className, wrapText = _a.wrapText;
         var classes = classNames(Classes.TABLE_CELL, core_1.Classes.intentClass(intent), (_b = {},
             _b[Classes.TABLE_CELL_INTERACTIVE] = interactive,
             _b[core_1.Classes.LOADING] = loading,
+            _b[Classes.TABLE_TRUNCATED_CELL] = truncated,
             _b), className);
-        var content = truncated ?
-            React.createElement("div", { className: Classes.TABLE_TRUNCATED_TEXT }, this.props.children) : this.props.children;
+        var textClasses = classNames((_c = {},
+            _c[Classes.TABLE_TRUNCATED_TEXT] = truncated,
+            _c[Classes.TABLE_NO_WRAP_TEXT] = !wrapText,
+            _c));
+        var content = React.createElement("div", { className: textClasses }, this.props.children);
         return (React.createElement("div", { className: classes, style: style, title: tooltip },
             React.createElement(loadableContent_1.LoadableContent, { loading: loading, variableLength: true }, content)));
-        var _b;
+        var _b, _c;
     };
@@ -39,2 +43,3 @@ return Cell;
     truncated: true,
+    wrapText: false,
 };
@@ -41,0 +46,0 @@ Cell = tslib_1.__decorate([

dist/cell/formats/truncatedFormat.js

@@ -47,3 +47,3 @@ /**
                 React.createElement("div", { className: Classes.TABLE_TRUNCATED_VALUE, ref: this.handleContentDivRef }, cellContent),
-                React.createElement(core_1.Popover, { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, constraints: constraints, content: popoverContent, position: core_1.Position.BOTTOM, useSmartArrowPositioning: true, useSmartPositioning: true },
+                React.createElement(core_1.Popover, { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, tetherOptions: { constraints: constraints }, content: popoverContent, position: core_1.Position.BOTTOM, useSmartArrowPositioning: true, useSmartPositioning: true },
                     React.createElement("span", { className: iconClasses }))));
@@ -81,3 +81,5 @@ }
         }
-        var isTruncated = this.contentDiv !== undefined && this.contentDiv.scrollWidth > this.contentDiv.clientWidth;
+        var isTruncated = this.contentDiv !== undefined &&
+            (this.contentDiv.scrollWidth > this.contentDiv.clientWidth ||
+                this.contentDiv.scrollHeight > this.contentDiv.clientHeight);
         if (this.state.isTruncated !== isTruncated) {
@@ -84,0 +86,0 @@ this.setState({ isTruncated: isTruncated });

dist/common/classes.d.ts

@@ -32,2 +32,3 @@ export declare const TABLE_BODY = "bp-table-body";
 export declare const TABLE_NO_VERTICAL_SCROLL = "bp-table-no-vertical-scroll";
+export declare const TABLE_NO_WRAP_TEXT = "bp-table-no-wrap-text";
 export declare const TABLE_NULL = "bp-table-null";
@@ -56,2 +57,3 @@ export declare const TABLE_OVERLAY = "bp-table-overlay";
 export declare const TABLE_TOP_CONTAINER = "bp-table-top-container";
+export declare const TABLE_TRUNCATED_CELL = "bp-table-truncated-cell";
 export declare const TABLE_TRUNCATED_FORMAT = "bp-table-truncated-format";
@@ -58,0 +60,0 @@ export declare const TABLE_TRUNCATED_POPOVER = "bp-table-truncated-popover";

dist/common/classes.js

@@ -40,2 +40,3 @@ /*
 exports.TABLE_NO_VERTICAL_SCROLL = "bp-table-no-vertical-scroll";
+exports.TABLE_NO_WRAP_TEXT = "bp-table-no-wrap-text";
 exports.TABLE_NULL = "bp-table-null";
@@ -64,2 +65,3 @@ exports.TABLE_OVERLAY = "bp-table-overlay";
 exports.TABLE_TOP_CONTAINER = "bp-table-top-container";
+exports.TABLE_TRUNCATED_CELL = "bp-table-truncated-cell";
 exports.TABLE_TRUNCATED_FORMAT = "bp-table-truncated-format";
@@ -66,0 +68,0 @@ exports.TABLE_TRUNCATED_POPOVER = "bp-table-truncated-popover";

dist/headers/columnHeaderCell.js

@@ -95,3 +95,3 @@ /**
             }];
-        return (React.createElement(core_1.Popover, { constraints: constraints, content: menu, position: core_1.Position.BOTTOM, className: Classes.TABLE_TH_MENU, popoverDidOpen: this.getPopoverStateChangeHandler(true), popoverWillClose: this.getPopoverStateChangeHandler(false), useSmartArrowPositioning: true },
+        return (React.createElement(core_1.Popover, { tetherOptions: { constraints: constraints }, content: menu, position: core_1.Position.BOTTOM, className: Classes.TABLE_TH_MENU, popoverDidOpen: this.getPopoverStateChangeHandler(true), popoverWillClose: this.getPopoverStateChangeHandler(false), useSmartArrowPositioning: true },
             React.createElement("span", { className: popoverTargetClasses })));
@@ -98,0 +98,0 @@ };

dist/locator.js

@@ -35,3 +35,3 @@ /**
         var cellClasses = [
-            "." + Classes.columnIndexClass(columnIndex),
+            "." + Classes.columnCellIndexClass(columnIndex),
             "." + Classes.TABLE_COLUMN_NAME,
@@ -38,0 +38,0 @@ ];

dist/regions.d.ts

@@ -84,3 +84,14 @@ /**
      *
-     * In this case, this method would return RegionCardinality.FULL_COLUMNS.
+     * In this case, this method would return `RegionCardinality.FULL_COLUMNS`.
+     *
+     * If both rows and columns are unbounded, then the region covers the
+     * entire table. Therefore, a region like this:
+     *
+     *     {
+     *         rows: null,
+     *         cols: null
+     *     }
+     *
+     * will return `RegionCardinality.FULL_TABLE`.
+     *
      * An example of a region containing a single cell in the table would be:
@@ -93,3 +104,3 @@ *
      *
-     * In this case, this method would return RegionCardinality.CELLS.
+     * In this case, this method would return `RegionCardinality.CELLS`.
      */
@@ -110,2 +121,6 @@ static getRegionCardinality(region: IRegion): RegionCardinality;
     /**
+     * Returns a region containing the entire table.
+     */
+    static table(): IRegion;
+    /**
      * Adds the region to the end of a cloned copy of the supplied region
@@ -141,2 +156,6 @@ * array.
     /**
+     * Returns true if the regions contain a region that has FULL_TABLE cardinality
+     */
+    static hasFullTable(regions: IRegion[]): boolean;
+    /**
      * Returns true if the regions contain the query region. The query region
@@ -147,2 +166,3 @@ * may be a subset of the `regions` parameter.
     static eachUniqueFullColumn(regions: IRegion[], iteratee: (col: number) => void): void;
+    static eachUniqueFullRow(regions: IRegion[], iteratee: (row: number) => void): void;
     /**
@@ -149,0 +169,0 @@ * Using the supplied array of non-contiguous `IRegion`s, this method

dist/regions.js

@@ -41,2 +41,3 @@ /**
     ALL: [
+        RegionCardinality.FULL_TABLE,
         RegionCardinality.FULL_COLUMNS,
@@ -88,3 +89,14 @@ RegionCardinality.FULL_ROWS,
      *
-     * In this case, this method would return RegionCardinality.FULL_COLUMNS.
+     * In this case, this method would return `RegionCardinality.FULL_COLUMNS`.
+     *
+     * If both rows and columns are unbounded, then the region covers the
+     * entire table. Therefore, a region like this:
+     *
+     *     {
+     *         rows: null,
+     *         cols: null
+     *     }
+     *
+     * will return `RegionCardinality.FULL_TABLE`.
+     *
      * An example of a region containing a single cell in the table would be:
@@ -97,3 +109,3 @@ *
      *
-     * In this case, this method would return RegionCardinality.CELLS.
+     * In this case, this method would return `RegionCardinality.CELLS`.
      */
@@ -136,2 +148,8 @@ Regions.getRegionCardinality = function (region) {
     /**
+     * Returns a region containing the entire table.
+     */
+    Regions.table = function () {
+        return {};
+    };
+    /**
      * Adds the region to the end of a cloned copy of the supplied region
@@ -222,2 +240,18 @@ * array.
     /**
+     * Returns true if the regions contain a region that has FULL_TABLE cardinality
+     */
+    Regions.hasFullTable = function (regions) {
+        if (regions == null) {
+            return false;
+        }
+        for (var _i = 0, regions_3 = regions; _i < regions_3.length; _i++) {
+            var region = regions_3[_i];
+            var cardinality = Regions.getRegionCardinality(region);
+            if (cardinality === RegionCardinality.FULL_TABLE) {
+                return true;
+            }
+        }
+        return false;
+    };
+    /**
      * Returns true if the regions contain the query region. The query region
@@ -230,4 +264,4 @@ * may be a subset of the `regions` parameter.
         }
-        for (var _i = 0, regions_3 = regions; _i < regions_3.length; _i++) {
-            var region = regions_3[_i];
+        for (var _i = 0, regions_4 = regions; _i < regions_4.length; _i++) {
+            var region = regions_4[_i];
             var cardinality = Regions.getRegionCardinality(region);
@@ -276,2 +310,19 @@ switch (cardinality) {
     };
+    Regions.eachUniqueFullRow = function (regions, iteratee) {
+        if (regions == null || regions.length === 0 || iteratee == null) {
+            return;
+        }
+        var seen = {};
+        regions.forEach(function (region) {
+            if (Regions.getRegionCardinality(region) === RegionCardinality.FULL_ROWS) {
+                var _a = region.rows, start = _a[0], end = _a[1];
+                for (var row = start; row <= end; row++) {
+                    if (!seen[row]) {
+                        seen[row] = true;
+                        iteratee(row);
+                    }
+                }
+            }
+        });
+    };
     /**
@@ -288,4 +339,4 @@ * Using the supplied array of non-contiguous `IRegion`s, this method
         var list = [];
-        for (var _i = 0, regions_4 = regions; _i < regions_4.length; _i++) {
-            var region = regions_4[_i];
+        for (var _i = 0, regions_5 = regions; _i < regions_5.length; _i++) {
+            var region = regions_5[_i];
             Regions.eachCellInRegion(region, numRows, numCols, function (row, col) {
@@ -292,0 +343,0 @@ // add to list if not seen

dist/table.d.ts

@@ -241,2 +241,4 @@ /**
     private syncMenuWidth();
+    private selectAll;
+    private handleSelectAllHotkey;
     private getColumnProps(columnIndex);
@@ -261,3 +263,5 @@ private columnHeaderCellRenderer;
     private maybeRenderCopyHotkey();
+    private maybeRenderSelectAllHotkey();
     private maybeRenderBodyRegions();
+    private maybeRenderMenuRegions();
     private maybeRenderColumnHeaderRegions();
@@ -264,0 +268,0 @@ private maybeRenderRowHeaderRegions();

dist/table.js

@@ -50,2 +50,14 @@ /**
         };
+        _this.selectAll = function () {
+            var selectionHandler = _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_TABLE);
+            // clicking on upper left hand corner sets selection to "all"
+            // regardless of current selection state (clicking twice does not deselect table)
+            selectionHandler([regions_2.Regions.table()]);
+        };
+        _this.handleSelectAllHotkey = function (e) {
+            // prevent "real" select all from happening as well
+            e.preventDefault();
+            e.stopPropagation();
+            _this.selectAll();
+        };
         _this.columnHeaderCellRenderer = function (columnIndex) {
@@ -79,4 +91,17 @@ var props = _this.getColumnProps(columnIndex);
         _this.handleColumnWidthChanged = function (columnIndex, width) {
+            var selectedRegions = _this.state.selectedRegions;
             var columnWidths = _this.state.columnWidths.slice();
-            columnWidths[columnIndex] = width;
+            if (regions_2.Regions.hasFullTable(selectedRegions)) {
+                for (var col = 0; col < columnWidths.length; col++) {
+                    columnWidths[col] = width;
+                }
+            }
+            if (regions_2.Regions.hasFullColumn(selectedRegions, columnIndex)) {
+                regions_2.Regions.eachUniqueFullColumn(selectedRegions, function (col) {
+                    columnWidths[col] = width;
+                });
+            }
+            else {
+                columnWidths[columnIndex] = width;
+            }
             _this.invalidateGrid();
@@ -90,4 +115,17 @@ _this.setState({ columnWidths: columnWidths });
         _this.handleRowHeightChanged = function (rowIndex, height) {
+            var selectedRegions = _this.state.selectedRegions;
             var rowHeights = _this.state.rowHeights.slice();
-            rowHeights[rowIndex] = height;
+            if (regions_2.Regions.hasFullTable(selectedRegions)) {
+                for (var row = 0; row < rowHeights.length; row++) {
+                    rowHeights[row] = height;
+                }
+            }
+            if (regions_2.Regions.hasFullRow(selectedRegions, rowIndex)) {
+                regions_2.Regions.eachUniqueFullRow(selectedRegions, function (row) {
+                    rowHeights[row] = height;
+                });
+            }
+            else {
+                rowHeights[rowIndex] = height;
+            }
             _this.invalidateGrid();
@@ -225,3 +263,4 @@ _this.setState({ rowHeights: rowHeights });
     Table.prototype.renderHotkeys = function () {
-        return React.createElement(core_2.Hotkeys, null, this.maybeRenderCopyHotkey());
+        var hotkeys = [this.maybeRenderCopyHotkey(), this.maybeRenderSelectAllHotkey()];
+        return (React.createElement(core_2.Hotkeys, null, hotkeys.filter(function (element) { return element !== undefined; })));
     };
@@ -277,3 +316,7 @@ /**
     Table.prototype.renderMenu = function () {
-        return (React.createElement("div", { className: Classes.TABLE_MENU, ref: this.setMenuRef }));
+        var classes = classNames(Classes.TABLE_MENU, (_a = {},
+            _a[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_TABLE),
+            _a));
+        return (React.createElement("div", { className: classes, ref: this.setMenuRef, onClick: this.selectAll }, this.maybeRenderMenuRegions()));
+        var _a;
     };
@@ -392,3 +435,3 @@ Table.prototype.syncMenuWidth = function () {
         if (getCellClipboardData != null) {
-            return (React.createElement(core_2.Hotkey, { label: "Copy selected table cells", group: "Table", combo: "mod+c", onKeyDown: this.handleCopy }));
+            return (React.createElement(core_2.Hotkey, { key: "copy-hotkey", label: "Copy selected table cells", group: "Table", combo: "mod+c", onKeyDown: this.handleCopy }));
         }
@@ -399,2 +442,10 @@ else {
     };
+    Table.prototype.maybeRenderSelectAllHotkey = function () {
+        if (this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_TABLE)) {
+            return (React.createElement(core_2.Hotkey, { key: "select-all-hotkey", label: "Select all", group: "Table", combo: "mod+a", onKeyDown: this.handleSelectAllHotkey }));
+        }
+        else {
+            return undefined;
+        }
+    };
     Table.prototype.maybeRenderBodyRegions = function () {
@@ -414,2 +465,6 @@ var _this = this;
                     return style;
+                case regions_2.RegionCardinality.FULL_TABLE:
+                    style.left = "-1px";
+                    style.top = "-1px";
+                    return style;
                 default:
@@ -421,2 +476,27 @@ return { display: "none" };
     };
+    Table.prototype.maybeRenderMenuRegions = function () {
+        var _this = this;
+        var styler = function (region) {
+            var grid = _this.grid;
+            var viewportRect = _this.state.viewportRect;
+            if (viewportRect == null) {
+                return {};
+            }
+            var cardinality = regions_2.Regions.getRegionCardinality(region);
+            var style = grid.getRegionStyle(region);
+            switch (cardinality) {
+                case regions_2.RegionCardinality.FULL_TABLE:
+                    style.right = "0px";
+                    style.bottom = "0px";
+                    style.top = "0px";
+                    style.left = "0px";
+                    style.borderBottom = "none";
+                    style.borderRight = "none";
+                    return style;
+                default:
+                    return { display: "none" };
+            }
+        };
+        return this.maybeRenderRegions(styler);
+    };
     Table.prototype.maybeRenderColumnHeaderRegions = function () {
@@ -433,2 +513,8 @@ var _this = this;
             switch (cardinality) {
+                case regions_2.RegionCardinality.FULL_TABLE:
+                    style.left = "-1px";
+                    style.borderLeft = "none";
+                    style.bottom = "-1px";
+                    style.transform = "translate3d(" + -viewportRect.left + "px, 0, 0)";
+                    return style;
                 case regions_2.RegionCardinality.FULL_COLUMNS:
@@ -455,2 +541,8 @@ style.bottom = "-1px";
             switch (cardinality) {
+                case regions_2.RegionCardinality.FULL_TABLE:
+                    style.top = "-1px";
+                    style.borderTop = "none";
+                    style.right = "-1px";
+                    style.transform = "translate3d(0, " + -viewportRect.top + "px, 0)";
+                    return style;
                 case regions_2.RegionCardinality.FULL_ROWS:
@@ -457,0 +549,0 @@ style.right = "-1px";

package.json

 {
   "name": "@blueprintjs/table",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Scalable interactive table component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/common/classes.ts

@@ -39,2 +39,3 @@ /*
 export const TABLE_NO_VERTICAL_SCROLL = "bp-table-no-vertical-scroll";
+export const TABLE_NO_WRAP_TEXT = "bp-table-no-wrap-text";
 export const TABLE_NULL = "bp-table-null";
@@ -63,2 +64,3 @@ export const TABLE_OVERLAY = "bp-table-overlay";
 export const TABLE_TOP_CONTAINER = "bp-table-top-container";
+export const TABLE_TRUNCATED_CELL = "bp-table-truncated-cell";
 export const TABLE_TRUNCATED_FORMAT = "bp-table-truncated-format";
@@ -65,0 +67,0 @@ export const TABLE_TRUNCATED_POPOVER = "bp-table-truncated-popover";

src/locator.ts

@@ -64,3 +64,3 @@ /**
         const cellClasses = [
-            `.${Classes.columnIndexClass(columnIndex)}`,
+            `.${Classes.columnCellIndexClass(columnIndex)}`,
             `.${Classes.TABLE_COLUMN_NAME}`,
@@ -67,0 +67,0 @@ ];

src/regions.ts

@@ -44,2 +44,3 @@ /**
     ALL: [
+        RegionCardinality.FULL_TABLE,
         RegionCardinality.FULL_COLUMNS,
@@ -121,3 +122,14 @@ RegionCardinality.FULL_ROWS,
      *
-     * In this case, this method would return RegionCardinality.FULL_COLUMNS.
+     * In this case, this method would return `RegionCardinality.FULL_COLUMNS`.
+     *
+     * If both rows and columns are unbounded, then the region covers the
+     * entire table. Therefore, a region like this:
+     *
+     *     {
+     *         rows: null,
+     *         cols: null
+     *     }
+     *
+     * will return `RegionCardinality.FULL_TABLE`.
+     *
      * An example of a region containing a single cell in the table would be:
@@ -130,3 +142,3 @@ *
      *
-     * In this case, this method would return RegionCardinality.CELLS.
+     * In this case, this method would return `RegionCardinality.CELLS`.
      */
@@ -170,2 +182,9 @@ public static getRegionCardinality(region: IRegion) {
     /**
+     * Returns a region containing the entire table.
+     */
+    public static table(): IRegion  {
+        return {};
+    }
+
+    /**
      * Adds the region to the end of a cloned copy of the supplied region
@@ -265,2 +284,20 @@ * array.
     /**
+     * Returns true if the regions contain a region that has FULL_TABLE cardinality
+     */
+    public static hasFullTable(regions: IRegion[]) {
+        if (regions == null) {
+            return false;
+        }
+
+        for (const region of regions) {
+            const cardinality = Regions.getRegionCardinality(region);
+            if (cardinality === RegionCardinality.FULL_TABLE) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
      * Returns true if the regions contain the query region. The query region
@@ -322,2 +359,21 @@ * may be a subset of the `regions` parameter.
 
+    public static eachUniqueFullRow(regions: IRegion[], iteratee: (row: number) => void) {
+        if (regions == null || regions.length === 0 || iteratee == null) {
+            return;
+        }
+
+        const seen: {[row: number]: boolean} = {};
+        regions.forEach((region: IRegion) => {
+            if (Regions.getRegionCardinality(region) === RegionCardinality.FULL_ROWS) {
+                const [ start, end ] = region.rows;
+                for (let row = start; row <= end; row++) {
+                    if (!seen[row]) {
+                        seen[row] = true;
+                        iteratee(row);
+                    }
+                }
+            }
+        });
+    }
+
     /**
@@ -324,0 +380,0 @@ * Using the supplied array of non-contiguous `IRegion`s, this method

No alert changes

Improved metrics

Total package byte prevSize

1819549

increased by2.26%

Lines of code

17271

increased by3.04%

No dependency changes