@singularsystems/neo-react 0.10.65 → 0.10.67

package/dist/React/AutoRunner.js

@@ -23,8 +23,19 @@ var AutoRunner = /** @class */ (function () {
         this.disposerDelayed = reaction(function () { return _this.accessAllValues(model, true, new Map(), ""); }, function () { var _a; return _this.runCallback(model, callback, (_a = _this.options.delayMs) !== null && _a !== void 0 ? _a : 500); });
         this.disposerImmediate = reaction(function () { return _this.accessAllValues(model, false, new Map(), ""); }, function () { return _this.runCallback(model, callback, 0); });
     }
+    Object.defineProperty(AutoRunner.prototype, "hasPending", {
+        get: function () {
+            return DebounceHelper.hasPending(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
     AutoRunner.prototype.cancelPending = function () {
-        DebounceHelper.cancelPending(this);
+        if (DebounceHelper.hasPending(this)) {
+            DebounceHelper.cancelPending(this);
+            return true;
+        }
+        return false;
     };
     AutoRunner.prototype.fireImmediate = function () {
         DebounceHelper.executeImmediate(this);

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

@@ -46,8 +46,9 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
     /**
      * Callback which fires when an item is selected.
      * The removedItem parameter will be provided when removing an item from a multi select drop down.
+     * The addedItem parameter will be provided when an item is selected in a multi select drop down. This is the item stored in the bindItems list.
      */
-    onItemSelected?: (item?: T, removedItem?: Model.ISelectedItem) => void;
+    onItemSelected?: (item?: T, removedItem?: Model.ISelectedItem, addedItem?: Model.ISelectedItem) => void;
     /**
      * Millisecond delay from the last typed character, to when the itemSource function is called.
      * Default is 500ms.

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -75,12 +75,13 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             // Multi select
             var itemList = itemsProperty.value;
             if (action.action === "select-option") {
-                itemList.push({ id: action.option.value, display: action.option.label });
+                var newItem = { id: action.option.value, display: action.option.label };
+                itemList.push(newItem);
                 if (this.bindIdsList) {
                     this.bindIdsList.push(action.option.value);
                 }
                 if (onItemSelected) {
-                    onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item);
+                    onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item, undefined, newItem);
                 }
             }
             else if (action.action === "remove-value") {
@@ -129,15 +130,25 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var bindDisplayProperty = bindDisplay;
         var displayInfo = this.bindProperty.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(nativeProps, this.context.parentType !== EditorParentType.FormGroup);
-        this.displayMember = (_a = this.props.displayMember) !== null && _a !== void 0 ? _a : "";
-        this.valueMember = (_b = this.props.valueMember) !== null && _b !== void 0 ? _b : "";
+        if (!this.displayMember) {
+            this.displayMember = (_a = this.props.displayMember) !== null && _a !== void 0 ? _a : "";
+        }
+        if (!this.valueMember) {
+            this.valueMember = (_b = this.props.valueMember) !== null && _b !== void 0 ? _b : "";
+        }
         var defaultItems = undefined;
         if (this.props.items) {
             var items_1 = this.getItems(this.props.items);
+            defaultItems = this.mapTArrayToOptions(items_1);
             if (this.props.filterPredicate !== undefined) {
-                items_1 = items_1.filter(this.props.filterPredicate);
+                if (bindValue) {
+                    // Dont filter out the current selected item even if excluded by the filter.
+                    defaultItems = defaultItems.filter(function (option) { return bindValue.value === option.value || _this.props.filterPredicate(option.item); });
+                }
+                else {
+                    defaultItems = defaultItems.filter(function (option) { return _this.props.filterPredicate(option.item); });
+                }
             }
-            defaultItems = this.mapTArrayToOptions(items_1);
             if (descriptionMember === undefined && items_1.length > 0) {
                 if (EnumHelper.isEnumItem(items_1[0])) {
                     descriptionMember = "description";

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

@@ -26,6 +26,8 @@ export interface IDropDownSpecificProps<T> {
     nullText?: string;
     /** Text to display as the first item in the drop down list when the user is allowed to select a blank item. */
     deSelectText?: string;
+    /** Set to true if the property should be sorted by value instead of display text. */
+    sortByValue?: boolean;
 }
 export interface IDropDownProps<T> extends IBindableEditorProps<HTMLSelectElement> {
     select: IDropDownSpecificProps<T>;
@@ -34,6 +36,7 @@ export default class DropDown<T> extends DropDownBase<T, IDropDownProps<T>> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     private selectedItem;
+    private sortByValue?;
     private listIndexSymbol;
     constructor(props: IDropDownProps<T>);
     private get items();

package/dist/ReactComponents/DropDown/DropDown.js

@@ -41,7 +41,9 @@ var DropDown = /** @class */ (function (_super) {
         list.forEach(function (item) { return index[item[_this.valueMember]] = item; });
     };
     DropDown.prototype.getSelectedOption = function (value) {
-        this.props.bind.propertyInfo.hasSortValue = true;
+        if (!this.sortByValue) {
+            this.props.bind.propertyInfo.hasSortValue = true;
+        }
         if (!this.selectedItem || this.selectedItem[this.valueMember] != value) {
             var list = this.items;
             var indexJustCreated = false;
@@ -61,7 +63,9 @@ var DropDown = /** @class */ (function (_super) {
                 this.selectedItem[this.displayMember] = "";
                 this.selectedItem[this.valueMember] = null;
             }
-            this.setFieldInfo(this.props.bind, this.selectedItem[this.displayMember]);
+            var displayValue = this.selectedItem[this.displayMember];
+            this.setFieldInfo(this.props.bind, displayValue);
+            this.props.bind.sortValue = this.sortByValue ? value : displayValue;
         }
         return this.selectedItem;
     };
@@ -81,10 +85,11 @@ var DropDown = /** @class */ (function (_super) {
     };
     DropDown.prototype.render = function () {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
         domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control" : "neo-forms-editor");
+        this.sortByValue = (_a = splitProps.select) === null || _a === void 0 ? void 0 : _a.sortByValue;
         if (splitProps.select) {
             if (splitProps.select.valueMember)
                 this.valueMember = splitProps.select.valueMember;
@@ -96,7 +101,7 @@ var DropDown = /** @class */ (function (_super) {
         var items = this.items;
         var selectedItem = this.getSelectedOption(this.props.bind.value); // This sets the sort value to allow sorting of drop downs in grids. 
         var value = this.props.bind.value;
-        var addBlankItem = ((_b = (_a = splitProps.select) === null || _a === void 0 ? void 0 : _a.allowNulls) !== null && _b !== void 0 ? _b : this.props.bind.propertyInfo.allowNulls) || !value;
+        var addBlankItem = ((_c = (_b = splitProps.select) === null || _b === void 0 ? void 0 : _b.allowNulls) !== null && _c !== void 0 ? _c : this.props.bind.propertyInfo.allowNulls) || !value;
         if (addBlankItem && items.find(function (item) { return item[_this.valueMember] === null || item[_this.valueMember] === ""; })) {
             // If there is an item with a null value, don't add a blank drop down item.
             addBlankItem = false;
@@ -106,7 +111,7 @@ var DropDown = /** @class */ (function (_super) {
             control = React.createElement("div", { className: "form-control form-control-loading" },
                 React.createElement("div", { className: "spinner-border" }));
         }
-        else if ((_c = splitProps.select) === null || _c === void 0 ? void 0 : _c.renderAsText) {
+        else if ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.renderAsText) {
             control = React.createElement("span", null, selectedItem ? selectedItem[this.displayMember] : "");
         }
         else if (splitProps.editor.isReadOnly) {
@@ -117,7 +122,7 @@ var DropDown = /** @class */ (function (_super) {
                 domProps.disabled = true;
             }
             var valueIsBlank = value === undefined || value === null;
-            var nullText = (valueIsBlank || ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.deSelectText) === undefined) ? (_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.nullText : (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.deSelectText;
+            var nullText = (valueIsBlank || ((_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.deSelectText) === undefined) ? (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.nullText : (_g = splitProps.select) === null || _g === void 0 ? void 0 : _g.deSelectText;
             if (valueIsBlank) {
                 domProps.className = Utils.joinWithSpaces(domProps.className, "select-no-value");
             }

package/dist/ReactComponents/Form.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { Components, Model } from '@singularsystems/neo-core';
-import { ItemCallback } from './PropTypes';
 export interface IFormProps<T extends Model.IModelBase> extends React.FormHTMLAttributes<HTMLElement>, Components.IFormOptions<T> {
     /**
      * Called when the form is submitted, but the model is not valid.
      * The justValidated parameter will be true if the validationDisplayMode is 'AfterSubmit', and this is the first submit attempt.
      */
     onInvalid?: (e: React.FormEvent, justValidated?: boolean) => void;
-    children: React.ReactNode | React.ReactNode[] | ItemCallback<T>;
+    children: React.ReactNode | React.ReactNode[] | ((item: T, meta: Model.TransformMetaType<T>) => React.ReactNode);
 }
 export default class Form<T extends Model.IModelBase> extends React.Component<IFormProps<T>> {
     private reactionDisposer?;

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

@@ -11,6 +11,7 @@ export declare class GridContextParams<T> {
     inFirstRowInGroup: boolean;
     columnCount: number;
     expandProperty?: Model.IPropertyInstance<boolean | null>;
+    hideExpandButton?: boolean;
     expandAll?: boolean;
     hasSummaries: boolean;
     dataView: Data.DataViewBase<T>;

package/dist/ReactComponents/Grid/Grid.js

@@ -101,11 +101,11 @@ var Grid = /** @class */ (function (_super) {
         }
         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: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true)),
                 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 || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
                     React.createElement(TableSection, { type: "footer" },
-                        _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta),
+                        _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta, true),
                         footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
                         (showAddButton || addButton || footerButtons) &&
                             React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })); }))));
@@ -206,7 +206,7 @@ var ItemGroup = /** @class */ (function (_super) {
     ItemGroup.prototype.render = function () {
         this.context.currentItem = this.props.item;
         //this.context.inFirstRowInGroup = true;
-        return (this.props.template(this.props.item, this.props.item.meta));
+        return (this.props.template(this.props.item, this.props.item.meta, false));
     };
     ItemGroup.contextType = GridContext;
     ItemGroup = __decorate([

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

@@ -71,6 +71,10 @@ interface INeoRowGroupProps {
      * To hide the expand button, return null.
      */
     expandProperty?: Model.IPropertyInstance<boolean | null>;
+    /**
+     * Hides the expansion button on this row.
+     */
+    hideExpandButton?: boolean;
 }
 export declare class RowGroup extends React.Component<INeoRowGroupProps> {
     static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;

package/dist/ReactComponents/Grid/Row.js

@@ -75,7 +75,7 @@ var Row = /** @class */ (function (_super) {
         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(Column, { className: "neo-grid-expand-column" }, this.firstRowInGroup && inBody && this.context.hideExpandButton !== true && this.expandProperty.value !== null &&
                         React.createElement(NeoButton, __assign({}, expandButtonOptions))),
                 this.props.children));
         this.setGridContext();
@@ -193,6 +193,7 @@ var RowGroup = /** @class */ (function (_super) {
     RowGroup.prototype.render = function () {
         this.context.expandProperty = this.props.expandProperty;
         this.context.inFirstRowInGroup = true;
+        this.context.hideExpandButton = this.props.hideExpandButton;
         return this.props.children;
     };
     RowGroup.contextType = GridContext;

package/dist/ReactComponents/PropTypes.d.ts

@@ -11,7 +11,7 @@ import PropertyInfo from '@singularsystems/neo-core/dist/Model/PropertyInfo';
 import { IComponentBase } from './ComponentBase';
 import FileInput, { IFileEditorProps } from './FileManager/FileInput';
 import { FormContextParams } from './FormContext';
-export declare type ItemCallback<T> = (item: T, meta: TransformMetaType<T>) => React.ReactNode;
+export declare type ItemCallback<T> = (item: T, meta: TransformMetaType<T>, isHeader: boolean) => React.ReactNode;
 export declare enum ControlType {
     Date = 0,
     Number = 1,

package/dist/ReactComponents/Tabs/Tab.d.ts

@@ -9,7 +9,7 @@ interface ITabProps {
     /** Name used for binding to selected tab. (Same as id property) */
     name?: string;
     /** Icon to display in tab header. */
-    icon?: string;
+    icon?: any;
     /** True if the tab is disabled and not allowed to be clicked on. */
     disabled?: boolean;
     /**

package/dist/ReactComponents/Tabs/TabContainer.js

@@ -1,7 +1,6 @@
 import { __assign, __extends, __rest } from "tslib";
 import React from "react";
 import { Components, Utils } from "@singularsystems/neo-core";
-import { ObservableValue } from "@singularsystems/neo-core/dist/Model/ObservableValue";
 import { TabManager } from './TabManager';
 var TabContextParams = /** @class */ (function () {
     function TabContextParams() {
@@ -18,7 +17,6 @@ export var TabContext = React.createContext(new TabContextParams());
 var TabContainer = /** @class */ (function (_super) {
     __extends(TabContainer, _super);
     function TabContainer(props) {
-        var _a;
         var _this = _super.call(this, props) || this;
         _this.tabContext = new TabContextParams();
         var tabManager;
@@ -27,8 +25,7 @@ var TabContainer = /** @class */ (function (_super) {
             _this.tabContext.isUserTabManager = true;
         }
         else {
-            tabManager = new TabManager("", true);
-            tabManager.observable = (_a = _this.props.selectedTab) !== null && _a !== void 0 ? _a : new ObservableValue("");
+            tabManager = new TabManager("", true, _this.props.selectedTab);
         }
         _this.tabManager = tabManager;
         _this.tabContext.tabManager = _this.tabManager;

package/dist/ReactComponents/Tabs/TabManager.d.ts

@@ -22,13 +22,14 @@ export interface ITabManagerInternal extends ITabManager {
  */
 export declare class TabManager<T extends string = string> {
     private autoSelectFirstTab;
-    observable: Model.ObservableValue<T>;
+    private reactionDisposer;
+    observable: Model.IObservableValue<T>;
     /**
      * Creates a tab manager used to bind to a tab container.
      * @param selectedTab Initially selected tab.
      * @param autoSelectFirstTab Set to true if the first child tab should become selected.
      */
-    constructor(selectedTab?: T, autoSelectFirstTab?: boolean);
+    constructor(selectedTab?: T, autoSelectFirstTab?: boolean, observable?: Model.IObservableValue<T>);
     /** Called by tab container. */
     private initialise;
     /** Called by tab container. */
@@ -43,6 +44,7 @@ export declare class TabManager<T extends string = string> {
      * Registers a callback to run whenever the tab with this tab key is displayed.
      */
     onTabDisplayed(tabKey: T, callback: () => void): this;
+    /** Called by tab container. */
     private tabMounted;
     private getTab;
     /**

package/dist/ReactComponents/Tabs/TabManager.js

@@ -1,4 +1,5 @@
 import { Model } from '@singularsystems/neo-core';
+import { reaction } from "mobx";
 import { CancellableEvent } from '../Misc';
 /**
  * Tab manager used to manage a tab component.
@@ -10,14 +11,20 @@ var TabManager = /** @class */ (function () {
      * @param selectedTab Initially selected tab.
      * @param autoSelectFirstTab Set to true if the first child tab should become selected.
      */
-    function TabManager(selectedTab, autoSelectFirstTab) {
+    function TabManager(selectedTab, autoSelectFirstTab, observable) {
+        var _this = this;
         if (selectedTab === void 0) { selectedTab = ""; }
         if (autoSelectFirstTab === void 0) { autoSelectFirstTab = false; }
         this.autoSelectFirstTab = autoSelectFirstTab;
-        this.observable = new Model.ObservableValue("");
         this.tabs = {};
-        this.observable.value = selectedTab;
+        if (observable) {
+            this.observable = observable;
+        }
+        else {
+            this.observable = new Model.ObservableValue(selectedTab);
+        }
         this.onTabChanged = this.onTabChanged.bind(this);
+        this.reactionDisposer = reaction(function () { return _this.observable.value; }, function () { return _this.onTabChanged(); });
     }
     /** Called by tab container. */
     TabManager.prototype.initialise = function () {
@@ -27,6 +34,7 @@ var TabManager = /** @class */ (function () {
     };
     /** Called by tab container. */
     TabManager.prototype.destroy = function () {
+        this.reactionDisposer();
     };
     Object.defineProperty(TabManager.prototype, "selectedTab", {
         get: function () {
@@ -50,7 +58,6 @@ var TabManager = /** @class */ (function () {
                 }
                 cancellableEvent.tryRunAction(function () {
                     _this.observable.value = value;
-                    _this.onTabChanged();
                 });
             }
         },
@@ -73,6 +80,7 @@ var TabManager = /** @class */ (function () {
         tab.onDisplayed = callback;
         return this;
     };
+    /** Called by tab container. */
     TabManager.prototype.tabMounted = function (tabKey, onLeave) {
         var tab = this.getTab(tabKey, true);
         tab.onLeave = onLeave;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.65",
+  "version": "0.10.67",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -32,7 +32,7 @@
     "typescript": "4.5.5"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "0.10.77",
+    "@singularsystems/neo-core": "0.10.80",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "@types/react-select": "3.1.0",
@@ -50,7 +50,7 @@
     "react-router-dom": "5.1.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=0.10.77",
+    "@singularsystems/neo-core": ">=0.10.80",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
     "react": ">=16.13.1",