@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/TimePicker/index.cjs

@@ -0,0 +1,353 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TimePicker_exports = {};
+__export(TimePicker_exports, {
+  TimePicker: () => TimePicker
+});
+module.exports = __toCommonJS(TimePicker_exports);
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_TimeColumn = require("../../shared/TimeColumn.cjs");
+var import_utils = require("../../shared/utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function parseTimeString(value) {
+  if (!value) return {
+    h: 0,
+    m: 0,
+    s: 0
+  };
+  const parts = value.split(":");
+  return {
+    h: Math.max(0, Math.min(23, Number.parseInt(parts[0] || "0", 10) || 0)),
+    m: Math.max(0, Math.min(59, Number.parseInt(parts[1] || "0", 10) || 0)),
+    s: Math.max(0, Math.min(59, Number.parseInt(parts[2] || "0", 10) || 0))
+  };
+}
+function toTimeString(h, m, s) {
+  const base = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+  return s !== void 0 ? `${base}:${String(s).padStart(2, "0")}` : base;
+}
+function formatTimeDisplay(value, format, showSeconds) {
+  if (!value) return "";
+  const {
+    h,
+    m,
+    s
+  } = parseTimeString(value);
+  const secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
+  if (format === "24h") {
+    return `${toTimeString(h, m)}${secSuffix}`;
+  }
+  const period = h >= 12 ? "PM" : "AM";
+  const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
+  return `${displayH}:${String(m).padStart(2, "0")}${secSuffix} ${period}`;
+}
+const hours24 = (0, import_TimeColumn.generateRange)(0, 23);
+const hours12 = (0, import_TimeColumn.generateRange)(1, 12);
+const secondValues = (0, import_TimeColumn.generateRange)(0, 59);
+function AmPmColumn({
+  selected,
+  onChange,
+  knobProps
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    alignItems: "center",
+    gap: "$1",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$1",
+      ...knobProps.body,
+      color: import_colorRamps.formCommonColors.muted,
+      textTransform: "uppercase",
+      letterSpacing: 1,
+      children: " "
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.borderRadius,
+      backgroundColor: import_colorRamps.formInputColors.background.base,
+      borderWidth: knobProps.inputSurface.borderWidth,
+      borderColor: import_colorRamps.formInputColors.border.base,
+      overflow: "hidden",
+      children: ["AM", "PM"].map(period => {
+        const isSelected = period === selected;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          height: 36,
+          width: 48,
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          backgroundColor: isSelected ? import_colorRamps.formInputColors.background.focus : "transparent",
+          hoverStyle: {
+            backgroundColor: import_colorRamps.formInputColors.background.focus
+          },
+          onPress: () => onChange(period),
+          ...(knobProps.transition ? {
+            animation: knobProps.transition
+          } : void 0),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$3",
+            ...knobProps.body,
+            fontWeight: isSelected ? "700" : "400",
+            color: isSelected ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
+            children: period
+          })
+        }, period);
+      })
+    })]
+  });
+}
+function TimePickerPopoverContent({
+  value,
+  onChange,
+  knobProps,
+  timeFormat,
+  minuteStep,
+  showSeconds
+}) {
+  const {
+    h,
+    m,
+    s
+  } = parseTimeString(value);
+  const minuteValues = (0, import_react.useMemo)(() => (0, import_TimeColumn.generateRange)(0, 59, minuteStep), [minuteStep]);
+  const makeTime = (0, import_react.useCallback)((newH, newM, newS) => showSeconds ? toTimeString(newH, newM, newS) : toTimeString(newH, newM), [showSeconds]);
+  const secondsColumn = showSeconds && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
+      knobProps
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
+      label: "Sec",
+      values: secondValues,
+      selected: s,
+      onChange: newS => onChange(makeTime(h, m, newS)),
+      knobProps
+    })]
+  });
+  if (timeFormat === "24h") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
+        label: "Hour",
+        values: hours24,
+        selected: h,
+        onChange: newH => onChange(makeTime(newH, m, s)),
+        knobProps
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
+        knobProps
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
+        label: "Min",
+        values: minuteValues,
+        selected: m,
+        onChange: newM => onChange(makeTime(h, newM, s)),
+        knobProps
+      }), secondsColumn]
+    });
+  }
+  const period = h >= 12 ? "PM" : "AM";
+  const display12H = h === 0 ? 12 : h > 12 ? h - 12 : h;
+  const handleHourChange = newDisplayH => {
+    let h24 = newDisplayH;
+    if (period === "AM") {
+      h24 = newDisplayH === 12 ? 0 : newDisplayH;
+    } else {
+      h24 = newDisplayH === 12 ? 12 : newDisplayH + 12;
+    }
+    onChange(makeTime(h24, m, s));
+  };
+  const handlePeriodChange = newPeriod => {
+    if (newPeriod === period) return;
+    const newH = newPeriod === "AM" ? h >= 12 ? h - 12 : h : h < 12 ? h + 12 : h;
+    onChange(makeTime(newH, m, s));
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    gap: "$2",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
+      label: "Hour",
+      values: hours12,
+      selected: display12H,
+      onChange: handleHourChange,
+      knobProps
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
+      knobProps
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
+      label: "Min",
+      values: minuteValues,
+      selected: m,
+      onChange: newM => onChange(makeTime(h, newM, s)),
+      knobProps
+    }), secondsColumn, /* @__PURE__ */(0, import_jsx_runtime.jsx)(AmPmColumn, {
+      selected: period,
+      onChange: handlePeriodChange,
+      knobProps
+    })]
+  });
+}
+function TimePicker({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value = "",
+  defaultValue,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  timeFormat = "12h",
+  minuteStep = 5,
+  showSeconds = false,
+  placeholder = "Select time",
+  clockIcon,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const displayValue = (0, import_react.useMemo)(() => formatTimeDisplay(value, timeFormat, showSeconds), [value, timeFormat, showSeconds]);
+  const handleChange = (0, import_react.useCallback)((time, fieldChange) => {
+    fieldChange?.(time);
+    onChange?.(time);
+  }, [onChange]);
+  const renderTrigger = (triggerValue, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+    size: size || knobProps.sizeToken,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      theme: hasError ? "red" : void 0,
+      ...(disabled ? {
+        opacity: 0.5,
+        pointerEvents: "none"
+      } : void 0),
+      children: [clockIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "leading",
+          children: clockIcon
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+        readOnly: true,
+        value: triggerValue,
+        placeholder,
+        disabled,
+        color: import_colorRamps.formCommonColors.text,
+        "aria-readonly": readOnly || void 0,
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0
+      })]
+    })
+  });
+  const panelContent = (currentValue, onValueChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimePickerPopoverContent, {
+    value: currentValue || "00:00",
+    onChange: onValueChange,
+    knobProps,
+    timeFormat,
+    minuteStep,
+    showSeconds
+  });
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: knobProps.sizeToken
+      })
+    });
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      children: readOnly ? renderTrigger(displayValue, !!error) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+        open,
+        onOpenChange: setOpen,
+        disabled,
+        scrollable: true,
+        sizing: "fill",
+        fitContent: true,
+        trigger: renderTrigger(displayValue, !!error),
+        children: panelContent(value, t => handleChange(t))
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, error);
+      const fieldValue = field.state.value ?? "";
+      const fieldDisplay = formatTimeDisplay(fieldValue, timeFormat, showSeconds);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        children: readOnly ? renderTrigger(fieldDisplay, !!resolvedError) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+          open,
+          onOpenChange: setOpen,
+          disabled,
+          scrollable: true,
+          sizing: "fill",
+          fitContent: true,
+          trigger: renderTrigger(fieldDisplay, !!resolvedError),
+          children: panelContent(fieldValue, t => handleChange(t, v => field.handleChange(v)))
+        })
+      });
+    }
+  });
+}