@itwin/components-react 4.17.0 → 5.0.0-dev.2

package/lib/components-react/editors/TextEditor.js

@@ -0,0 +1,144 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./TextEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyEditorParamTypes, PropertyValueFormat, } from "@itwin/appui-abstract";
+import { Icon, IconInput } from "@itwin/core-react";
+import { Input } from "@itwin/itwinui-react";
+import { TypeConverterManager } from "../converters/TypeConverterManager.js";
+import { UiComponents } from "../UiComponents.js";
+/** TextEditor React component that is a property editor with text input
+ * @public
+ */
+export class TextEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        this.state = {
+            inputValue: "",
+            readonly: false,
+        };
+        this._updateInputValue = (e) => {
+            if (this._isMounted)
+                this.setState({
+                    inputValue: e.target.value,
+                }, async () => {
+                    if (this.props.shouldCommitOnChange &&
+                        this.props.onCommit &&
+                        this.props.propertyRecord) {
+                        const newValue = await this.getPropertyValue();
+                        if (newValue)
+                            this.props.onCommit({
+                                propertyRecord: this.props.propertyRecord,
+                                newValue,
+                            });
+                    }
+                });
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = await TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertFromStringToPropertyValue(this.state.inputValue, record);
+            propertyValue.displayValue = this.state.inputValue;
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._inputElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._inputElement.current;
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        void this.setStateFromProps();
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            void this.setStateFromProps();
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue = "";
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            const value = record.value.value;
+            initialValue = await TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertPropertyToString(record.property, value);
+        }
+        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
+        let size;
+        let maxLength;
+        let iconSpec;
+        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.valueOf());
+            if (editorSizeParams) {
+                if (editorSizeParams.size)
+                    size = editorSizeParams.size;
+                if (editorSizeParams.maxLength)
+                    maxLength = editorSizeParams.maxLength;
+            }
+            const iconParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.Icon.valueOf());
+            if (iconParams) {
+                iconSpec = iconParams.definition.iconSpec;
+            }
+        }
+        if (this._isMounted)
+            this.setState({
+                inputValue: initialValue,
+                readonly,
+                size,
+                maxLength,
+                isDisabled,
+                iconSpec,
+            });
+    }
+    render() {
+        const className = classnames("components-cell-editor", "components-text-editor", this.props.className);
+        const minSize = this.state.size ? this.state.size : 8;
+        const minWidthStyle = {
+            minWidth: `${minSize * 0.75}em`,
+        };
+        const inputProps = {
+            type: "text",
+            className,
+            style: this.props.style ? this.props.style : minWidthStyle,
+            readOnly: this.state.readonly,
+            disabled: this.state.isDisabled,
+            maxLength: this.state.maxLength,
+            value: this.state.inputValue,
+            onBlur: this.props.onBlur,
+            onChange: this._updateInputValue,
+            autoFocus: this.props.setFocus && !this.state.isDisabled,
+        };
+        inputProps["aria-label"] = UiComponents.translate("editor.text");
+        let reactNode;
+        if (this.state.iconSpec) {
+            // eslint-disable-next-line deprecation/deprecation
+            const icon = React.createElement(Icon, { iconSpec: this.state.iconSpec });
+            reactNode = (
+            // eslint-disable-next-line deprecation/deprecation
+            React.createElement(IconInput, { ...inputProps, ref: this._inputElement, icon: icon, "data-testid": "components-text-editor" }));
+        }
+        else {
+            reactNode = (React.createElement(Input, { ...inputProps, ref: this._inputElement, "data-testid": "components-text-editor", size: "small", id: this.props.propertyRecord?.property.name }));
+        }
+        return reactNode;
+    }
+}
+//# sourceMappingURL=TextEditor.js.map

package/lib/components-react/editors/TextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/TextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./TextEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  IconEditorParams,\n  InputEditorSizeParams,\n  PrimitiveValue,\n  PropertyEditorParams,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { Icon, IconInput } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { TypeConverterManager } from \"../converters/TypeConverterManager.js\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { UiComponents } from \"../UiComponents.js\";\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Input>;\n\n/** @internal */\ninterface TextEditorState {\n  inputValue: string;\n  readonly: boolean;\n  isDisabled?: boolean;\n  size?: number;\n  maxLength?: number;\n  iconSpec?: string;\n}\n\n/** TextEditor React component that is a property editor with text input\n * @public\n */\nexport class TextEditor\n  extends React.PureComponent<PropertyEditorProps, TextEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _inputElement = React.createRef<HTMLInputElement>();\n\n  public override readonly state: Readonly<TextEditorState> = {\n    inputValue: \"\",\n    readonly: false,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = await TypeConverterManager.getConverter(\n        record.property.typename,\n        record.property.converter?.name\n      ).convertFromStringToPropertyValue(this.state.inputValue, record);\n      (propertyValue as PrimitiveValue).displayValue = this.state.inputValue;\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._inputElement.current;\n  }\n\n  private _updateInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (this._isMounted)\n      this.setState(\n        {\n          inputValue: e.target.value,\n        },\n        async () => {\n          if (\n            this.props.shouldCommitOnChange &&\n            this.props.onCommit &&\n            this.props.propertyRecord\n          ) {\n            const newValue = await this.getPropertyValue();\n            if (newValue)\n              this.props.onCommit({\n                propertyRecord: this.props.propertyRecord,\n                newValue,\n              });\n          }\n        }\n      );\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = \"\";\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      const value = record.value.value;\n      initialValue = await TypeConverterManager.getConverter(\n        record.property.typename,\n        record.property.converter?.name\n      ).convertPropertyToString(record.property, value);\n    }\n\n    const readonly =\n      record && undefined !== record.isReadonly ? record.isReadonly : false;\n    let size: number | undefined;\n    let maxLength: number | undefined;\n    let iconSpec: string | undefined;\n\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    if (\n      record &&\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const editorSizeParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.InputEditorSize.valueOf()\n      ) as InputEditorSizeParams;\n      if (editorSizeParams) {\n        if (editorSizeParams.size) size = editorSizeParams.size;\n        if (editorSizeParams.maxLength) maxLength = editorSizeParams.maxLength;\n      }\n\n      const iconParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.Icon.valueOf()\n      ) as IconEditorParams;\n      if (iconParams) {\n        iconSpec = iconParams.definition.iconSpec;\n      }\n    }\n\n    if (this._isMounted)\n      this.setState({\n        inputValue: initialValue,\n        readonly,\n        size,\n        maxLength,\n        isDisabled,\n        iconSpec,\n      });\n  }\n\n  public override render(): React.ReactNode {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-text-editor\",\n      this.props.className\n    );\n    const minSize = this.state.size ? this.state.size : 8;\n    const minWidthStyle: React.CSSProperties = {\n      minWidth: `${minSize * 0.75}em`,\n    };\n    const inputProps: InputProps = {\n      type: \"text\",\n      className,\n      style: this.props.style ? this.props.style : minWidthStyle,\n      readOnly: this.state.readonly,\n      disabled: this.state.isDisabled,\n      maxLength: this.state.maxLength,\n      value: this.state.inputValue,\n      onBlur: this.props.onBlur,\n      onChange: this._updateInputValue,\n      autoFocus: this.props.setFocus && !this.state.isDisabled,\n    };\n\n    inputProps[\"aria-label\"] = UiComponents.translate(\"editor.text\");\n\n    let reactNode: React.ReactNode;\n    if (this.state.iconSpec) {\n      // eslint-disable-next-line deprecation/deprecation\n      const icon = <Icon iconSpec={this.state.iconSpec} />;\n      reactNode = (\n        // eslint-disable-next-line deprecation/deprecation\n        <IconInput\n          {...inputProps}\n          ref={this._inputElement}\n          icon={icon}\n          data-testid=\"components-text-editor\"\n        />\n      );\n    } else {\n      reactNode = (\n        <Input\n          {...inputProps}\n          ref={this._inputElement}\n          data-testid=\"components-text-editor\"\n          size=\"small\"\n          id={this.props.propertyRecord?.property.name}\n        />\n      );\n    }\n\n    return reactNode;\n  }\n}\n"]}

package/lib/components-react/editors/TextEditor.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables" as *;
+
+.components-text-editor {
+  min-width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.components-smallEditor-host {
+  .components-text-editor {
+    min-height: $editor-component-height-small !important;
+    padding-top: 1px !important;
+    padding-bottom: 1px !important;
+  }
+}

package/lib/components-react/editors/TextareaEditor.d.ts

@@ -0,0 +1,49 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./TextareaEditor.scss";
+import * as React from "react";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "./EditorContainer.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+/** @internal */
+interface TextareaEditorState {
+    inputValue: string;
+    readonly: boolean;
+    isDisabled?: boolean;
+    size?: number;
+    maxLength?: number;
+    rows: number;
+}
+/** TextareaEditor React component that is a property editor with text input
+ * @public
+ */
+export declare class TextareaEditor extends React.PureComponent<PropertyEditorProps, TextareaEditorState> implements TypeEditor {
+    private _isMounted;
+    private _divElement;
+    private _textAreaElement;
+    readonly state: Readonly<TextareaEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private _updateTextareaValue;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    private _handleOk;
+    private _handleCancel;
+    render(): React.ReactNode;
+}
+/** Textarea Property Editor registered for the "text" and "string" type names and "multi-line" editor name.
+ * It uses the [[TextareaEditor]] React component.
+ * @public
+ */
+export declare class TextareaPropertyEditor extends PropertyEditorBase {
+    get containerHandlesBlur(): boolean;
+    get containerHandlesEnter(): boolean;
+    get containerHandlesTab(): boolean;
+    get reactNode(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=TextareaEditor.d.ts.map

package/lib/components-react/editors/TextareaEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaEditor.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/TextareaEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAKV,aAAa,EACd,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAUhE,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAID;;GAEG;AACH,qBAAa,cACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CACpE,YAAW,UAAU;IAErB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAqC;IACxD,OAAO,CAAC,gBAAgB,CAA0C;IAElE,SAAyB,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAI3D;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAcnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAK7B;IAED,OAAO,CAAC,oBAAoB,CAO1B;IAEc,iBAAiB;IAKjB,oBAAoB;IAIpB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAsD/B,OAAO,CAAC,SAAS,CAUf;IAEF,OAAO,CAAC,aAAa,CAInB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;CAgD1C;AAED;;;GAGG;AACH,qBAAa,sBAAuB,SAAQ,kBAAkB;IAC5D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IACD,IAAoB,qBAAqB,IAAI,OAAO,CAEnD;IACD,IAAoB,mBAAmB,IAAI,OAAO,CAEjD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

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

@@ -0,0 +1,167 @@
+/*---------------------------------------------------------------------------------------------
+ * 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, } from "@itwin/appui-abstract";
+import { Textarea } from "@itwin/itwinui-react";
+import { TypeConverterManager } from "../converters/TypeConverterManager.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+import { PopupButton, PopupContent, PopupOkCancelButtons, } from "./PopupButton.js";
+import { UiComponents } from "../UiComponents.js";
+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._divElement = React.createRef();
+        this._textAreaElement = React.createRef();
+        this.state = {
+            inputValue: "",
+            readonly: false,
+            rows: DEFAULT_ROWS,
+        };
+        this._updateTextareaValue = (e) => {
+            if (this._isMounted)
+                this.setState({
+                    inputValue: e.target.value,
+                });
+        };
+        this._handleOk = async (_event) => {
+            if (this.props.propertyRecord && this.props.onCommit) {
+                const propertyValue = await this.getPropertyValue();
+                if (propertyValue !== undefined) {
+                    this.props.onCommit({
+                        propertyRecord: this.props.propertyRecord,
+                        newValue: propertyValue,
+                    });
+                }
+            }
+        };
+        this._handleCancel = (_event) => {
+            if (this.props.onCancel) {
+                this.props.onCancel();
+            }
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        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;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        void this.setStateFromProps();
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            void this.setStateFromProps();
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue = "";
+        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.valueOf());
+            if (editorSizeParams) {
+                if (editorSizeParams.size)
+                    size = editorSizeParams.size;
+                if (editorSizeParams.maxLength)
+                    maxLength = editorSizeParams.maxLength;
+            }
+            const multilineParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.MultilineText.valueOf());
+            if (multilineParams) {
+                rows = multilineParams.rows;
+            }
+        }
+        if (this._isMounted)
+            this.setState({
+                inputValue: initialValue,
+                readonly,
+                size,
+                maxLength,
+                isDisabled,
+                rows,
+            });
+    }
+    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,
+            autoFocus: this.props.setFocus && !this.state.isDisabled,
+        };
+        textareaProps["aria-label"] = UiComponents.translate("editor.textarea");
+        return (React.createElement("div", { className: className, ref: this._divElement },
+            React.createElement(PopupButton, { label: this.state.inputValue, closeOnEnter: false, setFocus: this.props.setFocus, focusTarget: this._textAreaElement },
+                React.createElement(PopupContent, null,
+                    React.createElement(Textarea, { ...textareaProps, "data-testid": "components-textarea-editor", ref: this._textAreaElement }),
+                    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 {
+    get containerHandlesBlur() {
+        return false;
+    }
+    get containerHandlesEnter() {
+        return false;
+    }
+    get containerHandlesTab() {
+        return false;
+    }
+    get reactNode() {
+        return React.createElement(TextareaEditor, null);
+    }
+}
+//# sourceMappingURL=TextareaEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/TextareaEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./TextareaEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  InputEditorSizeParams,\n  MultilineTextEditorParams,\n  PrimitiveValue,\n  PropertyEditorParams,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { Textarea } from \"@itwin/itwinui-react\";\nimport { TypeConverterManager } from \"../converters/TypeConverterManager.js\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport {\n  PopupButton,\n  PopupContent,\n  PopupOkCancelButtons,\n} from \"./PopupButton.js\";\nimport { UiComponents } from \"../UiComponents.js\";\n\ntype TextareaProps = React.ComponentPropsWithoutRef<typeof Textarea>;\n\n/** @internal */\ninterface TextareaEditorState {\n  inputValue: string;\n  readonly: boolean;\n  isDisabled?: boolean;\n  size?: number;\n  maxLength?: number;\n  rows: number;\n}\n\nconst DEFAULT_ROWS = 3;\n\n/** TextareaEditor React component that is a property editor with text input\n * @public\n */\nexport class TextareaEditor\n  extends React.PureComponent<PropertyEditorProps, TextareaEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n  private _textAreaElement = React.createRef<HTMLTextAreaElement>();\n\n  public override readonly state: Readonly<TextareaEditorState> = {\n    inputValue: \"\",\n    readonly: false,\n    rows: DEFAULT_ROWS,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = await TypeConverterManager.getConverter(\n        record.property.typename\n      ).convertFromStringToPropertyValue(this.state.inputValue, record);\n      (propertyValue as PrimitiveValue).displayValue = this.state.inputValue;\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private _updateTextareaValue = (\n    e: React.ChangeEvent<HTMLTextAreaElement>\n  ) => {\n    if (this._isMounted)\n      this.setState({\n        inputValue: e.target.value,\n      });\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = \"\";\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      const value = record.value.value;\n      initialValue = await TypeConverterManager.getConverter(\n        record.property.typename\n      ).convertPropertyToString(record.property, value);\n    }\n\n    const readonly =\n      record && undefined !== record.isReadonly ? record.isReadonly : false;\n    let size: number | undefined;\n    let maxLength: number | undefined;\n    let rows: number = DEFAULT_ROWS;\n\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    if (\n      record &&\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const editorSizeParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.InputEditorSize.valueOf()\n      ) as InputEditorSizeParams;\n      if (editorSizeParams) {\n        if (editorSizeParams.size) size = editorSizeParams.size;\n        if (editorSizeParams.maxLength) maxLength = editorSizeParams.maxLength;\n      }\n\n      const multilineParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.MultilineText.valueOf()\n      ) as MultilineTextEditorParams;\n      if (multilineParams) {\n        rows = multilineParams.rows;\n      }\n    }\n\n    if (this._isMounted)\n      this.setState({\n        inputValue: initialValue,\n        readonly,\n        size,\n        maxLength,\n        isDisabled,\n        rows,\n      });\n  }\n\n  private _handleOk = async (_event: React.MouseEvent): Promise<void> => {\n    if (this.props.propertyRecord && this.props.onCommit) {\n      const propertyValue = await this.getPropertyValue();\n      if (propertyValue !== undefined) {\n        this.props.onCommit({\n          propertyRecord: this.props.propertyRecord,\n          newValue: propertyValue,\n        });\n      }\n    }\n  };\n\n  private _handleCancel = (_event: React.MouseEvent): void => {\n    if (this.props.onCancel) {\n      this.props.onCancel();\n    }\n  };\n\n  public override render(): React.ReactNode {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-textarea-editor\",\n      this.props.className\n    );\n    const minSize = this.state.size ? this.state.size : 8;\n    const style: React.CSSProperties = {\n      ...this.props.style,\n      minWidth: `${minSize * 0.75}em`,\n    };\n    const textareaProps: TextareaProps = {\n      className: \"components-textarea-editor-textarea\",\n      style,\n      rows: this.state.rows,\n      readOnly: this.state.readonly,\n      disabled: this.state.isDisabled,\n      maxLength: this.state.maxLength,\n      value: this.state.inputValue,\n      onChange: this._updateTextareaValue,\n      autoFocus: this.props.setFocus && !this.state.isDisabled,\n    };\n\n    textareaProps[\"aria-label\"] = UiComponents.translate(\"editor.textarea\");\n\n    return (\n      <div className={className} ref={this._divElement}>\n        <PopupButton\n          label={this.state.inputValue}\n          closeOnEnter={false}\n          setFocus={this.props.setFocus}\n          focusTarget={this._textAreaElement}\n        >\n          <PopupContent>\n            <Textarea\n              {...textareaProps}\n              data-testid=\"components-textarea-editor\"\n              ref={this._textAreaElement}\n            />\n            <PopupOkCancelButtons\n              onOk={this._handleOk}\n              onCancel={this._handleCancel}\n            />\n          </PopupContent>\n        </PopupButton>\n      </div>\n    );\n  }\n}\n\n/** Textarea Property Editor registered for the \"text\" and \"string\" type names and \"multi-line\" editor name.\n * It uses the [[TextareaEditor]] React component.\n * @public\n */\nexport class TextareaPropertyEditor extends PropertyEditorBase {\n  public override get containerHandlesBlur(): boolean {\n    return false;\n  }\n  public override get containerHandlesEnter(): boolean {\n    return false;\n  }\n  public override get containerHandlesTab(): boolean {\n    return false;\n  }\n\n  public get reactNode(): React.ReactNode {\n    return <TextareaEditor />;\n  }\n}\n"]}

package/lib/components-react/editors/TextareaEditor.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-textarea-editor {
+  min-width: 100%;
+  margin: 0;
+}
+
+.components-textarea-editor-textarea {
+  min-width: 150px;
+  margin: 0;
+}

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

@@ -0,0 +1,40 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ToggleEditor.scss";
+import * as React from "react";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "./EditorContainer.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+/** @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;
+    readonly state: Readonly<ToggleEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private _updateToggleValue;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    render(): React.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleEditor.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/ToggleEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,YACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,iBAAiB,CAClE,YAAW,UAAU;IAErB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAuC;IAE5D,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAGzD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAcnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,kBAAkB,CAyBxB;IAEc,iBAAiB;IAKjB,oBAAoB;IAIpB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAmBf,MAAM;CAuBvB;AAED;;;GAGG;AACH,qBAAa,oBAAqB,SAAQ,kBAAkB;IAC1D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

package/lib/components-react/editors/ToggleEditor.js

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./ToggleEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+import { ToggleSwitch } from "@itwin/itwinui-react";
+/** ToggleEditor React component that is a property editor with checkbox input
+ * @public
+ */
+export class ToggleEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        this.state = {
+            toggleValue: false,
+            isDisabled: false,
+        };
+        this._updateToggleValue = (e) => {
+            if (this._isMounted) {
+                if (this._isMounted) {
+                    const toggleValue = !!e.target.checked;
+                    this.setState({
+                        toggleValue,
+                    }, async () => {
+                        if (this.props.propertyRecord && this.props.onCommit) {
+                            const propertyValue = await this.getPropertyValue();
+                            if (propertyValue !== undefined) {
+                                this.props.onCommit({
+                                    propertyRecord: this.props.propertyRecord,
+                                    newValue: propertyValue,
+                                });
+                            }
+                        }
+                    });
+                }
+            }
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.toggleValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._inputElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._inputElement.current;
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        void this.setStateFromProps();
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            void this.setStateFromProps();
+        }
+    }
+    async setStateFromProps() {
+        const { propertyRecord } = this.props;
+        let toggleValue = false;
+        let isDisabled = false;
+        if (propertyRecord &&
+            propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            toggleValue = primitiveValue;
+        }
+        if (propertyRecord && propertyRecord.isDisabled)
+            isDisabled = propertyRecord.isDisabled;
+        if (this._isMounted)
+            this.setState({ toggleValue, isDisabled });
+    }
+    render() {
+        const className = classnames("components-cell-editor", "components-toggle-editor", this.props.className);
+        const isChecked = this.state.toggleValue;
+        const isDisabled = !!this.state.isDisabled;
+        return (React.createElement(ToggleSwitch, { ref: this._inputElement, onBlur: this.props.onBlur, className: className, style: this.props.style, checked: isChecked, disabled: isDisabled, onChange: this._updateToggleValue, "data-testid": "components-toggle-editor", autoFocus: this.props.setFocus }));
+    }
+}
+/** Toggle Property Editor registered for the "bool" and "boolean" type names and "toggle" editor name.
+ * It uses the [[ToggleEditor]] React component.
+ * @public
+ */
+export class TogglePropertyEditor extends PropertyEditorBase {
+    get containerHandlesBlur() {
+        return false;
+    }
+    get reactNode() {
+        return React.createElement(ToggleEditor, null);
+    }
+}
+//# sourceMappingURL=ToggleEditor.js.map

package/lib/components-react/editors/ToggleEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/ToggleEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./ToggleEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PropertyValue } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport { ToggleSwitch } from \"@itwin/itwinui-react\";\n\n/** @internal */\ninterface ToggleEditorState {\n  toggleValue: boolean;\n  isDisabled?: boolean;\n}\n\n/** ToggleEditor React component that is a property editor with checkbox input\n * @public\n */\nexport class ToggleEditor\n  extends React.PureComponent<PropertyEditorProps, ToggleEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _inputElement = React.createRef<HTMLInputElement>();\n\n  public override readonly state: Readonly<ToggleEditorState> = {\n    toggleValue: false,\n    isDisabled: false,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.toggleValue,\n        displayValue: \"\",\n      };\n    }\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._inputElement.current;\n  }\n\n  private _updateToggleValue = (\n    e: React.ChangeEvent<HTMLInputElement>\n  ): any => {\n    if (this._isMounted) {\n      if (this._isMounted) {\n        const toggleValue = !!e.target.checked;\n\n        this.setState(\n          {\n            toggleValue,\n          },\n          async () => {\n            if (this.props.propertyRecord && this.props.onCommit) {\n              const propertyValue = await this.getPropertyValue();\n              if (propertyValue !== undefined) {\n                this.props.onCommit({\n                  propertyRecord: this.props.propertyRecord,\n                  newValue: propertyValue,\n                });\n              }\n            }\n          }\n        );\n      }\n    }\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const { propertyRecord } = this.props;\n    let toggleValue = false;\n    let isDisabled = false;\n\n    if (\n      propertyRecord &&\n      propertyRecord.value.valueFormat === PropertyValueFormat.Primitive\n    ) {\n      const primitiveValue = propertyRecord.value.value;\n      toggleValue = primitiveValue as boolean;\n    }\n\n    if (propertyRecord && propertyRecord.isDisabled)\n      isDisabled = propertyRecord.isDisabled;\n\n    if (this._isMounted) this.setState({ toggleValue, isDisabled });\n  }\n\n  public override render() {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-toggle-editor\",\n      this.props.className\n    );\n    const isChecked = this.state.toggleValue;\n    const isDisabled = !!this.state.isDisabled;\n\n    return (\n      <ToggleSwitch\n        ref={this._inputElement}\n        onBlur={this.props.onBlur}\n        className={className}\n        style={this.props.style}\n        checked={isChecked}\n        disabled={isDisabled}\n        onChange={this._updateToggleValue}\n        data-testid=\"components-toggle-editor\"\n        autoFocus={this.props.setFocus} // eslint-disable-line jsx-a11y/no-autofocus\n      />\n    );\n  }\n}\n\n/** Toggle Property Editor registered for the \"bool\" and \"boolean\" type names and \"toggle\" editor name.\n * It uses the [[ToggleEditor]] React component.\n * @public\n */\nexport class TogglePropertyEditor extends PropertyEditorBase {\n  public override get containerHandlesBlur(): boolean {\n    return false;\n  }\n\n  public get reactNode(): React.ReactNode {\n    return <ToggleEditor />;\n  }\n}\n"]}

package/lib/components-react/editors/registerEditors.d.ts

@@ -0,0 +1,6 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+/** @internal */
+export declare function registerEditors(): void;
+//# sourceMappingURL=registerEditors.d.ts.map

package/lib/components-react/editors/registerEditors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerEditors.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/registerEditors.ts"],"names":[],"mappings":"AAIA;;GAEG;AAsBH,gBAAgB;AAChB,wBAAgB,eAAe,SA2H9B"}