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

package/lib/esm/components-react/datepicker/DateField.d.ts

@@ -1,33 +1,33 @@
-/** @packageDocumentation
- * @module Date
- */
-/// <reference types="react" />
-import "./DateField.scss";
-import { AlternateDateFormats, DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-/** Props for [[DateField]] Component.
- * @internal
- */
-export interface DateFieldProps extends CommonProps {
-    /** Defines initial date and time for component. */
-    initialDate: Date;
-    /** Function to call when the date or time is changed. */
-    onDateChange?: (day: Date) => void;
-    /** Optional value to define if edit field allows editing. If a DateFormatter is provided
-     * it must provide a parseData function or the field will be read only no matter the setting of this value. */
-    readOnly?: boolean;
-    /** Optional date formatter that produces an explicit date display */
-    dateFormatter?: DateFormatter;
-    /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */
-    timeDisplay?: TimeDisplay;
-}
-/** Function to format a Date object that is used in control, type editor, and type converter
- * to produce a consistent formatted Date string.
- * @internal
- */
-export declare function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined;
-/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
- * @internal
- */
-export declare function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps): JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+/// <reference types="react" />
+import "./DateField.scss";
+import { AlternateDateFormats, DateFormatter, TimeDisplay } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+/** Props for [[DateField]] Component.
+ * @internal
+ */
+export interface DateFieldProps extends CommonProps {
+    /** Defines initial date and time for component. */
+    initialDate: Date;
+    /** Function to call when the date or time is changed. */
+    onDateChange?: (day: Date) => void;
+    /** Optional value to define if edit field allows editing. If a DateFormatter is provided
+     * it must provide a parseData function or the field will be read only no matter the setting of this value. */
+    readOnly?: boolean;
+    /** Optional date formatter that produces an explicit date display */
+    dateFormatter?: DateFormatter;
+    /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */
+    timeDisplay?: TimeDisplay;
+}
+/** Function to format a Date object that is used in control, type editor, and type converter
+ * to produce a consistent formatted Date string.
+ * @internal
+ */
+export declare function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string | undefined;
+/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
+ * @internal
+ */
+export declare function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps): JSX.Element;
 //# sourceMappingURL=DateField.d.ts.map

package/lib/esm/components-react/datepicker/DateField.js

@@ -1,130 +1,130 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Date
- */
-import "./DateField.scss";
-import * as React from "react";
-import classnames from "classnames";
-import { AlternateDateFormats, TimeDisplay } from "@itwin/appui-abstract";
-import { Input } from "@itwin/itwinui-react";
-import { Logger } from "@itwin/core-bentley";
-/** Function to format a Date object that is used in control, type editor, and type converter
- * to produce a consistent formatted Date string.
- * @internal
- */
-export function formatInputDate(inputDate, timeDisplay, customFormatter, alternateDateFormat) {
-    if (customFormatter) {
-        return customFormatter.formateDate(inputDate);
-    }
-    if (alternateDateFormat) {
-        switch (alternateDateFormat) {
-            case AlternateDateFormats.IsoDateTime:
-                return inputDate.toISOString();
-            case AlternateDateFormats.IsoShort:
-                return inputDate.toISOString().slice(0, 10);
-            case AlternateDateFormats.UtcDateTime:
-                return inputDate.toUTCString().slice(5);
-            case AlternateDateFormats.UtcShort:
-                return inputDate.toUTCString().slice(5, 16);
-            case AlternateDateFormats.UtcDateTimeWithDay:
-                return inputDate.toUTCString();
-            case AlternateDateFormats.UtcShortWithDay:
-                return inputDate.toUTCString().slice(0, 16);
-        }
-    }
-    else {
-        const dateString = inputDate.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
-        let timeString = "";
-        if (timeDisplay) {
-            switch (timeDisplay) {
-                case TimeDisplay.H12MC:
-                    timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit" });
-                    break;
-                case TimeDisplay.H12MSC:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-                    break;
-                case TimeDisplay.H24M:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit" }));
-                    // istanbul ignore next
-                    if (timeString === "24:00")
-                        timeString = "00:00";
-                    break;
-                case TimeDisplay.H24MS:
-                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-                    // istanbul ignore next
-                    if (timeString === "24:00:00")
-                        timeString = "00:00:00";
-                    break;
-            }
-        }
-        return timeString.length ? `${dateString}, ${timeString}` : dateString;
-    }
-}
-/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
- * @internal
- */
-export function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }) {
-    const initialDateRef = React.useRef(initialDate);
-    const [hasBadInput, setHasBadInput] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));
-    // See if new initialDate props have changed since component mounted
-    React.useEffect(() => {
-        // istanbul ignore else
-        if (initialDate.getTime() !== initialDateRef.current.getTime()) {
-            initialDateRef.current = initialDate;
-        }
-        setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));
-    }, [initialDate, dateFormatter, timeDisplay]);
-    const handleInputChange = React.useCallback((event) => {
-        setInputValue(event.currentTarget.value);
-    }, []);
-    const parseDate = React.useCallback((dateString) => {
-        try {
-            if (dateFormatter && dateFormatter.parseDate)
-                return dateFormatter.parseDate(dateString);
-            const newDateValue = Date.parse(dateString);
-            // istanbul ignore else
-            if (newDateValue)
-                return new Date(newDateValue);
-        }
-        catch (_error) /* istanbul ignore next */ {
-            Logger.logInfo("DateField", `Encountered error parsing input value '${dateString}' as a date.`);
-            return undefined;
-        }
-        // istanbul ignore next
-        return undefined;
-    }, [dateFormatter]);
-    const updateInputDate = React.useCallback((dateString) => {
-        try {
-            const newDateValue = parseDate(dateString);
-            if (newDateValue) {
-                const newDate = new Date(newDateValue);
-                onDateChange && onDateChange(newDate);
-                setHasBadInput(false);
-            }
-            else {
-                setHasBadInput(true);
-            }
-        }
-        catch (_error) {
-            // istanbul ignore next
-            setHasBadInput(true);
-        }
-    }, [onDateChange, parseDate]);
-    const handleOnBlur = React.useCallback((event) => {
-        updateInputDate(event.target.value);
-    }, [updateInputDate]);
-    function onInputKeyDown(event) {
-        // istanbul ignore else
-        if (event.key === "Enter") {
-            updateInputDate(event.currentTarget.value);
-            event.preventDefault();
-        }
-    }
-    const classNames = classnames(className, "components-date-input", hasBadInput && "components-date-has-error");
-    return React.createElement(Input, { "data-testid": "components-date-input", style: style, className: classNames, onKeyDown: onInputKeyDown, onBlur: handleOnBlur, onChange: handleInputChange, value: inputValue, disabled: readOnly || (dateFormatter && !(dateFormatter.parseDate)), size: "small" });
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Date
+ */
+import "./DateField.scss";
+import * as React from "react";
+import classnames from "classnames";
+import { AlternateDateFormats, TimeDisplay } from "@itwin/appui-abstract";
+import { Input } from "@itwin/itwinui-react";
+import { Logger } from "@itwin/core-bentley";
+/** Function to format a Date object that is used in control, type editor, and type converter
+ * to produce a consistent formatted Date string.
+ * @internal
+ */
+export function formatInputDate(inputDate, timeDisplay, customFormatter, alternateDateFormat) {
+    if (customFormatter) {
+        return customFormatter.formateDate(inputDate);
+    }
+    if (alternateDateFormat) {
+        switch (alternateDateFormat) {
+            case AlternateDateFormats.IsoDateTime:
+                return inputDate.toISOString();
+            case AlternateDateFormats.IsoShort:
+                return inputDate.toISOString().slice(0, 10);
+            case AlternateDateFormats.UtcDateTime:
+                return inputDate.toUTCString().slice(5);
+            case AlternateDateFormats.UtcShort:
+                return inputDate.toUTCString().slice(5, 16);
+            case AlternateDateFormats.UtcDateTimeWithDay:
+                return inputDate.toUTCString();
+            case AlternateDateFormats.UtcShortWithDay:
+                return inputDate.toUTCString().slice(0, 16);
+        }
+    }
+    else {
+        const dateString = inputDate.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
+        let timeString = "";
+        if (timeDisplay) {
+            switch (timeDisplay) {
+                case TimeDisplay.H12MC:
+                    timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit" });
+                    break;
+                case TimeDisplay.H12MSC:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
+                    break;
+                case TimeDisplay.H24M:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit" }));
+                    // istanbul ignore next
+                    if (timeString === "24:00")
+                        timeString = "00:00";
+                    break;
+                case TimeDisplay.H24MS:
+                    timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }));
+                    // istanbul ignore next
+                    if (timeString === "24:00:00")
+                        timeString = "00:00:00";
+                    break;
+            }
+        }
+        return timeString.length ? `${dateString}, ${timeString}` : dateString;
+    }
+}
+/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.
+ * @internal
+ */
+export function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }) {
+    const initialDateRef = React.useRef(initialDate);
+    const [hasBadInput, setHasBadInput] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));
+    // See if new initialDate props have changed since component mounted
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (initialDate.getTime() !== initialDateRef.current.getTime()) {
+            initialDateRef.current = initialDate;
+        }
+        setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));
+    }, [initialDate, dateFormatter, timeDisplay]);
+    const handleInputChange = React.useCallback((event) => {
+        setInputValue(event.currentTarget.value);
+    }, []);
+    const parseDate = React.useCallback((dateString) => {
+        try {
+            if (dateFormatter && dateFormatter.parseDate)
+                return dateFormatter.parseDate(dateString);
+            const newDateValue = Date.parse(dateString);
+            // istanbul ignore else
+            if (newDateValue)
+                return new Date(newDateValue);
+        }
+        catch (_error) /* istanbul ignore next */ {
+            Logger.logInfo("DateField", `Encountered error parsing input value '${dateString}' as a date.`);
+            return undefined;
+        }
+        // istanbul ignore next
+        return undefined;
+    }, [dateFormatter]);
+    const updateInputDate = React.useCallback((dateString) => {
+        try {
+            const newDateValue = parseDate(dateString);
+            if (newDateValue) {
+                const newDate = new Date(newDateValue);
+                onDateChange && onDateChange(newDate);
+                setHasBadInput(false);
+            }
+            else {
+                setHasBadInput(true);
+            }
+        }
+        catch (_error) {
+            // istanbul ignore next
+            setHasBadInput(true);
+        }
+    }, [onDateChange, parseDate]);
+    const handleOnBlur = React.useCallback((event) => {
+        updateInputDate(event.target.value);
+    }, [updateInputDate]);
+    function onInputKeyDown(event) {
+        // istanbul ignore else
+        if (event.key === "Enter") {
+            updateInputDate(event.currentTarget.value);
+            event.preventDefault();
+        }
+    }
+    const classNames = classnames(className, "components-date-input", hasBadInput && "components-date-has-error");
+    return React.createElement(Input, { "data-testid": "components-date-input", style: style, className: classNames, onKeyDown: onInputKeyDown, onBlur: handleOnBlur, onChange: handleInputChange, value: inputValue, disabled: readOnly || (dateFormatter && !(dateFormatter.parseDate)), size: "small" });
+}
 //# sourceMappingURL=DateField.js.map

package/lib/esm/components-react/datepicker/DatePicker.d.ts

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module Date
- */
-/// <reference types="react" />
-import "./DatePicker.scss";
-/**
- * Props for [[DatePicker]] component.
- * @alpha
- */
-export interface DatePickerProps {
-    /** defines both date and time */
-    selected: Date;
-    /** function to call when date or time has changed */
-    onDateChange?: (day: Date) => void;
-    /** show focus outlines, useful for keyboard navigation */
-    showFocusOutline?: boolean;
-}
-/** DatePicker component. Show a month selector and a day calendar to select a specific date.
- * @alpha
- */
-export declare function DatePicker(props: DatePickerProps): JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+/// <reference types="react" />
+import "./DatePicker.scss";
+/**
+ * Props for [[DatePicker]] component.
+ * @alpha
+ */
+export interface DatePickerProps {
+    /** defines both date and time */
+    selected: Date;
+    /** function to call when date or time has changed */
+    onDateChange?: (day: Date) => void;
+    /** show focus outlines, useful for keyboard navigation */
+    showFocusOutline?: boolean;
+}
+/** DatePicker component. Show a month selector and a day calendar to select a specific date.
+ * @alpha
+ */
+export declare function DatePicker(props: DatePickerProps): JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map