@singularsystems/neo-react 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/React/AutoRunner.js

@@ -22,8 +22,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

@@ -78,12 +78,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") {
@@ -132,15 +133,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/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,12 +101,12 @@ 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 React.createElement(React.Fragment, null, (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 })));
@@ -208,7 +208,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;
     children: React.ReactNode;
 }
 export declare class RowGroup extends React.Component<INeoRowGroupProps> {

package/dist/ReactComponents/Grid/Row.js

@@ -76,7 +76,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 @@ export 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 type ItemCallback<T> = (item: T, meta: TransformMetaType<T>) => React.ReactNode;
+export 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,9 +17,7 @@ export var TabContext = React.createContext(new TabContextParams());
 var TabContainer = /** @class */ (function (_super) {
     __extends(TabContainer, _super);
     function TabContainer(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
         _this.tabContext = new TabContextParams();
         var tabManager;
         if (_this.props.tabManager) {
@@ -28,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) {
         if (selectedTab === void 0) { selectedTab = ""; }
         if (autoSelectFirstTab === void 0) { autoSelectFirstTab = false; }
+        var _this = this;
         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": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,7 +29,7 @@
     "typescript": "5.0.4"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.0-beta.3",
+    "@singularsystems/neo-core": "1.0.0-beta.5",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.4.0",
@@ -48,7 +48,7 @@
     "tslib": "2.5.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.0-beta.3",
+    "@singularsystems/neo-core": ">=1.0.0-beta.5",
     "axios": "1.4.0",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/CHANGELOG.md

@@ -1,98 +0,0 @@
-# Version 1.x
-
-Version 1 of neo-react upgrades react to version 18, and mobX to version 6. Both of these are major updates and will require you to make code changes to your project.
-
-## Testing
-
-In addition to requiring code / syntax changes, both React 18, and Mobx 6 behave differently enough to their previous versions that runtime bugs may be introduced into your project. You should only update to this version when you and the client have enough time to test the project thoroughly. If you find any issues, please report them so this document can be updated.
-
-The project changes required are detailed below:
-
-## Package changes:
-
-* Update all neo packages to the latest 1.x version.
-* Update the following packages to the latest version (these were the latest at time of writing):
-    * dependencies
-        * `"axios": "1.4.0"`,
-        * `"mobx": "6.9.0"`,
-        * `"mobx-react": "7.6.0"`,
-        * `"react": "18.2.0"`,
-        * `"react-dom": "18.2.0"`,
-        * `"react-router": "5.2.1"`, - Must be version 5.x
-        * `"react-router-dom": "5.3.0"`, - Must be version 5.x
-        * `"react-select": "5.7.3"`,
-        
-    * devDependencies
-        * `"@types/react": "18.2.4"`,
-        * `"@types/react-dom": "18.2.3"`,
-        * `"@types/react-router": "5.1.17"`, - Must be version 5.x
-        * `"@types/react-router-dom": "5.3.3"`, - Must be version 5.x
-    * resolutions
-        * remove all entries
-* delete yarn.lock, and run `yarn install`
-
-## Fix errors
-
-If any of your components allow children, React 18 requires to you have an explicit `children` prop. Add this to the props definition of the component:
-
-```typescript
-interface MyProps {
-    ...
-    children: React.ReactNode;
-}
-
-// or if the component has no other props:
-
-MyComponent extends React.Component<{ children: React.ReactNode }> {
-    ...
-}
-```
-
-The React root api has also changed in version 18. Make the following changes to your `index.tsx` file:
-
-Your existing code will look something like this:
-
-```typescript
-import ReactDOM from 'react-dom';
-...
-// React init
-ReactDOM.render(
-    renderComponent,
-    document.getElementById('root') as HTMLElement
-);
-```
-
-Change the `ReactDOM` import, and the react init code:
-
-```typescript
-import ReactDOM from 'react-dom/client';
-...
-// React init
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(renderComponent);
-```
-
-## Mobx
-
-Before mobx 6, you could mark a property as being observable by adding an `@observable` decorator to the property. In mobx 6 this no longer works ([read more](https://mobx.js.org/migrating-from-4-or-5.html)). 
-
-For any class that extends `ModelBase`, `ValueObject`, `ViewModelBase` etc, this change is handled by neo, and you will not need to change any code.
-
-For other classes, you will need to add initialisation code to the constructor.
-
-* Search for `@observable` in your project. (In most projects this will be in the Sidebar and AppLayout components)
-* In the constructor of the class that contains the property, add:
-
-```typescript
-makeObservable(this);
-```
-
-### Decorators on neo models
-
-If you try use mobx decorators on any models that extend `ModelBase`, `ValueObject` or `ViewModelBase`, you will receive this error:
-
-> [MobX] makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.
-
-This is most likely because you have used an `@action` decorator on a method. Neo now marks all methods as actions, so you can remove the `@action` decorator.
-
-* Search for `@action` in your project. Remove the decorator **only** if the class extends `ModelBase` (and its decendents e.g. `ValueObject`) or `ViewModelBase`.