@singularsystems/neo-react 0.10.63 → 0.10.64

package/dist/ReactComponents/Button.js

@@ -50,12 +50,12 @@ var Button = /** @class */ (function (_super) {
     };
     Button.prototype.render = function () {
         var _this = this;
-        var _a;
-        var _b = this.props, isSubmit = _b.isSubmit, variant = _b.variant, size = _b.size, isOutline = _b.isOutline, icon = _b.icon, iconAlignment = _b.iconAlignment, text = _b.text, menuItems = _b.menuItems, splitMenu = _b.splitMenu, menuAlignment = _b.menuAlignment, buttonGroupClassName = _b.buttonGroupClassName, tooltip = _b.tooltip, task = _b.task, isBusy = _b.isBusy, pulse = _b.pulse, native = __rest(_b, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse"]);
+        var _a, _b;
+        var _c = this.props, isSubmit = _c.isSubmit, variant = _c.variant, size = _c.size, isOutline = _c.isOutline, icon = _c.icon, iconAlignment = _c.iconAlignment, text = _c.text, menuItems = _c.menuItems, splitMenu = _c.splitMenu, menuAlignment = _c.menuAlignment, buttonGroupClassName = _c.buttonGroupClassName, tooltip = _c.tooltip, task = _c.task, isBusy = _c.isBusy, pulse = _c.pulse, customVariant = _c.customVariant, native = __rest(_c, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse", "customVariant"]);
         native.type = isSubmit ? "submit" : "button";
-        variant = (variant !== null && variant !== void 0 ? variant : "primary");
+        var variantClassName = (_a = (customVariant !== null && customVariant !== void 0 ? customVariant : variant), (_a !== null && _a !== void 0 ? _a : "primary"));
         var isDropDown = menuItems && menuItems.length;
-        var buttonClasses = "btn btn-" + (isOutline ? "outline-" : "") + variant;
+        var buttonClasses = "btn btn-" + (isOutline ? "outline-" : "") + variantClassName;
         if (size)
             buttonClasses += " btn-" + size;
         if (isDropDown && !splitMenu) {
@@ -66,14 +66,14 @@ var Button = /** @class */ (function (_super) {
         if (isBusy !== undefined || task !== undefined) {
             iconStyle = { fixedWidth: true };
         }
-        if (isBusy || ((_a = task) === null || _a === void 0 ? void 0 : _a.isBusy)) {
+        if (isBusy || ((_b = task) === null || _b === void 0 ? void 0 : _b.isBusy)) {
             iconStyle.fixedWidth = true;
             iconStyle.spin = true;
             icon = Misc.Settings.icons.loadingIcon;
             native.disabled = true;
         }
         if (pulse) {
-            buttonClasses += " " + variant + "-color-pulse";
+            buttonClasses += " " + variantClassName + "-color-pulse";
         }
         native.className = (native.className || "") + " " + buttonClasses;
         // Button text

package/dist/ReactComponents/Card.js

@@ -19,7 +19,7 @@ var Card = /** @class */ (function (_super) {
         var isCollapsible = collapsible || isExpanded !== undefined || initiallyCollapsed !== undefined;
         var expandState = (isExpanded !== null && isExpanded !== void 0 ? isExpanded : this.expandState);
         if (isCollapsible) {
-            var expandIndicator = React.createElement("i", { onClick: function () { return expandState.value = !expandState.value; }, className: "card-expand-indicator fa fa-fw fa-angle-" + (expandState.value ? "up" : "down") });
+            var expandIndicator = React.createElement("i", { onClick: function (e) { return expandState.value = !expandState.value; }, className: "card-expand-indicator fa fa-fw fa-angle-" + (expandState.value ? "up" : "down") });
             if (headerElements) {
                 headerElements = React.createElement(React.Fragment, null,
                     headerElements,
@@ -31,6 +31,7 @@ var Card = /** @class */ (function (_super) {
             if (!expandState.value) {
                 className += " collapsed";
             }
+            className += " card-collapsible";
         }
         var body = React.createElement("div", { className: "card-body" },
             useCustomScrollbar && React.createElement(Scrollbar, null, children),
@@ -41,11 +42,11 @@ var Card = /** @class */ (function (_super) {
         }
         return (React.createElement("div", __assign({}, domProps, { className: className }),
             (icon || title) &&
-                React.createElement("div", { className: "card-header" },
+                React.createElement("div", { className: "card-header", onClick: function (e) { return expandState.value = !expandState.value; } },
                     React.createElement("div", { className: "card-header-title" },
                         this.iconFactory.getIconComponent(icon),
                         React.createElement("span", null, title)),
-                    headerElements && React.createElement("div", { className: "card-header-right-section" }, headerElements)),
+                    headerElements && React.createElement("div", { className: "card-header-right-section", onClick: function (e) { return e.stopPropagation(); } }, headerElements)),
             body));
     };
     Card = __decorate([

package/dist/ReactComponents/Grid/StickyTableHeader.d.ts

@@ -20,5 +20,8 @@ export declare class StickyTableHeader {
     private onPossibleContentChange;
     private setColumnWidths;
     dispose(): void;
+    /**
+     * Returns the first parent element that has a scrollbar.
+     */
     private static getParentScrollElement;
 }

package/dist/ReactComponents/Grid/StickyTableHeader.js

@@ -27,6 +27,9 @@ var StickyTableHeader = /** @class */ (function () {
         table.addEventListener("mouseup", this.onPossibleContentChange);
     }
     StickyTableHeader.prototype.handleScroll = function () {
+        // If the grid is in an element with a scrollbar, then the header should stick to the top of that element,
+        //  otherwise if there is a fixed (non scrolling) element at the top of the page, then the headers must appear below that.
+        //  otherwise the headers will stick to the top of the screen.
         var fixedElement = null;
         if (!this.scrollParent && this.fixedElement && getComputedStyle(this.fixedElement).position === "fixed") {
             fixedElement = this.fixedElement;
@@ -36,6 +39,9 @@ var StickyTableHeader = /** @class */ (function () {
         var tbodyBounds = this.table.tBodies[this.table.tBodies.length - 1].getBoundingClientRect();
         if (tableBounds.top < topBoundary && tbodyBounds.bottom - this.headerHeight > topBoundary) {
             if (!this.headerCopy) {
+                // Clone the header, and re-insert it into the table. The table will then have 2 headers.
+                // The original headers position is set to "fixed" which makes it float.
+                // The column widths of the floating header then need to be synchronised with the header that is still inside the table layout.
                 this.headerHeight = this.header.getBoundingClientRect().height;
                 this.headerCopy = this.header.cloneNode(true);
                 this.table.insertBefore(this.headerCopy, this.header);
@@ -82,6 +88,9 @@ var StickyTableHeader = /** @class */ (function () {
         this.table.removeEventListener("mouseup", this.onPossibleContentChange);
         this.removeCopy();
     };
+    /**
+     * Returns the first parent element that has a scrollbar.
+     */
     StickyTableHeader.getParentScrollElement = function (element) {
         var current = element;
         while (current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.63",
+  "version": "0.10.64",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "@types/react-select": "3.1.0",
-    "@singularsystems/neo-core": "^0.10.74",
+    "@singularsystems/neo-core": "^0.10.75",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",

package/styles/Card.scss

@@ -14,11 +14,18 @@
             margin: -10px 0;
 
             .card-expand-indicator {
-                cursor: pointer;
                 margin-left: 0.5rem;
                 padding-top: 0.5rem;
                 padding-bottom: 0.5rem;
             }
         }
     }
+
+    &.card-collapsible {
+        .card-header {
+            &:hover {       
+                cursor: pointer;
+            }
+        }
+    }
 }