@singularsystems/neo-react 1.0.0-alpha.2 → 1.0.0-beta.0

package/dist/ReactComponents/Grid/Column.js

@@ -1,205 +1,205 @@
-import { __assign, __extends, __rest } from "tslib";
-import * as React from 'react';
-import { GridContext } from './Grid';
-import { BindPropsHelper, ControlType, CheckboxType } from '../PropTypes';
-import { StateObserver } from '../StateObserver';
-import memoize from 'memoize-one';
-import { FormatState } from '../NumberInput';
-import { DateUtils, Utils, Misc } from '@singularsystems/neo-core';
-import ComponentBase from '../ComponentBase';
-import { Observer } from 'mobx-react';
-import { EditorParentType, FormContext } from '../FormContext';
-import { ColumnHelper } from './ColumnHelper';
-var editableColumnClassName = "editable-column";
-var Column = /** @class */ (function (_super) {
-    __extends(Column, _super);
-    function Column() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.numFormatState = memoize(FormatState.create);
-        _this.suppressSort = false;
-        return _this;
-    }
-    Column.getHeaderText = function (props) {
-        if (props.container.label) {
-            return props.container.label;
-        }
-        else if (props.editor.bind) {
-            return props.editor.bind.propertyInfo.readableName;
-        }
-        else {
-            return "";
-        }
-    };
-    Column.prototype.onFirstRender = function () {
-        this.isHeader = this.context.section === "header";
-        this.isFooter = this.context.section === "footer";
-    };
-    Column.prototype.getSortProperty = function () {
-        if (this.props.sort !== false && this.context.dataView.allowSort) {
-            if (this.props.sort) {
-                return this.props.sort;
-            }
-            else {
-                var sortProperty = BindPropsHelper.getBindProperty(this.props);
-                if (sortProperty && !(sortProperty.propertyInfo.isReadOnly && this.context.dataView.performsRemoteSorting)) {
-                    return sortProperty;
-                }
-            }
-        }
-        return undefined;
-    };
-    Column.prototype.headerClick = function (e) {
-        if (this.props.onHeaderClick) {
-            this.props.onHeaderClick(e);
-        }
-        if (!e.defaultPrevented && !this.suppressSort) {
-            var sortProperty = this.getSortProperty();
-            if (sortProperty) {
-                if (e.shiftKey && this.context.dataView.sortInfo.length) {
-                    this.context.dataView.addSort(sortProperty.propertyInfo);
-                }
-                else {
-                    this.context.dataView.resetSort(sortProperty.propertyInfo);
-                }
-                if (e.shiftKey) {
-                    // Stop text selection.
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            }
-        }
-    };
-    Column.prototype.refreshStateObserver = function (props) {
-        var _this = this;
-        if (this.isHeader || props.isReadOnly) {
-            if (!this.stateObserver) {
-                this.stateObserver = new StateObserver(this, function () {
-                    return {
-                        sortInfo: _this.isHeader ? _this.context.dataView.sortInfo : null,
-                        displayValue: !_this.isHeader && !_this.isFooter ? props.bind.value : null
-                    };
-                });
-            }
-            this.stateObserver.observe();
-        }
-    };
-    Column.prototype.componentWillUnmount = function () {
-        if (this.stateObserver)
-            this.stateObserver.dispose();
-    };
-    Column.prototype.render = function () {
-        this.onRender();
-        var allProps = BindPropsHelper.normaliseContainerProps(this, this.props, false);
-        var _a = allProps.containerDom, width = _a.width, hideBelow = _a.hideBelow, hideAbove = _a.hideAbove, headerTooltip = _a.headerTooltip, cellTooltip = _a.cellTooltip, alignment = _a.alignment, sort = _a.sort, sum = _a.sum, footerContent = _a.footerContent, headerClassName = _a.headerClassName, cellClassName = _a.cellClassName, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["width", "hideBelow", "hideAbove", "headerTooltip", "cellTooltip", "alignment", "sort", "sum", "footerContent", "headerClassName", "cellClassName", "onHeaderClick"]);
-        if (allProps.bind !== undefined) {
-            if (!this.controlType || this.isHeader) {
-                this.controlType = BindPropsHelper.getControlType(allProps);
-                var items = this.context.dataView.rawItems;
-                this.checkboxType = BindPropsHelper.getCheckBoxType(allProps, this.isHeader && (items === null || items === void 0 ? void 0 : items.length) && items[0]);
-                if (this.isHeader) {
-                    // Prevent sorting if the bind property is not on the root object. E.g. item.child.meta.property
-                    this.suppressSort = items.length === 0 || items[0].meta[allProps.bind.propertyInfo.propertyName] === undefined;
-                }
-            }
-            if (!allProps.editor.isReadOnly) {
-                domProps.className = Utils.joinWithSpaces(domProps.className, editableColumnClassName);
-            }
-            if (this.controlType === ControlType.Number) {
-                domProps.className = Utils.joinWithSpaces(domProps.className, "number-col");
-            }
-            else if (this.controlType === ControlType.Date) {
-                domProps.className = Utils.joinWithSpaces(domProps.className, "date-col");
-            }
-            else if (this.checkboxType !== CheckboxType.None) {
-                domProps.className = Utils.joinWithSpaces(domProps.className, "boolean-col");
-            }
-        }
-        domProps.className = ColumnHelper.addCommonClasses(domProps.className, allProps.containerDom);
-        if (width) {
-            if (!domProps) {
-                domProps = { style: {} };
-            }
-            if (!domProps.style) {
-                domProps.style = {};
-            }
-            if (width instanceof Number) {
-                domProps.style.width = width + "px";
-            }
-            else {
-                domProps.style.width = width;
-            }
-        }
-        this.refreshStateObserver(allProps.editor);
-        return this.isHeader ? this.renderHeader(allProps, domProps, headerTooltip, headerClassName) :
-            this.isFooter ? this.renderFooter(allProps, domProps) :
-                this.renderBody(allProps, domProps, cellTooltip, cellClassName);
-    };
-    Column.prototype.renderHeader = function (props, domProps, tooltip, headerClassName) {
-        var _this = this;
-        var sortIcon = null;
-        var sortProperty = this.getSortProperty();
-        domProps.className = Utils.joinWithSpaces(domProps.className, headerClassName);
-        if (sortProperty && !this.suppressSort) {
-            var sortInfo = this.context.dataView.sortInfo.find(function (c) { return c.column === sortProperty.propertyInfo; });
-            if (sortInfo) {
-                sortIcon = sortInfo.sortAscending ? "sort-alpha-down" : "sort-alpha-up";
-                domProps.className = Utils.joinWithSpaces(domProps.className, "column-is-sorted");
-            }
-            domProps.className = Utils.joinWithSpaces(domProps.className, "column-sortable");
-        }
-        return (React.createElement("th", __assign({ "data-tip": tooltip }, domProps, { onClick: function (e) { return _this.headerClick(e); } }),
-            Column.getHeaderText(props),
-            sortIcon &&
-                React.createElement("i", { className: "column-sort-icon fa fa-" + sortIcon })));
-    };
-    Column.prototype.renderBody = function (props, domProps, cellTooltip, cellClassName) {
-        var _this = this;
-        var editorProps = props.editor;
-        var containerProps = props.container;
-        var displayValue = "";
-        var editor = undefined;
-        if (!containerProps.suppressDefaultContent) {
-            if (editorProps.isReadOnly && !editorProps.requiresGroup) {
-                var rawValue = editorProps.bind.value;
-                if (this.controlType == ControlType.Number) {
-                    displayValue = this.numFormatState(editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
-                }
-                else if (this.controlType == ControlType.Date) {
-                    displayValue = DateUtils.format(rawValue, props.dateProps ? props.dateProps.formatString : undefined);
-                }
-                else if (this.checkboxType !== CheckboxType.None) {
-                    editor = React.createElement("i", { className: rawValue ? Misc.Settings.grid.boolTrueClass : Misc.Settings.grid.boolFalseClass });
-                }
-                else if (this.controlType === ControlType.DropDown) {
-                    editor = BindPropsHelper.getFormControl(props);
-                }
-                else {
-                    displayValue = (rawValue !== undefined && rawValue !== null) ? rawValue.toString() : "";
-                }
-            }
-            else if (props.bind) {
-                editor = BindPropsHelper.getFormControl(props);
-            }
-        }
-        domProps.className = Utils.joinWithSpaces(domProps.className, cellClassName);
-        return (React.createElement("td", __assign({ "data-tip": cellTooltip }, domProps),
-            !containerProps.suppressDefaultContent && (editor !== undefined ?
-                editor :
-                editorProps.bind ? displayValue : undefined),
-            !containerProps.bindContext && (this.props.children instanceof Function ? this.props.children() : this.props.children),
-            containerProps.bindContext &&
-                React.createElement(FormContext.Consumer, null, function (value) { return (React.createElement(FormContext.Provider, { value: __assign(__assign({}, value), { parentType: EditorParentType.Column, bindProperty: containerProps.bindContext }) }, _this.props.children instanceof Function ? _this.props.children() : _this.props.children)); })));
-    };
-    Column.prototype.renderFooter = function (props, domProps) {
-        var _this = this;
-        var colProps = props.containerDom;
-        var hasSummary = (colProps.sum && !!props.bind) || colProps.footerContent;
-        return (React.createElement("th", __assign({}, domProps), hasSummary &&
-            React.createElement(Observer, null, function () { return colProps.footerContent ? colProps.footerContent(_this.context.dataView.filteredItems) :
-                _this.numFormatState(props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
-    };
-    Column.isColumnComponent = true;
-    Column.contextType = GridContext;
-    return Column;
-}(ComponentBase));
-export default Column;
+import { __assign, __extends, __rest } from "tslib";
+import * as React from 'react';
+import { GridContext } from './Grid';
+import { BindPropsHelper, ControlType, CheckboxType } from '../PropTypes';
+import { StateObserver } from '../StateObserver';
+import memoize from 'memoize-one';
+import { FormatState } from '../NumberInput';
+import { DateUtils, Utils, Misc } from '@singularsystems/neo-core';
+import ComponentBase from '../ComponentBase';
+import { Observer } from 'mobx-react';
+import { EditorParentType, FormContext } from '../FormContext';
+import { ColumnHelper } from './ColumnHelper';
+var editableColumnClassName = "editable-column";
+var Column = /** @class */ (function (_super) {
+    __extends(Column, _super);
+    function Column() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.numFormatState = memoize(FormatState.create);
+        _this.suppressSort = false;
+        return _this;
+    }
+    Column.getHeaderText = function (props) {
+        if (props.container.label) {
+            return props.container.label;
+        }
+        else if (props.editor.bind) {
+            return props.editor.bind.propertyInfo.readableName;
+        }
+        else {
+            return "";
+        }
+    };
+    Column.prototype.onFirstRender = function () {
+        this.isHeader = this.context.section === "header";
+        this.isFooter = this.context.section === "footer";
+    };
+    Column.prototype.getSortProperty = function () {
+        if (this.props.sort !== false && this.context.dataView.allowSort) {
+            if (this.props.sort) {
+                return this.props.sort;
+            }
+            else {
+                var sortProperty = BindPropsHelper.getBindProperty(this.props);
+                if (sortProperty && !(sortProperty.propertyInfo.isReadOnly && this.context.dataView.performsRemoteSorting)) {
+                    return sortProperty;
+                }
+            }
+        }
+        return undefined;
+    };
+    Column.prototype.headerClick = function (e) {
+        if (this.props.onHeaderClick) {
+            this.props.onHeaderClick(e);
+        }
+        if (!e.defaultPrevented && !this.suppressSort) {
+            var sortProperty = this.getSortProperty();
+            if (sortProperty) {
+                if (e.shiftKey && this.context.dataView.sortInfo.length) {
+                    this.context.dataView.addSort(sortProperty.propertyInfo);
+                }
+                else {
+                    this.context.dataView.resetSort(sortProperty.propertyInfo);
+                }
+                if (e.shiftKey) {
+                    // Stop text selection.
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }
+        }
+    };
+    Column.prototype.refreshStateObserver = function (props) {
+        var _this = this;
+        if (this.isHeader || props.isReadOnly) {
+            if (!this.stateObserver) {
+                this.stateObserver = new StateObserver(this, function () {
+                    return {
+                        sortInfo: _this.isHeader ? _this.context.dataView.sortInfo : null,
+                        displayValue: !_this.isHeader && !_this.isFooter ? props.bind.value : null
+                    };
+                });
+            }
+            this.stateObserver.observe();
+        }
+    };
+    Column.prototype.componentWillUnmount = function () {
+        if (this.stateObserver)
+            this.stateObserver.dispose();
+    };
+    Column.prototype.render = function () {
+        this.onRender();
+        var allProps = BindPropsHelper.normaliseContainerProps(this, this.props, false);
+        var _a = allProps.containerDom, width = _a.width, hideBelow = _a.hideBelow, hideAbove = _a.hideAbove, headerTooltip = _a.headerTooltip, cellTooltip = _a.cellTooltip, alignment = _a.alignment, sort = _a.sort, sum = _a.sum, footerContent = _a.footerContent, headerClassName = _a.headerClassName, cellClassName = _a.cellClassName, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["width", "hideBelow", "hideAbove", "headerTooltip", "cellTooltip", "alignment", "sort", "sum", "footerContent", "headerClassName", "cellClassName", "onHeaderClick"]);
+        if (allProps.bind !== undefined) {
+            if (!this.controlType || this.isHeader) {
+                this.controlType = BindPropsHelper.getControlType(allProps);
+                var items = this.context.dataView.rawItems;
+                this.checkboxType = BindPropsHelper.getCheckBoxType(allProps, this.isHeader && (items === null || items === void 0 ? void 0 : items.length) && items[0]);
+                if (this.isHeader) {
+                    // Prevent sorting if the bind property is not on the root object. E.g. item.child.meta.property
+                    this.suppressSort = items.length === 0 || items[0].meta[allProps.bind.propertyInfo.propertyName] === undefined;
+                }
+            }
+            if (!allProps.editor.isReadOnly) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, editableColumnClassName);
+            }
+            if (this.controlType === ControlType.Number) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, "number-col");
+            }
+            else if (this.controlType === ControlType.Date) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, "date-col");
+            }
+            else if (this.checkboxType !== CheckboxType.None) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, "boolean-col");
+            }
+        }
+        domProps.className = ColumnHelper.addCommonClasses(domProps.className, allProps.containerDom);
+        if (width) {
+            if (!domProps) {
+                domProps = { style: {} };
+            }
+            if (!domProps.style) {
+                domProps.style = {};
+            }
+            if (width instanceof Number) {
+                domProps.style.width = width + "px";
+            }
+            else {
+                domProps.style.width = width;
+            }
+        }
+        this.refreshStateObserver(allProps.editor);
+        return this.isHeader ? this.renderHeader(allProps, domProps, headerTooltip, headerClassName) :
+            this.isFooter ? this.renderFooter(allProps, domProps) :
+                this.renderBody(allProps, domProps, cellTooltip, cellClassName);
+    };
+    Column.prototype.renderHeader = function (props, domProps, tooltip, headerClassName) {
+        var _this = this;
+        var sortIcon = null;
+        var sortProperty = this.getSortProperty();
+        domProps.className = Utils.joinWithSpaces(domProps.className, headerClassName);
+        if (sortProperty && !this.suppressSort) {
+            var sortInfo = this.context.dataView.sortInfo.find(function (c) { return c.column === sortProperty.propertyInfo; });
+            if (sortInfo) {
+                sortIcon = sortInfo.sortAscending ? Misc.Settings.icons.sortAsc : Misc.Settings.icons.sortDesc;
+                domProps.className = Utils.joinWithSpaces(domProps.className, "column-is-sorted");
+            }
+            domProps.className = Utils.joinWithSpaces(domProps.className, "column-sortable");
+        }
+        return (React.createElement("th", __assign({ "data-tip": tooltip }, domProps, { onClick: function (e) { return _this.headerClick(e); } }),
+            Column.getHeaderText(props),
+            sortIcon &&
+                React.createElement("i", { className: "column-sort-icon fa fa-" + sortIcon })));
+    };
+    Column.prototype.renderBody = function (props, domProps, cellTooltip, cellClassName) {
+        var _this = this;
+        var editorProps = props.editor;
+        var containerProps = props.container;
+        var displayValue = "";
+        var editor = undefined;
+        if (!containerProps.suppressDefaultContent) {
+            if (editorProps.isReadOnly && !editorProps.requiresGroup) {
+                var rawValue = editorProps.bind.value;
+                if (this.controlType == ControlType.Number) {
+                    displayValue = this.numFormatState(editorProps.bind.propertyInfo, editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
+                }
+                else if (this.controlType == ControlType.Date) {
+                    displayValue = DateUtils.format(rawValue, props.dateProps ? props.dateProps.formatString : undefined);
+                }
+                else if (this.checkboxType !== CheckboxType.None) {
+                    editor = React.createElement("i", { className: rawValue ? Misc.Settings.grid.boolTrueClass : Misc.Settings.grid.boolFalseClass });
+                }
+                else if (this.controlType === ControlType.DropDown) {
+                    editor = BindPropsHelper.getFormControl(props);
+                }
+                else {
+                    displayValue = (rawValue !== undefined && rawValue !== null) ? rawValue.toString() : "";
+                }
+            }
+            else if (props.bind) {
+                editor = BindPropsHelper.getFormControl(props);
+            }
+        }
+        domProps.className = Utils.joinWithSpaces(domProps.className, cellClassName);
+        return (React.createElement("td", __assign({ "data-tip": cellTooltip }, domProps),
+            !containerProps.suppressDefaultContent && (editor !== undefined ?
+                editor :
+                editorProps.bind ? displayValue : undefined),
+            !containerProps.bindContext && this.props.children,
+            containerProps.bindContext &&
+                React.createElement(FormContext.Consumer, null, function (value) { return (React.createElement(FormContext.Provider, { value: __assign(__assign({}, value), { parentType: EditorParentType.Column, bindProperty: containerProps.bindContext }) }, _this.props.children)); })));
+    };
+    Column.prototype.renderFooter = function (props, domProps) {
+        var _this = this;
+        var colProps = props.containerDom;
+        var hasSummary = (colProps.sum && !!props.bind) || colProps.footerContent;
+        return (React.createElement("th", __assign({}, domProps), hasSummary &&
+            React.createElement(Observer, null, function () { return colProps.footerContent ? colProps.footerContent(_this.context.dataView.filteredItems) :
+                _this.numFormatState(props.bind.propertyInfo, props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
+    };
+    Column.isColumnComponent = true;
+    Column.contextType = GridContext;
+    return Column;
+}(ComponentBase));
+export default Column;

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

@@ -1,12 +1,12 @@
-import { Components } from "@singularsystems/neo-core";
-export interface INeoCommonColumnProps {
-    /** Hide the column when the screen size is smaller than the specified breakpoint. */
-    hideBelow?: Components.breakpoint;
-    /** Hide the column when the screen size is equal to, or larger than the specified breakpoint. */
-    hideAbove?: Components.breakpoint;
-    /** Set the alignment of the column. */
-    alignment?: "left" | "center" | "right";
-}
-export declare class ColumnHelper {
-    static addCommonClasses(className: string | undefined, props: INeoCommonColumnProps): string | undefined;
-}
+import { Components } from "@singularsystems/neo-core";
+export interface INeoCommonColumnProps {
+    /** Hide the column when the screen size is smaller than the specified breakpoint. */
+    hideBelow?: Components.breakpoint;
+    /** Hide the column when the screen size is equal to, or larger than the specified breakpoint. */
+    hideAbove?: Components.breakpoint;
+    /** Set the alignment of the column. */
+    alignment?: "left" | "center" | "right";
+}
+export declare class ColumnHelper {
+    static addCommonClasses(className: string | undefined, props: INeoCommonColumnProps): string | undefined;
+}

package/dist/ReactComponents/Grid/ColumnHelper.js

@@ -1,19 +1,19 @@
-import { Utils } from "@singularsystems/neo-core";
-var ColumnHelper = /** @class */ (function () {
-    function ColumnHelper() {
-    }
-    ColumnHelper.addCommonClasses = function (className, props) {
-        if (props.hideBelow) {
-            className = Utils.joinWithSpaces(className, "d-none d-".concat(props.hideBelow, "-table-cell"));
-        }
-        if (props.hideAbove) {
-            className = Utils.joinWithSpaces(className, "d-table-cell d-".concat(props.hideAbove, "-none"));
-        }
-        if (props.alignment) {
-            className = Utils.joinWithSpaces(className, "col-align-".concat(props.alignment));
-        }
-        return className;
-    };
-    return ColumnHelper;
-}());
-export { ColumnHelper };
+import { Utils } from "@singularsystems/neo-core";
+var ColumnHelper = /** @class */ (function () {
+    function ColumnHelper() {
+    }
+    ColumnHelper.addCommonClasses = function (className, props) {
+        if (props.hideBelow) {
+            className = Utils.joinWithSpaces(className, "d-none d-".concat(props.hideBelow, "-table-cell"));
+        }
+        if (props.hideAbove) {
+            className = Utils.joinWithSpaces(className, "d-table-cell d-".concat(props.hideAbove, "-none"));
+        }
+        if (props.alignment) {
+            className = Utils.joinWithSpaces(className, "col-align-".concat(props.alignment));
+        }
+        return className;
+    };
+    return ColumnHelper;
+}());
+export { ColumnHelper };