@headless-adminapp/fluent 1.1.3 → 1.1.4

package/PageEntityForm/StandardControl.js

@@ -28,6 +28,7 @@ const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
+const TimeControl_1 = require("../form/controls/TimeControl");
 const UrlControl_1 = require("../form/controls/UrlControl");
 // Standard Control (Base control)
 // TextControl
@@ -109,6 +110,10 @@ const StandardControl = (props) => {
                     const Control = componentStore_1.componentStore.getComponent('Form.DurationControl') ?? DurationControl_1.DurationControl;
                     return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
                 }
+                case 'time': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.TimeControl') ?? TimeControl_1.TimeControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                }
                 default: {
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
                 }

package/form/controls/TimeControl.d.ts

@@ -0,0 +1,4 @@
+import { ControlProps } from './types';
+export interface TimeControlProps extends ControlProps<number> {
+}
+export declare function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, }: Readonly<TimeControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TimeControl.js

@@ -0,0 +1,89 @@
+"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]);
+    console.log('TimeControl', value, selectedTime);
+    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) => {
+                console.log('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();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -50,5 +50,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "3a036d597b19d9ef7571b2d206ecb362b74d5228"
+  "gitHead": "c672cac064915ef436c61692cc8aa18e3faf82c5"
 }