@headless-adminapp/fluent 1.3.1 → 1.4.0

package/form/controls/TimeControl.js

@@ -1,87 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeControl = TimeControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
-const locale_1 = require("@headless-adminapp/app/locale");
-const icons_1 = require("@headless-adminapp/icons");
-const dayjs_1 = __importDefault(require("dayjs"));
-const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
-const react_1 = require("react");
-dayjs_1.default.extend(customParseFormat_1.default);
-function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, }) {
-    const { timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
-    const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)().startOf('day').add(value, 'minutes').format(timeFormat) : '');
-    const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
-    internalTimeValueRef.current = internalTimeValue;
-    (0, react_1.useEffect)(() => {
-        const updatedValue = typeof value === 'number'
-            ? (0, dayjs_1.default)().startOf('day').add(value, 'minutes').format(timeFormat)
-            : '';
-        if (internalTimeValueRef.current !== updatedValue) {
-            setInternalTimeValue(updatedValue);
-        }
-    }, [value, timezone, timeFormat]);
-    const isReadonly = readOnly || disabled;
-    const selectedTime = (0, react_1.useMemo)(() => {
-        if (typeof value !== 'number') {
-            return null;
-        }
-        return (0, dayjs_1.default)().startOf('day').add(value, 'minutes').toDate();
-    }, [value]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: react_components_1.tokens.spacingHorizontalS,
-        }, children: (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: {
-                flex: 1,
-                minWidth: 0,
-                pointerEvents: isReadonly ? 'none' : 'auto',
-            }, placeholder: placeholder, id: id, name: name, input: {
-                style: { minWidth: 0 },
-            }, readOnly: isReadonly, selectedTime: selectedTime, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
-                if (data.selectedTime) {
-                    onChange?.((0, dayjs_1.default)(data.selectedTime).diff((0, dayjs_1.default)().startOf('day'), 'minutes'));
-                }
-                else if (data.selectedTimeText) {
-                    let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
-                    if (!resolvedTime) {
-                        setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
-                        return;
-                    }
-                    const newValue = (0, dayjs_1.default)(resolvedTime).diff((0, dayjs_1.default)().startOf('day'), 'minutes');
-                    if (newValue !== value) {
-                        onChange?.(newValue);
-                    }
-                    setInternalTimeValue((0, dayjs_1.default)(resolvedTime).format(timeFormat));
-                }
-                else {
-                    setInternalTimeValue('');
-                    onChange?.(null);
-                }
-            }, onInput: (e) => {
-                setInternalTimeValue(e.currentTarget.value);
-            }, onBlur: () => {
-                onBlur?.();
-            }, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginRight: -4,
-                    color: react_components_1.tokens.colorNeutralForeground2,
-                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) }) }));
-}
-function resolveTimeValue(value, timeFormat) {
-    if (!value) {
-        return;
-    }
-    const time = (0, dayjs_1.default)(value, timeFormat);
-    if (!time.isValid()) {
-        return;
-    }
-    return time.toDate();
-}