@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/components-react/editors/CustomNumberEditor.js

@@ -1,269 +1,267 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyEditors
- */
-// cSpell:ignore customnumber testid
-import "./CustomNumberEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Logger } from "@itwin/core-bentley";
-import { MessageSeverity, PropertyEditorParamTypes, PropertyValueFormat, SpecialKey, StandardEditorNames, StandardTypeNames, UiAdmin, } from "@itwin/appui-abstract";
-import { Icon, IconInput } from "@itwin/core-react";
-import { Input } from "@itwin/itwinui-react";
-import { UiComponents } from "../UiComponents";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-/** CustomNumberEditor is a React component that is a property editor for numbers that specify custom formatting and parsing functions.
- * @alpha
- */
-export class CustomNumberEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._inputElement = React.createRef();
-        /** @internal */
-        this.state = {
-            inputValue: "",
-        };
-        this._updateInputValue = (e) => {
-            this._applyUpdatedValue(e.target.value);
-        };
-        this._onKeyPress = (e) => {
-            var _a;
-            // istanbul ignore else
-            if (e.key === SpecialKey.Escape) {
-                const initialDisplayValue = (_a = (this._lastValidValue && this._lastValidValue.displayValue)) !== null && _a !== void 0 ? _a : ( /* istanbul ignore next */this._getInitialDisplayValue());
-                if (initialDisplayValue !== this.state.inputValue) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this._resetToLastValidDisplayValue();
-                }
-                else {
-                    // istanbul ignore else
-                    if (this.props.onCancel)
-                        this.props.onCancel();
-                }
-            }
-            // istanbul ignore else
-            if (e.key !== SpecialKey.Enter) {
-                UiAdmin.messagePresenter.closeInputFieldMessage();
-            }
-        };
-        // istanbul ignore next
-        this._onFocus = (e) => {
-            e.target.select();
-        };
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        if (record.isReadonly) {
-            return {
-                valueFormat: PropertyValueFormat.Primitive,
-                value: record.value.value,
-                displayValue: record.value.displayValue,
-            };
-        }
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            const parseResults = this._formatParams.parseFunction(this.state.inputValue);
-            if (!parseResults.parseError && undefined !== parseResults.value) {
-                const newDisplayValue = this._formatParams.formatFunction(parseResults.value);
-                propertyValue = {
-                    valueFormat: PropertyValueFormat.Primitive,
-                    value: parseResults.value,
-                    displayValue: newDisplayValue,
-                };
-                this._lastValidValue = { ...propertyValue };
-                // make sure the text in the input item matches the latest formatted text... this could get out if the input string say 1.5 === the display string of 1'-6"
-                // istanbul ignore else
-                if (newDisplayValue !== this.state.inputValue) {
-                    this.setState({ inputValue: newDisplayValue });
-                }
-            }
-            else {
-                // istanbul ignore else
-                if (this.htmlElement) {
-                    UiAdmin.messagePresenter.displayInputFieldMessage(this.htmlElement, MessageSeverity.Error, parseResults.parseError ? parseResults.parseError : /* istanbul ignore next */ UiComponents.translate("errors.unable-to-parse-quantity"));
-                    this.htmlElement.focus();
-                }
-                else {
-                    UiAdmin.messagePresenter.displayMessage(MessageSeverity.Error, parseResults.parseError ? parseResults.parseError : /* istanbul ignore next */ UiComponents.translate("errors.unable-to-parse-quantity"));
-                }
-                const displayValue = (record.value.displayValue && record.value.displayValue.length > 0) ? record.value.displayValue : /* istanbul ignore next */ this._formatParams.formatFunction(record.value.value);
-                propertyValue = this._lastValidValue ? { ...this._lastValidValue } : /* istanbul ignore next */ {
-                    valueFormat: PropertyValueFormat.Primitive,
-                    value: record.value.value,
-                    displayValue,
-                };
-            }
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._inputElement.current;
-    }
-    get hasFocus() {
-        return document.activeElement === this._inputElement.current;
-    }
-    shouldSetFocus() {
-        if (!this.props.setFocus)
-            return false;
-        const record = this.props.propertyRecord;
-        const disabled = (record && !record.isDisabled) ? false : true;
-        const readonly = (record && !record.isReadonly) ? false : true;
-        return (!disabled && !readonly);
-    }
-    _applyUpdatedValue(userInput) {
-        const record = this.props.propertyRecord;
-        const readonly = (record && !record.isReadonly) ? false : true;
-        const disabled = (record && !record.isDisabled) ? false : true;
-        if (readonly || disabled)
-            return;
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({
-                inputValue: userInput,
-            });
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    _getInitialDisplayValue() {
-        const record = this.props.propertyRecord;
-        let initialDisplayValue = "";
-        let numberValue = 0;
-        // istanbul ignore else
-        if (record) {
-            // istanbul ignore else
-            if (record.value.valueFormat === PropertyValueFormat.Primitive) {
-                const primitiveValue = record.value;
-                numberValue = (undefined !== primitiveValue.value) ? primitiveValue.value : /* istanbul ignore next */ 0;
-                // istanbul ignore else
-                if (primitiveValue.displayValue)
-                    initialDisplayValue = primitiveValue.displayValue;
-                else
-                    initialDisplayValue = this._formatParams.formatFunction(numberValue);
-            }
-        }
-        return initialDisplayValue;
-    }
-    async setStateFromProps() {
-        const record = this.props.propertyRecord;
-        // istanbul ignore next
-        if (!record || !record.property) {
-            Logger.logError(UiComponents.loggerCategory(this), "PropertyRecord must be defined to use CustomNumberPropertyEditor");
-            // eslint-disable-next-line no-console
-            // console.log("PropertyRecord must be defined to use CustomNumberPropertyEditor");
-            return;
-        }
-        // istanbul ignore else
-        if (record.property && record.property.editor && record.property.editor.params) {
-            this._formatParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.CustomFormattedNumber);
-        }
-        if (!this._formatParams) {
-            Logger.logError(UiComponents.loggerCategory(this), `CustomFormattedNumberParams must be defined for property ${record.property.name}`);
-            // eslint-disable-next-line no-console
-            // console.log(`CustomFormattedNumberParams must be defined for property ${record!.property!.name}`);
-            return;
-        }
-        const initialDisplayValue = this._getInitialDisplayValue();
-        this._lastValidValue = {
-            valueFormat: PropertyValueFormat.Primitive,
-            value: record.value.value,
-            displayValue: initialDisplayValue,
-        };
-        let size;
-        let maxLength;
-        let iconSpec;
-        // istanbul ignore else
-        if (record.property && record.property.editor && record.property.editor.params) {
-            const editorSizeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.InputEditorSize);
-            // istanbul ignore else
-            if (editorSizeParams) {
-                // istanbul ignore else
-                if (editorSizeParams.size)
-                    size = editorSizeParams.size;
-                // istanbul ignore else
-                if (editorSizeParams.maxLength)
-                    maxLength = editorSizeParams.maxLength;
-            }
-            const iconParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.Icon);
-            if (iconParams) {
-                iconSpec = iconParams.definition.iconSpec;
-            }
-        }
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ inputValue: initialDisplayValue, size, maxLength, iconSpec });
-    }
-    _resetToLastValidDisplayValue() {
-        var _a;
-        const initialDisplayValue = (_a = (this._lastValidValue && this._lastValidValue.displayValue)) !== null && _a !== void 0 ? _a : ( /* istanbul ignore next */this._getInitialDisplayValue());
-        this.setState({ inputValue: initialDisplayValue });
-    }
-    /** @internal */
-    render() {
-        const minSize = this.state.size ? this.state.size : 8;
-        const minWidthStyle = {
-            minWidth: `${minSize * 0.75}em`,
-        };
-        const record = this.props.propertyRecord;
-        if (!record || !this._formatParams)
-            return null;
-        const readOnly = !record.isReadonly ? false : true;
-        const disabled = !record.isDisabled ? false : true;
-        const className = classnames("components-cell-editor", "components-customnumber-editor", this.props.className);
-        const inputProps = {
-            className,
-            style: this.props.style ? this.props.style : minWidthStyle,
-            readOnly,
-            disabled,
-            maxLength: this.state.maxLength,
-            value: this.state.inputValue,
-            onChange: this._updateInputValue,
-            onBlur: this.props.onBlur,
-            onFocus: this._onFocus,
-            setFocus: this.shouldSetFocus(),
-            onKeyDown: this._onKeyPress,
-        };
-        let reactNode;
-        if (this.state.iconSpec) {
-            const icon = React.createElement(Icon, { iconSpec: this.state.iconSpec });
-            reactNode = (React.createElement(IconInput, { ...inputProps, ref: this._inputElement, icon: icon, "data-testid": "components-customnumber-editor" }));
-        }
-        else {
-            // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop
-            reactNode = (React.createElement(Input, { ...inputProps, ref: this._inputElement, "data-testid": "components-customnumber-editor", size: "small" }));
-        }
-        return reactNode;
-    }
-}
-/** Custom Property Editor registered for the "number" type name and the "number-custom" editor name.
- * It uses the [[CustomNumberEditor]] React component.
- * @alpha
- */
-export class CustomNumberPropertyEditor extends PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(CustomNumberEditor, null);
-    }
-    get containerHandlesEscape() {
-        return false;
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Number, CustomNumberPropertyEditor, StandardEditorNames.NumberCustom);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+// cSpell:ignore customnumber testid
+import "./CustomNumberEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Logger } from "@itwin/core-bentley";
+import { MessageSeverity, PropertyEditorParamTypes, PropertyValueFormat, SpecialKey, StandardEditorNames, StandardTypeNames, UiAdmin, } from "@itwin/appui-abstract";
+import { Icon, IconInput } from "@itwin/core-react";
+import { Input } from "@itwin/itwinui-react";
+import { UiComponents } from "../UiComponents";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+/** CustomNumberEditor is a React component that is a property editor for numbers that specify custom formatting and parsing functions.
+ * @alpha
+ */
+export class CustomNumberEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        /** @internal */
+        this.state = {
+            inputValue: "",
+        };
+        this._updateInputValue = (e) => {
+            this._applyUpdatedValue(e.target.value);
+        };
+        this._onKeyPress = (e) => {
+            // istanbul ignore else
+            if (e.key === SpecialKey.Escape) {
+                const initialDisplayValue = (this._lastValidValue && this._lastValidValue.displayValue) ?? ( /* istanbul ignore next */this._getInitialDisplayValue());
+                if (initialDisplayValue !== this.state.inputValue) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this._resetToLastValidDisplayValue();
+                }
+                else {
+                    // istanbul ignore else
+                    if (this.props.onCancel)
+                        this.props.onCancel();
+                }
+            }
+            // istanbul ignore else
+            if (e.key !== SpecialKey.Enter) {
+                UiAdmin.messagePresenter.closeInputFieldMessage();
+            }
+        };
+        // istanbul ignore next
+        this._onFocus = (e) => {
+            e.target.select();
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        if (record.isReadonly) {
+            return {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: record.value.value,
+                displayValue: record.value.displayValue,
+            };
+        }
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            const parseResults = this._formatParams.parseFunction(this.state.inputValue);
+            if (!parseResults.parseError && undefined !== parseResults.value) {
+                const newDisplayValue = this._formatParams.formatFunction(parseResults.value);
+                propertyValue = {
+                    valueFormat: PropertyValueFormat.Primitive,
+                    value: parseResults.value,
+                    displayValue: newDisplayValue,
+                };
+                this._lastValidValue = { ...propertyValue };
+                // make sure the text in the input item matches the latest formatted text... this could get out if the input string say 1.5 === the display string of 1'-6"
+                // istanbul ignore else
+                if (newDisplayValue !== this.state.inputValue) {
+                    this.setState({ inputValue: newDisplayValue });
+                }
+            }
+            else {
+                // istanbul ignore else
+                if (this.htmlElement) {
+                    UiAdmin.messagePresenter.displayInputFieldMessage(this.htmlElement, MessageSeverity.Error, parseResults.parseError ? parseResults.parseError : /* istanbul ignore next */ UiComponents.translate("errors.unable-to-parse-quantity"));
+                    this.htmlElement.focus();
+                }
+                else {
+                    UiAdmin.messagePresenter.displayMessage(MessageSeverity.Error, parseResults.parseError ? parseResults.parseError : /* istanbul ignore next */ UiComponents.translate("errors.unable-to-parse-quantity"));
+                }
+                const displayValue = (record.value.displayValue && record.value.displayValue.length > 0) ? record.value.displayValue : /* istanbul ignore next */ this._formatParams.formatFunction(record.value.value);
+                propertyValue = this._lastValidValue ? { ...this._lastValidValue } : /* istanbul ignore next */ {
+                    valueFormat: PropertyValueFormat.Primitive,
+                    value: record.value.value,
+                    displayValue,
+                };
+            }
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._inputElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._inputElement.current;
+    }
+    shouldSetFocus() {
+        if (!this.props.setFocus)
+            return false;
+        const record = this.props.propertyRecord;
+        const disabled = (record && !record.isDisabled) ? false : true;
+        const readonly = (record && !record.isReadonly) ? false : true;
+        return (!disabled && !readonly);
+    }
+    _applyUpdatedValue(userInput) {
+        const record = this.props.propertyRecord;
+        const readonly = (record && !record.isReadonly) ? false : true;
+        const disabled = (record && !record.isDisabled) ? false : true;
+        if (readonly || disabled)
+            return;
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({
+                inputValue: userInput,
+            });
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    _getInitialDisplayValue() {
+        const record = this.props.propertyRecord;
+        let initialDisplayValue = "";
+        let numberValue = 0;
+        // istanbul ignore else
+        if (record) {
+            // istanbul ignore else
+            if (record.value.valueFormat === PropertyValueFormat.Primitive) {
+                const primitiveValue = record.value;
+                numberValue = (undefined !== primitiveValue.value) ? primitiveValue.value : /* istanbul ignore next */ 0;
+                // istanbul ignore else
+                if (primitiveValue.displayValue)
+                    initialDisplayValue = primitiveValue.displayValue;
+                else
+                    initialDisplayValue = this._formatParams.formatFunction(numberValue);
+            }
+        }
+        return initialDisplayValue;
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        // istanbul ignore next
+        if (!record || !record.property) {
+            Logger.logError(UiComponents.loggerCategory(this), "PropertyRecord must be defined to use CustomNumberPropertyEditor");
+            // eslint-disable-next-line no-console
+            // console.log("PropertyRecord must be defined to use CustomNumberPropertyEditor");
+            return;
+        }
+        // istanbul ignore else
+        if (record.property && record.property.editor && record.property.editor.params) {
+            this._formatParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.CustomFormattedNumber);
+        }
+        if (!this._formatParams) {
+            Logger.logError(UiComponents.loggerCategory(this), `CustomFormattedNumberParams must be defined for property ${record.property.name}`);
+            // eslint-disable-next-line no-console
+            // console.log(`CustomFormattedNumberParams must be defined for property ${record!.property!.name}`);
+            return;
+        }
+        const initialDisplayValue = this._getInitialDisplayValue();
+        this._lastValidValue = {
+            valueFormat: PropertyValueFormat.Primitive,
+            value: record.value.value,
+            displayValue: initialDisplayValue,
+        };
+        let size;
+        let maxLength;
+        let iconSpec;
+        // istanbul ignore else
+        if (record.property && record.property.editor && record.property.editor.params) {
+            const editorSizeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.InputEditorSize);
+            // istanbul ignore else
+            if (editorSizeParams) {
+                // istanbul ignore else
+                if (editorSizeParams.size)
+                    size = editorSizeParams.size;
+                // istanbul ignore else
+                if (editorSizeParams.maxLength)
+                    maxLength = editorSizeParams.maxLength;
+            }
+            const iconParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.Icon);
+            if (iconParams) {
+                iconSpec = iconParams.definition.iconSpec;
+            }
+        }
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ inputValue: initialDisplayValue, size, maxLength, iconSpec });
+    }
+    _resetToLastValidDisplayValue() {
+        const initialDisplayValue = (this._lastValidValue && this._lastValidValue.displayValue) ?? ( /* istanbul ignore next */this._getInitialDisplayValue());
+        this.setState({ inputValue: initialDisplayValue });
+    }
+    /** @internal */
+    render() {
+        const minSize = this.state.size ? this.state.size : 8;
+        const minWidthStyle = {
+            minWidth: `${minSize * 0.75}em`,
+        };
+        const record = this.props.propertyRecord;
+        if (!record || !this._formatParams)
+            return null;
+        const readOnly = !record.isReadonly ? false : true;
+        const disabled = !record.isDisabled ? false : true;
+        const className = classnames("components-cell-editor", "components-customnumber-editor", this.props.className);
+        const inputProps = {
+            className,
+            style: this.props.style ? this.props.style : minWidthStyle,
+            readOnly,
+            disabled,
+            maxLength: this.state.maxLength,
+            value: this.state.inputValue,
+            onChange: this._updateInputValue,
+            onBlur: this.props.onBlur,
+            onFocus: this._onFocus,
+            setFocus: this.shouldSetFocus(),
+            onKeyDown: this._onKeyPress,
+        };
+        let reactNode;
+        if (this.state.iconSpec) {
+            const icon = React.createElement(Icon, { iconSpec: this.state.iconSpec });
+            reactNode = (React.createElement(IconInput, { ...inputProps, ref: this._inputElement, icon: icon, "data-testid": "components-customnumber-editor" }));
+        }
+        else {
+            // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop
+            reactNode = (React.createElement(Input, { ...inputProps, ref: this._inputElement, "data-testid": "components-customnumber-editor", size: "small" }));
+        }
+        return reactNode;
+    }
+}
+/** Custom Property Editor registered for the "number" type name and the "number-custom" editor name.
+ * It uses the [[CustomNumberEditor]] React component.
+ * @alpha
+ */
+export class CustomNumberPropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(CustomNumberEditor, null);
+    }
+    get containerHandlesEscape() {
+        return false;
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, CustomNumberPropertyEditor, StandardEditorNames.NumberCustom);
 //# sourceMappingURL=CustomNumberEditor.js.map