@blueprintjs/table - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

dist/cell/cell.d.ts

@@ -31,4 +31,2 @@ import * as React from "react";
 export declare const emptyCellRenderer: () => JSX.Element;
-export declare const CELL_CLASSNAME = "bp-table-cell";
-export declare const CELL_INTERACTIVE_CLASSNAME = "bp-table-cell-interactive";
 export declare class Cell extends React.Component<ICellProps, {}> {
@@ -35,0 +33,0 @@ static defaultProps: {

dist/cell/cell.js

@@ -12,7 +12,6 @@ /**
 var React = require("react");
+var Classes = require("../common/classes");
 var core_1 = require("@blueprintjs/core");
 var loadableContent_1 = require("../common/loadableContent");
 exports.emptyCellRenderer = function () { return React.createElement(Cell, null); };
-exports.CELL_CLASSNAME = "bp-table-cell";
-exports.CELL_INTERACTIVE_CLASSNAME = "bp-table-cell-interactive";
 var Cell = (function (_super) {
@@ -25,8 +24,8 @@ tslib_1.__extends(Cell, _super);
         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 classes = classNames(exports.CELL_CLASSNAME, core_1.Classes.intentClass(intent), (_b = {},
-            _b[exports.CELL_INTERACTIVE_CLASSNAME] = interactive,
+        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), className);
         var content = truncated ?
-            React.createElement("div", { className: "bp-table-truncated-text" }, this.props.children) : this.props.children;
+            React.createElement("div", { className: Classes.TABLE_TRUNCATED_TEXT }, this.props.children) : this.props.children;
         return (React.createElement("div", { className: classes, style: style, title: tooltip },
@@ -33,0 +32,0 @@ React.createElement(loadableContent_1.LoadableContent, { loading: loading, variableLength: true }, content)));

dist/cell/editableCell.js

@@ -13,2 +13,3 @@ /**
 var core_1 = require("@blueprintjs/core");
+var Classes = require("../common/classes");
 var draggable_1 = require("../interactions/draggable");
@@ -59,3 +60,3 @@ var cell_1 = require("./cell");
             React.createElement(draggable_1.Draggable, { onActivate: this.handleCellActivate, onDoubleClick: this.handleCellDoubleClick, preventDefault: !interactive, stopPropagation: interactive },
-                React.createElement(core_1.EditableText, { className: "bp-table-editable-name", defaultValue: value, intent: intent, minWidth: null, onCancel: this.handleCancel, onChange: onChange, onConfirm: this.handleConfirm, onEdit: this.handleEdit, placeholder: "", selectAllOnFocus: true }))));
+                React.createElement(core_1.EditableText, { className: Classes.TABLE_EDITABLE_NAME, defaultValue: value, intent: intent, minWidth: null, onCancel: this.handleCancel, onChange: onChange, onConfirm: this.handleConfirm, onEdit: this.handleEdit, placeholder: "", selectAllOnFocus: true }))));
     };
@@ -62,0 +63,0 @@ return EditableCell;

dist/cell/formats/jsonFormat.js

@@ -12,2 +12,3 @@ /**
 var React = require("react");
+var Classes = require("../../common/classes");
 var truncatedFormat_1 = require("./truncatedFormat");
@@ -27,5 +28,5 @@ var JSONFormat = (function (_super) {
         }
-        var className = classNames(this.props.className, {
-            "bp-table-null": isNully,
-        });
+        var className = classNames(this.props.className, (_b = {},
+            _b[Classes.TABLE_NULL] = isNully,
+            _b));
         var displayValue = "";
@@ -39,2 +40,3 @@ if (omitQuotesOnStrings && typeof children === "string") {
         return (React.createElement(truncatedFormat_1.TruncatedFormat, tslib_1.__assign({}, this.props, { className: className, showPopover: showPopover }), displayValue));
+        var _b;
     };
@@ -41,0 +43,0 @@ return JSONFormat;

dist/cell/formats/truncatedFormat.js

@@ -12,2 +12,3 @@ /**
 var React = require("react");
+var Classes = require("../../common/classes");
 var TruncatedPopoverMode;
@@ -35,5 +36,5 @@ (function (TruncatedPopoverMode) {
         if (this.shouldShowPopover(content)) {
-            var popoverClasses = classNames("bp-table-truncated-popover", preformatted ? "bp-table-popover-whitespace-pre" : "bp-table-popover-whitespace-normal");
+            var popoverClasses = classNames(Classes.TABLE_TRUNCATED_POPOVER, preformatted ? Classes.TABLE_POPOVER_WHITESPACE_PRE : Classes.TABLE_POPOVER_WHITESPACE_NORMAL);
             var popoverContent = React.createElement("div", { className: popoverClasses }, children);
-            var className = classNames(this.props.className, "bp-table-truncated-format");
+            var className = classNames(this.props.className, Classes.TABLE_TRUNCATED_FORMAT);
             var constraints = [{
@@ -44,9 +45,10 @@ attachment: "together",
                 }];
+            var iconClasses = classNames(core_1.Classes.ICON_STANDARD, core_1.Classes.iconClass("more"));
             return (React.createElement("div", { className: className },
-                React.createElement("div", { className: "bp-table-truncated-value", ref: this.handleContentDivRef }, cellContent),
-                React.createElement(core_1.Popover, { className: "bp-table-truncated-popover-target", constraints: constraints, content: popoverContent, position: core_1.Position.BOTTOM, useSmartArrowPositioning: true, useSmartPositioning: true },
-                    React.createElement("span", { className: "pt-icon-standard pt-icon-more" }))));
+                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("span", { className: iconClasses }))));
         }
         else {
-            var className = classNames(this.props.className, "bp-table-truncated-text");
+            var className = classNames(this.props.className, Classes.TABLE_TRUNCATED_TEXT);
             return React.createElement("div", { className: className, ref: this.handleContentDivRef }, cellContent);
@@ -53,0 +55,0 @@ }

dist/common/grid.js

@@ -10,8 +10,5 @@ /**
 var regions_1 = require("../regions");
+var Classes = require("./classes");
 var rect_1 = require("./rect");
 var utils_1 = require("./utils");
-var EXTREMA_LAST_IN_ROW = ["bp-table-last-in-row"];
-var EXTREMA_LAST_IN_COLUMN = ["bp-table-last-in-column"];
-var EXTREMA_LAST_IN_ROW_AND_COLUMN = ["bp-table-last-in-column", "bp-table-last-in-row"];
-var EXTREMA_NONE = [];
 /**
@@ -249,11 +246,11 @@ * This class manages the sizes of grid cells using arrays of individual row/column sizes.
         if (rowIndex === rowEnd && columnIndex === columnEnd) {
-            return EXTREMA_LAST_IN_ROW_AND_COLUMN;
+            return [Classes.TABLE_LAST_IN_COLUMN, Classes.TABLE_LAST_IN_ROW];
         }
         if (rowIndex === rowEnd) {
-            return EXTREMA_LAST_IN_COLUMN;
+            return [Classes.TABLE_LAST_IN_COLUMN];
         }
         if (columnIndex === columnEnd) {
-            return EXTREMA_LAST_IN_ROW;
+            return [Classes.TABLE_LAST_IN_ROW];
         }
-        return EXTREMA_NONE;
+        return [];
     };
@@ -260,0 +257,0 @@ Grid.prototype.getRegionStyle = function (region) {

dist/common/roundSize.js

@@ -10,2 +10,3 @@ /**
 var React = require("react");
+var Classes = require("./classes");
 /**
@@ -26,4 +27,4 @@ * A React component that measures and rounds the size of its only child. This
     RoundSize.prototype.render = function () {
-        return (React.createElement("div", { className: "bp-table-rounded-layout", ref: this.setContainerRef },
-            React.createElement("div", { className: "bp-table-no-layout", ref: this.setInternalRef }, React.Children.only(this.props.children))));
+        return (React.createElement("div", { className: Classes.TABLE_ROUNDED_LAYOUT, ref: this.setContainerRef },
+            React.createElement("div", { className: Classes.TABLE_NO_LAYOUT, ref: this.setInternalRef }, React.Children.only(this.props.children))));
     };
@@ -30,0 +31,0 @@ RoundSize.prototype.componentDidMount = function () {

dist/headers/columnHeader.js

@@ -12,2 +12,3 @@ /**
 var React = require("react");
+var Classes = require("../common/classes");
 var index_1 = require("../common/index");
@@ -30,3 +31,3 @@ var resizable_1 = require("../interactions/resizable");
             };
-            return (React.createElement(columnHeaderCell_1.ColumnHeaderCell, { key: "bp-table-col-" + columnIndex, className: classNames(extremaClasses), loading: loading, style: style }));
+            return (React.createElement(columnHeaderCell_1.ColumnHeaderCell, { key: Classes.columnIndexClass(columnIndex), className: classNames(extremaClasses), loading: loading, style: style }));
         };
@@ -50,10 +51,11 @@ _this.renderCell = function (columnIndex, extremaClasses) {
             var cell = cellRenderer(columnIndex);
-            var className = classNames(cell.props.className, extremaClasses, {
-                "bp-table-draggable": (onSelection != null),
-            });
+            var className = classNames(cell.props.className, extremaClasses, (_b = {},
+                _b[Classes.TABLE_DRAGGABLE] = (onSelection != null),
+                _b));
             var cellLoading = cell.props.loading != null ? cell.props.loading : loading;
             var isColumnSelected = regions_1.Regions.hasFullColumn(selectedRegions, columnIndex);
             var cellProps = { className: className, isColumnSelected: isColumnSelected, loading: cellLoading };
-            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: "bp-table-col-" + columnIndex, locateClick: _this.locateClick, locateDrag: _this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
+            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: Classes.columnIndexClass(columnIndex), locateClick: _this.locateClick, locateDrag: _this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
                 React.createElement(resizable_1.Resizable, { isResizable: isResizable, maxSize: maxColumnWidth, minSize: minColumnWidth, onDoubleClick: handleDoubleClick, onLayoutLock: onLayoutLock, onResizeEnd: handleResizeEnd, onSizeChanged: handleSizeChanged, orientation: resizeHandle_1.Orientation.VERTICAL, size: rect.width }, React.cloneElement(cell, cellProps))));
+            var _b;
         };
@@ -92,6 +94,7 @@ _this.locateClick = function (event) {
         }
-        var classes = classNames("bp-table-thead", "bp-table-column-header-tr", {
-            "bp-table-draggable": (this.props.onSelection != null),
-        });
+        var classes = classNames(Classes.TABLE_THEAD, Classes.TABLE_COLUMN_HEADER_TR, (_b = {},
+            _b[Classes.TABLE_DRAGGABLE] = (this.props.onSelection != null),
+            _b));
         return React.createElement("div", { style: style, className: classes }, cells);
+        var _b;
     };
@@ -98,0 +101,0 @@ return ColumnHeader;

dist/headers/columnHeaderCell.js

@@ -13,10 +13,6 @@ /**
 var core_1 = require("@blueprintjs/core");
+var Classes = require("../common/classes");
 var loadableContent_1 = require("../common/loadableContent");
-var HEADER_CLASSNAME = "bp-table-header";
-var HEADER_COLUMN_NAME_CLASSNAME = "bp-table-column-name";
-var HEADER_CONTENT_CLASSNAME = "bp-table-header-content";
-var HEADER_COLUMN_NAME_TEXT_CLASSNAME = "bp-table-column-name-text";
-var HEADER_INTERACTION_BAR_CLASSNAME = "bp-table-interaction-bar";
 function HorizontalCellDivider() {
-    return React.createElement("div", { className: "bp-table-horizontal-cell-divider" });
+    return React.createElement("div", { className: Classes.TABLE_HORIZONTAL_CELL_DIVIDER });
 }
@@ -44,13 +40,12 @@ exports.HorizontalCellDivider = HorizontalCellDivider;
     ColumnHeaderCell.isHeaderMouseTarget = function (target) {
-        return target.classList.contains(HEADER_CLASSNAME)
-            || target.classList.contains(HEADER_COLUMN_NAME_CLASSNAME)
-            || target.classList.contains(HEADER_INTERACTION_BAR_CLASSNAME)
-            || target.classList.contains(HEADER_CONTENT_CLASSNAME);
+        return target.classList.contains(Classes.TABLE_HEADER)
+            || target.classList.contains(Classes.TABLE_COLUMN_NAME)
+            || target.classList.contains(Classes.TABLE_INTERACTION_BAR)
+            || target.classList.contains(Classes.TABLE_HEADER_CONTENT);
     };
     ColumnHeaderCell.prototype.render = function () {
         var _a = this.props, isActive = _a.isActive, isColumnSelected = _a.isColumnSelected, loading = _a.loading, resizeHandle = _a.resizeHandle, style = _a.style;
-        var classes = classNames(HEADER_CLASSNAME, (_b = {
-                "bp-table-header-active": isActive || this.state.isActive,
-                "bp-table-header-selected": isColumnSelected
-            },
+        var classes = classNames(Classes.TABLE_HEADER, (_b = {},
+            _b[Classes.TABLE_HEADER_ACTIVE] = isActive || this.state.isActive,
+            _b[Classes.TABLE_HEADER_SELECTED] = isColumnSelected,
             _b[core_1.Classes.LOADING] = loading,
@@ -70,14 +65,14 @@ _b));
         var dropdownMenu = this.maybeRenderDropdownMenu();
-        var defaultName = React.createElement("div", { className: "bp-table-truncated-text" }, name);
+        var defaultName = React.createElement("div", { className: Classes.TABLE_TRUNCATED_TEXT }, name);
         var nameComponent = (React.createElement(loadableContent_1.LoadableContent, { loading: loading, variableLength: true }, renderName == null ? defaultName : renderName(name)));
         if (useInteractionBar) {
-            return (React.createElement("div", { className: HEADER_COLUMN_NAME_CLASSNAME, title: name },
-                React.createElement("div", { className: HEADER_INTERACTION_BAR_CLASSNAME }, dropdownMenu),
+            return (React.createElement("div", { className: Classes.TABLE_COLUMN_NAME, title: name },
+                React.createElement("div", { className: Classes.TABLE_INTERACTION_BAR }, dropdownMenu),
                 React.createElement(HorizontalCellDivider, null),
-                React.createElement("div", { className: HEADER_COLUMN_NAME_TEXT_CLASSNAME }, nameComponent)));
+                React.createElement("div", { className: Classes.TABLE_COLUMN_NAME_TEXT }, nameComponent)));
         }
         else {
-            return (React.createElement("div", { className: HEADER_COLUMN_NAME_CLASSNAME, title: name },
+            return (React.createElement("div", { className: Classes.TABLE_COLUMN_NAME, title: name },
                 dropdownMenu,
-                React.createElement("div", { className: HEADER_COLUMN_NAME_TEXT_CLASSNAME }, nameComponent)));
+                React.createElement("div", { className: Classes.TABLE_COLUMN_NAME_TEXT }, nameComponent)));
         }
@@ -89,3 +84,3 @@ };
         }
-        return (React.createElement("div", { className: HEADER_CONTENT_CLASSNAME }, this.props.children));
+        return (React.createElement("div", { className: Classes.TABLE_HEADER_CONTENT }, this.props.children));
     };
@@ -97,3 +92,3 @@ ColumnHeaderCell.prototype.maybeRenderDropdownMenu = function () {
         }
-        var popoverTargetClasses = classNames("pt-icon-standard", core_1.Classes.iconClass(menuIconName));
+        var popoverTargetClasses = classNames(core_1.Classes.ICON_STANDARD, core_1.Classes.iconClass(menuIconName));
         var constraints = [{
@@ -104,3 +99,3 @@ attachment: "together",
             }];
-        return (React.createElement(core_1.Popover, { constraints: constraints, content: menu, position: core_1.Position.BOTTOM, className: "bp-table-th-menu", popoverDidOpen: this.getPopoverStateChangeHandler(true), popoverWillClose: this.getPopoverStateChangeHandler(false), useSmartArrowPositioning: true },
+        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 },
             React.createElement("span", { className: popoverTargetClasses })));
@@ -107,0 +102,0 @@ };

dist/headers/editableName.js

@@ -12,2 +12,3 @@ /**
 var React = require("react");
+var Classes = require("../common/classes");
 var EditableName = (function (_super) {
@@ -20,3 +21,3 @@ tslib_1.__extends(EditableName, _super);
         var _a = this.props, className = _a.className, intent = _a.intent, name = _a.name, onCancel = _a.onCancel, onChange = _a.onChange, onConfirm = _a.onConfirm;
-        return (React.createElement(core_1.EditableText, { className: classNames(className, "bp-table-editable-name"), defaultValue: name, intent: intent, minWidth: null, onCancel: onCancel, onChange: onChange, onConfirm: onConfirm, placeholder: "", selectAllOnFocus: true }));
+        return (React.createElement(core_1.EditableText, { className: classNames(className, Classes.TABLE_EDITABLE_NAME), defaultValue: name, intent: intent, minWidth: null, onCancel: onCancel, onChange: onChange, onConfirm: onConfirm, placeholder: "", selectAllOnFocus: true }));
     };
@@ -23,0 +24,0 @@ return EditableName;

dist/headers/rowHeader.js

@@ -12,2 +12,3 @@ /**
 var React = require("react");
+var Classes = require("../common/classes");
 var roundSize_1 = require("../common/roundSize");
@@ -29,3 +30,3 @@ var resizable_1 = require("../interactions/resizable");
             };
-            return (React.createElement(rowHeaderCell_1.RowHeaderCell, { key: "bp-table-row-" + rowIndex, className: classNames(extremaClasses), loading: loading, style: style }));
+            return (React.createElement(rowHeaderCell_1.RowHeaderCell, { key: Classes.rowIndexClass(rowIndex), className: classNames(extremaClasses), loading: loading, style: style }));
         };
@@ -43,10 +44,11 @@ _this.renderCell = function (rowIndex, extremaClasses) {
             var cell = renderRowHeader(rowIndex);
-            var className = classNames(cell.props.className, extremaClasses, {
-                "bp-table-draggable": onSelection != null,
-            });
+            var className = classNames(cell.props.className, extremaClasses, (_b = {},
+                _b[Classes.TABLE_DRAGGABLE] = onSelection != null,
+                _b));
             var cellLoading = cell.props.loading != null ? cell.props.loading : loading;
             var isRowSelected = regions_1.Regions.hasFullRow(selectedRegions, rowIndex);
             var cellProps = { className: className, isRowSelected: isRowSelected, loading: cellLoading };
-            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: "bp-table-row-" + rowIndex, locateClick: _this.locateClick, locateDrag: _this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
+            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: Classes.rowIndexClass(rowIndex), locateClick: _this.locateClick, locateDrag: _this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
                 React.createElement(resizable_1.Resizable, { isResizable: isResizable, maxSize: maxRowHeight, minSize: minRowHeight, onLayoutLock: onLayoutLock, onResizeEnd: handleResizeEnd, onSizeChanged: handleSizeChanged, orientation: resizeHandle_1.Orientation.HORIZONTAL, size: rect.height }, React.cloneElement(cell, cellProps))));
+            var _b;
         };
@@ -53,0 +55,0 @@ _this.locateClick = function (event) {

dist/headers/rowHeaderCell.js

@@ -12,2 +12,3 @@ /**
 var core_1 = require("@blueprintjs/core");
+var Classes = require("../common/classes");
 var loadableContent_1 = require("../common/loadableContent");
@@ -25,11 +26,12 @@ var RowHeaderCell = (function (_super) {
         var _a = this.props, className = _a.className, isActive = _a.isActive, isRowSelected = _a.isRowSelected, loading = _a.loading, name = _a.name, resizeHandle = _a.resizeHandle, style = _a.style;
-        var rowHeaderClasses = classNames(className, "bp-table-header", (_b = {},
+        var rowHeaderClasses = classNames(className, Classes.TABLE_HEADER, (_b = {},
             _b[core_1.Classes.LOADING] = loading,
-            _b["bp-table-header-active"] = isActive || this.state.isActive,
-            _b["bp-table-header-selected"] = isRowSelected,
+            _b[Classes.TABLE_HEADER_ACTIVE] = isActive || this.state.isActive,
+            _b[Classes.TABLE_HEADER_SELECTED] = isRowSelected,
             _b));
+        var loadableContentDivClasses = classNames(Classes.TABLE_ROW_NAME_TEXT, Classes.TABLE_TRUNCATED_TEXT);
         return (React.createElement("div", { className: rowHeaderClasses, style: style },
-            React.createElement("div", { className: "bp-table-row-name" },
+            React.createElement("div", { className: Classes.TABLE_ROW_NAME },
                 React.createElement(loadableContent_1.LoadableContent, { loading: loading },
-                    React.createElement("div", { className: "bp-table-row-name-text bp-table-truncated-text" }, name))),
+                    React.createElement("div", { className: loadableContentDivClasses }, name))),
             this.props.children,
@@ -36,0 +38,0 @@ loading ? undefined : resizeHandle));

dist/interactions/resizeHandle.js

@@ -11,2 +11,3 @@ /**
 var React = require("react");
+var Classes = require("../common/classes");
 var draggable_1 = require("./draggable");
@@ -67,13 +68,14 @@ var Orientation;
         }
-        var targetClasses = classNames("bp-table-resize-handle-target", {
-            "bp-table-dragging": this.state.isDragging,
-            "bp-table-resize-horizontal": orientation === Orientation.HORIZONTAL,
-            "bp-table-resize-vertical": orientation === Orientation.VERTICAL,
-        });
-        var handleClasses = classNames("bp-table-resize-handle", {
-            "bp-table-dragging": this.state.isDragging,
-        });
+        var targetClasses = classNames(Classes.TABLE_RESIZE_HANDLE_TARGET, (_b = {},
+            _b[Classes.TABLE_DRAGGING] = this.state.isDragging,
+            _b[Classes.TABLE_RESIZE_HORIZONTAL] = orientation === Orientation.HORIZONTAL,
+            _b[Classes.TABLE_RESIZE_VERTICAL] = orientation === Orientation.VERTICAL,
+            _b));
+        var handleClasses = classNames(Classes.TABLE_RESIZE_HANDLE, (_c = {},
+            _c[Classes.TABLE_DRAGGING] = this.state.isDragging,
+            _c));
         return (React.createElement(draggable_1.Draggable, { onActivate: this.handleActivate, onClick: this.handleClick, onDoubleClick: this.handleDoubleClick, onDragEnd: this.handleDragEnd, onDragMove: this.handleDragMove },
             React.createElement("div", { className: targetClasses },
                 React.createElement("div", { className: handleClasses }))));
+        var _b, _c;
     };
@@ -80,0 +82,0 @@ return ResizeHandle;

dist/interactions/resizeSensor.d.ts

 /**
- * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
- * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
- * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
- * and https://github.com/palantir/blueprint/blob/master/PATENTS
- */
-/**
  * Efficiently detect when an HTMLElement is resized.
@@ -9,0 +3,0 @@ *

dist/interactions/resizeSensor.js

@@ -8,2 +8,3 @@ /**
 "use strict";
+var Classes = require("../common/classes");
 /**
@@ -25,3 +26,3 @@ * Efficiently detect when an HTMLElement is resized.
         var resizeSensor = document.createElement("div");
-        resizeSensor.className = "bp-table-resize-sensor";
+        resizeSensor.className = Classes.TABLE_RESIZE_SENSOR;
         resizeSensor.style.cssText = ResizeSensor.RESIZE_SENSOR_STYLE;
@@ -87,5 +88,5 @@ resizeSensor.innerHTML = ResizeSensor.RESIZE_SENSOR_HTML;
     "bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
-ResizeSensor.RESIZE_SENSOR_HTML = "<div class=\"bp-table-resize-sensor-expand\"\n        style=\"" + ResizeSensor.RESIZE_SENSOR_STYLE + "\"><div style=\"position: absolute; left: 0; top: 0; transition: 0s;\"\n        ></div></div><div class=\"bp-table-resize-sensor-shrink\" style=\"" + ResizeSensor.RESIZE_SENSOR_STYLE + "\"\n        ><div style=\"position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%;\"></div></div>";
+ResizeSensor.RESIZE_SENSOR_HTML = "<div class=\"" + Classes.TABLE_RESIZE_SENSOR_EXPAND + "\"\n        style=\"" + ResizeSensor.RESIZE_SENSOR_STYLE + "\"><div style=\"position: absolute; left: 0; top: 0; transition: 0s;\"\n        ></div></div><div class=\"" + Classes.TABLE_RESIZE_SENSOR_SHRINK + "\" style=\"" + ResizeSensor.RESIZE_SENSOR_STYLE + "\"\n        ><div style=\"position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%;\"></div></div>";
 exports.ResizeSensor = ResizeSensor;
 
 //# sourceMappingURL=resizeSensor.js.map

dist/layers/guides.js

@@ -11,2 +11,3 @@ /**
 var React = require("react");
+var Classes = require("../common/classes");
 var GuideLayer = (function (_super) {
@@ -20,3 +21,4 @@ tslib_1.__extends(GuideLayer, _super);
             };
-            return (React.createElement("div", { className: "bp-table-overlay bp-table-vertical-guide", key: index, style: style }));
+            var className = classNames(Classes.TABLE_OVERLAY, Classes.TABLE_VERTICAL_GUIDE);
+            return (React.createElement("div", { className: className, key: index, style: style }));
         };
@@ -27,3 +29,4 @@ _this.renderHorizontalGuide = function (offset, index) {
             };
-            return (React.createElement("div", { className: "bp-table-overlay bp-table-horizontal-guide", key: index, style: style }));
+            var className = classNames(Classes.TABLE_OVERLAY, Classes.TABLE_HORIZONTAL_GUIDE);
+            return (React.createElement("div", { className: className, key: index, style: style }));
         };
@@ -36,3 +39,3 @@ return _this;
         var horizontals = (horizontalGuides == null) ? undefined : horizontalGuides.map(this.renderHorizontalGuide);
-        return (React.createElement("div", { className: classNames(className, "bp-table-overlay-layer") },
+        return (React.createElement("div", { className: classNames(className, Classes.TABLE_OVERLAY_LAYER) },
             verticals,
@@ -39,0 +42,0 @@ horizontals));

dist/layers/regions.js

@@ -12,2 +12,3 @@ /**
 var React = require("react");
+var Classes = require("../common/classes");
 var RegionLayer = (function (_super) {
@@ -19,3 +20,3 @@ tslib_1.__extends(RegionLayer, _super);
             var _a = _this.props, className = _a.className, getRegionStyle = _a.getRegionStyle;
-            return (React.createElement("div", { className: classNames("bp-table-overlay bp-table-region", className), key: index, style: getRegionStyle(region) }));
+            return (React.createElement("div", { className: classNames(Classes.TABLE_OVERLAY, Classes.TABLE_REGION, className), key: index, style: getRegionStyle(region) }));
         };
@@ -25,3 +26,3 @@ return _this;
     RegionLayer.prototype.render = function () {
-        return React.createElement("div", { className: "bp-table-overlay-layer" }, this.renderRegionChildren());
+        return React.createElement("div", { className: Classes.TABLE_OVERLAY_LAYER }, this.renderRegionChildren());
     };
@@ -28,0 +29,0 @@ RegionLayer.prototype.renderRegionChildren = function () {

dist/locator.d.ts

@@ -1,7 +0,1 @@
-/**
- * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
- * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
- * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
- * and https://github.com/palantir/blueprint/blob/master/PATENTS
- */
 import { Grid } from "./common/grid";
@@ -8,0 +2,0 @@ import { Rect } from "./common/rect";

dist/locator.js

@@ -8,2 +8,3 @@ /**
 "use strict";
+var Classes = require("./common/classes");
 var rect_1 = require("./common/rect");
@@ -34,4 +35,4 @@ var utils_1 = require("./common/utils");
         var cellClasses = [
-            ".bp-table-cell-col-" + columnIndex,
-            ".bp-table-column-name",
+            "." + Classes.columnIndexClass(columnIndex),
+            "." + Classes.TABLE_COLUMN_NAME,
         ];
@@ -38,0 +39,0 @@ var cells = this.tableElement.querySelectorAll(cellClasses.join(", "));

dist/regions.js

@@ -8,2 +8,3 @@ /**
 "use strict";
+var Classes = require("./common/classes");
 var utils_1 = require("./common/utils");
@@ -361,3 +362,3 @@ /**
             regionGroups.push({
-                className: "bp-table-selection-region",
+                className: Classes.TABLE_SELECTION_REGION,
                 regions: selectedRegions,
@@ -364,0 +365,0 @@ });

dist/table.js

@@ -15,2 +15,3 @@ /**
 var column_1 = require("./column");
+var Classes = require("./common/classes");
 var clipboard_1 = require("./common/clipboard");
@@ -212,7 +213,7 @@ var grid_1 = require("./common/grid");
         this.validateGrid();
-        return (React.createElement("div", { className: "bp-table-container", ref: this.setRootTableRef, onScroll: this.handleRootScroll },
-            React.createElement("div", { className: "bp-table-top-container" },
+        return (React.createElement("div", { className: Classes.TABLE_CONTAINER, ref: this.setRootTableRef, onScroll: this.handleRootScroll },
+            React.createElement("div", { className: Classes.TABLE_TOP_CONTAINER },
                 isRowHeaderShown ? this.renderMenu() : undefined,
                 this.renderColumnHeader()),
-            React.createElement("div", { className: "bp-table-bottom-container" },
+            React.createElement("div", { className: Classes.TABLE_BOTTOM_CONTAINER },
                 isRowHeaderShown ? this.renderRowHeader() : undefined,
@@ -273,3 +274,3 @@ this.renderBody())));
     Table.prototype.renderMenu = function () {
-        return (React.createElement("div", { className: "bp-table-menu", ref: this.setMenuRef }));
+        return (React.createElement("div", { className: Classes.TABLE_MENU, ref: this.setMenuRef }));
     };
@@ -291,5 +292,5 @@ Table.prototype.syncMenuWidth = function () {
         var _b = this.props, allowMultipleSelection = _b.allowMultipleSelection, fillBodyWithGhostCells = _b.fillBodyWithGhostCells, isColumnResizable = _b.isColumnResizable, loadingOptions = _b.loadingOptions, maxColumnWidth = _b.maxColumnWidth, minColumnWidth = _b.minColumnWidth, selectedRegionTransform = _b.selectedRegionTransform;
-        var classes = classNames("bp-table-column-headers", {
-            "bp-table-selection-enabled": this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_COLUMNS),
-        });
+        var classes = classNames(Classes.TABLE_COLUMN_HEADERS, (_c = {},
+            _c[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_COLUMNS),
+            _c));
         var columnIndices = grid.getColumnIndicesInRect(viewportRect, fillBodyWithGhostCells);
@@ -299,2 +300,3 @@ return (React.createElement("div", { className: classes },
             this.maybeRenderColumnHeaderRegions()));
+        var _c;
     };
@@ -305,5 +307,5 @@ Table.prototype.renderRowHeader = function () {
         var _b = this.props, allowMultipleSelection = _b.allowMultipleSelection, fillBodyWithGhostCells = _b.fillBodyWithGhostCells, isRowResizable = _b.isRowResizable, loadingOptions = _b.loadingOptions, maxRowHeight = _b.maxRowHeight, minRowHeight = _b.minRowHeight, renderRowHeader = _b.renderRowHeader, selectedRegionTransform = _b.selectedRegionTransform;
-        var classes = classNames("bp-table-row-headers", {
-            "bp-table-selection-enabled": this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_ROWS),
-        });
+        var classes = classNames(Classes.TABLE_ROW_HEADERS, (_c = {},
+            _c[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_ROWS),
+            _c));
         var rowIndices = grid.getRowIndicesInRect(viewportRect, fillBodyWithGhostCells);
@@ -313,2 +315,3 @@ return (React.createElement("div", { className: classes, ref: this.setRowHeaderRef },
             this.maybeRenderRowHeaderRegions()));
+        var _c;
     };
@@ -331,12 +334,13 @@ Table.prototype.renderBody = function () {
         // disable scroll for ghost cells
-        var classes = classNames("bp-table-body", {
-            "bp-table-no-horizontal-scroll": noHorizontalScroll,
-            "bp-table-no-vertical-scroll": noVerticalScroll,
-            "bp-table-selection-enabled": this.isSelectionModeEnabled(regions_2.RegionCardinality.CELLS),
-        });
+        var classes = classNames(Classes.TABLE_BODY, (_c = {},
+            _c[Classes.TABLE_NO_HORIZONTAL_SCROLL] = noHorizontalScroll,
+            _c[Classes.TABLE_NO_VERTICAL_SCROLL] = noVerticalScroll,
+            _c[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.CELLS),
+            _c));
         return (React.createElement("div", { className: classes, onScroll: this.handleBodyScroll, ref: this.setBodyRef },
-            React.createElement("div", { className: "bp-table-body-scroll-client", style: style },
+            React.createElement("div", { className: Classes.TABLE_BODY_SCROLL_CLIENT, style: style },
                 React.createElement(tableBody_1.TableBody, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, cellRenderer: this.bodyCellRenderer, grid: grid, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.CELLS), locator: locator, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.CELLS), renderBodyContextMenu: renderBodyContextMenu, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, rowIndices, columnIndices)),
                 this.maybeRenderBodyRegions(),
-                React.createElement(guides_1.GuideLayer, { className: "bp-table-resize-guides", verticalGuides: verticalGuides, horizontalGuides: horizontalGuides }))));
+                React.createElement(guides_1.GuideLayer, { className: Classes.TABLE_RESIZE_GUIDES, verticalGuides: verticalGuides, horizontalGuides: horizontalGuides }))));
+        var _c;
     };
@@ -343,0 +347,0 @@ Table.prototype.isGuidesShowing = function () {

dist/tableBody.js

@@ -12,2 +12,3 @@ /**
 var cell_1 = require("./cell/cell");
+var Classes = require("./common/classes");
 var contextMenuTargetWrapper_1 = require("./common/contextMenuTargetWrapper");
@@ -19,6 +20,2 @@ var rect_1 = require("./common/rect");
 var regions_1 = require("./regions");
-var TABLE_BODY_CLASSES = "bp-table-body-virtual-client bp-table-cell-client";
-var CELL_GHOST_CLASS = "bp-table-cell-ghost";
-var CELL_LEDGER_ODD_CLASS = "bp-table-cell-ledger-odd";
-var CELL_LEDGER_EVEN_CLASS = "bp-table-cell-ledger-even";
 /**
@@ -55,5 +52,5 @@ * For perf, we want to ignore changes to the `ISelectableProps` part of the
             var className = classNames(TableBody.cellClassNames(rowIndex, columnIndex), extremaClasses, (_b = {},
-                _b[CELL_GHOST_CLASS] = isGhost,
-                _b[CELL_LEDGER_ODD_CLASS] = (rowIndex % 2) === 1,
-                _b[CELL_LEDGER_EVEN_CLASS] = (rowIndex % 2) === 0,
+                _b[Classes.TABLE_CELL_GHOST] = isGhost,
+                _b[Classes.TABLE_CELL_LEDGER_ODD] = (rowIndex % 2) === 1,
+                _b[Classes.TABLE_CELL_LEDGER_EVEN] = (rowIndex % 2) === 0,
                 _b), baseCell.props.className);
@@ -84,4 +81,4 @@ var key = TableBody.cellReactKey(rowIndex, columnIndex);
         return [
-            "bp-table-cell-row-" + rowIndex,
-            "bp-table-cell-col-" + columnIndex,
+            Classes.rowCellIndexClass(rowIndex),
+            Classes.columnCellIndexClass(columnIndex),
         ];
@@ -108,3 +105,3 @@ };
         return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, locateClick: this.locateClick, locateDrag: this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
-            React.createElement(contextMenuTargetWrapper_1.ContextMenuTargetWrapper, { className: TABLE_BODY_CLASSES, renderContextMenu: this.renderContextMenu, style: style }, cells)));
+            React.createElement(contextMenuTargetWrapper_1.ContextMenuTargetWrapper, { className: classNames(Classes.TABLE_BODY_VIRTUAL_CLIENT, Classes.TABLE_CELL_CLIENT), renderContextMenu: this.renderContextMenu, style: style }, cells)));
     };
@@ -111,0 +108,0 @@ return TableBody;

package.json

 {
   "name": "@blueprintjs/table",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Scalable interactive table component",
@@ -9,3 +9,3 @@ "main": "dist/index.js",
   "scripts": {
-    "build:gulp": "$(cd ..; npm bin)/gulp typescript-compile-table sass-compile-table",
+    "build:gulp": "$(cd ..; npm bin)/gulp tsc-table sass-table",
     "build:preview": "webpack --config config/webpack.config.preview.js",
@@ -16,3 +16,3 @@ "build": "npm-run-all clean build:gulp build:preview",
     "clean": "npm-run-all clean:dist clean:preview",
-    "lint": "$(cd ..; npm bin)/gulp typescript-lint-table sass-lint-table",
+    "lint": "$(cd ..; npm bin)/gulp tslint-table stylelint-table",
     "serve": "http-server .",
@@ -19,0 +19,0 @@ "start": "npm-run-all build -p watch serve",

src/common/grid.ts

@@ -11,2 +11,3 @@ /**
 import { IRegion, RegionCardinality, Regions } from "../regions";
+import * as Classes from "./classes";
 import { Rect } from "./rect";
@@ -29,7 +30,2 @@ import { Utils } from "./utils";
 
-const EXTREMA_LAST_IN_ROW = ["bp-table-last-in-row"];
-const EXTREMA_LAST_IN_COLUMN = ["bp-table-last-in-column"];
-const EXTREMA_LAST_IN_ROW_AND_COLUMN = ["bp-table-last-in-column", "bp-table-last-in-row"];
-const EXTREMA_NONE: string[] = [];
-
 /**
@@ -303,11 +299,11 @@ * This class manages the sizes of grid cells using arrays of individual row/column sizes.
         if (rowIndex === rowEnd && columnIndex === columnEnd) {
-            return EXTREMA_LAST_IN_ROW_AND_COLUMN;
+            return [Classes.TABLE_LAST_IN_COLUMN, Classes.TABLE_LAST_IN_ROW];
         }
         if (rowIndex === rowEnd) {
-            return EXTREMA_LAST_IN_COLUMN;
+            return [Classes.TABLE_LAST_IN_COLUMN];
         }
         if (columnIndex === columnEnd) {
-            return EXTREMA_LAST_IN_ROW;
+            return [Classes.TABLE_LAST_IN_ROW];
         }
-        return EXTREMA_NONE;
+        return [];
     }
@@ -314,0 +310,0 @@

src/interactions/resizeSensor.ts

@@ -8,2 +8,4 @@ /**
 
+import * as Classes from "../common/classes";
+
 /**
@@ -24,3 +26,3 @@ * Efficiently detect when an HTMLElement is resized.
         const resizeSensor = document.createElement("div") as HTMLElement;
-        resizeSensor.className = "bp-table-resize-sensor";
+        resizeSensor.className = Classes.TABLE_RESIZE_SENSOR;
         resizeSensor.style.cssText = ResizeSensor.RESIZE_SENSOR_STYLE;
@@ -73,5 +75,5 @@ resizeSensor.innerHTML = ResizeSensor.RESIZE_SENSOR_HTML;
 
-    private static RESIZE_SENSOR_HTML = `<div class="bp-table-resize-sensor-expand"
+    private static RESIZE_SENSOR_HTML = `<div class="${Classes.TABLE_RESIZE_SENSOR_EXPAND}"
         style="${ResizeSensor.RESIZE_SENSOR_STYLE}"><div style="position: absolute; left: 0; top: 0; transition: 0s;"
-        ></div></div><div class="bp-table-resize-sensor-shrink" style="${ResizeSensor.RESIZE_SENSOR_STYLE}"
+        ></div></div><div class="${Classes.TABLE_RESIZE_SENSOR_SHRINK}" style="${ResizeSensor.RESIZE_SENSOR_STYLE}"
         ><div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%;"></div></div>`;
@@ -78,0 +80,0 @@

src/locator.ts

@@ -8,2 +8,3 @@ /**
 
+import * as Classes from "./common/classes";
 import { Grid } from "./common/grid";
@@ -64,4 +65,4 @@ import { Rect } from "./common/rect";
         const cellClasses = [
-            `.bp-table-cell-col-${columnIndex}`,
-            ".bp-table-column-name",
+            `.${Classes.columnIndexClass(columnIndex)}`,
+            `.${Classes.TABLE_COLUMN_NAME}`,
         ];
@@ -68,0 +69,0 @@ const cells = this.tableElement.querySelectorAll(cellClasses.join(", "));

src/regions.ts

@@ -8,2 +8,3 @@ /**
 
+import * as Classes from "./common/classes";
 import { Utils } from "./common/utils";
@@ -421,3 +422,3 @@
             regionGroups.push({
-                className: "bp-table-selection-region",
+                className: Classes.TABLE_SELECTION_REGION,
                 regions: selectedRegions,
@@ -424,0 +425,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1754710

increased by2.34%

Number of package files

173

increased by2.37%

Lines of code

16575

increased by2.4%

No dependency changes