@singularsystems/neo-react 0.10.41 → 0.10.42

package/dist/React/AutoRunner.d.ts

@@ -1,5 +1,5 @@
 import { Misc, Model } from '@singularsystems/neo-core';
 import { IAutoRunnerFactory } from '@singularsystems/neo-core/dist/Model/IAutoRunner';
 export declare class AutoRunnerFactory implements IAutoRunnerFactory {
-    create<T extends Model.IModelBase>(model: T, callback: (model: T) => void, options?: Misc.IAutoRunnerOptions): Misc.IAutoRunner;
+    create<T extends Model.IModelBase>(model: T, callback: (model: T) => void, options?: Misc.IAutoRunnerOptions<T>): Misc.IAutoRunner;
 }

package/dist/React/AutoRunner.js

@@ -55,9 +55,10 @@ var AutoRunner = /** @class */ (function () {
         if (instance && !trackedInstances.has(instance)) {
             trackedInstances.set(instance, true);
             var info = instance.constructor.neo;
+            var filterProperties = path === "" ? this.options.rootProperties : undefined;
             for (var _i = 0, _b = info.properties; _i < _b.length; _i++) {
                 var propertyInfo = _b[_i];
-                if (!propertyInfo.noTrack && instance.meta[propertyInfo.propertyName]) {
+                if (!propertyInfo.noTrack && instance.meta[propertyInfo.propertyName] && (!filterProperties || filterProperties.indexOf(propertyInfo.propertyName) >= 0)) {
                     if (propertyInfo.relationType === Misc.RelationType.None) {
                         var key = path + propertyInfo.propertyName;
                         var useDelay = this.propertyMap[key];

package/dist/ReactComponents/Button.js

@@ -49,7 +49,7 @@ 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, pulse = _b.pulse, native = __rest(_b, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "pulse"]);
+        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"]);
         native.type = isSubmit ? "submit" : "button";
         variant = (variant !== null && variant !== void 0 ? variant : "primary");
         var isDropDown = menuItems && menuItems.length;
@@ -60,7 +60,7 @@ var Button = /** @class */ (function (_super) {
             buttonClasses += " dropdown-toggle";
             native.onClick = this.showMenu;
         }
-        if ((_a = task) === null || _a === void 0 ? void 0 : _a.isBusy) {
+        if (isBusy || ((_a = task) === null || _a === void 0 ? void 0 : _a.isBusy)) {
             icon = "fa-circle-notch fa-spin";
             native.disabled = true;
         }

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts

@@ -20,6 +20,12 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
     items?: ItemSource<T>;
     valueMember?: keyof T;
     displayMember?: keyof T;
+    /**
+     * Property of an item to use as the description.
+     *
+     * Description will be shown in muted text below the item name.
+     */
+    descriptionMember?: keyof T | false;
     /**
      * Callback used to provide a custom option component instead of displaying the display member value.
      */

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -1,6 +1,6 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import React from 'react';
-import { Misc, Utils } from '@singularsystems/neo-core';
+import { EnumHelper, Misc, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import { DropDownBase } from './DropDownBase';
 import { BindPropsHelper } from '../PropTypes';
@@ -98,7 +98,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
     AutoCompleteDropDown.prototype.render = function () {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var _m = this.props, bind = _m.bind, bindDisplay = _m.bindDisplay, bindItems = _m.bindItems, bindIds = _m.bindIds, itemSource = _m.itemSource, items = _m.items, displayMember = _m.displayMember, valueMember = _m.valueMember, option = _m.option, noRecordsPrompt = _m.noRecordsPrompt, typeToSearchPrompt = _m.typeToSearchPrompt, delayMs = _m.delayMs, minCharacters = _m.minCharacters, onItemSelected = _m.onItemSelected, otherProps = __rest(_m, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected"]);
+        var _m = this.props, bind = _m.bind, bindDisplay = _m.bindDisplay, bindItems = _m.bindItems, bindIds = _m.bindIds, itemSource = _m.itemSource, items = _m.items, displayMember = _m.displayMember, valueMember = _m.valueMember, descriptionMember = _m.descriptionMember, option = _m.option, noRecordsPrompt = _m.noRecordsPrompt, typeToSearchPrompt = _m.typeToSearchPrompt, delayMs = _m.delayMs, minCharacters = _m.minCharacters, onItemSelected = _m.onItemSelected, otherProps = __rest(_m, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected"]);
         var splitProps = BindPropsHelper.splitCommonEditorProps(otherProps);
         var nativeProps = splitProps.rest;
         var bindItemsProperty = bindItems;
@@ -112,7 +112,13 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         this.valueMember = (_c = this.props.valueMember, (_c !== null && _c !== void 0 ? _c : ""));
         var defaultItems = undefined;
         if (this.props.items) {
-            defaultItems = this.mapTArrayToOptions(this.getItems(this.props.items));
+            var items_1 = this.getItems(this.props.items);
+            defaultItems = this.mapTArrayToOptions(items_1);
+            if (descriptionMember === undefined && items_1.length > 0) {
+                if (EnumHelper.isEnumItem(items_1[0])) {
+                    descriptionMember = "description";
+                }
+            }
         }
         var value = null;
         if (bindItems) {
@@ -141,6 +147,11 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             var originalOption_1 = components.Option;
             components.Option = function (item) { return (React.createElement("div", __assign({ ref: item.innerRef }, item.innerProps, { className: "react-select-row" + (item.isFocused ? " focused" : "") }), originalOption_1(item))); };
         }
+        else if (descriptionMember) {
+            components.Option = function (item) { return (React.createElement("div", __assign({ ref: item.innerRef }, item.innerProps, { className: "react-select-row with-description" + (item.isFocused ? " focused" : "") }),
+                React.createElement("div", { className: "react-select-name" }, item.label),
+                React.createElement("div", { className: "react-select-description" }, item.data[descriptionMember]))); };
+        }
         if (nativeProps.isClearable === undefined) {
             nativeProps.isClearable = true;
         }

package/dist/ReactComponents/DropDown/DropDownBase.js

@@ -1,5 +1,5 @@
 import { __awaiter, __extends, __generator } from "tslib";
-import { Data, Model } from '@singularsystems/neo-core';
+import { Data, EnumHelper, Model } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 var DropDownBase = /** @class */ (function (_super) {
     __extends(DropDownBase, _super);
@@ -13,6 +13,10 @@ var DropDownBase = /** @class */ (function (_super) {
     }
     DropDownBase.prototype.findMembers = function (item) {
         if (!this.valueMember || !this.displayMember) {
+            if (EnumHelper.isEnumItem(item)) {
+                this.valueMember = "id";
+                this.displayMember = "name";
+            }
             if (!this.displayMember) {
                 var neoTypeInfo = item.constructor.neo;
                 if (neoTypeInfo && neoTypeInfo.displayMember) {

package/dist/ReactComponents/FileManager/FileBasicInput.js

@@ -1,4 +1,4 @@
-import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
+import { __assign, __awaiter, __decorate, __extends, __generator, __metadata, __rest } from "tslib";
 import React from 'react';
 import { observer } from 'mobx-react';
 import { FileContext } from './FileContext';
@@ -14,9 +14,30 @@ var FileBasicInput = /** @class */ (function (_super) {
         return _this;
     }
     FileBasicInput.prototype.onFileSelected = function (e) {
-        if (e.target.files) {
-            this.fileManager.processFiles(e.target.files, { handleErrors: !this.fileManager.options.taskRunner });
-        }
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var input;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!e.target.files) return [3 /*break*/, 4];
+                        _c.label = 1;
+                    case 1:
+                        _c.trys.push([1, , 3, 4]);
+                        return [4 /*yield*/, this.fileManager.processFiles(e.target.files, { handleErrors: !this.fileManager.options.taskRunner })];
+                    case 2:
+                        _c.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        input = (_a = e.target, (_a !== null && _a !== void 0 ? _a : (_b = this.props.inputRef) === null || _b === void 0 ? void 0 : _b.current));
+                        if (input) {
+                            input.value = "";
+                        }
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
     };
     FileBasicInput.prototype.render = function () {
         var _a = this.props, fileManager = _a.fileManager, isHidden = _a.isHidden, inputRef = _a.inputRef, native = __rest(_a, ["fileManager", "isHidden", "inputRef"]);

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

@@ -3,6 +3,16 @@ import { GridContext } from './Grid';
 import { IButtonOptions } from '@singularsystems/neo-core/dist/Components/ButtonOptions';
 import ComponentBase from '../ComponentBase';
 import { INeoCommonColumnProps } from './ColumnHelper';
+interface IDeleteButtonOptions extends IButtonOptions {
+    /**
+     * Callback to run when a non new item is deleted.
+     * * Use this to call an api to delete the item in the database.
+     *   * Return true if the item was deleted, and must be removed from the list.
+     *   * The list will not be marked dirty.
+     * * If the item is new, it will be removed without invoking this callback.
+     */
+    onDeleteExisting?: (item: any) => Promise<boolean>;
+}
 interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLProps<HTMLTableCellElement> {
     /** Item to pass to edit and delete callbacks. Defaults to the current rows item */
     item?: any;
@@ -15,7 +25,7 @@ interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLProps<HTML
     /** Show delete button? Not required if deleteButton options are set. */
     showDelete?: boolean;
     /** Delete button options. Will cause delete button to be shown. */
-    deleteButton?: IButtonOptions;
+    deleteButton?: IDeleteButtonOptions;
     /** Edit button options. Will cause edit button to be shown. */
     editButton?: IButtonOptions;
     /** View button options. Will cause view button to be shown. */
@@ -31,7 +41,7 @@ export declare class ButtonColumn extends ComponentBase<IButtonColumnProps> {
     private item;
     private section;
     protected onFirstRender(): void;
-    onDelete(): void;
+    onDelete(): Promise<void>;
     render(): JSX.Element;
 }
 export {};

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -1,4 +1,4 @@
-import { __assign, __extends, __rest } from "tslib";
+import { __assign, __awaiter, __extends, __generator, __rest } from "tslib";
 import * as React from 'react';
 import { GridContext } from './Grid';
 import NeoButton from '../Button';
@@ -17,7 +17,28 @@ var ButtonColumn = /** @class */ (function (_super) {
         this.item = this.context.currentItem;
     };
     ButtonColumn.prototype.onDelete = function () {
-        this.context.dataView.rawItems.remove(this.props.item || this.item);
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var item, mustRemove;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        item = (_a = this.props.item, (_a !== null && _a !== void 0 ? _a : this.item));
+                        if (!(item.isNew === false && ((_b = this.props.deleteButton) === null || _b === void 0 ? void 0 : _b.onDeleteExisting) !== undefined)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.props.deleteButton.onDeleteExisting(item)];
+                    case 1:
+                        mustRemove = _c.sent();
+                        if (mustRemove) {
+                            this.context.dataView.rawItems.removeWithoutTracking(item);
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        this.context.dataView.rawItems.remove(item);
+                        _c.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
     };
     ButtonColumn.prototype.render = function () {
         this.onRender();

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

@@ -67,6 +67,12 @@ export interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
     isSmallTable?: boolean;
     /** Additional footer row(s) to display below the main footer row. */
     footerContent?: (data: T[]) => React.ReactNode;
+    /**
+     * Additional content to show next to the add new button.
+     *
+     * Set `showAddButton = false` if you don't want the default button.
+     */
+    footerButtons?: () => React.ReactNode;
 }
 export default class Grid<T> extends React.Component<IGridProps<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;

package/dist/ReactComponents/Grid/Grid.js

@@ -32,7 +32,7 @@ var Grid = /** @class */ (function (_super) {
     }
     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, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent"]);
+        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"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -90,11 +90,12 @@ var Grid = /** @class */ (function (_super) {
             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 })); })),
-                React.createElement(Observer, null, function () { return (showAddButton || addButton || _this.gridContext.hasSummaries || footerContent !== undefined) &&
+                React.createElement(Observer, null, function () { return (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
                     React.createElement(TableSection, { type: "footer" },
                         _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta),
                         footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
-                        (showAddButton || addButton) && React.createElement(AddButtonRow, { addButton: addButton })); }))));
+                        (showAddButton || addButton || footerButtons) &&
+                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })); }))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
         var _a;
@@ -171,12 +172,15 @@ var AddButtonRow = /** @class */ (function (_super) {
         }
     };
     AddButtonRow.prototype.render = function () {
-        var addButtonOptions = Utils.populatePartialWithDefaults(this.props.addButton, __assign({}, Misc.Settings.grid.addButton));
+        var _a = this.props, addButton = _a.addButton, showAddButton = _a.showAddButton, additionalContent = _a.additionalContent;
+        var addButtonOptions = Utils.populatePartialWithDefaults(addButton, __assign({}, Misc.Settings.grid.addButton));
         if (!addButtonOptions.onClick)
             addButtonOptions.onClick = this.onAddNew;
         return (React.createElement("tr", { ref: this.domRef },
             React.createElement("td", { colSpan: this.context.columnCount + (this.context.expandProperty ? 1 : 0) },
-                React.createElement(NeoButton, __assign({}, addButtonOptions)))));
+                React.createElement("div", { className: "neo-grid-button-row" },
+                    showAddButton !== false && React.createElement(NeoButton, __assign({}, addButtonOptions)),
+                    additionalContent !== undefined && additionalContent()))));
     };
     AddButtonRow.contextType = GridContext;
     return AddButtonRow;

package/dist/ReactComponents/NumberInput.js

@@ -84,11 +84,10 @@ var NumberInput = /** @class */ (function (_super) {
     }
     NumberInput.prototype.onChanged = function (e) {
         var newValue;
-        if (e.target.value !== "" && isNaN(parseFloat(e.target.value))) {
-            return;
-        }
-        else if (!validDecimalRegex.test(e.target.value)) {
-            return;
+        if (e.target.value !== "") {
+            if (isNaN(parseFloat(e.target.value)) || !validDecimalRegex.test(e.target.value)) {
+                return;
+            }
         }
         if (e.target.value == "") {
             newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);

package/dist/Views/ViewModelBase.d.ts

@@ -38,7 +38,14 @@ export default abstract class ViewModelBase extends ModelBase implements IViewMo
      * Uses the task runner to call an api endpoint. The returned data is deserialised into an instance of the provided model type.
      */
     waitForModel<T extends BindableBase>(modelType: typeof BindableBase, task: AxiosPromise<Model.PlainTrackedObject<T>>, options?: Partial<WaitForTaskRunnerOptions<Model.PlainTrackedObject<T>>>): Promise<T>;
+    /**
+     * Registers the object for disposal when this viewmodel is disposed.
+     */
     autoDispose<T extends Misc.IDisposable>(disposable: T): T;
+    /**
+     * Binds a list of functions to the viewmodel instance.
+     */
+    protected bindMethods(...fns: Function[]): void;
     dispose(): void;
     /**
      * Creates a view model instance.

package/dist/Views/ViewModelBase.js

@@ -59,9 +59,30 @@ var ViewModelBase = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * Registers the object for disposal when this viewmodel is disposed.
+     */
     ViewModelBase.prototype.autoDispose = function (disposable) {
         return this.disposeHelper.autoDispose(disposable);
     };
+    /**
+     * Binds a list of functions to the viewmodel instance.
+     */
+    ViewModelBase.prototype.bindMethods = function () {
+        var fns = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            fns[_i] = arguments[_i];
+        }
+        for (var _a = 0, fns_1 = fns; _a < fns_1.length; _a++) {
+            var fn = fns_1[_a];
+            if (fn.name) {
+                this[fn.name] = fn.bind(this);
+            }
+            else {
+                throw "Cannot bind a function without a name.";
+            }
+        }
+    };
     ViewModelBase.prototype.dispose = function () {
         this.disposeHelper.dispose();
         for (var _i = 0, _a = this.trackedViewModels; _i < _a.length; _i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.41",
+  "version": "0.10.42",
   "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.49",
+    "@singularsystems/neo-core": "^0.10.50",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",

package/styles/Forms.scss

@@ -143,4 +143,14 @@ div.neo-form-group-floating {
     &.focused, &:hover {
         background: $input-btn-focus-color;
     }
+
+    &.with-description {
+        div.react-select-name {
+            width: 100%;
+        }
+        div.react-select-description {
+            font-size: 0.9rem;
+            color: #999;
+        }
+    }
 }