@singularsystems/neo-react 0.10.58 → 0.10.61

package/dist/ReactComponents/DropDown/DropDown.js

@@ -118,9 +118,12 @@ var DropDown = /** @class */ (function (_super) {
             }
             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;
+            if (valueIsBlank) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, "select-no-value");
+            }
             control =
                 React.createElement("select", __assign({ value: valueIsBlank ? "" : value, onChange: this.onItemSelected, ref: splitProps.editor.inputElement }, domProps),
-                    addBlankItem && React.createElement("option", null, nullText),
+                    addBlankItem && React.createElement("option", { className: "option-default" }, nullText),
                     items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }));
         }
         return (InputHelpers.surroundWithInputGroup(control, splitProps.editor));

package/dist/ReactComponents/Form.js

@@ -40,7 +40,7 @@ var Form = /** @class */ (function (_super) {
                     var onClose = this.disposeReaction.bind(this);
                     var codeModal_1 = ModalUtils.showModal(this.props.invalidSummaryTitle || "Invalid data", React.createElement(Observer, null, function () {
                         return React.createElement("div", null,
-                            _this.props.invalidSummaryText || "Cannot continue due to the following errors:",
+                            _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
                             React.createElement(ValidationSummary, { graph: Validation.getValidationSummary(model), hideTopLevelTitle: !(model instanceof Array) }));
                     }), { onClose: onClose, closeButton: { text: "Ok", onClick: onClose } });
                     // Listen for when isValid changes to true, in case there is an async rule running.

package/dist/ReactComponents/Grid/Column.js

@@ -163,7 +163,7 @@ var Column = /** @class */ (function (_super) {
             if (editorProps.isReadOnly && !editorProps.requiresGroup) {
                 var rawValue = editorProps.bind.value;
                 if (this.controlType == ControlType.Number) {
-                    displayValue = this.numFormatState(editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
+                    displayValue = this.numFormatState(editorProps.bind.propertyInfo, editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
                 }
                 else if (this.controlType == ControlType.Date) {
                     displayValue = DateUtils.format(rawValue, props.dateProps ? props.dateProps.formatString : undefined);
@@ -197,7 +197,7 @@ var Column = /** @class */ (function (_super) {
         var hasSummary = (colProps.sum && !!props.bind) || colProps.footerContent;
         return (React.createElement("th", __assign({}, domProps), hasSummary &&
             React.createElement(Observer, null, function () { return colProps.footerContent ? colProps.footerContent(_this.context.dataView.filteredItems) :
-                _this.numFormatState(props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
+                _this.numFormatState(props.bind.propertyInfo, props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
     };
     Column.isColumnComponent = true;
     Column.contextType = GridContext;

package/dist/ReactComponents/NumberInput.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IBindableEditorProps } from './PropTypes';
 import { FormContext } from './FormContext';
-import { Misc } from '@singularsystems/neo-core';
+import { Misc, Model } from '@singularsystems/neo-core';
 import Decimal from 'decimal.js-light';
 import ComponentBase from './ComponentBase';
 export interface INumberInputSpecificProps {
@@ -25,10 +25,14 @@ export declare class FormatState {
     isPercent: boolean;
     hasExternalPercentSymbol: boolean;
     formatString: string;
+    /** How many decimals the value is allowed. */
+    allowedDecimals: number;
     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;
+    constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, 
+    /** How many decimals the value is allowed. */
+    allowedDecimals: number, zeroText?: string | undefined, useNative?: boolean | undefined);
+    static create(propertyInfo: Model.PropertyInfo, numericType: Misc.DataType, numProps?: INumberInputSpecificProps, appendText?: string): FormatState;
     getFormattedValue(value?: number | Decimal | null): string;
 }
 export default class NumberInput extends ComponentBase<INumberInputProps> {

package/dist/ReactComponents/NumberInput.js

@@ -9,37 +9,49 @@ import { observer } from 'mobx-react';
 import memoize from 'memoize-one';
 import ComponentBase from './ComponentBase';
 var FormatState = /** @class */ (function () {
-    function FormatState(isPercent, hasExternalPercentSymbol, formatString, zeroText, useNative) {
+    function FormatState(isPercent, hasExternalPercentSymbol, formatString, 
+    /** How many decimals the value is allowed. */
+    allowedDecimals, zeroText, useNative) {
         this.isPercent = isPercent;
         this.hasExternalPercentSymbol = hasExternalPercentSymbol;
         this.formatString = formatString;
+        this.allowedDecimals = allowedDecimals;
         this.zeroText = zeroText;
         this.useNative = useNative;
     }
-    FormatState.create = function (numericType, numProps, appendText) {
-        var _a, _b, _c, _d;
+    FormatState.create = function (propertyInfo, numericType, numProps, appendText) {
+        var _a, _b, _c, _d, _e, _f, _g;
         var isPercent = false;
         var hasExternalPercentSymbol = false;
         var formatString = numProps ? numProps.formatString : "";
+        var displayDecimals = 2;
+        if ((formatString && formatString.indexOf("%") >= 0)
+            || appendText === "%"
+            || ((_a = numProps) === null || _a === void 0 ? void 0 : _a.format) === Misc.NumberFormat.PercentDecimals || ((_b = numProps) === null || _b === void 0 ? void 0 : _b.format) === Misc.NumberFormat.PercentNoDecimals) {
+            isPercent = true;
+        }
+        if (propertyInfo.allowedDecimals !== undefined) {
+            displayDecimals = propertyInfo.allowedDecimals - (isPercent ? 2 : 0);
+        }
+        else if ((_c = numProps) === null || _c === void 0 ? void 0 : _c.formatString) {
+            displayDecimals = NumberUtils.getDecimalPlaces(numProps.formatString);
+        }
         if (!formatString) {
             if (numProps && numProps.format) {
-                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol);
+                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol, displayDecimals);
             }
             else {
                 var hasDecimals = numericType === Misc.DataType.Float || numericType === Misc.DataType.Decimal;
-                var format = ((_a = numProps) === null || _a === void 0 ? void 0 : _a.currencySymbol) ?
+                var format = ((_d = numProps) === null || _d === void 0 ? void 0 : _d.currencySymbol) ?
                     (hasDecimals ? Misc.NumberFormat.CurrencyDecimals : Misc.NumberFormat.CurrencyNoDecimals) :
                     (hasDecimals ? Misc.NumberFormat.Decimals : Misc.NumberFormat.NoDecimals);
-                formatString = NumberUtils.getFormatString(format, (_b = numProps) === null || _b === void 0 ? void 0 : _b.currencySymbol);
+                formatString = NumberUtils.getFormatString(format, (_e = numProps) === null || _e === void 0 ? void 0 : _e.currencySymbol, displayDecimals);
             }
         }
         if (formatString.indexOf("%") < 0 && appendText === "%") {
             hasExternalPercentSymbol = true;
         }
-        if (formatString.indexOf("%") >= 0 || appendText === "%") {
-            isPercent = true;
-        }
-        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);
+        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, displayDecimals + (isPercent ? 2 : 0), (_f = numProps) === null || _f === void 0 ? void 0 : _f.zeroText, (_g = numProps) === null || _g === void 0 ? void 0 : _g.native);
     };
     FormatState.prototype.getFormattedValue = function (value) {
         if (!value && this.zeroText !== undefined) {
@@ -112,7 +124,7 @@ var NumberInput = /** @class */ (function (_super) {
         }
         else {
             if (!this.props.numProps || this.props.numProps.autoRound !== false) {
-                newValue = NumberUtils.roundUsingFormat(newValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
+                newValue = NumberUtils.round(newValue, this.formatState.allowedDecimals);
             }
             if (this.numericType === Misc.DataType.Decimal) {
                 this.props.bind.value = newValue;
@@ -147,7 +159,7 @@ var NumberInput = /** @class */ (function (_super) {
         }
         else {
             if (element.readOnly || !this.props.numProps || this.props.numProps.autoRound !== false) {
-                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
+                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol, this.formatState.allowedDecimals);
             }
             else {
                 if (this.formatState.isPercent && NumberUtils.transformPercent) {
@@ -222,7 +234,7 @@ var NumberInput = /** @class */ (function (_super) {
         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);
+        this.formatState = this.recalcFormatState(this.props.bind.propertyInfo, this.numericType, splitProps.numProps, editorProps.appendText);
         this.isReadOnly = domProps.readOnly === true;
         if (editorProps.inputElement) {
             this.inputElement = editorProps.inputElement;

package/dist/Routing/ViewParameter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IRouteParameter } from './IRouteParameter';
 import { IViewParameterListInternal } from './ViewParameterList';
 import { Model } from '@singularsystems/neo-core';
@@ -16,6 +17,12 @@ export interface IViewParameter {
      * Used by the breadcrumb.
      */
     description: string;
+    /**
+     * Sets the description, and an optional list of prefixes.
+     * @param description Description of the current value.
+     * @param prefixes Function that returns prefixes for this breadcrumb item. The previous prefixes are passed into the function.
+     */
+    setDescription(description: string, getPrefixes?: (currentPrefixes: IViewParameterPrefix[]) => IViewParameterPrefix[]): void;
     /**
      * Returns value as a nullable int.
      */
@@ -41,6 +48,7 @@ export declare class ViewParameter implements IViewParameter {
     private hasPendingValue;
     private pendingValue;
     private _value;
+    prefixes: IViewParameterPrefix[];
     constructor(parent: IViewParameterListInternal, name: string, routeParameter: IRouteParameter);
     bindTo(propertyOrCallback: Model.IPropertyInstance | (() => (string | number | null | undefined))): void;
     get value(): number | string | null;
@@ -49,6 +57,7 @@ export declare class ViewParameter implements IViewParameter {
     _description: string;
     get description(): string;
     set description(value: string);
+    setDescription(description: string, getPrefixes?: (currentPrefixes: IViewParameterPrefix[]) => IViewParameterPrefix[]): void;
     asNullableInt(): number | null;
     asString(): string;
     /** Updates the current value, and returns true if the value changed. */
@@ -58,3 +67,14 @@ export declare class ViewParameter implements IViewParameter {
     }): string;
     get latestValue(): string | null;
 }
+interface IViewParameterPrefix {
+    /** Label to show on breadcrumb. */
+    label: string;
+    /** Value to use in the breadcrumb link. Clicking on the link will set the view parameter to this value. */
+    value?: number | string | null;
+    /** Custom link to use in the breadcrumb. */
+    link?: string;
+    /** Click event for the breadcrumb. */
+    onClick?: (e: React.MouseEvent) => void;
+}
+export {};

package/dist/Routing/ViewParameter.js

@@ -8,6 +8,7 @@ var ViewParameter = /** @class */ (function () {
         this.hasPendingValue = false;
         this.pendingValue = null;
         this._value = null;
+        this.prefixes = [];
         this._description = "";
     }
     ViewParameter.prototype.bindTo = function (propertyOrCallback) {
@@ -28,7 +29,6 @@ var ViewParameter = /** @class */ (function () {
             if (stringValue !== this._value) {
                 this.hasPendingValue = true;
                 this.pendingValue = stringValue;
-                this._description = "";
                 this.parent.setUrl(this);
             }
         },
@@ -55,6 +55,10 @@ var ViewParameter = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ViewParameter.prototype.setDescription = function (description, getPrefixes) {
+        this.prefixes = getPrefixes ? getPrefixes(this.prefixes) : [];
+        this.description = description;
+    };
     ViewParameter.prototype.asNullableInt = function () {
         if (this._value) {
             return parseInt(this._value, 10);
@@ -66,13 +70,17 @@ var ViewParameter = /** @class */ (function () {
     };
     /** Updates the current value, and returns true if the value changed. */
     ViewParameter.prototype.update = function (value) {
-        if (value)
+        if (value) {
             value = decodeURIComponent(value);
+        }
         if (value != this._value) {
             this.hasPendingValue = false;
             this.pendingValue = value;
-            this._description = "";
             this._value = value;
+            if (!value) {
+                this._description = "";
+                this.prefixes = [];
+            }
             return true;
         }
         return false;

package/dist/Routing/ViewParameterList.js

@@ -28,6 +28,22 @@ var ViewParameterList = /** @class */ (function () {
         for (var _i = 0, _b = this.params; _i < _b.length; _i++) {
             var viewParam = _b[_i];
             if (!viewParam.routeParameter.isQuery) {
+                if (!upTo) {
+                    for (var _c = 0, _d = viewParam.prefixes; _c < _d.length; _c++) {
+                        var prefix = _d[_c];
+                        var breadcrumbItem = new BreadCrumbItem(prefix.label);
+                        if (prefix.onClick) {
+                            breadcrumbItem.onClick = prefix.onClick;
+                        }
+                        else if (prefix.link) {
+                            breadcrumbItem.link = prefix.link;
+                        }
+                        else if (prefix.value) {
+                            breadcrumbItem.link = paramPath + "/" + prefix.value;
+                        }
+                        breadCrumbs.push(breadcrumbItem);
+                    }
+                }
                 paramPath += viewParam.getParamString(state);
                 if ((_a = viewParam.routeParameter.selection, (_a !== null && _a !== void 0 ? _a : BreadCrumbSelectMode.Default)) === BreadCrumbSelectMode.Default) {
                     selectablePath = paramPath;

package/dist/Views/ViewBase.d.ts

@@ -46,7 +46,7 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     /**
      * viewParamsUpdated() is called when the component is mounted, and whenever a route parameter or query parameter gets a changed value.
      */
-    protected viewParamsUpdated(): void;
+    protected viewParamsUpdated(): void | Promise<void>;
     /** Gets the parent breadcrumbs, and the breadcrumb for this view. */
     protected getBreadCrumbStart(): BreadCrumbItem[];
     /**

package/dist/Views/ViewBase.js

@@ -1,6 +1,6 @@
-import { __decorate, __extends, __metadata } from "tslib";
+import { __awaiter, __decorate, __extends, __generator, __metadata } from "tslib";
 import React from 'react';
-import { observable } from 'mobx';
+import { observable, runInAction } from 'mobx';
 import { Misc } from '@singularsystems/neo-core';
 import { ViewParameterList } from '../Routing/ViewParameterList';
 import { ViewState } from './ViewState';
@@ -79,9 +79,20 @@ var ViewBase = /** @class */ (function (_super) {
         this.disposeViewModel();
     };
     ViewBase.prototype.updateViewParams = function (match) {
-        if (this.viewState.viewParams.update(match)) {
-            this.viewParamsUpdated();
-        }
+        var _this = this;
+        runInAction(function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.viewState.viewParams.update(match)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, Promise.resolve(this.viewParamsUpdated())];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); });
     };
     /**
      * viewParamsUpdated() is called when the component is mounted, and whenever a route parameter or query parameter gets a changed value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.58",
+  "version": "0.10.61",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-router-dom": "5.1.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=0.10.63",
+    "@singularsystems/neo-core": ">=0.10.69",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
     "react": ">=16.13.1",