@singularsystems/neo-react 1.0.0-alpha.2 → 1.0.0-beta.0

package/dist/ReactComponents/NumberInput.js

@@ -1,246 +1,260 @@
-import { __assign, __decorate, __extends, __metadata } from "tslib";
-import * as React from 'react';
-import { BindPropsHelper } from './PropTypes';
-import { FormContext } from './FormContext';
-import { Misc, NumberUtils, Utils } from '@singularsystems/neo-core';
-import Decimal from 'decimal.js-light';
-import { InputHelpers } from './InputHelpers';
-import { observer } from 'mobx-react';
-import memoize from 'memoize-one';
-import ComponentBase from './ComponentBase';
-var FormatState = /** @class */ (function () {
-    function FormatState(isPercent, hasExternalPercentSymbol, formatString, zeroText) {
-        this.isPercent = isPercent;
-        this.hasExternalPercentSymbol = hasExternalPercentSymbol;
-        this.formatString = formatString;
-        this.zeroText = zeroText;
-    }
-    FormatState.create = function (numericType, numProps, appendText) {
-        var isPercent = false;
-        var hasExternalPercentSymbol = false;
-        var formatString = numProps ? numProps.formatString : "";
-        if (!formatString) {
-            if (numProps && numProps.format) {
-                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol);
-            }
-            else {
-                var hasDecimals = numericType === Misc.DataType.Float || numericType === Misc.DataType.Decimal;
-                var format = (numProps === null || numProps === void 0 ? void 0 : numProps.currencySymbol) ?
-                    (hasDecimals ? Misc.NumberFormat.CurrencyDecimals : Misc.NumberFormat.CurrencyNoDecimals) :
-                    (hasDecimals ? Misc.NumberFormat.Decimals : Misc.NumberFormat.NoDecimals);
-                formatString = NumberUtils.getFormatString(format, numProps === null || numProps === void 0 ? void 0 : numProps.currencySymbol);
-            }
-        }
-        if (formatString.indexOf("%") < 0 && appendText === "%") {
-            hasExternalPercentSymbol = true;
-        }
-        if (formatString.indexOf("%") >= 0 || appendText === "%") {
-            isPercent = true;
-        }
-        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, numProps === null || numProps === void 0 ? void 0 : numProps.zeroText);
-    };
-    FormatState.prototype.getFormattedValue = function (value) {
-        if (!value && this.zeroText !== undefined) {
-            return this.zeroText;
-        }
-        if (value !== undefined && value !== null) {
-            if (value instanceof Misc.Globals.decimalType) {
-                value = value.toNumber();
-            }
-            if (typeof value === "number") {
-                if (this.hasExternalPercentSymbol) {
-                    value *= 100;
-                }
-                return NumberUtils.format(value, this.formatString);
-            }
-            else {
-                return value;
-            }
-        }
-        else {
-            return "";
-        }
-    };
-    return FormatState;
-}());
-export { FormatState };
-// Taken from https://github.com/MikeMcl/decimal.js-light/blob/master/decimal.js since it is not exported.
-var validDecimalRegex = /^(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i;
-var NumberInput = /** @class */ (function (_super) {
-    __extends(NumberInput, _super);
-    function NumberInput(props) {
-        var _this = _super.call(this, props) || this;
-        _this.hasFocus = false;
-        _this.isReadOnly = false;
-        _this.recalcFormatState = memoize(FormatState.create);
-        _this.numericType = _this.props.bind.propertyInfo.propertyType;
-        _this.inputElement = React.createRef();
-        _this.onChanged = _this.onChanged.bind(_this);
-        _this.onFocus = _this.onFocus.bind(_this);
-        _this.onBlur = _this.onBlur.bind(_this);
-        _this.onKeyDown = _this.onKeyDown.bind(_this);
-        return _this;
-    }
-    NumberInput.prototype.onChanged = function (e) {
-        var newValue;
-        if (e.target.value !== "") {
-            var testValue = e.target.value;
-            if (testValue[0] === "-") {
-                testValue = testValue.substring(1);
-            }
-            if (isNaN(parseFloat(testValue)) || !validDecimalRegex.test(testValue)) {
-                return;
-            }
-        }
-        if (e.target.value == "") {
-            newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
-        }
-        else if (this.formatState.isPercent && NumberUtils.transformPercent) {
-            newValue = new Decimal(e.target.value).dividedBy(100);
-        }
-        else if (this.numericType === Misc.DataType.Float || this.numericType === Misc.DataType.Decimal) {
-            newValue = new Decimal(e.target.value);
-        }
-        else {
-            // Rounds to zero.
-            newValue = new Decimal(e.target.value).toDecimalPlaces(0, Decimal.ROUND_DOWN);
-        }
-        if (newValue === null) {
-            this.props.bind.value = newValue;
-        }
-        else {
-            if (!this.props.numProps || this.props.numProps.autoRound !== false) {
-                newValue = NumberUtils.roundUsingFormat(newValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
-            }
-            if (this.numericType === Misc.DataType.Decimal) {
-                this.props.bind.value = newValue;
-            }
-            else {
-                this.props.bind.value = newValue.toNumber();
-            }
-        }
-    };
-    NumberInput.prototype.onFocus = function () {
-        var element = this.inputElement.current;
-        if (element && !element.disabled) {
-            this.setFocusedText(element);
-            element.select();
-        }
-    };
-    NumberInput.prototype.getBindValueAsNumber = function () {
-        var propertyValue = this.props.bind.value;
-        if (propertyValue instanceof Misc.Globals.decimalType) {
-            return propertyValue.toNumber();
-        }
-        else {
-            return propertyValue;
-        }
-    };
-    NumberInput.prototype.setFocusedText = function (element) {
-        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 = "";
-            }
-        }
-        else {
-            if (element.readOnly || !this.props.numProps || this.props.numProps.autoRound !== false) {
-                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
-            }
-            else {
-                if (this.formatState.isPercent && NumberUtils.transformPercent) {
-                    numberValue *= 100;
-                }
-                stringValue = numberValue.toString();
-            }
-        }
-        element.value = stringValue;
-    };
-    NumberInput.prototype.onBlur = function (e) {
-        this.hasFocus = false;
-        if (this.inputElement.current) {
-            this.inputElement.current.value = this.formatState.getFormattedValue(this.props.bind.value);
-        }
-    };
-    NumberInput.prototype.onKeyDown = function (e) {
-        var element = this.inputElement.current;
-        if (!this.isReadOnly && element && (e.keyCode === 38 || e.keyCode === 40)) {
-            var value = this.getBindValueAsNumber();
-            if (value !== null) {
-                var selectionIndex = element.selectionEnd;
-                var deltaValue = 1;
-                var decimalIndex = element.value.indexOf(".");
-                if (decimalIndex < 0) {
-                    decimalIndex = element.value.indexOf(",");
-                }
-                if (decimalIndex > 0 && selectionIndex && selectionIndex > decimalIndex) {
-                    deltaValue = 0.01;
-                }
-                if (this.formatState.isPercent && NumberUtils.transformPercent) {
-                    deltaValue /= 100;
-                }
-                if (e.keyCode === 38) {
-                    // Up
-                    value += deltaValue;
-                }
-                else if (e.keyCode === 40) {
-                    // Down
-                    value -= deltaValue;
-                }
-                if (this.numericType === Misc.DataType.Decimal) {
-                    this.props.bind.value = new Decimal(value);
-                }
-                else {
-                    this.props.bind.value = value;
-                }
-                this.setFocusedText(element);
-                if (selectionIndex !== null) {
-                    element.selectionStart = element.selectionEnd = selectionIndex;
-                }
-                e.preventDefault();
-            }
-        }
-    };
-    NumberInput.prototype.componentDidMount = function () {
-        if (this.inputElement.current) {
-            this.inputElement.current.addEventListener("keydown", this.onKeyDown);
-        }
-    };
-    NumberInput.prototype.componentWillUnmount = function () {
-        if (this.inputElement.current) {
-            this.inputElement.current.removeEventListener("keydown", this.onKeyDown);
-        }
-    };
-    NumberInput.prototype.render = function () {
-        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 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.isReadOnly = domProps.readOnly === true;
-        if (editorProps.inputElement) {
-            this.inputElement = editorProps.inputElement;
-        }
-        // Don't update the elements value if it is focused
-        if (!this.hasFocus) {
-            if (this.inputElement.current) {
-                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));
-    };
-    NumberInput.contextType = FormContext;
-    NumberInput = __decorate([
-        observer,
-        __metadata("design:paramtypes", [Object])
-    ], NumberInput);
-    return NumberInput;
-}(ComponentBase));
-export default NumberInput;
+import { __assign, __decorate, __extends, __metadata } from "tslib";
+import * as React from 'react';
+import { BindPropsHelper } from './PropTypes';
+import { FormContext } from './FormContext';
+import { Misc, NumberUtils, Utils } from '@singularsystems/neo-core';
+import Decimal from 'decimal.js-light';
+import { InputHelpers } from './InputHelpers';
+import { observer } from 'mobx-react';
+import memoize from 'memoize-one';
+import ComponentBase from './ComponentBase';
+var FormatState = /** @class */ (function () {
+    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 (propertyInfo, numericType, numProps, appendText) {
+        var isPercent = false;
+        var hasExternalPercentSymbol = false;
+        var formatString = numProps ? numProps.formatString : "";
+        var displayDecimals = 2;
+        if ((formatString && formatString.indexOf("%") >= 0)
+            || appendText === "%"
+            || (numProps === null || numProps === void 0 ? void 0 : numProps.format) === Misc.NumberFormat.PercentDecimals || (numProps === null || numProps === void 0 ? void 0 : numProps.format) === Misc.NumberFormat.PercentNoDecimals) {
+            isPercent = true;
+        }
+        if (propertyInfo.allowedDecimals !== undefined) {
+            displayDecimals = propertyInfo.allowedDecimals - (isPercent ? 2 : 0);
+        }
+        else if (numProps === null || numProps === void 0 ? void 0 : numProps.formatString) {
+            displayDecimals = NumberUtils.getDecimalPlaces(numProps.formatString);
+        }
+        if (!formatString) {
+            if (numProps && numProps.format) {
+                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol, displayDecimals);
+            }
+            else {
+                var hasDecimals = numericType === Misc.DataType.Float || numericType === Misc.DataType.Decimal;
+                var format = (numProps === null || numProps === void 0 ? void 0 : numProps.currencySymbol) ?
+                    (hasDecimals ? Misc.NumberFormat.CurrencyDecimals : Misc.NumberFormat.CurrencyNoDecimals) :
+                    (hasDecimals ? Misc.NumberFormat.Decimals : Misc.NumberFormat.NoDecimals);
+                formatString = NumberUtils.getFormatString(format, numProps === null || numProps === void 0 ? void 0 : numProps.currencySymbol, displayDecimals);
+            }
+        }
+        if (formatString.indexOf("%") < 0 && appendText === "%") {
+            hasExternalPercentSymbol = true;
+        }
+        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, displayDecimals + (isPercent ? 2 : 0), numProps === null || numProps === void 0 ? void 0 : numProps.zeroText, numProps === null || numProps === void 0 ? void 0 : numProps.native);
+    };
+    FormatState.prototype.getFormattedValue = function (value) {
+        if (!value && this.zeroText !== undefined) {
+            return this.zeroText;
+        }
+        if (value !== undefined && value !== null) {
+            if (value instanceof Misc.Globals.decimalType) {
+                value = value.toNumber();
+            }
+            if (typeof value === "number") {
+                if (this.hasExternalPercentSymbol) {
+                    value *= 100;
+                }
+                return this.useNative ? NumberUtils.formatRaw(value, this.formatString, false) : NumberUtils.format(value, this.formatString);
+            }
+            else {
+                return value;
+            }
+        }
+        else {
+            return "";
+        }
+    };
+    return FormatState;
+}());
+export { FormatState };
+// Taken from https://github.com/MikeMcl/decimal.js-light/blob/master/decimal.js since it is not exported.
+var validDecimalRegex = /^(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i;
+var NumberInput = /** @class */ (function (_super) {
+    __extends(NumberInput, _super);
+    function NumberInput(props) {
+        var _this = _super.call(this, props) || this;
+        _this.hasFocus = false;
+        _this.isReadOnly = false;
+        _this.recalcFormatState = memoize(FormatState.create);
+        _this.numericType = _this.props.bind.propertyInfo.propertyType;
+        _this.inputElement = React.createRef();
+        _this.onChanged = _this.onChanged.bind(_this);
+        _this.onFocus = _this.onFocus.bind(_this);
+        _this.onBlur = _this.onBlur.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
+        return _this;
+    }
+    NumberInput.prototype.onChanged = function (e) {
+        var newValue;
+        if (e.target.value !== "") {
+            var testValue = e.target.value;
+            if (testValue[0] === "-") {
+                testValue = testValue.substring(1);
+            }
+            if (isNaN(parseFloat(testValue)) || !validDecimalRegex.test(testValue)) {
+                return;
+            }
+        }
+        if (e.target.value == "") {
+            newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
+        }
+        else if (this.formatState.isPercent && NumberUtils.transformPercent) {
+            newValue = new Decimal(e.target.value).dividedBy(100);
+        }
+        else if (this.numericType === Misc.DataType.Float || this.numericType === Misc.DataType.Decimal) {
+            newValue = new Decimal(e.target.value);
+        }
+        else {
+            // Rounds to zero.
+            newValue = new Decimal(e.target.value).toDecimalPlaces(0, Decimal.ROUND_DOWN);
+        }
+        if (newValue === null) {
+            this.props.bind.value = newValue;
+        }
+        else {
+            if (!this.props.numProps || this.props.numProps.autoRound !== false) {
+                newValue = NumberUtils.round(newValue, this.formatState.allowedDecimals);
+            }
+            if (this.numericType === Misc.DataType.Decimal) {
+                this.props.bind.value = newValue;
+            }
+            else {
+                this.props.bind.value = newValue.toNumber();
+            }
+        }
+    };
+    NumberInput.prototype.onFocus = function () {
+        var element = this.inputElement.current;
+        if (element && !element.disabled) {
+            this.setFocusedText(element);
+            element.select();
+        }
+    };
+    NumberInput.prototype.getBindValueAsNumber = function () {
+        var propertyValue = this.props.bind.value;
+        if (propertyValue instanceof Misc.Globals.decimalType) {
+            return propertyValue.toNumber();
+        }
+        else {
+            return propertyValue;
+        }
+    };
+    NumberInput.prototype.setFocusedText = function (element) {
+        this.hasFocus = true;
+        var numberValue = this.getBindValueAsNumber();
+        var stringValue;
+        if (numberValue === null || numberValue === undefined) {
+            stringValue = "";
+        }
+        else {
+            if (element.readOnly || !this.props.numProps || this.props.numProps.autoRound !== false) {
+                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol, this.formatState.allowedDecimals);
+            }
+            else {
+                if (this.formatState.isPercent && NumberUtils.transformPercent) {
+                    numberValue *= 100;
+                }
+                stringValue = numberValue.toString();
+            }
+        }
+        element.value = stringValue;
+    };
+    NumberInput.prototype.onBlur = function (e) {
+        this.hasFocus = false;
+        if (this.inputElement.current) {
+            this.inputElement.current.value = this.formatState.getFormattedValue(this.props.bind.value);
+        }
+    };
+    NumberInput.prototype.onKeyDown = function (e) {
+        var element = this.inputElement.current;
+        if (!this.isReadOnly && element && (e.keyCode === 38 || e.keyCode === 40)) {
+            var value = this.getBindValueAsNumber();
+            if (value !== null) {
+                var selectionIndex = element.selectionEnd;
+                var deltaValue = 1;
+                var decimalIndex = element.value.indexOf(".");
+                if (decimalIndex < 0) {
+                    decimalIndex = element.value.indexOf(",");
+                }
+                if (decimalIndex > 0 && selectionIndex && selectionIndex > decimalIndex) {
+                    deltaValue = 0.01;
+                }
+                if (this.formatState.isPercent && NumberUtils.transformPercent) {
+                    deltaValue /= 100;
+                }
+                if (e.keyCode === 38) {
+                    // Up
+                    value += deltaValue;
+                }
+                else if (e.keyCode === 40) {
+                    // Down
+                    value -= deltaValue;
+                }
+                if (this.numericType === Misc.DataType.Decimal) {
+                    this.props.bind.value = new Decimal(value);
+                }
+                else {
+                    this.props.bind.value = value;
+                }
+                this.setFocusedText(element);
+                if (selectionIndex !== null) {
+                    element.selectionStart = element.selectionEnd = selectionIndex;
+                }
+                e.preventDefault();
+            }
+        }
+    };
+    NumberInput.prototype.componentDidMount = function () {
+        if (this.inputElement.current) {
+            this.inputElement.current.addEventListener("keydown", this.onKeyDown);
+        }
+    };
+    NumberInput.prototype.componentWillUnmount = function () {
+        if (this.inputElement.current) {
+            this.inputElement.current.removeEventListener("keydown", this.onKeyDown);
+        }
+    };
+    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.props.bind.propertyInfo, this.numericType, splitProps.numProps, editorProps.appendText);
+        this.isReadOnly = domProps.readOnly === true;
+        if (editorProps.inputElement) {
+            this.inputElement = editorProps.inputElement;
+        }
+        // Don't update the elements value if it is focused
+        if (!this.hasFocus) {
+            if (this.inputElement.current) {
+                this.inputElement.current.value = this.formatState.getFormattedValue(editorProps.bind.value);
+            }
+        }
+        if (useNative && !domProps.step) {
+            var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
+            domProps.step = decimals === 0 ? "1" : "0.".concat("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([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], NumberInput);
+    return NumberInput;
+}(ComponentBase));
+export default NumberInput;

package/dist/ReactComponents/Paging/BasicPagerControls.d.ts

@@ -1,25 +1,26 @@
-import React from 'react';
-import { Data } from "@singularsystems/neo-core";
-export interface IPagerControlsProps extends React.HTMLProps<HTMLUListElement> {
-    /** Page manager to control. */
-    pageManager: Data.IPageManager;
-    /** No of buttons to show */
-    noOfButtons?: number;
-    /** Alignment of buttons. End (right) by default. */
-    alignment?: "start" | "center" | "end" | "";
-    /** Text of the first button. */
-    firstText?: string;
-    /** Text of the prev button. */
-    prevText?: string;
-    /** Text of the next button. */
-    nextText?: string;
-    /** Text of the last button. */
-    lastText?: string;
-    /** Hides the pager if there is only one page. True by default. */
-    autoHide?: boolean;
-    /** Causes the page size control to show, with this label. */
-    pageSizeLabel?: string | JSX.Element;
-}
-export default class SimplePagerControls extends React.Component<IPagerControlsProps> {
-    render(): false | JSX.Element;
-}
+import React from 'react';
+import { Data } from "@singularsystems/neo-core";
+export interface IPagerControlsProps extends React.HTMLProps<HTMLUListElement> {
+    /** Page manager to control. */
+    pageManager: Data.IPageManager;
+    /** No of buttons to show */
+    noOfButtons?: number;
+    /** Alignment of buttons. End (right) by default. */
+    alignment?: "start" | "center" | "end" | "";
+    /** Text of the first button. */
+    firstText?: string;
+    /** Text of the prev button. */
+    prevText?: string;
+    /** Text of the next button. */
+    nextText?: string;
+    /** Text of the last button. */
+    lastText?: string;
+    /** Hides the pager if there is only one page. True by default. */
+    autoHide?: boolean;
+    /** Causes the page size control to show, with this label. */
+    pageSizeLabel?: string | JSX.Element;
+}
+export default class SimplePagerControls extends React.Component<IPagerControlsProps> {
+    private iconFactory;
+    render(): false | JSX.Element;
+}