@singularsystems/neo-react 0.10.62 → 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/DropDown/AutoCompleteDropDown.js

@@ -188,7 +188,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         if (nativeProps.isClearable === undefined) {
             nativeProps.isClearable = true;
         }
-        if (splitProps.editor.isDisabled || splitProps.editor.isReadOnly) {
+        if (BindPropsHelper.isReadOnly(splitProps.editor, this.context) || BindPropsHelper.isDisabled(splitProps.editor, this.context)) {
             nativeProps.isDisabled = true;
         }
         nativeProps.className = Utils.joinWithSpaces("react-select-bs", nativeProps.className);

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

@@ -73,6 +73,11 @@ export interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
      * Set `showAddButton = false` if you don't want the default button.
      */
     footerButtons?: () => React.ReactNode;
+    /**
+     * Will cause the header to stick to the top of the screen / scroll element when scrolling.
+     * Note: if your app has a fixed header, you need to specify this in the global neo settings.
+     */
+    stickyHeader?: boolean;
 }
 export default class Grid<T> extends React.Component<IGridProps<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;
@@ -80,7 +85,11 @@ export default class Grid<T> extends React.Component<IGridProps<T>> {
     private gridContext;
     private prevItems?;
     private headerItem;
+    private domRef;
+    private stickyHeaderHelper?;
     constructor(props: IGridProps<T>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
     private setInitialSort;
 }

package/dist/ReactComponents/Grid/Grid.js

@@ -4,6 +4,7 @@ import { Data, Utils, Misc } from '@singularsystems/neo-core';
 import { observer, Observer } from 'mobx-react';
 import NeoButton from '../Button';
 import { DataViewContext } from '../../React/DataView';
+import { StickyTableHeader } from './StickyTableHeader';
 // Grid context
 var GridContextParams = /** @class */ (function () {
     function GridContextParams() {
@@ -27,12 +28,24 @@ var Grid = /** @class */ (function (_super) {
     function Grid(props) {
         var _this = _super.call(this, props) || this;
         _this.gridContext = new GridContextParams();
+        _this.domRef = React.createRef();
         _this.gridContext.section = "header";
         return _this;
     }
+    Grid.prototype.componentDidMount = function () {
+        var _a, _b;
+        if (this.domRef.current && (_a = this.props.stickyHeader, (_a !== null && _a !== void 0 ? _a : Misc.Settings.grid.useStickyHeaders))) {
+            this.stickyHeaderHelper = new StickyTableHeader(this.domRef.current, (_b = Misc.Settings.fixedAppHeaderElement) === null || _b === void 0 ? void 0 : _b.call(undefined));
+        }
+    };
+    Grid.prototype.componentWillUnmount = function () {
+        if (this.stickyHeaderHelper) {
+            this.stickyHeaderHelper.dispose();
+        }
+    };
     Grid.prototype.render = function () {
         var _this = this;
-        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons"]);
+        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -86,7 +99,7 @@ var Grid = /** @class */ (function (_super) {
             }
             this.headerItem = this.gridContext.dataView.getMetaItem();
         }
-        return (React.createElement("table", __assign({}, domProps, { className: className }),
+        return (React.createElement("table", __assign({}, domProps, { className: className, ref: this.domRef }),
             React.createElement(GridContext.Provider, { value: this.gridContext },
                 React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta)),
                 React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item) { return (React.createElement(ItemGroup, { item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),

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

@@ -0,0 +1,27 @@
+/**
+ * Watches for when a table header scrolls out of view.
+ * When it does, adds a cloned header that is fixed at the top of the scrolling element.
+ */
+export declare class StickyTableHeader {
+    private table;
+    private fixedElement?;
+    /**
+     * Creates the instance, and begins listening for scroll events.
+     * @param table The table to add sticky headers to.
+     * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
+     */
+    constructor(table: HTMLTableElement, fixedElement?: HTMLElement | undefined);
+    private scrollParent?;
+    private header;
+    private headerCopy?;
+    private headerHeight;
+    private handleScroll;
+    private removeCopy;
+    private onPossibleContentChange;
+    private setColumnWidths;
+    dispose(): void;
+    /**
+     * Returns the first parent element that has a scrollbar.
+     */
+    private static getParentScrollElement;
+}

package/dist/ReactComponents/Grid/StickyTableHeader.js

@@ -0,0 +1,107 @@
+/**
+ * Watches for when a table header scrolls out of view.
+ * When it does, adds a cloned header that is fixed at the top of the scrolling element.
+ */
+var StickyTableHeader = /** @class */ (function () {
+    /**
+     * Creates the instance, and begins listening for scroll events.
+     * @param table The table to add sticky headers to.
+     * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
+     */
+    function StickyTableHeader(table, fixedElement) {
+        this.table = table;
+        this.fixedElement = fixedElement;
+        this.headerHeight = 0;
+        if (!table.tHead) {
+            throw Error("Table must have a header section.");
+        }
+        this.header = table.tHead;
+        this.scrollParent = StickyTableHeader.getParentScrollElement(table);
+        this.handleScroll = this.handleScroll.bind(this);
+        this.onPossibleContentChange = this.onPossibleContentChange.bind(this);
+        document.addEventListener("scroll", this.handleScroll);
+        if (this.scrollParent) {
+            this.scrollParent.addEventListener("scroll", this.handleScroll);
+        }
+        table.addEventListener("keydown", this.onPossibleContentChange);
+        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;
+        }
+        var topBoundary = this.scrollParent ? this.scrollParent.getBoundingClientRect().top : (fixedElement ? fixedElement.getBoundingClientRect().bottom : 0);
+        var tableBounds = this.table.getBoundingClientRect();
+        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);
+                this.header.classList.add("neo-grid-fixed-header");
+                this.setColumnWidths();
+            }
+            this.header.style.left = tableBounds.left + "px";
+            this.header.style.top = topBoundary + "px";
+        }
+        else {
+            this.setColumnWidths(true);
+            this.removeCopy();
+        }
+    };
+    StickyTableHeader.prototype.removeCopy = function () {
+        if (this.headerCopy) {
+            this.header.classList.remove("neo-grid-fixed-header");
+            this.table.removeChild(this.headerCopy);
+            this.headerCopy = undefined;
+        }
+    };
+    StickyTableHeader.prototype.onPossibleContentChange = function () {
+        var _this = this;
+        setTimeout(function () { return _this.setColumnWidths(); }, 0);
+    };
+    StickyTableHeader.prototype.setColumnWidths = function (isRemoving) {
+        if (isRemoving === void 0) { isRemoving = false; }
+        if (this.headerCopy) {
+            for (var i = 0; i < this.header.rows.length; i++) {
+                var originalRow = this.header.rows[i], copyRow = this.headerCopy.rows[i];
+                for (var j = 0; j < originalRow.cells.length; j++) {
+                    var originalCell = originalRow.cells[j], copyCell = copyRow.cells[j];
+                    originalCell.style.width = isRemoving ? copyCell.style.width : window.getComputedStyle(copyCell).width;
+                }
+            }
+        }
+    };
+    StickyTableHeader.prototype.dispose = function () {
+        document.removeEventListener("scroll", this.handleScroll);
+        if (this.scrollParent) {
+            this.scrollParent.removeEventListener("scroll", this.handleScroll);
+        }
+        this.table.removeEventListener("keydown", this.onPossibleContentChange);
+        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) {
+            if ((current.style.height || current.style.maxHeight) &&
+                (current.style.overflow === "scroll" || current.style.overflow === "auto" || current.style.overflowY === "scroll" || current.style.overflowY === "auto")) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return undefined;
+    };
+    return StickyTableHeader;
+}());
+export { StickyTableHeader };

package/dist/ReactComponents/Modal/Modal.js

@@ -70,6 +70,10 @@ var Modal = /** @class */ (function (_super) {
                             _this.visible = false;
                             _this.forceUpdate();
                         }
+                        if (_this.props.afterClose) {
+                            _this.props.afterClose();
+                        }
+                        ;
                         _this.closeTimer = null;
                     }, Misc.Settings.modalAnimationTimeMs);
                 }

package/dist/ReactComponents/PropTypes.d.ts

@@ -135,22 +135,15 @@ export declare class BindPropsHelper {
      */
     static getBindProperty<T>(allProps: IEditorContainerProps<T, any>): Model.IPropertyInstance;
     static splitCommonEditorProps<T extends ICommonEditorProps>(props: T): {
-        editor: {
-            isReadOnly: boolean | undefined;
-            isDisabled: boolean | undefined;
-            prependText: string | undefined;
-            prepend: JSX.Element | (() => JSX.Element) | null | undefined;
-            appendText: string | undefined;
-            append: JSX.Element | (() => JSX.Element) | null | undefined;
-            inputElement: React.RefObject<HTMLElement> | undefined;
-            requiresGroup: boolean;
-        };
+        editor: ICommonEditorProps;
         rest: Pick<T, Exclude<keyof T, "disabled" | "readOnly" | "isReadOnly" | "isDisabled" | "prependText" | "appendText" | "prepend" | "append" | "inputElement">>;
     };
     static normaliseContainerProps<T, TContainerDom = React.HTMLProps<T>>(component: IComponentBase, props: IEditorContainerProps<T, any> & TContainerDom, inGroup: boolean, isBootstrap?: boolean): IEditorContainerNormalisedProps<TContainerDom, any>;
     static normaliseEditorProps<T, TDom = React.HTMLProps<T>>(component: IComponentBase, props: (IEditorAndSelectorProps<T, any> & TDom) | IEditorNormalisedProps<TDom, any>): IEditorNormalisedProps<TDom, any>;
     static getPlaceholderText(placeholder: string | boolean | undefined, property: PropertyInfo): string | undefined;
     static autoSetDomProperties<TDom extends React.HTMLProps<HTMLElement>>(props: IEditorNormalisedProps<TDom, any>, formContext: FormContextParams, componentBlurFn?: (e: React.FocusEvent<HTMLElement>) => void, componentFocusFn?: (e: React.FocusEvent<HTMLElement>) => void): TDom;
+    static isReadOnly(editorProps: ICommonEditorProps, formContext: FormContextParams): boolean;
+    static isDisabled(editorProps: ICommonEditorProps, formContext: FormContextParams): boolean;
     /**
      * Intercept the user specified blur event, and run the validation onBlur logic first.
      * @param props Props specified on component.

package/dist/ReactComponents/PropTypes.js

@@ -204,12 +204,12 @@ var BindPropsHelper = /** @class */ (function () {
         if (this.config.isTestOrDevelopment) {
             domProps[BindPropsHelper.DataFieldName] = props.bind.propertyInfo.propertyName;
         }
-        if (props.editor.isReadOnly || (formContext.allReadOnly && props.editor.isReadOnly === undefined)) {
+        if (this.isReadOnly(props.editor, formContext)) {
             domProps.readOnly = true;
             if (!domProps.tabIndex)
                 domProps.tabIndex = -1;
         }
-        if (props.editor.isDisabled || (formContext.allDisabled && props.editor.isDisabled === undefined)) {
+        if (this.isDisabled(props.editor, formContext)) {
             domProps.disabled = true;
         }
         if (props.editor.placeholder) {
@@ -226,6 +226,16 @@ var BindPropsHelper = /** @class */ (function () {
         domProps.onBlur = BindPropsHelper.blurIntercept(props.editor, domProps.onBlur, componentBlurFn);
         return domProps;
     };
+    BindPropsHelper.isReadOnly = function (editorProps, formContext) {
+        var _a;
+        var propsReadOnly = (_a = editorProps.isReadOnly, (_a !== null && _a !== void 0 ? _a : editorProps.readOnly));
+        return propsReadOnly || (formContext.allReadOnly && propsReadOnly === undefined);
+    };
+    BindPropsHelper.isDisabled = function (editorProps, formContext) {
+        var _a;
+        var propsDisabled = (_a = editorProps.isDisabled, (_a !== null && _a !== void 0 ? _a : editorProps.disabled));
+        return propsDisabled || (formContext.allDisabled && propsDisabled === undefined);
+    };
     /**
      * Intercept the user specified blur event, and run the validation onBlur logic first.
      * @param props Props specified on component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.62",
+  "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.63",
+    "@singularsystems/neo-core": "^0.10.75",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",
@@ -47,7 +47,7 @@
     "react-router-dom": "5.1.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=0.10.72",
+    "@singularsystems/neo-core": ">=0.10.74",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
     "react": ">=16.13.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;
+            }
+        }
+    }
 }

package/styles/Grid.scss

@@ -1,4 +1,9 @@
 table.neo-grid {
+    .neo-grid-fixed-header {
+        position: fixed;
+        z-index: 3;
+    }
+
     th {
         position: relative;