@itwin/components-react 3.5.0-dev.25 → 3.5.0-dev.27

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

@@ -1,275 +1,275 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./DateTimeEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { AlternateDateFormats, PropertyValueFormat, StandardTypeNames, TimeDisplay, } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-import { PopupButton, PopupContent, PopupOkCancelButtons } from "./PopupButton";
-import { TimeField } from "../datepicker/TimeField";
-import { DatePicker } from "../datepicker/DatePicker";
-import { TypeConverterManager } from "../converters/TypeConverterManager";
-import { DateTimeTypeConverterBase } from "../converters/DateTimeTypeConverter";
-import { BodyText } from "@itwin/core-react";
-import { adjustDateToTimezone } from "../common/DateUtils";
-/** DateTimeEditor React component that is a property editor for selection of date and time.
- * @internal
- */
-export class DateTimeEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._enterKey = false;
-        this._divElement = React.createRef();
-        /** @internal */
-        this.state = {
-            value: new Date(),
-            editInUtc: false,
-        };
-        this._handleChange = (newValue) => {
-            // istanbul ignore else
-            if (this._isMounted && this.state.typeConverter) {
-                // istanbul ignore else
-                if (this.state.editInUtc) {
-                    newValue = adjustDateToTimezone(newValue, newValue.getTimezoneOffset() * -1);
-                }
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                this.processDateChange(this.state.typeConverter, newValue);
-            }
-        };
-        this._handleTimeChange = (time) => {
-            // Combine new time into selected Date
-            if (this.state.editInUtc) {
-                const newWorkingDate = adjustDateToTimezone(this.state.value, 0);
-                newWorkingDate.setUTCHours(time.hours, time.minutes, time.seconds);
-                this._handleChange(newWorkingDate);
-            }
-            else {
-                const newWorkingDate = new Date(this.state.value.getTime());
-                newWorkingDate.setHours(time.hours, time.minutes, time.seconds);
-                this._handleChange(newWorkingDate);
-            }
-        };
-        this._handleEnter = async () => {
-            this._enterKey = true;
-            await this._handleCommit();
-        };
-        this._handleClose = async () => {
-            if (this._enterKey) {
-                this._enterKey = false;
-            }
-            else {
-                // istanbul ignore next
-                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 });
-                }
-            }
-        };
-    }
-    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: this.state.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;
-    }
-    async processDateChange(typeConverter, newValue) {
-        // istanbul ignore else
-        if (this.props.propertyRecord) {
-            const displayValue = await typeConverter.convertPropertyToString(this.props.propertyRecord.property, newValue);
-            this.setState({
-                value: newValue,
-                displayValue,
-            });
-        }
-    }
-    /** @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() {
-        var _a, _b;
-        const record = this.props.propertyRecord;
-        let initialValue;
-        let typeConverter;
-        let timeDisplay;
-        let alternateDateFormat = AlternateDateFormats.None;
-        let editInUtc = false;
-        // istanbul ignore else
-        if (this.props.showTime)
-            timeDisplay = TimeDisplay.H12MC;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
-            // istanbul ignore else
-            if (record.value.value instanceof Date)
-                initialValue = new Date(record.value.value);
-            else if (typeof record.value.value === "string")
-                initialValue = new Date(record.value.value);
-            else if (record.value.value === undefined)
-                initialValue = new Date();
-            typeConverter = TypeConverterManager.getConverter(record.property.typename, (_a = record.property.converter) === null || _a === void 0 ? void 0 : _a.name);
-            const options = (_b = record.property.converter) === null || _b === void 0 ? void 0 : _b.options;
-            if (options) {
-                // istanbul ignore else
-                if ("alternateDateFormat" in options) {
-                    // istanbul ignore else
-                    if (DateTimeTypeConverterBase.isAlternateDateFormats(options.alternateDateFormat)) {
-                        timeDisplay = TimeDisplay.H24MS;
-                        alternateDateFormat = options.alternateDateFormat;
-                    }
-                }
-                if ("timeDisplay" in options && this.props.showTime) {
-                    timeDisplay = options.timeDisplay;
-                    // use 24 hr time display if alternateDateFormat is defined
-                    // istanbul ignore next
-                    if (alternateDateFormat && timeDisplay !== TimeDisplay.H24MS && timeDisplay !== TimeDisplay.H24M)
-                        timeDisplay = TimeDisplay.H24MS;
-                }
-                // istanbul ignore else
-                if (alternateDateFormat) {
-                    editInUtc = true;
-                    if (this.props.showTime) {
-                        if (alternateDateFormat === AlternateDateFormats.IsoShort) {
-                            alternateDateFormat = AlternateDateFormats.IsoDateTime;
-                        }
-                        if (alternateDateFormat === AlternateDateFormats.UtcShort) {
-                            alternateDateFormat = AlternateDateFormats.UtcDateTime;
-                        }
-                        if (alternateDateFormat === AlternateDateFormats.UtcShortWithDay) {
-                            alternateDateFormat = AlternateDateFormats.UtcDateTimeWithDay;
-                        }
-                    }
-                    else {
-                        timeDisplay = undefined;
-                        if (alternateDateFormat === AlternateDateFormats.IsoDateTime)
-                            alternateDateFormat = AlternateDateFormats.IsoShort;
-                        if (alternateDateFormat === AlternateDateFormats.UtcDateTime)
-                            alternateDateFormat = AlternateDateFormats.UtcShort;
-                        if (alternateDateFormat === AlternateDateFormats.UtcDateTimeWithDay)
-                            alternateDateFormat = AlternateDateFormats.UtcShortWithDay;
-                    }
-                }
-            }
-        }
-        // istanbul ignore next
-        if (!initialValue) {
-            throw new Error("Bad Value");
-        }
-        // istanbul ignore next
-        if (!typeConverter) {
-            throw new Error("Unable to determine TypeConverter");
-        }
-        const isDisabled = record && !!record.isDisabled;
-        const displayValue = await typeConverter.convertPropertyToString(record.property, initialValue);
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({
-                value: initialValue,
-                isDisabled,
-                timeDisplay,
-                typeConverter,
-                displayValue,
-                editInUtc,
-            });
-    }
-    /** @internal */
-    render() {
-        const date = this.state.editInUtc ? adjustDateToTimezone(this.state.value, 0) : this.state.value;
-        const timeSpec = {
-            hours: date.getHours(),
-            minutes: date.getMinutes(),
-            seconds: date.getSeconds(),
-        };
-        const className = classnames("components-cell-editor", "components-datetime-editor", this.props.className);
-        return (React.createElement("div", { className: className, ref: this._divElement },
-            React.createElement(PopupButton, { label: this.state.displayValue, onClose: this._handleClose, onEnter: this._handleEnter, setFocus: this.props.setFocus },
-                React.createElement(PopupContent, null,
-                    React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
-                            React.createElement(DatePicker, { selected: date, onDateChange: this._handleChange, showFocusOutline: false }),
-                            this.state.timeDisplay &&
-                                React.createElement("div", { className: "time-container" },
-                                    React.createElement(BodyText, { className: "time-label" }, "Time"),
-                                    React.createElement(TimeField, { time: timeSpec, timeDisplay: this.state.timeDisplay, onTimeChange: this._handleTimeChange })))),
-                    React.createElement(PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
-    }
-}
-/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
-  * It uses the [[DateTimeEditor]] React component.
-  * @internal
-  */
-export class ShortDateTimePropertyEditor extends PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(DateTimeEditor, { showTime: false });
-    }
-    // istanbul ignore next
-    get containerHandlesTab() {
-        return false;
-    }
-}
-/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
-  * It uses the [[DateTimeEditor]] React component.
-  * @internal
-  */
-export class DateTimePropertyEditor extends PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(DateTimeEditor, { showTime: true });
-    }
-    // istanbul ignore next
-    get containerHandlesTab() {
-        return false;
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.ShortDate, ShortDateTimePropertyEditor);
-PropertyEditorManager.registerEditor(StandardTypeNames.DateTime, DateTimePropertyEditor);
+/*---------------------------------------------------------------------------------------------
+* 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 "./DateTimeEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { AlternateDateFormats, PropertyValueFormat, StandardTypeNames, TimeDisplay, } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+import { PopupButton, PopupContent, PopupOkCancelButtons } from "./PopupButton";
+import { TimeField } from "../datepicker/TimeField";
+import { DatePicker } from "../datepicker/DatePicker";
+import { TypeConverterManager } from "../converters/TypeConverterManager";
+import { DateTimeTypeConverterBase } from "../converters/DateTimeTypeConverter";
+import { BodyText } from "@itwin/core-react";
+import { adjustDateToTimezone } from "../common/DateUtils";
+/** DateTimeEditor React component that is a property editor for selection of date and time.
+ * @internal
+ */
+export class DateTimeEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._enterKey = false;
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            value: new Date(),
+            editInUtc: false,
+        };
+        this._handleChange = (newValue) => {
+            // istanbul ignore else
+            if (this._isMounted && this.state.typeConverter) {
+                // istanbul ignore else
+                if (this.state.editInUtc) {
+                    newValue = adjustDateToTimezone(newValue, newValue.getTimezoneOffset() * -1);
+                }
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                this.processDateChange(this.state.typeConverter, newValue);
+            }
+        };
+        this._handleTimeChange = (time) => {
+            // Combine new time into selected Date
+            if (this.state.editInUtc) {
+                const newWorkingDate = adjustDateToTimezone(this.state.value, 0);
+                newWorkingDate.setUTCHours(time.hours, time.minutes, time.seconds);
+                this._handleChange(newWorkingDate);
+            }
+            else {
+                const newWorkingDate = new Date(this.state.value.getTime());
+                newWorkingDate.setHours(time.hours, time.minutes, time.seconds);
+                this._handleChange(newWorkingDate);
+            }
+        };
+        this._handleEnter = async () => {
+            this._enterKey = true;
+            await this._handleCommit();
+        };
+        this._handleClose = async () => {
+            if (this._enterKey) {
+                this._enterKey = false;
+            }
+            else {
+                // istanbul ignore next
+                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 });
+                }
+            }
+        };
+    }
+    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: this.state.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;
+    }
+    async processDateChange(typeConverter, newValue) {
+        // istanbul ignore else
+        if (this.props.propertyRecord) {
+            const displayValue = await typeConverter.convertPropertyToString(this.props.propertyRecord.property, newValue);
+            this.setState({
+                value: newValue,
+                displayValue,
+            });
+        }
+    }
+    /** @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() {
+        var _a, _b;
+        const record = this.props.propertyRecord;
+        let initialValue;
+        let typeConverter;
+        let timeDisplay;
+        let alternateDateFormat = AlternateDateFormats.None;
+        let editInUtc = false;
+        // istanbul ignore else
+        if (this.props.showTime)
+            timeDisplay = TimeDisplay.H12MC;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            // istanbul ignore else
+            if (record.value.value instanceof Date)
+                initialValue = new Date(record.value.value);
+            else if (typeof record.value.value === "string")
+                initialValue = new Date(record.value.value);
+            else if (record.value.value === undefined)
+                initialValue = new Date();
+            typeConverter = TypeConverterManager.getConverter(record.property.typename, (_a = record.property.converter) === null || _a === void 0 ? void 0 : _a.name);
+            const options = (_b = record.property.converter) === null || _b === void 0 ? void 0 : _b.options;
+            if (options) {
+                // istanbul ignore else
+                if ("alternateDateFormat" in options) {
+                    // istanbul ignore else
+                    if (DateTimeTypeConverterBase.isAlternateDateFormats(options.alternateDateFormat)) {
+                        timeDisplay = TimeDisplay.H24MS;
+                        alternateDateFormat = options.alternateDateFormat;
+                    }
+                }
+                if ("timeDisplay" in options && this.props.showTime) {
+                    timeDisplay = options.timeDisplay;
+                    // use 24 hr time display if alternateDateFormat is defined
+                    // istanbul ignore next
+                    if (alternateDateFormat && timeDisplay !== TimeDisplay.H24MS && timeDisplay !== TimeDisplay.H24M)
+                        timeDisplay = TimeDisplay.H24MS;
+                }
+                // istanbul ignore else
+                if (alternateDateFormat) {
+                    editInUtc = true;
+                    if (this.props.showTime) {
+                        if (alternateDateFormat === AlternateDateFormats.IsoShort) {
+                            alternateDateFormat = AlternateDateFormats.IsoDateTime;
+                        }
+                        if (alternateDateFormat === AlternateDateFormats.UtcShort) {
+                            alternateDateFormat = AlternateDateFormats.UtcDateTime;
+                        }
+                        if (alternateDateFormat === AlternateDateFormats.UtcShortWithDay) {
+                            alternateDateFormat = AlternateDateFormats.UtcDateTimeWithDay;
+                        }
+                    }
+                    else {
+                        timeDisplay = undefined;
+                        if (alternateDateFormat === AlternateDateFormats.IsoDateTime)
+                            alternateDateFormat = AlternateDateFormats.IsoShort;
+                        if (alternateDateFormat === AlternateDateFormats.UtcDateTime)
+                            alternateDateFormat = AlternateDateFormats.UtcShort;
+                        if (alternateDateFormat === AlternateDateFormats.UtcDateTimeWithDay)
+                            alternateDateFormat = AlternateDateFormats.UtcShortWithDay;
+                    }
+                }
+            }
+        }
+        // istanbul ignore next
+        if (!initialValue) {
+            throw new Error("Bad Value");
+        }
+        // istanbul ignore next
+        if (!typeConverter) {
+            throw new Error("Unable to determine TypeConverter");
+        }
+        const isDisabled = record && !!record.isDisabled;
+        const displayValue = await typeConverter.convertPropertyToString(record.property, initialValue);
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({
+                value: initialValue,
+                isDisabled,
+                timeDisplay,
+                typeConverter,
+                displayValue,
+                editInUtc,
+            });
+    }
+    /** @internal */
+    render() {
+        const date = this.state.editInUtc ? adjustDateToTimezone(this.state.value, 0) : this.state.value;
+        const timeSpec = {
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+            seconds: date.getSeconds(),
+        };
+        const className = classnames("components-cell-editor", "components-datetime-editor", this.props.className);
+        return (React.createElement("div", { className: className, ref: this._divElement },
+            React.createElement(PopupButton, { label: this.state.displayValue, onClose: this._handleClose, onEnter: this._handleEnter, setFocus: this.props.setFocus },
+                React.createElement(PopupContent, null,
+                    React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
+                            React.createElement(DatePicker, { selected: date, onDateChange: this._handleChange, showFocusOutline: false }),
+                            this.state.timeDisplay &&
+                                React.createElement("div", { className: "time-container" },
+                                    React.createElement(BodyText, { className: "time-label" }, "Time"),
+                                    React.createElement(TimeField, { time: timeSpec, timeDisplay: this.state.timeDisplay, onTimeChange: this._handleTimeChange })))),
+                    React.createElement(PopupOkCancelButtons, { onOk: this._handleOk, onCancel: this._handleCancel })))));
+    }
+}
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+  * It uses the [[DateTimeEditor]] React component.
+  * @internal
+  */
+export class ShortDateTimePropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(DateTimeEditor, { showTime: false });
+    }
+    // istanbul ignore next
+    get containerHandlesTab() {
+        return false;
+    }
+}
+/** DateTime Property Editor registered for the "number" type name and "DateTime" editor name.
+  * It uses the [[DateTimeEditor]] React component.
+  * @internal
+  */
+export class DateTimePropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(DateTimeEditor, { showTime: true });
+    }
+    // istanbul ignore next
+    get containerHandlesTab() {
+        return false;
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.ShortDate, ShortDateTimePropertyEditor);
+PropertyEditorManager.registerEditor(StandardTypeNames.DateTime, DateTimePropertyEditor);
 //# sourceMappingURL=DateTimeEditor.js.map