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

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

@@ -1,222 +1,222 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./SliderEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
-import { Icon } from "@itwin/core-react";
-import { Slider } from "@itwin/itwinui-react";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-import { PopupButton, PopupContent, PopupOkCancelButtons } from "./PopupButton";
-/** SliderEditor React component that is a property editor with numeric input & up/down buttons
- * @public
- */
-export class SliderEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._enterKey = false;
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            value: 0,
-            min: 0,
-            max: 100,
-        };
-        this._handleChange = (values) => {
-            const newValue = values[0];
-            // istanbul ignore else
-            if (this._isMounted)
-                this.setState({
-                    value: newValue,
-                });
-        };
-        this.internalFormatTooltip = (value, step = 1) => {
-            if (Number.isInteger(step))
-                return value.toFixed(0);
-            const stepString = step.toString();
-            const decimalIndex = stepString.indexOf(".");
-            const numDecimals = step.toString().length - (decimalIndex + 1);
-            return value.toFixed(numDecimals);
-        };
-        this._handleEnter = async () => {
-            this._enterKey = true;
-            await this._handleCommit();
-        };
-        this._handleClose = async () => {
-            if (this._enterKey) {
-                this._enterKey = false;
-            }
-            else {
-                // istanbul ignore else
-                if (this.props.onCancel)
-                    this.props.onCancel();
-            }
-        };
-        this._handleOk = async (_event) => {
-            await this._handleCommit();
-        };
-        this._handleCancel = (_event) => {
-            // istanbul ignore else
-            if (this.props.onCancel) {
-                this.props.onCancel();
-            }
-        };
-        this._handleCommit = async () => {
-            // 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.tooltipProps = (_index, val) => {
-            const content = this.state.formatTooltip ? this.state.formatTooltip(val) : this.internalFormatTooltip(val, this.state.step);
-            return { placement: this.state.tooltipBelow ? "bottom" : "top", content, visible: this.state.showTooltip };
-        };
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: PropertyValueFormat.Primitive,
-                value: this.state.value,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    get hasFocus() {
-        let containsFocus = false;
-        // istanbul ignore else
-        if (this.htmlElement)
-            containsFocus = this.htmlElement.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 = 0;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            initialValue = record.value.value;
-        }
-        let size;
-        let min = 0;
-        let max = 100;
-        let step;
-        let showTooltip;
-        let tooltipBelow;
-        let formatTooltip;
-        let tickLabels;
-        let minLabel;
-        let maxLabel;
-        let trackDisplayMode;
-        let thumbMode;
-        const isDisabled = record ? record.isDisabled : undefined;
-        if (record && record.property && record.property.editor && record.property.editor.params) {
-            const sliderParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.Slider);
-            // istanbul ignore else
-            if (sliderParams) {
-                min = sliderParams.minimum;
-                max = sliderParams.maximum;
-                size = sliderParams.size;
-                step = sliderParams.step;
-                thumbMode = 1 === sliderParams.mode ? "allow-crossing" : "inhibit-crossing";
-                trackDisplayMode = !sliderParams.reversed ? "auto" : "odd-segments";
-                showTooltip = sliderParams.showTooltip;
-                tooltipBelow = sliderParams.tooltipBelow;
-                formatTooltip = sliderParams.formatTooltip;
-                minLabel = !sliderParams.showMinMax ? "" : sliderParams.minIconSpec ? React.createElement(Icon, { iconSpec: sliderParams.minIconSpec }) : undefined;
-                maxLabel = !sliderParams.showMinMax ? "" : sliderParams.maxIconSpec ? React.createElement(Icon, { iconSpec: sliderParams.maxIconSpec }) : undefined;
-                if (sliderParams.showTicks) {
-                    const count = sliderParams.getTickCount ? sliderParams.getTickCount() : 0;
-                    if (count) {
-                        tickLabels = [];
-                        const increment = (max - min) / count;
-                        for (let i = 0; i <= count; i++) {
-                            const value = (i * increment) + min;
-                            if (sliderParams.showTickLabels) {
-                                const label = sliderParams.formatTick ? sliderParams.formatTick(value) : this.internalFormatTooltip(value, step);
-                                tickLabels.push(label);
-                            }
-                            else {
-                                tickLabels.push("");
-                            }
-                        }
-                    }
-                    else if (sliderParams.getTickValues) {
-                        tickLabels = sliderParams.getTickValues().map((val) => sliderParams.formatTick ? sliderParams.formatTick(val) : this.internalFormatTooltip(val, step));
-                    }
-                }
-            }
-        }
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({
-                value: initialValue, isDisabled,
-                size,
-                min, max, step, trackDisplayMode,
-                showTooltip, tooltipBelow, formatTooltip,
-                minLabel,
-                maxLabel,
-                tickLabels,
-                thumbMode,
-            });
-    }
-    /** @internal */
-    render() {
-        const className = classnames("components-cell-editor", "components-slider-editor", this.props.className);
-        const minSize = this.state.size ? this.state.size : 100;
-        const style = {
-            ...this.props.style,
-            minWidth: `${minSize}px`,
-        };
-        const popupContent = (React.createElement(Slider, { className: "components-slider-editor-slider", style: style, values: [this.state.value], min: this.state.min, max: this.state.max, step: this.state.step, thumbMode: this.state.thumbMode, trackDisplayMode: this.state.trackDisplayMode, disabled: this.state.isDisabled, minLabel: this.state.minLabel, maxLabel: this.state.maxLabel, tooltipProps: this.tooltipProps, tickLabels: this.state.tickLabels, onChange: this._handleChange }));
-        return (React.createElement("div", { className: className, ref: this._divElement },
-            React.createElement(PopupButton, { label: this.state.value, onClose: this._handleClose, onEnter: this._handleEnter, setFocus: this.props.setFocus, focusTarget: ".core-slider-handle" },
-                React.createElement(PopupContent, null,
-                    popupContent,
-                    React.createElement(PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
-    }
-}
-/** Slider Property Editor registered for the "number" type name and "slider" editor name.
- * It uses the [[SliderEditor]] React component.
- * @public
- */
-export class SliderPropertyEditor extends PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(SliderEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Number, SliderPropertyEditor, StandardEditorNames.Slider);
-PropertyEditorManager.registerEditor(StandardTypeNames.Int, SliderPropertyEditor, StandardEditorNames.Slider);
-PropertyEditorManager.registerEditor(StandardTypeNames.Float, SliderPropertyEditor, StandardEditorNames.Slider);
-PropertyEditorManager.registerEditor(StandardTypeNames.Double, SliderPropertyEditor, StandardEditorNames.Slider);
+/*---------------------------------------------------------------------------------------------
+* 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 "./SliderEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
+import { Icon } from "@itwin/core-react";
+import { Slider } from "@itwin/itwinui-react";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+import { PopupButton, PopupContent, PopupOkCancelButtons } from "./PopupButton";
+/** SliderEditor React component that is a property editor with numeric input & up/down buttons
+ * @public
+ */
+export class SliderEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._enterKey = false;
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            value: 0,
+            min: 0,
+            max: 100,
+        };
+        this._handleChange = (values) => {
+            const newValue = values[0];
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState({
+                    value: newValue,
+                });
+        };
+        this.internalFormatTooltip = (value, step = 1) => {
+            if (Number.isInteger(step))
+                return value.toFixed(0);
+            const stepString = step.toString();
+            const decimalIndex = stepString.indexOf(".");
+            const numDecimals = step.toString().length - (decimalIndex + 1);
+            return value.toFixed(numDecimals);
+        };
+        this._handleEnter = async () => {
+            this._enterKey = true;
+            await this._handleCommit();
+        };
+        this._handleClose = async () => {
+            if (this._enterKey) {
+                this._enterKey = false;
+            }
+            else {
+                // istanbul ignore else
+                if (this.props.onCancel)
+                    this.props.onCancel();
+            }
+        };
+        this._handleOk = async (_event) => {
+            await this._handleCommit();
+        };
+        this._handleCancel = (_event) => {
+            // istanbul ignore else
+            if (this.props.onCancel) {
+                this.props.onCancel();
+            }
+        };
+        this._handleCommit = async () => {
+            // 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.tooltipProps = (_index, val) => {
+            const content = this.state.formatTooltip ? this.state.formatTooltip(val) : this.internalFormatTooltip(val, this.state.step);
+            return { placement: this.state.tooltipBelow ? "bottom" : "top", content, visible: this.state.showTooltip };
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.value,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this.htmlElement)
+            containsFocus = this.htmlElement.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 = 0;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            initialValue = record.value.value;
+        }
+        let size;
+        let min = 0;
+        let max = 100;
+        let step;
+        let showTooltip;
+        let tooltipBelow;
+        let formatTooltip;
+        let tickLabels;
+        let minLabel;
+        let maxLabel;
+        let trackDisplayMode;
+        let thumbMode;
+        const isDisabled = record ? record.isDisabled : undefined;
+        if (record && record.property && record.property.editor && record.property.editor.params) {
+            const sliderParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.Slider);
+            // istanbul ignore else
+            if (sliderParams) {
+                min = sliderParams.minimum;
+                max = sliderParams.maximum;
+                size = sliderParams.size;
+                step = sliderParams.step;
+                thumbMode = 1 === sliderParams.mode ? "allow-crossing" : "inhibit-crossing";
+                trackDisplayMode = !sliderParams.reversed ? "auto" : "odd-segments";
+                showTooltip = sliderParams.showTooltip;
+                tooltipBelow = sliderParams.tooltipBelow;
+                formatTooltip = sliderParams.formatTooltip;
+                minLabel = !sliderParams.showMinMax ? "" : sliderParams.minIconSpec ? React.createElement(Icon, { iconSpec: sliderParams.minIconSpec }) : undefined;
+                maxLabel = !sliderParams.showMinMax ? "" : sliderParams.maxIconSpec ? React.createElement(Icon, { iconSpec: sliderParams.maxIconSpec }) : undefined;
+                if (sliderParams.showTicks) {
+                    const count = sliderParams.getTickCount ? sliderParams.getTickCount() : 0;
+                    if (count) {
+                        tickLabels = [];
+                        const increment = (max - min) / count;
+                        for (let i = 0; i <= count; i++) {
+                            const value = (i * increment) + min;
+                            if (sliderParams.showTickLabels) {
+                                const label = sliderParams.formatTick ? sliderParams.formatTick(value) : this.internalFormatTooltip(value, step);
+                                tickLabels.push(label);
+                            }
+                            else {
+                                tickLabels.push("");
+                            }
+                        }
+                    }
+                    else if (sliderParams.getTickValues) {
+                        tickLabels = sliderParams.getTickValues().map((val) => sliderParams.formatTick ? sliderParams.formatTick(val) : this.internalFormatTooltip(val, step));
+                    }
+                }
+            }
+        }
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({
+                value: initialValue, isDisabled,
+                size,
+                min, max, step, trackDisplayMode,
+                showTooltip, tooltipBelow, formatTooltip,
+                minLabel,
+                maxLabel,
+                tickLabels,
+                thumbMode,
+            });
+    }
+    /** @internal */
+    render() {
+        const className = classnames("components-cell-editor", "components-slider-editor", this.props.className);
+        const minSize = this.state.size ? this.state.size : 100;
+        const style = {
+            ...this.props.style,
+            minWidth: `${minSize}px`,
+        };
+        const popupContent = (React.createElement(Slider, { className: "components-slider-editor-slider", style: style, values: [this.state.value], min: this.state.min, max: this.state.max, step: this.state.step, thumbMode: this.state.thumbMode, trackDisplayMode: this.state.trackDisplayMode, disabled: this.state.isDisabled, minLabel: this.state.minLabel, maxLabel: this.state.maxLabel, tooltipProps: this.tooltipProps, tickLabels: this.state.tickLabels, onChange: this._handleChange }));
+        return (React.createElement("div", { className: className, ref: this._divElement },
+            React.createElement(PopupButton, { label: this.state.value, onClose: this._handleClose, onEnter: this._handleEnter, setFocus: this.props.setFocus, focusTarget: ".core-slider-handle" },
+                React.createElement(PopupContent, null,
+                    popupContent,
+                    React.createElement(PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
+    }
+}
+/** Slider Property Editor registered for the "number" type name and "slider" editor name.
+ * It uses the [[SliderEditor]] React component.
+ * @public
+ */
+export class SliderPropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(SliderEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, SliderPropertyEditor, StandardEditorNames.Slider);
+PropertyEditorManager.registerEditor(StandardTypeNames.Int, SliderPropertyEditor, StandardEditorNames.Slider);
+PropertyEditorManager.registerEditor(StandardTypeNames.Float, SliderPropertyEditor, StandardEditorNames.Slider);
+PropertyEditorManager.registerEditor(StandardTypeNames.Double, SliderPropertyEditor, StandardEditorNames.Slider);
 //# sourceMappingURL=SliderEditor.js.map

package/lib/esm/components-react/editors/SliderEditor.scss

@@ -2,7 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/variables";
+@import "./variables";
 
 .components-slider-editor {
   min-width: 100%;
@@ -10,5 +10,5 @@
 
 .components-slider-editor-slider {
   min-width: 100px;
-  min-height: $uicore-component-height-small;
+  min-height: $editor-component-height-small;
 }

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

@@ -1,41 +1,41 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./TextEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
-/** @internal */
-interface TextEditorState {
-    inputValue: string;
-    readonly: boolean;
-    isDisabled?: boolean;
-    size?: number;
-    maxLength?: number;
-    iconSpec?: string;
-}
-/** TextEditor React component that is a property editor with text input
- * @public
- */
-export declare class TextEditor extends React.PureComponent<PropertyEditorProps, TextEditorState> implements TypeEditor {
-    private _isMounted;
-    private _ariaLabel;
-    private _inputElement;
-    /** @internal */
-    readonly state: Readonly<TextEditorState>;
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    private _updateInputValue;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./TextEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
+/** @internal */
+interface TextEditorState {
+    inputValue: string;
+    readonly: boolean;
+    isDisabled?: boolean;
+    size?: number;
+    maxLength?: number;
+    iconSpec?: string;
+}
+/** TextEditor React component that is a property editor with text input
+ * @public
+ */
+export declare class TextEditor extends React.PureComponent<PropertyEditorProps, TextEditorState> implements TypeEditor {
+    private _isMounted;
+    private _ariaLabel;
+    private _inputElement;
+    /** @internal */
+    readonly state: Readonly<TextEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private _updateInputValue;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=TextEditor.d.ts.map