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

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

@@ -1,176 +1,176 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./TextareaEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
-import { Textarea } from "@itwin/itwinui-react";
-import { TypeConverterManager } from "../converters/TypeConverterManager";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-import { PopupButton, PopupContent, PopupOkCancelButtons } from "./PopupButton";
-import { UiComponents } from "../UiComponents";
-const DEFAULT_ROWS = 3;
-/** TextareaEditor React component that is a property editor with text input
- * @public
- */
-export class TextareaEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._ariaLabel = UiComponents.translate("editor.textarea");
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            inputValue: "",
-            readonly: false,
-            rows: DEFAULT_ROWS,
-        };
-        this._updateTextareaValue = (e) => {
-            // istanbul ignore else
-            if (this._isMounted)
-                this.setState({
-                    inputValue: e.target.value,
-                });
-        };
-        this._handleOk = async (_event) => {
-            // istanbul ignore else
-            if (this.props.propertyRecord && this.props.onCommit) {
-                const propertyValue = await this.getPropertyValue();
-                // istanbul ignore else
-                if (propertyValue !== undefined) {
-                    this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
-                }
-            }
-        };
-        this._handleCancel = (_event) => {
-            // istanbul ignore else
-            if (this.props.onCancel) {
-                this.props.onCancel();
-            }
-        };
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            propertyValue = await TypeConverterManager.getConverter(record.property.typename).convertFromStringToPropertyValue(this.state.inputValue, record);
-            propertyValue.displayValue = this.state.inputValue;
-        }
-        return propertyValue;
-    }
-    // istanbul ignore next
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    // istanbul ignore next
-    get hasFocus() {
-        let containsFocus = false;
-        // istanbul ignore else
-        if (this._divElement.current)
-            containsFocus = this._divElement.current.contains(document.activeElement);
-        return containsFocus;
-    }
-    /** @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
-        }
-    }
-    async setStateFromProps() {
-        const record = this.props.propertyRecord;
-        let initialValue = "";
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            const value = record.value.value;
-            initialValue = await TypeConverterManager.getConverter(record.property.typename).convertPropertyToString(record.property, value);
-        }
-        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
-        let size;
-        let maxLength;
-        let rows = DEFAULT_ROWS;
-        const isDisabled = record ? record.isDisabled : undefined;
-        if (record && record.property && record.property.editor && record.property.editor.params) {
-            const editorSizeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.InputEditorSize);
-            if (editorSizeParams) {
-                // istanbul ignore else
-                if (editorSizeParams.size)
-                    size = editorSizeParams.size;
-                // istanbul ignore else
-                if (editorSizeParams.maxLength)
-                    maxLength = editorSizeParams.maxLength;
-            }
-            const multilineParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.MultilineText);
-            if (multilineParams) {
-                rows = multilineParams.rows;
-            }
-        }
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ inputValue: initialValue, readonly, size, maxLength, isDisabled, rows });
-    }
-    /** @internal */
-    render() {
-        const className = classnames("components-cell-editor", "components-textarea-editor", this.props.className);
-        const minSize = this.state.size ? this.state.size : 8;
-        const style = {
-            ...this.props.style,
-            minWidth: `${minSize * 0.75}em`,
-        };
-        const textareaProps = {
-            className: "components-textarea-editor-textarea",
-            style,
-            rows: this.state.rows,
-            readOnly: this.state.readonly,
-            disabled: this.state.isDisabled,
-            maxLength: this.state.maxLength,
-            value: this.state.inputValue,
-            onChange: this._updateTextareaValue,
-            setFocus: this.props.setFocus && !this.state.isDisabled,
-        };
-        textareaProps["aria-label"] = this._ariaLabel;
-        return (React.createElement("div", { className: className, ref: this._divElement },
-            React.createElement(PopupButton, { label: this.state.inputValue, closeOnEnter: false, setFocus: this.props.setFocus, focusTarget: ".iui-input" },
-                React.createElement(PopupContent, null,
-                    React.createElement(Textarea, { ...textareaProps, "data-testid": "components-textarea-editor" }),
-                    React.createElement(PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
-    }
-}
-/** Textarea Property Editor registered for the "text" and "string" type names and "multi-line" editor name.
- * It uses the [[TextareaEditor]] React component.
- * @public
- */
-export class TextareaPropertyEditor extends PropertyEditorBase {
-    // istanbul ignore next
-    get containerHandlesBlur() {
-        return false;
-    }
-    // istanbul ignore next
-    get containerHandlesEnter() {
-        return false;
-    }
-    // istanbul ignore next
-    get containerHandlesTab() {
-        return false;
-    }
-    get reactNode() {
-        return React.createElement(TextareaEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Text, TextareaPropertyEditor, StandardEditorNames.MultiLine);
-PropertyEditorManager.registerEditor(StandardTypeNames.String, TextareaPropertyEditor, StandardEditorNames.MultiLine);
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./TextareaEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
+import { Textarea } from "@itwin/itwinui-react";
+import { TypeConverterManager } from "../converters/TypeConverterManager";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+import { PopupButton, PopupContent, PopupOkCancelButtons } from "./PopupButton";
+import { UiComponents } from "../UiComponents";
+const DEFAULT_ROWS = 3;
+/** TextareaEditor React component that is a property editor with text input
+ * @public
+ */
+export class TextareaEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._ariaLabel = UiComponents.translate("editor.textarea");
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            inputValue: "",
+            readonly: false,
+            rows: DEFAULT_ROWS,
+        };
+        this._updateTextareaValue = (e) => {
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState({
+                    inputValue: e.target.value,
+                });
+        };
+        this._handleOk = async (_event) => {
+            // istanbul ignore else
+            if (this.props.propertyRecord && this.props.onCommit) {
+                const propertyValue = await this.getPropertyValue();
+                // istanbul ignore else
+                if (propertyValue !== undefined) {
+                    this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
+                }
+            }
+        };
+        this._handleCancel = (_event) => {
+            // istanbul ignore else
+            if (this.props.onCancel) {
+                this.props.onCancel();
+            }
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = await TypeConverterManager.getConverter(record.property.typename).convertFromStringToPropertyValue(this.state.inputValue, record);
+            propertyValue.displayValue = this.state.inputValue;
+        }
+        return propertyValue;
+    }
+    // istanbul ignore next
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    // istanbul ignore next
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    /** @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
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue = "";
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            const value = record.value.value;
+            initialValue = await TypeConverterManager.getConverter(record.property.typename).convertPropertyToString(record.property, value);
+        }
+        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
+        let size;
+        let maxLength;
+        let rows = DEFAULT_ROWS;
+        const isDisabled = record ? record.isDisabled : undefined;
+        if (record && record.property && record.property.editor && record.property.editor.params) {
+            const editorSizeParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.InputEditorSize);
+            if (editorSizeParams) {
+                // istanbul ignore else
+                if (editorSizeParams.size)
+                    size = editorSizeParams.size;
+                // istanbul ignore else
+                if (editorSizeParams.maxLength)
+                    maxLength = editorSizeParams.maxLength;
+            }
+            const multilineParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.MultilineText);
+            if (multilineParams) {
+                rows = multilineParams.rows;
+            }
+        }
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ inputValue: initialValue, readonly, size, maxLength, isDisabled, rows });
+    }
+    /** @internal */
+    render() {
+        const className = classnames("components-cell-editor", "components-textarea-editor", this.props.className);
+        const minSize = this.state.size ? this.state.size : 8;
+        const style = {
+            ...this.props.style,
+            minWidth: `${minSize * 0.75}em`,
+        };
+        const textareaProps = {
+            className: "components-textarea-editor-textarea",
+            style,
+            rows: this.state.rows,
+            readOnly: this.state.readonly,
+            disabled: this.state.isDisabled,
+            maxLength: this.state.maxLength,
+            value: this.state.inputValue,
+            onChange: this._updateTextareaValue,
+            setFocus: this.props.setFocus && !this.state.isDisabled,
+        };
+        textareaProps["aria-label"] = this._ariaLabel;
+        return (React.createElement("div", { className: className, ref: this._divElement },
+            React.createElement(PopupButton, { label: this.state.inputValue, closeOnEnter: false, setFocus: this.props.setFocus, focusTarget: ".iui-input" },
+                React.createElement(PopupContent, null,
+                    React.createElement(Textarea, { ...textareaProps, "data-testid": "components-textarea-editor" }),
+                    React.createElement(PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
+    }
+}
+/** Textarea Property Editor registered for the "text" and "string" type names and "multi-line" editor name.
+ * It uses the [[TextareaEditor]] React component.
+ * @public
+ */
+export class TextareaPropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get containerHandlesBlur() {
+        return false;
+    }
+    // istanbul ignore next
+    get containerHandlesEnter() {
+        return false;
+    }
+    // istanbul ignore next
+    get containerHandlesTab() {
+        return false;
+    }
+    get reactNode() {
+        return React.createElement(TextareaEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Text, TextareaPropertyEditor, StandardEditorNames.MultiLine);
+PropertyEditorManager.registerEditor(StandardTypeNames.String, TextareaPropertyEditor, StandardEditorNames.MultiLine);
 //# sourceMappingURL=TextareaEditor.js.map

package/lib/esm/components-react/editors/ToggleEditor.d.ts

@@ -1,45 +1,45 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./ToggleEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
-import { PropertyEditorBase } from "./PropertyEditorManager";
-/** @internal */
-interface ToggleEditorState {
-    toggleValue: boolean;
-    isDisabled?: boolean;
-}
-/** ToggleEditor React component that is a property editor with checkbox input
- * @public
- */
-export declare class ToggleEditor extends React.PureComponent<PropertyEditorProps, ToggleEditorState> implements TypeEditor {
-    private _isMounted;
-    private _inputElement;
-    /** @internal */
-    readonly state: Readonly<ToggleEditorState>;
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    private _updateToggleValue;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): JSX.Element;
-}
-/** Toggle Property Editor registered for the "bool" and "boolean" type names and "toggle" editor name.
- * It uses the [[ToggleEditor]] React component.
- * @public
- */
-export declare class TogglePropertyEditor extends PropertyEditorBase {
-    get containerHandlesBlur(): boolean;
-    get reactNode(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ToggleEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
+import { PropertyEditorBase } from "./PropertyEditorManager";
+/** @internal */
+interface ToggleEditorState {
+    toggleValue: boolean;
+    isDisabled?: boolean;
+}
+/** ToggleEditor React component that is a property editor with checkbox input
+ * @public
+ */
+export declare class ToggleEditor extends React.PureComponent<PropertyEditorProps, ToggleEditorState> implements TypeEditor {
+    private _isMounted;
+    private _inputElement;
+    /** @internal */
+    readonly state: Readonly<ToggleEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private _updateToggleValue;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): JSX.Element;
+}
+/** Toggle Property Editor registered for the "bool" and "boolean" type names and "toggle" editor name.
+ * It uses the [[ToggleEditor]] React component.
+ * @public
+ */
+export declare class TogglePropertyEditor extends PropertyEditorBase {
+    get containerHandlesBlur(): boolean;
+    get reactNode(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=ToggleEditor.d.ts.map