@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/DatePicker/DatetimePicker.cjs

@@ -0,0 +1,579 @@
+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 DatetimePicker_exports = {};
+__export(DatetimePicker_exports, {
+  DatetimePicker: () => DatetimePicker
+});
+module.exports = __toCommonJS(DatetimePicker_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_utils = require("./utils.cjs");
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_TimeColumn = require("../../shared/TimeColumn.cjs");
+var import_utils2 = require("../../shared/utils.cjs");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_parts = require("./parts.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function parseTimeFromDate(date) {
+  return {
+    h: date.getHours(),
+    m: date.getMinutes(),
+    s: date.getSeconds()
+  };
+}
+function formatDatetimeDisplay(date, timeFormat, showSeconds) {
+  if (!date) return "";
+  const dateStr = date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+  const h = date.getHours();
+  const m = date.getMinutes();
+  const s = date.getSeconds();
+  const secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
+  if (timeFormat === "24h") {
+    return `${dateStr} ${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}${secSuffix}`;
+  }
+  const period = h >= 12 ? "PM" : "AM";
+  const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
+  return `${dateStr} ${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 DayGrid({
+  calendarData,
+  selectedDate,
+  onSelectDate,
+  minDate,
+  maxDate
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    animation,
+    animationKey
+  } = (0, import_parts.useDateAnimation)(`${calendarData.year}-${calendarData.month}`);
+  const weeks = (0, import_parts.toWeeks)(calendarData.days);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      width: "100%",
+      ...knobProps.gap,
+      transition: "medium",
+      ...animation,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.WeekView, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        flexDirection: "column",
+        gap: "$1",
+        width: "100%",
+        children: weeks.map(week => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          flexDirection: "row",
+          gap: "$1",
+          justifyContent: "space-between",
+          width: "100%",
+          children: week.map(day => {
+            const isCurrentMonth = day.getMonth() === calendarData.month;
+            const isSelected = (0, import_parts.isSameDay)(selectedDate, day);
+            const isToday = (0, import_parts.isSameDay)(calendarData.today, day);
+            const isOutOfRange = minDate != null && day < minDate || maxDate != null && day > maxDate;
+            const isDisabled = !isCurrentMonth || isOutOfRange;
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              chromeless: true,
+              circular: true,
+              flex: 1,
+              size: knobProps.sizeToken,
+              disabled: isDisabled,
+              onPress: () => !isDisabled && onSelectDate(day),
+              backgroundColor: isSelected ? "$background" : "transparent",
+              theme: isSelected ? "accent" : void 0,
+              opacity: isCurrentMonth ? 1 : 0,
+              pointerEvents: isCurrentMonth ? "auto" : "none",
+              borderWidth: knobProps.borderRadius.borderWidth || 1,
+              borderColor: isSelected ? "$backgroundStrong" : "transparent",
+              children: isSelected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+                transition: "quicker",
+                enterStyle: {
+                  opacity: 0,
+                  y: 20
+                },
+                exitStyle: {
+                  opacity: 0,
+                  y: 20
+                },
+                opacity: 1,
+                fontWeight: "bold",
+                children: day.getDate()
+              }, "text-selected") : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+                color: isToday ? "$accentColor" : isCurrentMonth ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
+                children: day.getDate()
+              }, "text-normal")
+            }, day.toISOString());
+          })
+        }, week[0].toISOString()))
+      })]
+    })
+  }, animationKey);
+}
+function TimeSection({
+  selectedDate,
+  onTimeChange,
+  timeFormat,
+  minuteStep,
+  showSeconds
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    h,
+    m,
+    s
+  } = parseTimeFromDate(selectedDate);
+  const minuteValues = (0, import_react.useMemo)(() => (0, import_TimeColumn.generateRange)(0, 59, minuteStep), [minuteStep]);
+  const makeNewDate = (0, import_react.useCallback)((newH, newM, newS) => {
+    const newDate = new Date(selectedDate);
+    newDate.setHours(newH, newM, newS);
+    return newDate;
+  }, [selectedDate]);
+  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 => onTimeChange(makeNewDate(h, m, newS)),
+      knobProps
+    })]
+  });
+  if (timeFormat === "24h") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "row",
+      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 => onTimeChange(makeNewDate(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 => onTimeChange(makeNewDate(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;
+    }
+    onTimeChange(makeNewDate(h24, m, s));
+  };
+  const handlePeriodChange = newPeriod => {
+    if (newPeriod === period) return;
+    const newH = newPeriod === "AM" ? h >= 12 ? h - 12 : h : h < 12 ? h + 12 : h;
+    onTimeChange(makeNewDate(newH, m, s));
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    flexDirection: "row",
+    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 => onTimeChange(makeNewDate(h, newM, s)),
+      knobProps
+    }), secondsColumn, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      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.View, {
+        ...knobProps.borderRadius,
+        backgroundColor: import_colorRamps.formInputColors.background.base,
+        borderWidth: knobProps.inputSurface.borderWidth,
+        borderColor: import_colorRamps.formInputColors.border.base,
+        overflow: "hidden",
+        children: ["AM", "PM"].map(p => {
+          const isSelected = p === period;
+          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: () => handlePeriodChange(p),
+            ...(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: p
+            })
+          }, p);
+        })
+      })]
+    })]
+  });
+}
+function DatetimePickerBody({
+  displayDate,
+  selectedDatetime,
+  onSelectDatetime,
+  onNavigateMonth,
+  onSetDisplayDate,
+  minDate,
+  maxDate,
+  timeFormat,
+  minuteStep,
+  showSeconds
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [viewMode, setViewMode] = (0, import_react.useState)("day");
+  const [activeTab, setActiveTab] = (0, import_react.useState)("date");
+  const calendarData = (0, import_parts.useCalendarData)(displayDate);
+  const [yearPageStart, setYearPageStart] = (0, import_react.useState)(() => calendarData.year - calendarData.year % import_parts.yearPageSize);
+  const handleDateSelect = (0, import_react.useCallback)(date => {
+    if (selectedDatetime) {
+      date.setHours(selectedDatetime.getHours(), selectedDatetime.getMinutes(), selectedDatetime.getSeconds());
+    }
+    onSelectDatetime(date);
+    setActiveTab("time");
+  }, [selectedDatetime, onSelectDatetime]);
+  const handleTimeChange = (0, import_react.useCallback)(date => {
+    onSelectDatetime(date);
+  }, [onSelectDatetime]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    flexDirection: "column",
+    alignItems: "center",
+    ...knobProps.gap,
+    width: "100%",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "row",
+      gap: "$2",
+      width: "100%",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        flex: 1,
+        chromeless: activeTab !== "date",
+        theme: activeTab === "date" ? "accent" : void 0,
+        onPress: () => setActiveTab("date"),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+          children: "Date"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        flex: 1,
+        chromeless: activeTab !== "time",
+        theme: activeTab === "time" ? "accent" : void 0,
+        onPress: () => setActiveTab("time"),
+        disabled: !selectedDatetime,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+          children: "Time"
+        })
+      })]
+    }), activeTab === "date" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.ViewSwitcher, {
+      calendarData,
+      displayDate,
+      onSetDisplayDate,
+      viewMode,
+      setViewMode,
+      yearPageStart,
+      setYearPageStart,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        flexDirection: "column",
+        alignItems: "center",
+        ...knobProps.gapLg,
+        width: "100%",
+        ...knobProps.panelPadding,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarHeader, {
+          year: calendarData.year,
+          monthName: calendarData.monthName,
+          onPrevMonth: () => onNavigateMonth("prev"),
+          onNextMonth: () => onNavigateMonth("next"),
+          onYearPress: () => {
+            setYearPageStart(calendarData.year - calendarData.year % import_parts.yearPageSize);
+            setViewMode("year");
+          },
+          onMonthPress: () => setViewMode("month")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DayGrid, {
+          calendarData,
+          selectedDate: selectedDatetime,
+          onSelectDate: handleDateSelect,
+          minDate,
+          maxDate
+        })]
+      })
+    }) : selectedDatetime && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      padding: "$2",
+      width: "100%",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSection, {
+        selectedDate: selectedDatetime,
+        onTimeChange: handleTimeChange,
+        timeFormat,
+        minuteStep,
+        showSeconds
+      })
+    })]
+  });
+}
+function DatetimePicker(props) {
+  const {
+    defaultValue,
+    value: controlledValue,
+    onValueChange,
+    form,
+    inputProps,
+    placeholder = "Select date and time",
+    minDate,
+    maxDate,
+    disabled,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    readOnly,
+    onBlur: _onBlur,
+    timeFormat = "12h",
+    minuteStep = 5,
+    showSeconds = false,
+    skeleton,
+    compact,
+    id: idProp,
+    ..._restProps
+  } = (0, import_tamagui.useProps)(props);
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils2.useFormField)({
+    form,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils2.useResolvedValidators)(required, validators, label, name);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [selectedDatetime, setSelectedDatetime] = (0, import_react.useState)(() => (0, import_utils.coerceToDate)(controlledValue ?? defaultValue));
+  (0, import_react.useEffect)(() => {
+    if (controlledValue === void 0) return;
+    setSelectedDatetime((0, import_utils.coerceToDate)(controlledValue));
+  }, [controlledValue]);
+  const {
+    displayDate,
+    setDisplayDate,
+    navigateMonth
+  } = (0, import_parts.useDateNavigation)();
+  const popoverRef = (0, import_react.useRef)(null);
+  const closePopover = (0, import_react.useCallback)(() => {
+    setOpen(false);
+    popoverRef.current?.close();
+  }, []);
+  const handleDatetimeSelect = (0, import_react.useCallback)(date => {
+    if (minDate && date < minDate) return;
+    if (maxDate && date > maxDate) return;
+    setSelectedDatetime(date);
+    setDisplayDate(date);
+    onValueChange?.(date);
+  }, [minDate, maxDate, setDisplayDate, onValueChange]);
+  const handleClearDatetime = (0, import_react.useCallback)(() => {
+    setSelectedDatetime(null);
+    setDisplayDate(/* @__PURE__ */new Date());
+    onValueChange?.(null);
+  }, [setDisplayDate, onValueChange]);
+  const displayValue = (0, import_react.useMemo)(() => formatDatetimeDisplay(selectedDatetime, timeFormat, showSeconds), [selectedDatetime, timeFormat, showSeconds]);
+  const pickerContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatetimePickerBody, {
+    displayDate,
+    selectedDatetime,
+    onSelectDatetime: handleDatetimeSelect,
+    onNavigateMonth: navigateMonth,
+    onSetDisplayDate: setDisplayDate,
+    minDate,
+    maxDate,
+    timeFormat,
+    minuteStep,
+    showSeconds
+  });
+  const renderTrigger = (value, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    cursor: "pointer",
+    onPress: disabled ? void 0 : () => setOpen(true),
+    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: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          readOnly: true,
+          value,
+          placeholder,
+          disabled,
+          color: import_colorRamps.formCommonColors.text,
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0,
+          ...inputProps
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+          onPress: e => {
+            e.stopPropagation();
+            handleClearDatetime();
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "trailing",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {})
+        })
+      })]
+    })
+  });
+  const renderPopover = (hasError, blurHandler) => {
+    if (readOnly) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          value: displayValue,
+          readOnly: true,
+          "aria-readonly": "true",
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0,
+          placeholder
+        })
+      });
+    }
+    const handleOpenChange = isOpen => {
+      setOpen(isOpen);
+      if (!isOpen) blurHandler?.();
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+      open,
+      onOpenChange: handleOpenChange,
+      trigger: renderTrigger(displayValue, hasError),
+      scrollable: true,
+      sizing: "fill",
+      fitContent: true,
+      children: pickerContent
+    });
+  };
+  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: errorProp,
+      helperText,
+      required,
+      size,
+      knobProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: size || knobProps.sizeToken,
+        children: renderPopover(!!errorProp)
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    defaultValue,
+    form: resolvedForm,
+    mode,
+    name,
+    preserveValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils2.getFieldError)(field, errorProp);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: size || knobProps.sizeToken,
+          children: renderPopover(!!resolvedError, (0, import_utils2.mergeFieldHandler)(field, "handleBlur", _onBlur))
+        })
+      });
+    }
+  });
+}