shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/date-picker.mjs

@@ -0,0 +1,594 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ButtonGroup, Button } from '@/components/button';
+import { Calendar } from '@/components/calendar';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/popover';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/sheet';
+import { useDevice } from '@/hooks/useDevice';
+import { CloseCircleFilledIcon, CalendarOutlinedIcon } from '@/icons';
+import { cn } from '@/lib/utils';
+import { format, isValid, parse } from 'date-fns';
+import { vi } from 'date-fns/locale';
+import * as React from 'react';
+import { DateInput } from './date-input';
+import { DateRangeInput } from './date-range-input';
+
+const parseStringToDate = (dateStr) => {
+  if (!dateStr) return void 0;
+  const supportedFormats = [
+    "dd/MM/yyyy",
+    // 01/12/2023
+    "DD/MM/YYYY",
+    // 01/12/2023 (same as above but with different case)
+    "d/M/yyyy",
+    // 1/1/2023
+    "dd-MM-yyyy",
+    // 01-12-2023
+    "d-M-yyyy",
+    // 1-1-2023
+    "dd.MM.yyyy",
+    // 01.12.2023
+    "d.M.yyyy",
+    // 1.1.2023
+    "yyyy/MM/dd",
+    // 2023/12/01
+    "yyyy-MM-dd"
+    // 2023-12-01
+  ];
+  try {
+    for (const format2 of supportedFormats) {
+      try {
+        const parsedDate = parse(dateStr, format2, /* @__PURE__ */ new Date());
+        if (isValid(parsedDate)) {
+          return parsedDate;
+        }
+      } catch {
+        continue;
+      }
+    }
+    console.warn(`\u26A0\uFE0F DatePicker: Could not parse '${dateStr}' with any supported format`);
+    return void 0;
+  } catch (error) {
+    console.error(`\u274C DatePicker: Error parsing '${dateStr}':`, error);
+    return void 0;
+  }
+};
+const getDateValue = (value) => {
+  if (!value) return void 0;
+  if (typeof value === "string") return parseStringToDate(value);
+  if (typeof value === "number") {
+    const timestampMs = value.toString().length === 10 ? value * 1e3 : value;
+    const date = new Date(timestampMs);
+    return isValid(date) ? date : void 0;
+  }
+  return value instanceof Date && isValid(value) ? value : void 0;
+};
+const DatePickerFooter = React.forwardRef(({ onClear, onApply, onClose, hasValue }, ref) => {
+  const handleClear = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onClear?.();
+    },
+    [onClear]
+  );
+  const handleApply = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (!hasValue) {
+        onClose?.();
+        return;
+      }
+      onApply?.();
+      onClose?.();
+    },
+    [onApply, onClose, hasValue]
+  );
+  return /* @__PURE__ */ jsxs(ButtonGroup, { ref, className: "w-full border-t p-3", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        className: "w-full px-0",
+        style: {
+          flex: 1
+        },
+        variant: "secondary",
+        size: "sm",
+        onClick: handleClear,
+        children: "B\u1ECF ch\u1ECDn"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        className: "w-full flex-1",
+        style: {
+          flex: 2
+        },
+        variant: "default",
+        size: "sm",
+        onClick: handleApply,
+        children: "\xC1p d\u1EE5ng"
+      }
+    )
+  ] });
+});
+DatePickerFooter.displayName = "DatePickerFooter";
+const DatePicker = React.forwardRef(
+  ({
+    value,
+    range,
+    mode = "single",
+    onChange,
+    onRangeChange,
+    onClearValue,
+    onApply,
+    disabled = false,
+    className,
+    minDate,
+    maxDate,
+    disabledDates,
+    size = "default",
+    error = false,
+    helperText,
+    helperTextClass,
+    label,
+    isRequired,
+    hasRemoveIcon = true,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const [calendarMonth, setCalendarMonth] = React.useState(() => /* @__PURE__ */ new Date());
+    const [calendarNavView, setCalendarNavView] = React.useState(
+      "days"
+    );
+    const [tempRange, setTempRange] = React.useState(
+      mode === "range" && range ? {
+        from: getDateValue(range.from),
+        to: getDateValue(range.to)
+      } : void 0
+    );
+    const [isApplyingManually, setIsApplyingManually] = React.useState(false);
+    const { isDesktop } = useDevice();
+    const { onBlur, onFocus, ...rest } = props;
+    const dateInputRef = React.useRef(null);
+    const dateRangeInputRef = React.useRef(null);
+    React.useEffect(() => {
+      if (disabled && open) {
+        setOpen(false);
+      }
+    }, [disabled, open]);
+    React.useEffect(() => {
+      if (mode === "range") {
+        setTempRange(
+          range && (range.from || range.to) ? {
+            from: getDateValue(range.from),
+            to: getDateValue(range.to)
+          } : void 0
+        );
+      }
+    }, [range, mode, open]);
+    React.useEffect(() => {
+      if (mode === "single") {
+        const dateValue = getDateValue(value);
+        if (dateValue && !isNaN(dateValue.getTime())) {
+          const newMonth = new Date(dateValue.getFullYear(), dateValue.getMonth(), 1);
+          setCalendarMonth((prev) => {
+            if (prev.getFullYear() !== newMonth.getFullYear() || prev.getMonth() !== newMonth.getMonth()) {
+              return newMonth;
+            }
+            return prev;
+          });
+        } else if (!value) {
+          const currentMonth = /* @__PURE__ */ new Date();
+          currentMonth.setDate(1);
+          setCalendarMonth((prev) => {
+            const now = /* @__PURE__ */ new Date();
+            if (prev.getFullYear() !== now.getFullYear() || prev.getMonth() !== now.getMonth()) {
+              return currentMonth;
+            }
+            return prev;
+          });
+        }
+      } else if (mode === "range") {
+        const fromDate = getDateValue(range?.from);
+        if (fromDate && !isNaN(fromDate.getTime())) {
+          const newMonth = new Date(fromDate.getFullYear(), fromDate.getMonth(), 1);
+          setCalendarMonth((prev) => {
+            if (prev.getFullYear() !== newMonth.getFullYear() || prev.getMonth() !== newMonth.getMonth()) {
+              return newMonth;
+            }
+            return prev;
+          });
+        } else if (!range?.from) {
+          const currentMonth = /* @__PURE__ */ new Date();
+          currentMonth.setDate(1);
+          setCalendarMonth((prev) => {
+            const now = /* @__PURE__ */ new Date();
+            if (prev.getFullYear() !== now.getFullYear() || prev.getMonth() !== now.getMonth()) {
+              return currentMonth;
+            }
+            return prev;
+          });
+        }
+      }
+    }, [value, range, mode]);
+    React.useImperativeHandle(ref, () => ({
+      focus: () => {
+        if (mode === "single") {
+          dateInputRef.current?.focus();
+        } else {
+          dateRangeInputRef.current?.focus();
+        }
+      },
+      resetToFirstSegment: () => {
+        if (mode === "single") {
+          dateInputRef.current?.resetToFirstSegment();
+        } else {
+          dateRangeInputRef.current?.resetToFirstSegment();
+        }
+      }
+    }));
+    const handleDateSelect = React.useCallback(
+      (selectedDate) => {
+        if (mode === "single") {
+          const formattedDate = selectedDate ? format(selectedDate, "dd/MM/yyyy", { locale: vi }) : void 0;
+          const returnValue = typeof value === "string" ? formattedDate : selectedDate;
+          onChange?.(returnValue, formattedDate);
+          setOpen(false);
+        }
+      },
+      [mode, value, onChange]
+    );
+    const handleRangeSelect = React.useCallback(
+      (selectedRange) => {
+        if (mode === "range") {
+          setTempRange(selectedRange);
+        }
+      },
+      [mode]
+    );
+    const handleFooterClear = React.useCallback(() => {
+      if (mode === "range") {
+        setTempRange(void 0);
+        const currentMonth = /* @__PURE__ */ new Date();
+        currentMonth.setDate(1);
+        setCalendarMonth(currentMonth);
+        onClearValue?.();
+        const fromWasString = range?.from && typeof range.from === "string";
+        const toWasString = range?.to && typeof range.to === "string";
+        const returnRange = fromWasString || toWasString ? { from: void 0, to: void 0 } : void 0;
+        onRangeChange?.(returnRange, void 0);
+        setTimeout(() => {
+          if (dateRangeInputRef.current) {
+            dateRangeInputRef.current.resetToFirstSegment();
+          }
+        }, 0);
+      }
+    }, [mode, range, onClearValue, onRangeChange]);
+    const handleFooterApply = React.useCallback(() => {
+      if (mode === "range" && tempRange && (tempRange.from || tempRange.to)) {
+        setIsApplyingManually(true);
+        const formattedRange = tempRange ? {
+          from: tempRange.from ? format(tempRange.from, "dd/MM/yyyy", { locale: vi }) : void 0,
+          to: tempRange.to ? format(tempRange.to, "dd/MM/yyyy", { locale: vi }) : void 0
+        } : void 0;
+        const fromWasString = range?.from && typeof range.from === "string";
+        const toWasString = range?.to && typeof range.to === "string";
+        const returnRange = tempRange ? {
+          from: fromWasString ? formattedRange?.from : tempRange.from,
+          to: toWasString ? formattedRange?.to : tempRange.to
+        } : void 0;
+        onApply?.(returnRange, formattedRange);
+        onRangeChange?.(returnRange, formattedRange);
+        setOpen(false);
+        setTimeout(() => setIsApplyingManually(false), 100);
+      }
+    }, [mode, tempRange, range, onApply, onRangeChange]);
+    const handleOpenChange = React.useCallback(
+      (newOpen) => {
+        if (!newOpen && mode === "range" && tempRange && (tempRange.from || tempRange.to) && !isApplyingManually) {
+          const formattedRange = tempRange ? {
+            from: tempRange.from ? format(tempRange.from, "dd/MM/yyyy", { locale: vi }) : void 0,
+            to: tempRange.to ? format(tempRange.to, "dd/MM/yyyy", { locale: vi }) : void 0
+          } : void 0;
+          const fromWasString = range?.from && typeof range.from === "string";
+          const toWasString = range?.to && typeof range.to === "string";
+          const returnRange = tempRange ? {
+            from: fromWasString ? formattedRange?.from : tempRange.from,
+            to: toWasString ? formattedRange?.to : tempRange.to
+          } : void 0;
+          onRangeChange?.(returnRange, formattedRange);
+        }
+        setOpen(newOpen);
+      },
+      [mode, tempRange, range, onRangeChange, isApplyingManually]
+    );
+    const handleClearValue = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        const currentMonth = /* @__PURE__ */ new Date();
+        currentMonth.setDate(1);
+        setCalendarMonth(currentMonth);
+        onClearValue?.();
+        if (mode === "single") {
+          const returnValue = typeof value === "string" ? void 0 : void 0;
+          onChange?.(returnValue, void 0);
+        } else {
+          const fromWasString = range?.from && typeof range.from === "string";
+          const toWasString = range?.to && typeof range.to === "string";
+          const returnRange = fromWasString || toWasString ? { from: void 0, to: void 0 } : void 0;
+          onRangeChange?.(returnRange, void 0);
+        }
+        setTimeout(() => {
+          if (mode === "single") {
+            if (dateInputRef.current) {
+              dateInputRef.current.resetToFirstSegment();
+            }
+          } else {
+            if (dateRangeInputRef.current) {
+              dateRangeInputRef.current.resetToFirstSegment();
+            }
+          }
+        }, 0);
+        setOpen(true);
+      },
+      [mode, value, range, onClearValue, onChange, onRangeChange]
+    );
+    const defaultMinDate = React.useMemo(() => new Date(1900, 0, 1), []);
+    const defaultMaxDate = React.useMemo(() => new Date(2099, 11, 31), []);
+    const effectiveMinDate = minDate || defaultMinDate;
+    const effectiveMaxDate = maxDate || defaultMaxDate;
+    const isDateDisabled = React.useCallback(
+      (date) => {
+        if (effectiveMinDate && date < effectiveMinDate) return true;
+        if (effectiveMaxDate && date > effectiveMaxDate) return true;
+        if (disabledDates) return disabledDates(date);
+        return false;
+      },
+      [effectiveMinDate, effectiveMaxDate, disabledDates]
+    );
+    const handleCalendarIconClick = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        setOpen(true);
+        setTimeout(() => {
+          if (mode === "single") {
+            if (dateInputRef.current) {
+              dateInputRef.current.focus();
+            }
+          } else {
+            if (dateRangeInputRef.current) {
+              dateRangeInputRef.current.focus();
+            }
+          }
+        }, 0);
+      },
+      [mode]
+    );
+    const hasValue = React.useMemo(
+      () => mode === "single" ? !!value : !!range?.from,
+      [mode, value, range?.from]
+    );
+    const displayRange = React.useMemo(() => {
+      if (mode !== "range") return void 0;
+      if (open && tempRange) {
+        return {
+          from: tempRange.from,
+          to: tempRange.to
+        };
+      }
+      return range;
+    }, [mode, open, tempRange, range]);
+    const iconSizeClasses = React.useMemo(
+      () => ({
+        default: "h-5 w-5",
+        lg: "h-5 w-5"
+      }),
+      []
+    );
+    const Comp = !isDesktop ? Sheet : Popover;
+    const TriggerComp = !isDesktop ? SheetTrigger : PopoverTrigger;
+    const ContentComp = !isDesktop ? SheetContent : PopoverContent;
+    return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        open: disabled ? false : open,
+        modal: !isDesktop,
+        onOpenChange: disabled ? void 0 : handleOpenChange,
+        children: [
+          /* @__PURE__ */ jsx(TriggerComp, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: mode === "single" ? /* @__PURE__ */ jsx(
+            DateInput,
+            {
+              ref: dateInputRef,
+              value,
+              minDate: effectiveMinDate,
+              maxDate: effectiveMaxDate,
+              onChange: (date, formattedDate) => {
+                if (date) {
+                  onChange?.(date, formattedDate);
+                } else {
+                  onChange?.(void 0, void 0);
+                }
+              },
+              label,
+              placeholder: label,
+              autoComplete: "off",
+              autoCorrect: "off",
+              helpText: helperText,
+              helpTextClassName: cn(
+                "mt-1 text-sm",
+                error ? "text-destructive" : "text-muted-foreground",
+                helperTextClass
+              ),
+              className: cn(
+                "border-input bg-background focus:border-primary min-w-[200px] rounded-md border focus:outline-none",
+                {
+                  "border-destructive": error,
+                  "cursor-pointer": !disabled
+                },
+                className
+              ),
+              onClick: () => setOpen(true),
+              size,
+              disabled,
+              isRequired,
+              buttonIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
+                hasRemoveIcon && hasValue && !disabled && /* @__PURE__ */ jsx(
+                  CloseCircleFilledIcon,
+                  {
+                    className: "input-remove-icon mr-1 cursor-pointer hover:opacity-70",
+                    onClick: handleClearValue
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CalendarOutlinedIcon,
+                  {
+                    className: cn(
+                      "cursor-pointer opacity-50 hover:opacity-70",
+                      iconSizeClasses[size]
+                    ),
+                    onClick: handleCalendarIconClick
+                  }
+                )
+              ] }),
+              showRemoveIcon: false,
+              ...rest
+            }
+          ) : /* @__PURE__ */ jsx(
+            DateRangeInput,
+            {
+              ref: dateRangeInputRef,
+              value: displayRange,
+              onChange: (dateRange, formattedRange) => {
+                onRangeChange?.(dateRange, formattedRange);
+              },
+              minDate: effectiveMinDate,
+              maxDate: effectiveMaxDate,
+              disabled,
+              error,
+              className: cn(
+                "border-input bg-background focus:border-primary min-w-[260px] rounded-md border focus:outline-none",
+                {
+                  "border-destructive": error,
+                  "cursor-pointer": !disabled
+                },
+                className
+              ),
+              label,
+              placeholder: label,
+              onClick: () => setOpen(true),
+              size,
+              isRequired,
+              helpText: helperText,
+              helpTextClassName: cn(
+                "mt-1 text-sm",
+                error ? "text-destructive" : "text-muted-foreground",
+                helperTextClass
+              ),
+              buttonIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
+                hasRemoveIcon && hasValue && !disabled && /* @__PURE__ */ jsx(
+                  CloseCircleFilledIcon,
+                  {
+                    className: "input-remove-icon mr-1 cursor-pointer hover:opacity-70",
+                    onClick: handleClearValue
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CalendarOutlinedIcon,
+                  {
+                    className: cn(
+                      "cursor-pointer opacity-50 hover:opacity-70",
+                      iconSizeClasses[size]
+                    ),
+                    onClick: handleCalendarIconClick
+                  }
+                )
+              ] }),
+              showRemoveIcon: false,
+              ...rest
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs(
+            ContentComp,
+            {
+              className: cn(
+                !isDesktop ? "w-full" : "p-0",
+                mode === "range" && isDesktop && calendarNavView === "days" ? "min-w-[558px]" : "w-auto",
+                {
+                  "date-picker-popover-content": !!isDesktop
+                }
+              ),
+              align: !isDesktop ? void 0 : "start",
+              onOpenAutoFocus: (e) => e.preventDefault(),
+              onCloseAutoFocus: (e) => e.preventDefault(),
+              ...!!isDesktop && {
+                sticky: "always",
+                hideWhenDetached: true,
+                avoidCollisions: true,
+                collisionPadding: 8,
+                sideOffset: 4,
+                alignOffset: -4
+              },
+              ...!isDesktop && { side: "bottom" },
+              children: [
+                !isDesktop && label && /* @__PURE__ */ jsxs(SheetHeader, { children: [
+                  /* @__PURE__ */ jsx(SheetTitle, { children: label }),
+                  /* @__PURE__ */ jsx(SheetDescription, { className: "text-center", children: mode === "single" ? getDateValue(value) ? format(getDateValue(value), "dd/MM/yyyy", { locale: vi }) : "" : tempRange?.from || tempRange?.to ? `${tempRange?.from ? format(tempRange.from, "dd/MM/yyyy", { locale: vi }) : ""}${tempRange?.from && tempRange?.to ? " - " : ""}${tempRange?.to ? format(tempRange.to, "dd/MM/yyyy", { locale: vi }) : ""}` : "" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center", children: mode === "single" ? /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    mode: "single",
+                    selected: getDateValue(value),
+                    onSelect: handleDateSelect,
+                    disabled: isDateDisabled,
+                    startMonth: effectiveMinDate,
+                    endMonth: effectiveMaxDate,
+                    locale: vi,
+                    className: "w-full p-3",
+                    autoFocus: false,
+                    defaultMonth: calendarMonth,
+                    onNavViewChange: setCalendarNavView
+                  }
+                ) : /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center lg:items-start", children: [
+                  /* @__PURE__ */ jsx(
+                    Calendar,
+                    {
+                      autoFocus: false,
+                      mode: "range",
+                      selected: tempRange,
+                      onSelect: handleRangeSelect,
+                      disabled: isDateDisabled,
+                      startMonth: effectiveMinDate,
+                      endMonth: effectiveMaxDate,
+                      locale: vi,
+                      className: "p-3",
+                      numberOfMonths: !isDesktop ? 1 : 2,
+                      defaultMonth: calendarMonth,
+                      onNavViewChange: setCalendarNavView
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    DatePickerFooter,
+                    {
+                      onClear: handleFooterClear,
+                      onApply: handleFooterApply,
+                      onClose: () => setOpen(false),
+                      hasValue: !!(tempRange?.from || tempRange?.to)
+                    }
+                  )
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+//# sourceMappingURL=date-picker.mjs.map
+//# sourceMappingURL=date-picker.mjs.map