@singularsystems/neo-react 0.10.56 → 0.10.58

package/dist/React/ReactModelCreator.d.ts

@@ -2,9 +2,9 @@ import { Model } from '@singularsystems/neo-core';
 import { ModelCreatorBase } from '@singularsystems/neo-core/dist/Model/ModelCreatorBase';
 import { NeoTypeInfo } from '@singularsystems/neo-core/dist/Model/NeoTypeInfo';
 export declare class ReactModelCreator extends ModelCreatorBase {
-    convertInstance(instance: {}): {};
-    setupModel(typeInfo: NeoTypeInfo, model: Model.IModelBase): void;
-    setupObject(typeInfo: NeoTypeInfo, object: any): void;
+    convertInstance(instance: {}, options: Model.IMakeBindableOptions): {};
+    setupModel(typeInfo: NeoTypeInfo, model: Model.IModelBase, options: Model.IMakeBindableOptions): void;
+    setupObject(typeInfo: NeoTypeInfo, object: any, options: Model.IMakeBindableOptions): void;
     private convertToObservable;
     private addChangeTracking;
 }

package/dist/React/ReactModelCreator.js

@@ -4,38 +4,34 @@ import { createObservableList } from './Utils';
 import { Misc, Validation, Utils } from '@singularsystems/neo-core';
 import { ModelCreatorBase } from '@singularsystems/neo-core/dist/Model/ModelCreatorBase';
 import PropertyInstance from '@singularsystems/neo-core/dist/Model/PropertyInstance';
-var hasConvertedSymbol = Symbol("hasConvertedModel");
 var ReactModelCreator = /** @class */ (function (_super) {
     __extends(ReactModelCreator, _super);
     function ReactModelCreator() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    ReactModelCreator.prototype.convertInstance = function (instance) {
-        if (!instance[hasConvertedSymbol]) {
-            if (this.typeInfo.inheritsBindableBase) {
-                this.setupModel(this.typeInfo, instance);
-            }
-            else {
-                this.setupObject(this.typeInfo, instance);
-            }
-            instance[hasConvertedSymbol] = true;
+    ReactModelCreator.prototype.convertInstance = function (instance, options) {
+        if (this.typeInfo.inheritsBindableBase) {
+            this.setupModel(this.typeInfo, instance, options);
+        }
+        else {
+            this.setupObject(this.typeInfo, instance, options);
         }
         return instance;
     };
-    ReactModelCreator.prototype.setupModel = function (typeInfo, model) {
+    ReactModelCreator.prototype.setupModel = function (typeInfo, model, options) {
         if (this.typeInfo.inheritsModelBase) {
             model.validator = new Validation.ModelValidator(model, typeInfo.objectRules);
         }
         model.meta = {};
         model.isSuspended = true;
-        this.setupObject(typeInfo, model);
+        this.setupObject(typeInfo, model, options);
         model.isSuspended = false;
     };
-    ReactModelCreator.prototype.setupObject = function (typeInfo, object) {
+    ReactModelCreator.prototype.setupObject = function (typeInfo, object, options) {
         for (var _i = 0, _a = typeInfo.properties; _i < _a.length; _i++) {
             var propertyInfo = _a[_i];
             if (propertyInfo.isObservable !== false) {
-                var propertyName = propertyInfo.propertyName, makeObservable = this.typeInfo.inheritsModelBase || propertyInfo.isObservable === true;
+                var propertyName = propertyInfo.propertyName, makeObservable = options.makeObservable || propertyInfo.isObservable === true;
                 var propertyInstance = void 0;
                 if (this.typeInfo.inheritsBindableBase) {
                     var model = object;

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

@@ -67,7 +67,12 @@ export interface IAutoCompleteMultiSelectProps<T> extends IAutoCompleteCommonPro
     /**
      * Optional list of ids. This will be kept in sync with the bindItems prop.
      */
-    bindIds?: (string | number)[];
+    bindIds?: (string | number)[] | Model.IPropertyInstance<number[]>;
+    /**
+     * The max no of items to record in the field info if bound to a field info class. (Defaults to 5)
+     * If the selected items exceeds this limit, the field info will be recorded as "x items selected".
+     */
+    fieldInfoLimit?: number;
 }
 export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
@@ -75,6 +80,9 @@ export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoComple
     private asyncSelectImplementation;
     private selectImplementation;
     constructor(props: IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>);
+    private bindProperty;
+    private bindIdsList?;
+    private bindIdsProperty?;
     static getBindProp<T>(props: IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>): any;
     private onKeyPress;
     private mapTArrayToOptions;

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -1,6 +1,6 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import React from 'react';
-import { EnumHelper, Misc, Utils } from '@singularsystems/neo-core';
+import { EnumHelper, Misc, Model, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import { DropDownBase } from './DropDownBase';
 import { BindPropsHelper } from '../PropTypes';
@@ -11,11 +11,27 @@ import { NeoReactTypes } from '../../Modules/Types';
 var AutoCompleteDropDown = /** @class */ (function (_super) {
     __extends(AutoCompleteDropDown, _super);
     function AutoCompleteDropDown(props) {
+        var _a;
         var _this = _super.call(this, props) || this;
         _this.asyncSelectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.AsyncSelect);
         _this.selectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.ReactSelect);
         _this.onKeyPress = _this.onKeyPress.bind(_this);
         _this.onItemSelected = _this.onItemSelected.bind(_this);
+        _this.bindProperty = (_a = _this.props.bind, (_a !== null && _a !== void 0 ? _a : _this.props.bindItems));
+        _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.bindProperty.attachedTo);
+        if (_this.props.bindIds) {
+            if (_this.props.bindIds.propertyInfo) {
+                _this.bindIdsProperty = _this.props.bindIds;
+                _this.bindIdsList = _this.props.bindIds.value;
+            }
+            else {
+                _this.bindIdsList = _this.props.bindIds;
+                if (_this.fieldInfoContainer) {
+                    console.error("Warning: Pass a property instance as 'bindIds', otherwise the display values will not be captured.");
+                    _this.fieldInfoContainer = null;
+                }
+            }
+        }
         return _this;
     }
     AutoCompleteDropDown.getBindProp = function (props) {
@@ -58,11 +74,10 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             var itemsProperty = this.props.bindItems;
             // Multi select
             var itemList = itemsProperty.value;
-            var bindIdsList = this.props.bindIds;
             if (action.action === "select-option") {
                 itemList.push({ id: action.option.value, display: action.option.label });
-                if (bindIdsList) {
-                    bindIdsList.push(action.option.value);
+                if (this.bindIdsList) {
+                    this.bindIdsList.push(action.option.value);
                 }
                 if (onItemSelected) {
                     onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item);
@@ -72,8 +87,8 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 var removeItem = itemList.find(function (c) { return c.id === action.removedValue.value; });
                 if (removeItem) {
                     itemList.remove(removeItem);
-                    if (bindIdsList) {
-                        bindIdsList.remove(removeItem.id);
+                    if (this.bindIdsList) {
+                        this.bindIdsList.remove(removeItem.id);
                     }
                 }
                 if (onItemSelected) {
@@ -82,8 +97,8 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             }
             else if (action.action === "clear") {
                 itemList.length = 0;
-                if (bindIdsList) {
-                    bindIdsList.length = 0;
+                if (this.bindIdsList) {
+                    this.bindIdsList.length = 0;
                 }
                 if (onItemSelected) {
                     onItemSelected(undefined);
@@ -105,15 +120,14 @@ 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, 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 _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, fieldInfoLimit = _m.fieldInfoLimit, otherProps = __rest(_m, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected", "fieldInfoLimit"]);
         var splitProps = BindPropsHelper.splitCommonEditorProps(otherProps);
         var nativeProps = splitProps.rest;
         var bindItemsProperty = bindItems;
         var itemList = (_a = bindItemsProperty) === null || _a === void 0 ? void 0 : _a.value;
         var bindValue = bind;
         var bindDisplayProperty = bindDisplay;
-        var bindProperty = (bindItemsProperty !== null && bindItemsProperty !== void 0 ? bindItemsProperty : bindValue);
-        var displayInfo = bindProperty.validator.getDisplayState(this.context.validationDisplayMode);
+        var displayInfo = this.bindProperty.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(nativeProps, this.context.parentType !== EditorParentType.FormGroup);
         this.displayMember = (_b = this.props.displayMember, (_b !== null && _b !== void 0 ? _b : ""));
         this.valueMember = (_c = this.props.valueMember, (_c !== null && _c !== void 0 ? _c : ""));
@@ -130,6 +144,16 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var value = null;
         if (bindItems) {
             value = itemList.map(function (c) { return ({ value: c.id, label: c.display }); });
+            if (this.fieldInfoContainer && this.bindIdsProperty) {
+                var itemListString = "";
+                if (value.length > ((fieldInfoLimit !== null && fieldInfoLimit !== void 0 ? fieldInfoLimit : 5))) {
+                    itemListString = value.length + " items selected";
+                }
+                else if (value.length > 0) {
+                    itemListString = value.map(function (c) { return c.label; }).join(", ");
+                }
+                this.setFieldInfo(this.bindIdsProperty, itemListString, bindItemsProperty.propertyInfo.readableName);
+            }
         }
         else {
             if (bindValue.value !== null) {
@@ -170,7 +194,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         }
         var userOnBlur = nativeProps.onBlur;
         nativeProps.onBlur = function (e) {
-            bindProperty.validator.hasBlurred = true;
+            _this.bindProperty.validator.hasBlurred = true;
             if (userOnBlur !== undefined) {
                 userOnBlur(e);
             }

package/dist/ReactComponents/DropDown/DropDown.js

@@ -1,7 +1,7 @@
 import { __assign, __decorate, __extends, __metadata } from "tslib";
 import * as React from 'react';
 import { BindPropsHelper } from '../PropTypes';
-import { Utils } from '@singularsystems/neo-core';
+import { Model, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import { InputHelpers } from '../InputHelpers';
 import { DropDownBase } from './DropDownBase';
@@ -12,6 +12,7 @@ var DropDown = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.listIndexSymbol = Symbol("ValueIndex");
         _this.onItemSelected = _this.onItemSelected.bind(_this);
+        _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.props.bind.attachedTo);
         return _this;
     }
     Object.defineProperty(DropDown.prototype, "items", {

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

@@ -8,8 +8,9 @@ export declare abstract class DropDownBase<T, TProps> extends ComponentBase<TPro
     protected isLoading: boolean;
     protected dataSource: Data.IAsyncDataSource<T[]> | null;
     protected cachedDataSource: Data.IDataCacheEntry | null;
+    protected fieldInfoContainer: Model.IModelFieldInfoContainer | null;
     protected getItems(itemSource: ItemSource<T>): T[];
     afterRender(): Promise<void>;
     private fieldDisplayInfo;
-    protected setFieldInfo(bindProperty: Model.IPropertyInstance, displayValue: string): void;
+    protected setFieldInfo(bindProperty: Model.IPropertyInstance, displayValue: string, readableName?: string): void;
 }

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 } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 import LookupHelper from './LookupHelper';
 var DropDownBase = /** @class */ (function (_super) {
@@ -9,6 +9,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isLoading = false;
         _this.dataSource = null;
         _this.cachedDataSource = null;
+        _this.fieldInfoContainer = null;
         _this.fieldDisplayInfo = null;
         return _this;
     }
@@ -53,7 +54,7 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.afterRender = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, bindProperty, displayValue, fieldInfo;
+            var _a, bindProperty, displayValue, readableName, fieldInfo;
             return __generator(this, function (_b) {
                 if (this.cachedDataSource) {
                     this.dataSource = this.cachedDataSource.get();
@@ -62,16 +63,12 @@ var DropDownBase = /** @class */ (function (_super) {
                     this.dataSource.fetchInitial();
                 }
                 if (this.fieldDisplayInfo) {
-                    _a = this.fieldDisplayInfo, bindProperty = _a.bindProperty, displayValue = _a.displayValue;
+                    _a = this.fieldDisplayInfo, bindProperty = _a.bindProperty, displayValue = _a.displayValue, readableName = _a.readableName;
                     this.fieldDisplayInfo = null;
-                    if (bindProperty.attachedTo instanceof Model.CriteriaBase) {
-                        fieldInfo = bindProperty.attachedTo.fieldInfo[bindProperty.propertyInfo.propertyName];
-                        if (!fieldInfo) {
-                            fieldInfo = new Model.ModelFieldInfo(bindProperty.propertyInfo.readableName, displayValue);
-                            bindProperty.attachedTo.fieldInfo[bindProperty.propertyInfo.propertyName] = fieldInfo;
-                        }
-                        else {
-                            fieldInfo.valueString = displayValue;
+                    if (this.fieldInfoContainer) {
+                        fieldInfo = this.fieldInfoContainer.setModelFieldInfo(bindProperty.propertyInfo, displayValue);
+                        if (readableName) {
+                            fieldInfo.displayName = readableName;
                         }
                     }
                 }
@@ -79,8 +76,10 @@ var DropDownBase = /** @class */ (function (_super) {
             });
         });
     };
-    DropDownBase.prototype.setFieldInfo = function (bindProperty, displayValue) {
-        this.fieldDisplayInfo = { bindProperty: bindProperty, displayValue: displayValue };
+    DropDownBase.prototype.setFieldInfo = function (bindProperty, displayValue, readableName) {
+        if (this.fieldInfoContainer) {
+            this.fieldDisplayInfo = { bindProperty: bindProperty, displayValue: displayValue, readableName: readableName };
+        }
     };
     return DropDownBase;
 }(ComponentBase));

package/dist/ReactComponents/Grid/Column.js

@@ -143,7 +143,7 @@ var Column = /** @class */ (function (_super) {
         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";
+                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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.56",
+  "version": "0.10.58",
   "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.58",
+    "@singularsystems/neo-core": "^0.10.63",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",
@@ -47,7 +47,7 @@
     "react-router-dom": "5.1.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=0.10.58",
+    "@singularsystems/neo-core": ">=0.10.63",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
     "react": ">=16.13.1",

package/styles/DatePicker.scss

@@ -124,7 +124,7 @@
         margin: 8px 5px;
     
         td {
-          padding: 13px 12px;
+          padding: 13px 0px;
         }
       }
     
@@ -132,7 +132,7 @@
         margin: 5px 8px;
     
         td {
-          padding: 8px 10px;
+          padding: 8px 0px;
         }
       }
     }

package/styles/Forms.scss

@@ -131,6 +131,11 @@ div.neo-form-group-floating {
     }
 }
 
+.react-select-bs {
+    .react-select-bs__menu {
+        z-index: 2; /* Without this, checkboxes appear in front of the drop down menu. */
+    }
+}
 .react-select-row {
     padding: 0.15rem 1rem 0.25rem 1rem;
     display: flex;