@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/DatePicker/MultiDatePicker.cjs

@@ -0,0 +1,398 @@
+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 MultiDatePicker_exports = {};
+__export(MultiDatePicker_exports, {
+  MultiDatePicker: () => MultiDatePicker
+});
+module.exports = __toCommonJS(MultiDatePicker_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_utils = 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 MultiDayGrid({
+  calendarData,
+  selectedDates,
+  onToggleDate,
+  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 = selectedDates.some(d => (0, import_parts.isSameDay)(d, 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 && onToggleDate(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 SingleCalendar({
+  displayDate,
+  selectedDates,
+  onToggleDate,
+  onNavigateMonth,
+  onSetDisplayDate,
+  minDate,
+  maxDate,
+  showPrev = true,
+  showNext = true
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [viewMode, setViewMode] = (0, import_react.useState)("day");
+  const calendarData = (0, import_parts.useCalendarData)(displayDate);
+  const [yearPageStart, setYearPageStart] = (0, import_react.useState)(() => calendarData.year - calendarData.year % import_parts.yearPageSize);
+  return /* @__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%",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarHeader, {
+        year: calendarData.year,
+        monthName: calendarData.monthName,
+        onPrevMonth: () => onNavigateMonth(-1),
+        onNextMonth: () => onNavigateMonth(1),
+        showPrev,
+        showNext,
+        onYearPress: () => {
+          setYearPageStart(calendarData.year - calendarData.year % import_parts.yearPageSize);
+          setViewMode("year");
+        },
+        onMonthPress: () => setViewMode("month")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(MultiDayGrid, {
+        calendarData,
+        selectedDates,
+        onToggleDate,
+        minDate,
+        maxDate
+      })]
+    })
+  });
+}
+function DualCalendarBody({
+  selectedDates,
+  onToggleDate,
+  displayDate,
+  setDisplayDate,
+  navigateMonth,
+  minDate,
+  maxDate
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    gtSm: fullWidthMode
+  } = (0, import_tamagui.useMedia)();
+  const prevMonthDate = (0, import_react.useMemo)(() => {
+    const date = new Date(displayDate);
+    date.setMonth(date.getMonth() - 1);
+    return date;
+  }, [displayDate]);
+  const handleNavigate = (0, import_react.useCallback)(months => {
+    navigateMonth(months < 0 ? "prev" : "next");
+  }, [navigateMonth]);
+  const handleSetDisplayForPrev = (0, import_react.useCallback)(date => {
+    const next = new Date(date);
+    next.setMonth(next.getMonth() + 1);
+    setDisplayDate(next);
+  }, [setDisplayDate]);
+  if (!fullWidthMode) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...knobProps.panelPadding,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SingleCalendar, {
+        displayDate,
+        selectedDates,
+        onToggleDate,
+        onNavigateMonth: handleNavigate,
+        onSetDisplayDate: setDisplayDate,
+        minDate,
+        maxDate
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    flexDirection: "row",
+    ...knobProps.gap,
+    ...knobProps.panelPadding,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SingleCalendar, {
+      displayDate: prevMonthDate,
+      selectedDates,
+      onToggleDate,
+      onNavigateMonth: handleNavigate,
+      onSetDisplayDate: handleSetDisplayForPrev,
+      minDate,
+      maxDate,
+      showNext: false
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+      vertical: true
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SingleCalendar, {
+      displayDate,
+      selectedDates,
+      onToggleDate,
+      onNavigateMonth: handleNavigate,
+      onSetDisplayDate: setDisplayDate,
+      minDate,
+      maxDate,
+      showPrev: false
+    })]
+  });
+}
+function formatMultiDates(dates) {
+  if (dates.length === 0) return "";
+  if (dates.length === 1) return dates[0].toDateString();
+  return dates.map(d => d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  })).join(", ");
+}
+function MultiDatePicker(props) {
+  const {
+    defaultValue,
+    form,
+    inputProps: _inputProps,
+    placeholder = "Select dates",
+    minDate,
+    maxDate,
+    disabled,
+    readOnly,
+    limit = 5,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur: _onBlur,
+    skeleton,
+    compact,
+    id: idProp,
+    ..._restProps
+  } = (0, import_tamagui.useProps)(props);
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [selectedDates, setSelectedDates] = (0, import_react.useState)([]);
+  const {
+    displayDate,
+    setDisplayDate,
+    navigateMonth
+  } = (0, import_parts.useDateNavigation)();
+  const popoverRef = (0, import_react.useRef)(null);
+  const handleToggleDate = (0, import_react.useCallback)(date => {
+    if (minDate && date < minDate) return;
+    if (maxDate && date > maxDate) return;
+    setSelectedDates(prev => {
+      const existing = prev.findIndex(d => (0, import_parts.isSameDay)(d, date));
+      if (existing >= 0) {
+        return prev.filter((_, i) => i !== existing);
+      }
+      if (prev.length >= limit) return prev;
+      return [...prev, date].sort((a, b) => a.getTime() - b.getTime());
+    });
+  }, [minDate, maxDate, limit]);
+  const handleClear = (0, import_react.useCallback)(() => {
+    setSelectedDates([]);
+  }, []);
+  const calendarContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DualCalendarBody, {
+    selectedDates,
+    onToggleDate: handleToggleDate,
+    displayDate,
+    setDisplayDate,
+    navigateMonth,
+    minDate,
+    maxDate
+  });
+  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: formatMultiDates(selectedDates),
+          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_parts.DatePickerPopoverShell, {
+      open,
+      onOpenChange: handleOpenChange,
+      popoverRef,
+      trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerInputTrigger, {
+        value: formatMultiDates(selectedDates),
+        placeholder,
+        disabled,
+        onReset: handleClear,
+        onButtonPress: () => setOpen(true),
+        error: !!hasError,
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0
+      }),
+      children: calendarContent
+    });
+  };
+  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_utils.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_utils.mergeFieldHandler)(field, "handleBlur", _onBlur))
+        })
+      });
+    }
+  });
+}