@singularsystems/neo-react 0.10.53 → 0.10.55

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

@@ -8,6 +8,7 @@ import { FormContext } from '../FormContext';
 interface IOption {
     value: string | number;
     label: string;
+    item?: any;
 }
 interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption, true> {
     /**
@@ -74,6 +75,7 @@ export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoComple
     private asyncSelectImplementation;
     private selectImplementation;
     constructor(props: IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>);
+    static getBindProp<T>(props: IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>): any;
     private onKeyPress;
     private mapTArrayToOptions;
     private onItemSelected;

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -18,6 +18,10 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         _this.onItemSelected = _this.onItemSelected.bind(_this);
         return _this;
     }
+    AutoCompleteDropDown.getBindProp = function (props) {
+        var _a;
+        return _a = props.bind, (_a !== null && _a !== void 0 ? _a : props.bindItems);
+    };
     AutoCompleteDropDown.prototype.onKeyPress = function (searchValue, dataReceived) {
         var _this = this;
         var _a, _b;
@@ -45,9 +49,10 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         if (items.length) {
             this.findMembers(items[0]);
         }
-        return items.map(function (item) { return (__assign(__assign({}, item), { value: item[_this.valueMember], label: item[_this.displayMember] })); });
+        return items.map(function (item) { return (__assign(__assign({}, item), { item: item, value: item[_this.valueMember], label: item[_this.displayMember] })); });
     };
     AutoCompleteDropDown.prototype.onItemSelected = function (args, action) {
+        var _a, _b;
         var onItemSelected = this.props.onItemSelected;
         if (this.props.bindItems) {
             var itemsProperty = this.props.bindItems;
@@ -60,7 +65,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                     bindIdsList.push(action.option.value);
                 }
                 if (onItemSelected) {
-                    onItemSelected(action.option);
+                    onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item);
                 }
             }
             else if (action.action === "remove-value") {
@@ -93,7 +98,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 this.props.bindDisplay.value = args ? args.label : "";
             }
             if (onItemSelected) {
-                onItemSelected(args);
+                onItemSelected((_b = args) === null || _b === void 0 ? void 0 : _b.item);
             }
         }
     };

package/dist/ReactComponents/Input.d.ts

@@ -3,7 +3,7 @@ import { IBindableEditorProps } from './PropTypes';
 import { Components } from '@singularsystems/neo-core';
 import ComponentBase from './ComponentBase';
 import { FormContext } from './FormContext';
-declare type InputType = "text" | "password" | "checkbox" | "switch";
+declare type InputType = "text" | "password" | "checkbox" | "switch" | "tel" | "email";
 export interface IInputSpecificProps {
     /** Type of input to use */
     type?: InputType;

package/dist/ReactComponents/NumberInput.d.ts

@@ -15,6 +15,8 @@ export interface INumberInputSpecificProps {
     autoRound?: boolean;
     /** Text to display if the value is zero or null. E.g. '-' */
     zeroText?: string;
+    /** Set to true to use the browsers native numeric input control. Note: only decimal place formatting is supported in this mode. */
+    native?: boolean;
 }
 export interface INumberInputProps extends IBindableEditorProps<HTMLInputElement> {
     numProps?: INumberInputSpecificProps;
@@ -24,7 +26,8 @@ export declare class FormatState {
     hasExternalPercentSymbol: boolean;
     formatString: string;
     zeroText?: string | undefined;
-    constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, zeroText?: string | undefined);
+    useNative?: boolean | undefined;
+    constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, zeroText?: string | undefined, useNative?: boolean | undefined);
     static create(numericType: Misc.DataType, numProps?: INumberInputSpecificProps, appendText?: string): FormatState;
     getFormattedValue(value?: number | Decimal | null): string;
 }

package/dist/ReactComponents/NumberInput.js

@@ -9,14 +9,15 @@ import { observer } from 'mobx-react';
 import memoize from 'memoize-one';
 import ComponentBase from './ComponentBase';
 var FormatState = /** @class */ (function () {
-    function FormatState(isPercent, hasExternalPercentSymbol, formatString, zeroText) {
+    function FormatState(isPercent, hasExternalPercentSymbol, formatString, zeroText, useNative) {
         this.isPercent = isPercent;
         this.hasExternalPercentSymbol = hasExternalPercentSymbol;
         this.formatString = formatString;
         this.zeroText = zeroText;
+        this.useNative = useNative;
     }
     FormatState.create = function (numericType, numProps, appendText) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var isPercent = false;
         var hasExternalPercentSymbol = false;
         var formatString = numProps ? numProps.formatString : "";
@@ -38,7 +39,7 @@ var FormatState = /** @class */ (function () {
         if (formatString.indexOf("%") >= 0 || appendText === "%") {
             isPercent = true;
         }
-        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, (_c = numProps) === null || _c === void 0 ? void 0 : _c.zeroText);
+        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, (_c = numProps) === null || _c === void 0 ? void 0 : _c.zeroText, (_d = numProps) === null || _d === void 0 ? void 0 : _d.native);
     };
     FormatState.prototype.getFormattedValue = function (value) {
         if (!value && this.zeroText !== undefined) {
@@ -52,7 +53,7 @@ var FormatState = /** @class */ (function () {
                 if (this.hasExternalPercentSymbol) {
                     value *= 100;
                 }
-                return NumberUtils.format(value, this.formatString);
+                return this.useNative ? NumberUtils.formatRaw(value, this.formatString, false) : NumberUtils.format(value, this.formatString);
             }
             else {
                 return value;
@@ -141,13 +142,8 @@ var NumberInput = /** @class */ (function (_super) {
         this.hasFocus = true;
         var numberValue = this.getBindValueAsNumber();
         var stringValue;
-        if (!numberValue) {
-            if ((this.props.bind.propertyInfo.allowNulls || element.readOnly) && numberValue === 0) {
-                stringValue = "0";
-            }
-            else {
-                stringValue = "";
-            }
+        if (numberValue === null || numberValue === undefined) {
+            stringValue = "";
         }
         else {
             if (element.readOnly || !this.props.numProps || this.props.numProps.autoRound !== false) {
@@ -218,10 +214,12 @@ var NumberInput = /** @class */ (function (_super) {
         }
     };
     NumberInput.prototype.render = function () {
+        var _a;
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context, this.onBlur, this.onFocus);
         domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control" : "neo-forms-editor", "numeric-input");
         var editorProps = splitProps.editor;
+        var useNative = (_a = splitProps.numProps) === null || _a === void 0 ? void 0 : _a.native;
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
         this.formatState = this.recalcFormatState(this.numericType, splitProps.numProps, editorProps.appendText);
@@ -235,7 +233,11 @@ var NumberInput = /** @class */ (function (_super) {
                 this.inputElement.current.value = this.formatState.getFormattedValue(editorProps.bind.value);
             }
         }
-        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: "text", onChange: this.onChanged, ref: this.inputElement })), editorProps));
+        if (useNative && !domProps.step) {
+            var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
+            domProps.step = decimals === 0 ? "1" : "0." + "0".repeat(decimals - 1) + "1";
+        }
+        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps));
     };
     NumberInput.contextType = FormContext;
     NumberInput = __decorate([

package/dist/ReactComponents/PropTypes.js

@@ -113,18 +113,34 @@ var BindPropsHelper = /** @class */ (function () {
     BindPropsHelper.normaliseContainerProps = function (component, props, inGroup, isBootstrap) {
         // Split flattened props into components.
         if (isBootstrap === void 0) { isBootstrap = true; }
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         var splitProps = this.splitCommonEditorProps(props);
-        var _c = splitProps.rest, 
+        var _f = splitProps.rest, 
         // Bindable editor props
-        bind = _c.bind, display = _c.display, placeholder = _c.placeholder, 
+        bind = _f.bind, display = _f.display, placeholder = _f.placeholder, 
         // Editor selector props
-        select = _c.select, input = _c.input, dateProps = _c.dateProps, numProps = _c.numProps, fileProps = _c.fileProps, radioList = _c.radioList, 
+        select = _f.select, input = _f.input, dateProps = _f.dateProps, numProps = _f.numProps, fileProps = _f.fileProps, radioList = _f.radioList, 
         // Common container props
-        label = _c.label, editorProps = _c.editorProps, editorTooltip = _c.editorTooltip, editorClassName = _c.editorClassName, editorStyle = _c.editorStyle, suppressDefaultContent = _c.suppressDefaultContent, bindContext = _c.bindContext, 
+        label = _f.label, editorProps = _f.editorProps, editorTooltip = _f.editorTooltip, editorClassName = _f.editorClassName, editorStyle = _f.editorStyle, suppressDefaultContent = _f.suppressDefaultContent, bindContext = _f.bindContext, 
         // Container dom
-        containerDom = __rest(_c, ["bind", "display", "placeholder", "select", "input", "dateProps", "numProps", "fileProps", "radioList", "label", "editorProps", "editorTooltip", "editorClassName", "editorStyle", "suppressDefaultContent", "bindContext"]);
+        containerDom = __rest(_f, ["bind", "display", "placeholder", "select", "input", "dateProps", "numProps", "fileProps", "radioList", "label", "editorProps", "editorTooltip", "editorClassName", "editorStyle", "suppressDefaultContent", "bindContext"]);
         var bindOrDisplay = BindPropsHelper.getBindProperty(props);
+        if (!bindOrDisplay) {
+            var child = containerDom.children;
+            var childBind = void 0;
+            if (child) {
+                if ((_a = child.type) === null || _a === void 0 ? void 0 : _a.getBindProp) {
+                    childBind = (_b = child.type) === null || _b === void 0 ? void 0 : _b.getBindProp(child.props);
+                }
+                else {
+                    childBind = (_c = child.props) === null || _c === void 0 ? void 0 : _c.bind;
+                }
+                if (childBind) {
+                    bindOrDisplay = childBind;
+                    bindContext = bindOrDisplay;
+                }
+            }
+        }
         if (bindOrDisplay && bindOrDisplay.propertyInfo.isReadOnly)
             splitProps.editor.isReadOnly = true;
         if (!props.bind && props.display)
@@ -145,7 +161,7 @@ var BindPropsHelper = /** @class */ (function () {
         }
         return {
             bind: bindOrDisplay,
-            editor: __assign({ bind: bindOrDisplay, placeholder: this.getPlaceholderText(placeholder, (_a = bindOrDisplay) === null || _a === void 0 ? void 0 : _a.propertyInfo) }, splitProps.editor),
+            editor: __assign({ bind: bindOrDisplay, placeholder: this.getPlaceholderText(placeholder, (_d = bindOrDisplay) === null || _d === void 0 ? void 0 : _d.propertyInfo) }, splitProps.editor),
             editorDom: editorProps,
             container: { label: label, editorTooltip: editorTooltip, editorClassName: editorClassName, editorStyle: editorStyle, bindContext: bindContext, suppressDefaultContent: suppressDefaultContent },
             select: select,
@@ -155,7 +171,7 @@ var BindPropsHelper = /** @class */ (function () {
             fileProps: fileProps,
             radioList: radioList,
             inGroup: inGroup,
-            uniqueID: ((_b = bindOrDisplay) === null || _b === void 0 ? void 0 : _b.uniqueID) + "!" + component.uniqueId,
+            uniqueID: ((_e = bindOrDisplay) === null || _e === void 0 ? void 0 : _e.uniqueID) + "!" + component.uniqueId,
             containerDom: containerDom,
             isBootstrap: isBootstrap
         };

package/dist/Views/ViewComponentBase.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 import { ITaskRunner } from '@singularsystems/neo-core';
 import { IViewModel } from './IViewModel';
+import { valueOrLazy } from './ViewModelBase';
 interface IComponentProps {
     taskRunner?: ITaskRunner;
 }
 export default class ViewComponentBase<TProps extends IComponentProps, TViewModel extends IViewModel> extends React.Component<TProps> {
-    constructor(props: TProps, viewModelType: new () => TViewModel);
+    /**
+     * Creates a view component.
+     * @param props Component props.
+     * @param viewModel Instance of view model, or view model type, or callback which returns a view model. Taskrunner will be set only if passing in VM type.
+     */
+    constructor(props: TProps, viewModel: valueOrLazy<TViewModel>);
     viewModel: TViewModel;
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/Views/ViewComponentBase.js

@@ -1,13 +1,16 @@
 import { __extends } from "tslib";
 import React from 'react';
+import ViewModelBase from './ViewModelBase';
 var ViewComponentBase = /** @class */ (function (_super) {
     __extends(ViewComponentBase, _super);
-    function ViewComponentBase(props, viewModelType) {
+    /**
+     * Creates a view component.
+     * @param props Component props.
+     * @param viewModel Instance of view model, or view model type, or callback which returns a view model. Taskrunner will be set only if passing in VM type.
+     */
+    function ViewComponentBase(props, viewModel) {
         var _this = _super.call(this, props) || this;
-        _this.viewModel = new viewModelType();
-        if (props.taskRunner) {
-            _this.viewModel.taskRunner = props.taskRunner;
-        }
+        _this.viewModel = ViewModelBase.create(viewModel, props.taskRunner);
         return _this;
     }
     ViewComponentBase.prototype.componentDidMount = function () {

package/dist/Views/ViewModelBase.d.ts

@@ -27,6 +27,7 @@ export default abstract class ViewModelBase extends ModelBase implements IViewMo
     }): TViewModel;
     /**
      * Registers a child view model that will be disposed when this view model is disposed.
+     * You must manually pass the current VMs task runner to the new viewmodel instance.
      */
     registerViewModel<TViewModel extends IViewModel>(viewModel: TViewModel): TViewModel;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.53",
+  "version": "0.10.55",
   "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.54",
+    "@singularsystems/neo-core": "^0.10.58",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",
@@ -45,5 +45,14 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "5.1.0"
+  },
+  "peerDependencies": {
+    "@singularsystems/neo-core": ">=0.10.58",
+    "axios": ">=0.21.1",
+    "inversify": ">=5.0.1",
+    "react": ">=16.13.1",
+    "react-dom": ">=16.13.1",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0"
   }
 }