@singularsystems/neo-react 1.0.0-alpha.3 → 1.0.0-beta.1

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

@@ -1,81 +1,81 @@
-import * as React from 'react';
-import { GridContext, GridSection } from './Grid';
-import { Model } from '@singularsystems/neo-core';
-import { StateObserver } from '../StateObserver';
-import ComponentBase from '../ComponentBase';
-interface IRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
-    showInHeader?: boolean;
-    /**
-     * Note: This only applies to clicks on rows in the body of the grid. (Not rows in the header or footer).
-     */
-    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
-    /**
-     * Handler for click events on header or footer rows. The section is passed as the first argument.
-     */
-    onHeaderClick?: (section: GridSection, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
-}
-interface IState {
-    isExpanded: boolean;
-}
-export default class Row<TData> extends ComponentBase<IRowProps> {
-    static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
-    context: React.ContextType<typeof GridContext>;
-    constructor(props: IRowProps);
-    static defaultProps: {
-        showInHeader: boolean;
-    };
-    private setGridContext;
-    section: GridSection;
-    stateObserver: StateObserver<IState>;
-    expandProperty?: Model.IPropertyInstance;
-    firstRowInGroup: boolean;
-    onFirstRender(): void;
-    componentWillUnmount(): void;
-    onExpandClick(): void;
-    render(): false | JSX.Element;
-}
-interface INeoChildRowProps extends React.HTMLProps<HTMLTableRowElement> {
-    /**
-     * Overrides the value of the isExpanded property, or allows you to control the expansion of the child row manually.
-     */
-    isExpanded?: boolean;
-    /**
-     * By default, the expand column will cause the child row to be indented.
-     * Setting this to true will make the child row take the full width of the table.
-     */
-    isFullWidth?: boolean;
-    /**
-     * Props to apply to the inner child cell.
-     */
-    childCellProps?: React.HTMLProps<HTMLTableCellElement>;
-}
-export declare class ChildRow extends ComponentBase<INeoChildRowProps> {
-    static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
-    context: React.ContextType<typeof GridContext>;
-    constructor(props: INeoChildRowProps);
-    wasExpanded: boolean;
-    lastExpandValue: boolean | null;
-    expandProperty?: Model.IPropertyInstance;
-    inBody?: boolean;
-    containerDiv: React.RefObject<HTMLDivElement>;
-    private get isExpanded();
-    protected onFirstRender(): void;
-    protected afterRender(isInitial: boolean): void;
-    private afterTransition;
-    private setHeight;
-    render(): false | JSX.Element | undefined;
-}
-interface INeoRowGroupProps {
-    /**
-     * If set, will add an expand button to the grid, and will cause ChildRows to be expanded when the property value is true.
-     * To hide the expand button, return null.
-     */
-    expandProperty?: Model.IPropertyInstance<boolean | null>;
-    children: React.ReactNode;
-}
-export declare class RowGroup extends React.Component<INeoRowGroupProps> {
-    static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
-    context: React.ContextType<typeof GridContext>;
-    render(): React.ReactNode;
-}
-export {};
+import * as React from 'react';
+import { GridContext, GridSection } from './Grid';
+import { Model } from '@singularsystems/neo-core';
+import { StateObserver } from '../StateObserver';
+import ComponentBase from '../ComponentBase';
+interface IRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
+    showInHeader?: boolean;
+    /**
+     * Note: This only applies to clicks on rows in the body of the grid. (Not rows in the header or footer).
+     */
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+    /**
+     * Handler for click events on header or footer rows. The section is passed as the first argument.
+     */
+    onHeaderClick?: (section: GridSection, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+}
+interface IState {
+    isExpanded: boolean;
+}
+export default class Row<TData> extends ComponentBase<IRowProps> {
+    static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
+    context: React.ContextType<typeof GridContext>;
+    constructor(props: IRowProps);
+    static defaultProps: {
+        showInHeader: boolean;
+    };
+    private setGridContext;
+    section: GridSection;
+    stateObserver: StateObserver<IState>;
+    expandProperty?: Model.IPropertyInstance;
+    firstRowInGroup: boolean;
+    onFirstRender(): void;
+    componentWillUnmount(): void;
+    onExpandClick(): void;
+    render(): false | JSX.Element;
+}
+interface INeoChildRowProps extends React.HTMLProps<HTMLTableRowElement> {
+    /**
+     * Overrides the value of the isExpanded property, or allows you to control the expansion of the child row manually.
+     */
+    isExpanded?: boolean;
+    /**
+     * By default, the expand column will cause the child row to be indented.
+     * Setting this to true will make the child row take the full width of the table.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Props to apply to the inner child cell.
+     */
+    childCellProps?: React.HTMLProps<HTMLTableCellElement>;
+}
+export declare class ChildRow extends ComponentBase<INeoChildRowProps> {
+    static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
+    context: React.ContextType<typeof GridContext>;
+    constructor(props: INeoChildRowProps);
+    wasExpanded: boolean;
+    lastExpandValue: boolean | null;
+    expandProperty?: Model.IPropertyInstance;
+    inBody?: boolean;
+    containerDiv: React.RefObject<HTMLDivElement>;
+    private get isExpanded();
+    protected onFirstRender(): void;
+    protected afterRender(isInitial: boolean): void;
+    private afterTransition;
+    private setHeight;
+    render(): false | JSX.Element | undefined;
+}
+interface INeoRowGroupProps {
+    /**
+     * If set, will add an expand button to the grid, and will cause ChildRows to be expanded when the property value is true.
+     * To hide the expand button, return null.
+     */
+    expandProperty?: Model.IPropertyInstance<boolean | null>;
+    children: React.ReactNode;
+}
+export declare class RowGroup extends React.Component<INeoRowGroupProps> {
+    static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
+    context: React.ContextType<typeof GridContext>;
+    render(): React.ReactNode;
+}
+export {};

package/dist/ReactComponents/Grid/Row.js

@@ -1,202 +1,200 @@
-import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { GridContext } from './Grid';
-import { Misc, Components, Utils } from '@singularsystems/neo-core';
-import Column from './Column';
-import NeoButton from '../Button';
-import { StateObserver } from '../StateObserver';
-import ComponentBase from '../ComponentBase';
-var Row = /** @class */ (function (_super) {
-    __extends(Row, _super);
-    function Row(props) {
-        var _this = _super.call(this, props) || this;
-        _this.onExpandClick = _this.onExpandClick.bind(_this);
-        return _this;
-    }
-    Row.prototype.setGridContext = function () {
-        var _this = this;
-        this.context.inFirstRowInGroup = false;
-        if (!this.context.doneStaticSetup) {
-            this.context.doneStaticSetup = true;
-            React.Children.forEach(this.props.children, function (child) {
-                if (child) {
-                    var childProps = child.props;
-                    _this.context.columnCount += (childProps ? childProps.colSpan || 1 : 1);
-                    if (childProps && (childProps.sum || childProps.footerContent)) {
-                        _this.context.hasSummaries = true;
-                    }
-                }
-            });
-        }
-    };
-    Row.prototype.onFirstRender = function () {
-        var _this = this;
-        this.section = this.context.section;
-        this.expandProperty = this.context.inFirstRowInGroup ? this.context.expandProperty : undefined;
-        this.firstRowInGroup = this.context.inFirstRowInGroup;
-        if (this.expandProperty && this.section === "body") {
-            this.stateObserver = new StateObserver(this, function () {
-                return { isExpanded: _this.expandProperty.value };
-            });
-        }
-    };
-    Row.prototype.componentWillUnmount = function () {
-        if (this.stateObserver)
-            this.stateObserver.dispose();
-    };
-    Row.prototype.onExpandClick = function () {
-        if (this.expandProperty) {
-            this.expandProperty.value = !this.expandProperty.value;
-        }
-    };
-    Row.prototype.render = function () {
-        var _this = this;
-        _super.prototype.onRender.call(this);
-        var _a = this.props, showInHeader = _a.showInHeader, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["showInHeader", "onHeaderClick"]);
-        var inBody = this.section === "body";
-        if (this.stateObserver)
-            this.stateObserver.observe();
-        if (!this.context.dataView) {
-            throw "NeoGrid.Row cannot be used outside of a NeoGrid.";
-        }
-        var expandButtonOptions = __assign({}, Misc.Settings.grid.expandButton);
-        if (inBody && this.expandProperty) {
-            expandButtonOptions.onClick = this.onExpandClick;
-            expandButtonOptions.icon = expandButtonOptions.icon.replace("plus", "$").replace("minus", "$").replace("$", (this.expandProperty.value ? "minus" : "plus"));
-        }
-        if (!inBody) {
-            if (onHeaderClick) {
-                domProps.onClick = function (e) { return onHeaderClick(_this.section, e); };
-            }
-            else {
-                domProps.onClick = undefined;
-            }
-        }
-        var output = ((this.props.showInHeader || inBody) &&
-            React.createElement("tr", __assign({}, domProps),
-                this.expandProperty && this.context.expandAll === undefined &&
-                    React.createElement(Column, { className: "neo-grid-expand-column" }, this.firstRowInGroup && inBody && this.expandProperty.value !== null &&
-                        React.createElement(NeoButton, __assign({}, expandButtonOptions))),
-                this.props.children));
-        this.setGridContext();
-        return output;
-    };
-    Row.contextType = GridContext;
-    Row.defaultProps = {
-        showInHeader: true
-    };
-    return Row;
-}(ComponentBase));
-export default Row;
-var ChildRow = /** @class */ (function (_super) {
-    __extends(ChildRow, _super);
-    function ChildRow(props) {
-        var _this = _super.call(this, props) || this;
-        _this.wasExpanded = false;
-        _this.lastExpandValue = null;
-        _this.containerDiv = React.createRef();
-        _this.afterTransition = _this.afterTransition.bind(_this);
-        _this.afterRender = _this.afterRender.bind(_this);
-        return _this;
-    }
-    Object.defineProperty(ChildRow.prototype, "isExpanded", {
-        get: function () {
-            if (this.props.isExpanded !== undefined) {
-                return this.props.isExpanded;
-            }
-            return !this.expandProperty || this.expandProperty.value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ChildRow.prototype.onFirstRender = function () {
-        this.expandProperty = this.context.expandProperty;
-        this.inBody = this.context.inBody;
-    };
-    ChildRow.prototype.afterRender = function (isInitial) {
-        if (this.inBody) {
-            var expand = this.isExpanded;
-            if (!isInitial && expand !== this.lastExpandValue && this.context.expandAll === undefined) {
-                this.setHeight(expand);
-            }
-            this.lastExpandValue = expand;
-        }
-    };
-    ChildRow.prototype.afterTransition = function () {
-        if (this.containerDiv.current) {
-            this.containerDiv.current.style.maxHeight = 'none';
-            this.containerDiv.current.style.overflow = "visible";
-            if (this.wasExpanded && !this.isExpanded) {
-                // When collapsing, the child element must be removed after animation.
-                this.wasExpanded = false;
-                this.forceUpdate();
-            }
-        }
-    };
-    ChildRow.prototype.setHeight = function (expand) {
-        var childDiv = this.containerDiv.current;
-        if (childDiv) {
-            var transitionDuration = window.getComputedStyle(childDiv).transitionDuration;
-            if (transitionDuration) {
-                // If expand / collapse has a transition, reset the max height after the transition ends.
-                // Subtract 50ms on collapse to prevent wierd chrome padding animation issue.
-                var delay = parseFloat(transitionDuration) * 1000;
-                setTimeout(this.afterTransition, delay - (expand ? 0 : 50));
-            }
-            else {
-                this.afterTransition();
-            }
-            childDiv.style.maxHeight = (!expand ? childDiv.scrollHeight : 0) + 'px';
-            childDiv.style.overflow = "hidden";
-            Components.AnimationHelper.triggerReflow(childDiv);
-            childDiv.style.maxHeight = (expand ? childDiv.scrollHeight : 0) + 'px';
-        }
-    };
-    ChildRow.prototype.render = function () {
-        var _a;
-        this.onRender();
-        var _b = this.props, isExpanded = _b.isExpanded, isFullWidth = _b.isFullWidth, childCellProps = _b.childCellProps, domProps = __rest(_b, ["isExpanded", "isFullWidth", "childCellProps"]);
-        isExpanded = this.inBody && ((_a = this.context.expandAll) !== null && _a !== void 0 ? _a : this.isExpanded);
-        if (this.context.expandAll !== undefined) {
-            // Prevent animation on whole table expand change.
-            this.wasExpanded = false;
-        }
-        else if (isExpanded) {
-            this.wasExpanded = true;
-        }
-        domProps.className = Utils.joinWithSpaces(domProps.className, "neo-child-row");
-        if (childCellProps === undefined) {
-            childCellProps = {};
-        }
-        childCellProps.className = Utils.joinWithSpaces(childCellProps.className, "neo-child-row-cell");
-        var showExpandButtonColumn = this.context.expandProperty && this.context.expandAll === undefined && !this.props.isFullWidth;
-        var colSpan = this.context.columnCount + (showExpandButtonColumn ? 0 : 1);
-        return (this.inBody && (isExpanded || this.wasExpanded) &&
-            React.createElement("tr", __assign({}, domProps),
-                showExpandButtonColumn && React.createElement("td", null),
-                React.createElement("td", __assign({}, childCellProps, { colSpan: colSpan }),
-                    React.createElement("div", { ref: this.containerDiv, className: "neo-child-row-container" }, this.props.children))));
-    };
-    ChildRow.contextType = GridContext;
-    ChildRow = __decorate([
-        observer,
-        __metadata("design:paramtypes", [Object])
-    ], ChildRow);
-    return ChildRow;
-}(ComponentBase));
-export { ChildRow };
-var RowGroup = /** @class */ (function (_super) {
-    __extends(RowGroup, _super);
-    function RowGroup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RowGroup.prototype.render = function () {
-        this.context.expandProperty = this.props.expandProperty;
-        this.context.inFirstRowInGroup = true;
-        return this.props.children;
-    };
-    RowGroup.contextType = GridContext;
-    return RowGroup;
-}(React.Component));
-export { RowGroup };
+import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { GridContext } from './Grid';
+import { Misc, Components, Utils } from '@singularsystems/neo-core';
+import Column from './Column';
+import NeoButton from '../Button';
+import { StateObserver } from '../StateObserver';
+import ComponentBase from '../ComponentBase';
+var Row = /** @class */ (function (_super) {
+    __extends(Row, _super);
+    function Row(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onExpandClick = _this.onExpandClick.bind(_this);
+        return _this;
+    }
+    Row.prototype.setGridContext = function () {
+        var _this = this;
+        this.context.inFirstRowInGroup = false;
+        if (!this.context.doneStaticSetup) {
+            this.context.doneStaticSetup = true;
+            React.Children.forEach(this.props.children, function (child) {
+                if (child) {
+                    var childProps = child.props;
+                    _this.context.columnCount += (childProps ? childProps.colSpan || 1 : 1);
+                    if (childProps && (childProps.sum || childProps.footerContent)) {
+                        _this.context.hasSummaries = true;
+                    }
+                }
+            });
+        }
+    };
+    Row.prototype.onFirstRender = function () {
+        var _this = this;
+        this.section = this.context.section;
+        this.expandProperty = this.context.inFirstRowInGroup ? this.context.expandProperty : undefined;
+        this.firstRowInGroup = this.context.inFirstRowInGroup;
+        if (this.expandProperty && this.section === "body") {
+            this.stateObserver = new StateObserver(this, function () {
+                return { isExpanded: _this.expandProperty.value };
+            });
+        }
+    };
+    Row.prototype.componentWillUnmount = function () {
+        if (this.stateObserver)
+            this.stateObserver.dispose();
+    };
+    Row.prototype.onExpandClick = function () {
+        if (this.expandProperty) {
+            this.expandProperty.value = !this.expandProperty.value;
+        }
+    };
+    Row.prototype.render = function () {
+        var _this = this;
+        _super.prototype.onRender.call(this);
+        var _a = this.props, showInHeader = _a.showInHeader, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["showInHeader", "onHeaderClick"]);
+        var inBody = this.section === "body";
+        if (this.stateObserver)
+            this.stateObserver.observe();
+        if (!this.context.dataView) {
+            throw "NeoGrid.Row cannot be used outside of a NeoGrid.";
+        }
+        var expandButtonOptions = __assign({}, Misc.Settings.grid.expandButton);
+        if (inBody && this.expandProperty) {
+            expandButtonOptions.onClick = this.onExpandClick;
+            expandButtonOptions.icon = this.expandProperty.value ? Misc.Settings.icons.expanded : Misc.Settings.icons.collapsed;
+        }
+        if (!inBody) {
+            if (onHeaderClick) {
+                domProps.onClick = function (e) { return onHeaderClick(_this.section, e); };
+            }
+            else {
+                domProps.onClick = undefined;
+            }
+        }
+        var output = ((this.props.showInHeader || inBody) &&
+            React.createElement("tr", __assign({}, domProps),
+                this.expandProperty && this.context.expandAll === undefined &&
+                    React.createElement(Column, { className: "neo-grid-expand-column" }, this.firstRowInGroup && inBody && this.expandProperty.value !== null &&
+                        React.createElement(NeoButton, __assign({}, expandButtonOptions))),
+                this.props.children));
+        this.setGridContext();
+        return output;
+    };
+    Row.contextType = GridContext;
+    Row.defaultProps = {
+        showInHeader: true
+    };
+    return Row;
+}(ComponentBase));
+export default Row;
+export var ChildRow = /** @class */ (function (_super) {
+    __extends(ChildRow, _super);
+    function ChildRow(props) {
+        var _this = _super.call(this, props) || this;
+        _this.wasExpanded = false;
+        _this.lastExpandValue = null;
+        _this.containerDiv = React.createRef();
+        _this.afterTransition = _this.afterTransition.bind(_this);
+        _this.afterRender = _this.afterRender.bind(_this);
+        return _this;
+    }
+    Object.defineProperty(ChildRow.prototype, "isExpanded", {
+        get: function () {
+            if (this.props.isExpanded !== undefined) {
+                return this.props.isExpanded;
+            }
+            return !this.expandProperty || this.expandProperty.value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ChildRow.prototype.onFirstRender = function () {
+        this.expandProperty = this.context.expandProperty;
+        this.inBody = this.context.inBody;
+    };
+    ChildRow.prototype.afterRender = function (isInitial) {
+        if (this.inBody) {
+            var expand = this.isExpanded;
+            if (!isInitial && expand !== this.lastExpandValue && this.context.expandAll === undefined) {
+                this.setHeight(expand);
+            }
+            this.lastExpandValue = expand;
+        }
+    };
+    ChildRow.prototype.afterTransition = function () {
+        if (this.containerDiv.current) {
+            this.containerDiv.current.style.maxHeight = 'none';
+            this.containerDiv.current.style.overflow = "visible";
+            if (this.wasExpanded && !this.isExpanded) {
+                // When collapsing, the child element must be removed after animation.
+                this.wasExpanded = false;
+                this.forceUpdate();
+            }
+        }
+    };
+    ChildRow.prototype.setHeight = function (expand) {
+        var childDiv = this.containerDiv.current;
+        if (childDiv) {
+            var transitionDuration = window.getComputedStyle(childDiv).transitionDuration;
+            if (transitionDuration) {
+                // If expand / collapse has a transition, reset the max height after the transition ends.
+                // Subtract 50ms on collapse to prevent wierd chrome padding animation issue.
+                var delay = parseFloat(transitionDuration) * 1000;
+                setTimeout(this.afterTransition, delay - (expand ? 0 : 50));
+            }
+            else {
+                this.afterTransition();
+            }
+            childDiv.style.maxHeight = (!expand ? childDiv.scrollHeight : 0) + 'px';
+            childDiv.style.overflow = "hidden";
+            Components.AnimationHelper.triggerReflow(childDiv);
+            childDiv.style.maxHeight = (expand ? childDiv.scrollHeight : 0) + 'px';
+        }
+    };
+    ChildRow.prototype.render = function () {
+        var _a;
+        this.onRender();
+        var _b = this.props, isExpanded = _b.isExpanded, isFullWidth = _b.isFullWidth, childCellProps = _b.childCellProps, domProps = __rest(_b, ["isExpanded", "isFullWidth", "childCellProps"]);
+        isExpanded = this.inBody && ((_a = this.context.expandAll) !== null && _a !== void 0 ? _a : this.isExpanded);
+        if (this.context.expandAll !== undefined) {
+            // Prevent animation on whole table expand change.
+            this.wasExpanded = false;
+        }
+        else if (isExpanded) {
+            this.wasExpanded = true;
+        }
+        domProps.className = Utils.joinWithSpaces(domProps.className, "neo-child-row");
+        if (childCellProps === undefined) {
+            childCellProps = {};
+        }
+        childCellProps.className = Utils.joinWithSpaces(childCellProps.className, "neo-child-row-cell");
+        var showExpandButtonColumn = this.context.expandProperty && this.context.expandAll === undefined && !this.props.isFullWidth;
+        var colSpan = this.context.columnCount + (showExpandButtonColumn ? 0 : 1);
+        return (this.inBody && (isExpanded || this.wasExpanded) &&
+            React.createElement("tr", __assign({}, domProps),
+                showExpandButtonColumn && React.createElement("td", null),
+                React.createElement("td", __assign({}, childCellProps, { colSpan: colSpan }),
+                    React.createElement("div", { ref: this.containerDiv, className: "neo-child-row-container" }, this.props.children))));
+    };
+    ChildRow.contextType = GridContext;
+    ChildRow = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], ChildRow);
+    return ChildRow;
+}(ComponentBase));
+export var RowGroup = /** @class */ (function (_super) {
+    __extends(RowGroup, _super);
+    function RowGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RowGroup.prototype.render = function () {
+        this.context.expandProperty = this.props.expandProperty;
+        this.context.inFirstRowInGroup = true;
+        return this.props.children;
+    };
+    RowGroup.contextType = GridContext;
+    return RowGroup;
+}(React.Component));

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;
+}