@singularsystems/neo-react 0.10.52 → 0.10.54

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,7 +49,7 @@ 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 onItemSelected = this.props.onItemSelected;
@@ -60,7 +64,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                     bindIdsList.push(action.option.value);
                 }
                 if (onItemSelected) {
-                    onItemSelected(action.option);
+                    onItemSelected(action.option.item);
                 }
             }
             else if (action.action === "remove-value") {
@@ -93,7 +97,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 this.props.bindDisplay.value = args ? args.label : "";
             }
             if (onItemSelected) {
-                onItemSelected(args);
+                onItemSelected(action.option.item);
             }
         }
     };

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

@@ -13,7 +13,7 @@ interface IDeleteButtonOptions extends IButtonOptions {
      */
     onDeleteExisting?: (item: any) => Promise<boolean>;
 }
-interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLProps<HTMLTableCellElement> {
+export interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLProps<HTMLTableCellElement> {
     /** Item to pass to edit and delete callbacks. Defaults to the current rows item */
     item?: any;
     /** Text to show in the header. */

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.d.ts

@@ -68,7 +68,7 @@ interface IEditorSelectorProps<T> {
     /** Date props if this editor is a date editor */
     dateProps?: Components.IPartialDateProps;
     /** Radio list props if this is a radio button list. */
-    radioList?: IRadioListSpecificProps;
+    radioList?: IRadioListSpecificProps<T>;
     /** File props if this editor is a file editor */
     fileProps?: IFileEditorProps;
 }
@@ -127,7 +127,7 @@ export declare class BindPropsHelper {
      * Gets the correct input control type based on the props. E.g. Input / DatePicker / Select
      * @param props Props passed to a multi type input container. E.g. FormGroup / Column
      */
-    static getFormControl(props: IEditorNormalisedProps<any, any>): React.CElement<import("./DatePicker").INeoDatePickerProps, DatePicker> | React.CElement<import("./NumberInput").INumberInputProps, NumberInput> | React.CElement<import("./DropDown/DropDown").IDropDownProps<unknown>, DropDown<unknown>> | React.CElement<IFileEditorProps, FileInput> | React.CElement<import("./Input").IInputProps, Input> | React.CElement<import("./RadioList").IRadioListProps, RadioList>;
+    static getFormControl(props: IEditorNormalisedProps<any, any>): React.CElement<import("./DatePicker").INeoDatePickerProps, DatePicker> | React.CElement<import("./NumberInput").INumberInputProps, NumberInput> | React.CElement<import("./DropDown/DropDown").IDropDownProps<unknown>, DropDown<unknown>> | React.CElement<IFileEditorProps, FileInput> | React.CElement<import("./Input").IInputProps, Input> | React.CElement<import("./RadioList").IRadioListProps<unknown>, RadioList<unknown>>;
     static getControlType(props: IEditorNormalisedProps<any, any>): ControlType;
     static getCheckBoxType(props: IEditorNormalisedProps<any, any>, instance?: any): CheckboxType;
     /**

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/ReactComponents/RadioList.d.ts

@@ -2,22 +2,22 @@ import React from 'react';
 import { IBindableEditorProps } from './PropTypes';
 import ComponentBase from './ComponentBase';
 import { FormContext } from './FormContext';
-export interface IRadioListSpecificProps {
+export interface IRadioListSpecificProps<T> {
     /** List of items to show. */
-    items?: any[];
+    items?: T[];
     /** Enum to show as a radio button list. */
     enumType?: any;
     /** True if the radio buttons should be displayed inline (horizontally). */
     inline?: boolean;
     /** Property name to use for the id. Only applies when using items. */
-    valueMember?: string | undefined;
+    valueMember?: keyof T;
     /** Property name to use for the radio button text. Only applies when using items. */
-    displayMember?: string | undefined;
+    displayMember?: keyof T;
 }
-export interface IRadioListProps extends IBindableEditorProps<HTMLSelectElement> {
-    radioList: IRadioListSpecificProps;
+export interface IRadioListProps<T> extends IBindableEditorProps<HTMLSelectElement> {
+    radioList: IRadioListSpecificProps<T>;
 }
-export default class RadioList extends ComponentBase<IRadioListProps> {
+export default class RadioList<T> extends ComponentBase<IRadioListProps<T>> {
     static contextType: React.Context<import("./FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     private previousList?;

package/dist/Routing/MenuRoute.d.ts

@@ -1,8 +1,9 @@
 import ViewBase from '../Views/ViewBase';
 import { Routing } from '@singularsystems/neo-core';
+import { RouteParameterObject } from './IRouteParameter';
 export interface IMenuRoute extends Routing.IMenuRoute {
 }
-export declare class MenuRoute<TParams> implements IMenuRoute {
+export declare class MenuRoute<TParams extends RouteParameterObject<TParams>> implements IMenuRoute {
     /**
      * Creates a menu route with view parameters specified.
      * @param baseRoute Path and component

package/dist/Routing/NavigationHelper.d.ts

@@ -2,7 +2,8 @@ import ViewBase from '../Views/ViewBase';
 import { RouteComponentProps } from 'react-router';
 import { RoutingState } from './RoutingState';
 import { INavigationHelper as INeoNavigationHelper } from '@singularsystems/neo-core/dist/Routing/INavigationHelper';
-export declare type ViewConstructor<TParams> = new (...args: any) => ViewBase<any, TParams>;
+import { RouteParameterObject } from './IRouteParameter';
+export declare type ViewConstructor<TParams extends RouteParameterObject<TParams>> = new (...args: any) => ViewBase<any, TParams>;
 export declare type ParamValues<TParams> = {
     [P in keyof TParams]?: number | string | null;
 };
@@ -13,13 +14,13 @@ export interface INavigationHelper extends INeoNavigationHelper {
      * @param view View component which inherits from view base.
      * @param paramValues View params to include in the url to pass to the view.
      */
-    navigateToView<TParams>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): void;
+    navigateToView<TParams extends RouteParameterObject<TParams>>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): void;
     /**
      * Gets the full path for a view including view parameter values.
      * @param view View component which inherits from view base.
      * @param paramValues View params to include in the url to pass to the view.
      */
-    getPathForView<TParams>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): string;
+    getPathForView<TParams extends RouteParameterObject<TParams>>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): string;
     /**
      * Gets the path of the currently rendered view, without parameter components.
      */
@@ -33,8 +34,8 @@ export default class NavigationHelper implements INavigationHelper {
     private routingState;
     constructor(routingState: RoutingState);
     navigateInternal(url: string, replace?: boolean): void;
-    navigateToView<TParams>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): void;
-    getPathForView<TParams>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): string;
+    navigateToView<TParams extends RouteParameterObject<TParams>>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): void;
+    getPathForView<TParams extends RouteParameterObject<TParams>>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): string;
     getCurrentViewPath(): string;
     get currentRouteProps(): RouteComponentProps<{}, import("react-router").StaticContext, import("history").History.PoorMansUnknown>;
 }

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.52",
+  "version": "0.10.54",
   "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"
   }
 }