@zenify-omni/chat-ui-react-js 0.1.0

package/components/custom/date-time-picker/components/month-year-picker.js

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem
+} from "../../../ui/dropdown-menu.js";
+import { CheckIcon } from "@radix-ui/react-icons";
+import {
+  isBefore,
+  isSameYear,
+  startOfYear,
+  endOfYear,
+  addYears,
+  isAfter,
+  startOfMonth,
+  endOfMonth
+} from "date-fns";
+import { MonthOptions } from "@zenify-omni/chat-js/constants/month.js";
+import { cn } from "../../../../lib/utils.js";
+import { useScrollToCenter } from "../hooks/use-scroll-to-center.js";
+import { useTranslation } from "react-i18next";
+function MonthYearPicker({
+  currentDay,
+  currentMonth,
+  currentYear,
+  disabled,
+  minDate,
+  maxDate,
+  onChange,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const monthOptionRef = useRef(null);
+  const containerMonthRef = useRef(null);
+  const [openMonthDropdown, setOpenMonthDropdown] = useState(false);
+  const yearOptionRef = useRef(null);
+  const containerYearRef = useRef(null);
+  const [openYearDropdown, setOpenYearDropdown] = useState(false);
+  const scrollToCenter = useScrollToCenter();
+  useEffect(() => {
+    if (openYearDropdown) {
+      const rafHandler = requestAnimationFrame(() => {
+        scrollToCenter(yearOptionRef.current, containerYearRef.current);
+      });
+      return () => cancelAnimationFrame(rafHandler);
+    }
+  }, [openYearDropdown, scrollToCenter]);
+  useEffect(() => {
+    if (openMonthDropdown) {
+      const rafHandler = requestAnimationFrame(() => {
+        scrollToCenter(monthOptionRef.current, containerMonthRef.current);
+      });
+      return () => cancelAnimationFrame(rafHandler);
+    }
+  }, [openMonthDropdown, scrollToCenter]);
+  const handleMonthChange = (value) => {
+    const newMonth = Number(value - 1);
+    const newDate = new Date(currentYear, newMonth, currentDay);
+    if (minDate && minDate.getMonth() === newMonth) {
+      newDate.setDate(minDate.getDate());
+    }
+    onChange(newDate);
+  };
+  const handleYearChange = (value) => {
+    const newYear = Number(value);
+    const newDate = new Date(newYear, currentMonth, currentDay);
+    onChange(newDate);
+  };
+  const yearOptions = useMemo(() => {
+    const fromYear = props.fromYear ? new Date(props.fromYear, 0, 1) : new Date((/* @__PURE__ */ new Date()).getFullYear() - 100, 0, 1);
+    const toYear = props.toYear ? new Date(props.toYear, 0, 1) : new Date((/* @__PURE__ */ new Date()).getFullYear() + 50, 1, 1);
+    const firstYear = startOfYear(fromYear);
+    const lastYear = endOfYear(toYear);
+    let year = firstYear;
+    const years = [];
+    while (isBefore(year, lastYear) || isSameYear(year, lastYear)) {
+      years.push(year);
+      year = addYears(year, 1);
+    }
+    return years.map((year2) => {
+      const value = year2.getFullYear();
+      const label = t("common:label.yearValue", {
+        value,
+        defaultValue: "N\u0103m {value}"
+      });
+      return {
+        label,
+        value
+      };
+    });
+  }, [props.fromYear, props.toYear]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-1"), children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenu,
+      {
+        open: openMonthDropdown,
+        onOpenChange: (open) => {
+          if (!disabled) {
+            setOpenMonthDropdown(open);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: cn(
+                "cursor-pointer text-sm text-primary underline-offset-4 hover:underline",
+                disabled && "cursor-not-allowed text-muted-foreground"
+              ),
+              children: [
+                t("common:label.month", { defaultValue: "Th\xE1ng" }),
+                " ",
+                currentMonth + 1,
+                ","
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownMenuContent,
+            {
+              ref: containerMonthRef,
+              className: "max-h-80 min-h-72 overflow-auto p-2",
+              children: MonthOptions.map((option) => {
+                let disabledMonth = false;
+                if (minDate) {
+                  disabledMonth = isBefore(
+                    new Date(currentYear, parseInt(option.value) - 1, currentDay),
+                    startOfMonth(minDate)
+                  );
+                }
+                if (maxDate) {
+                  disabledMonth = isAfter(
+                    new Date(currentYear, parseInt(option.value) - 1, currentDay),
+                    endOfMonth(maxDate)
+                  );
+                }
+                return /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    ref: Number(option.value) === Number(currentMonth + 1) ? (element) => {
+                      monthOptionRef.current = element;
+                    } : null,
+                    disabled: disabledMonth,
+                    onClick: () => {
+                      handleMonthChange(option.value);
+                      setOpenMonthDropdown(false);
+                    },
+                    className: "justify-between",
+                    children: [
+                      option.label,
+                      Number(option.value) - 1 === currentMonth && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DropdownMenu,
+      {
+        open: openYearDropdown,
+        onOpenChange: (open) => {
+          if (!disabled) {
+            setOpenYearDropdown(open);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "cursor-pointer text-sm text-primary underline-offset-4 hover:underline",
+                disabled && "cursor-not-allowed text-muted-foreground"
+              ),
+              children: currentYear
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownMenuContent,
+            {
+              ref: containerYearRef,
+              className: "max-h-80 min-h-72 overflow-auto p-2",
+              children: yearOptions.map((option) => {
+                let disabledYear = false;
+                if (minDate) {
+                  disabledYear = isBefore(
+                    new Date(parseInt(option.value), currentMonth, currentDay),
+                    minDate
+                  );
+                }
+                if (maxDate) {
+                  disabledYear = isAfter(
+                    new Date(parseInt(option.value), currentMonth, currentDay),
+                    maxDate
+                  );
+                }
+                return /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    ref: option.value === currentYear ? (element) => {
+                      yearOptionRef.current = element;
+                    } : null,
+                    disabled: disabledYear,
+                    className: "justify-between",
+                    onClick: () => {
+                      handleYearChange(option.value);
+                      setOpenYearDropdown(false);
+                    },
+                    children: [
+                      option.label,
+                      option.value === currentYear && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MonthYearPicker as default
+};

package/components/custom/date-time-picker/hooks/use-merge-refs.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+function useMergeRefs(...refs) {
+  return useCallback(
+    (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref != null) {
+          ref.current = value;
+        }
+      });
+    },
+    [refs]
+  );
+}
+export {
+  useMergeRefs
+};

package/components/custom/date-time-picker/hooks/use-scroll-to-center.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+function useScrollToCenter() {
+  return useCallback((targetEl, containerEl) => {
+    if (!targetEl || !containerEl) return;
+    const targetOffsetTop = targetEl.offsetTop;
+    const targetHeight = targetEl.offsetHeight;
+    const containerHeight = containerEl.clientHeight;
+    let scrollTop = targetOffsetTop + targetHeight / 2 - containerHeight / 2;
+    scrollTop = Math.max(
+      0,
+      Math.min(scrollTop, containerEl.scrollHeight - containerHeight)
+    );
+    containerEl.scrollTop = scrollTop;
+  }, []);
+}
+export {
+  useScrollToCenter
+};

package/components/custom/date-time-picker/index.js

@@ -0,0 +1,348 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+import { Button } from "../button.js";
+import { Calendar } from "../../ui/calendar.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import DateTimeInput from "./components/date-time-input.js";
+import DateTimeGroup from "./components/date-time-group.js";
+import MonthYearPicker from "./components/month-year-picker.js";
+import { cn } from "../../../lib/utils.js";
+import { isAfter, isBefore, isValid } from "date-fns";
+import { useScrollToCenter } from "./hooks/use-scroll-to-center.js";
+import { cva } from "class-variance-authority";
+import { useTranslation } from "react-i18next";
+const fieldVariants = cva("", {
+  variants: {
+    size: {
+      small: "text-xs",
+      default: "text-sm"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const DateTimePicker = React.forwardRef(
+  ({
+    date,
+    onChange,
+    disabledDate,
+    disabledInput = false,
+    disabledHourFunc,
+    disabledMinuteFunc,
+    showTimeComponent = true,
+    size,
+    getNowFunc,
+    disabledAutoFill = false,
+    popoverModal = true,
+    // Bật chế độ "chỉ lưu khi ấn Áp dụng": mọi lựa chọn ngày/giờ chỉ cập nhật
+    // bản nháp cục bộ, chỉ gọi onChange (lưu) khi bấm nút Áp dụng. Mặc định
+    // tắt để giữ nguyên hành vi commit-ngay của các nơi khác.
+    applyMode = false,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const [month, setMonth] = useState();
+    const [open, setOpen] = useState(false);
+    const [draftDate, setDraftDate] = useState(date);
+    const effectiveDate = applyMode && open ? draftDate : date;
+    const emitDate = applyMode ? setDraftDate : onChange;
+    const hourOptionRef = useRef(null);
+    const minuteOptionRef = useRef(null);
+    const containerHourRef = useRef(null);
+    const containerMinuteRef = useRef(null);
+    const hasCenteredRef = useRef(false);
+    const scrollToCenter = useScrollToCenter();
+    useEffect(() => {
+      if (effectiveDate) {
+        setMonth(effectiveDate);
+      }
+    }, [effectiveDate]);
+    useEffect(() => {
+      if (applyMode && open) {
+        setDraftDate(date);
+      }
+    }, [open]);
+    useEffect(() => {
+      if (!open) {
+        hasCenteredRef.current = false;
+        return;
+      }
+      if (hasCenteredRef.current) return;
+      const rafHandler = requestAnimationFrame(() => {
+        if (hasCenteredRef.current) return;
+        if (!hourOptionRef.current && !minuteOptionRef.current) return;
+        if (hourOptionRef.current) {
+          scrollToCenter(hourOptionRef.current, containerHourRef.current);
+        }
+        if (minuteOptionRef.current) {
+          scrollToCenter(minuteOptionRef.current, containerMinuteRef.current);
+        }
+        hasCenteredRef.current = true;
+      });
+      return () => cancelAnimationFrame(rafHandler);
+    }, [open, date, scrollToCenter]);
+    useEffect(() => {
+      if (date || disabledAutoFill) {
+        return;
+      }
+      if (open) {
+        const updatedDate = /* @__PURE__ */ new Date();
+        const baseDate = date || /* @__PURE__ */ new Date();
+        if (showTimeComponent) {
+          updatedDate.setHours(baseDate.getHours());
+          updatedDate.setMinutes(baseDate.getMinutes());
+          updatedDate.setSeconds(baseDate.getSeconds());
+          updatedDate.setMilliseconds(baseDate.getMilliseconds());
+        }
+        emitDate(updatedDate);
+      }
+    }, [open]);
+    const handleTimeChange = (type, value) => {
+      if (!effectiveDate) return;
+      const currentDate = new Date(effectiveDate);
+      if (type === "hour") {
+        currentDate.setHours(parseInt(value, 10));
+      } else if (type === "minute") {
+        currentDate.setMinutes(parseInt(value, 10));
+      }
+      emitDate(currentDate);
+    };
+    const isDisabledTodayButton = useMemo(() => {
+      if (!disabledDate) return false;
+      if (disabledDate.after) {
+        return isAfter(/* @__PURE__ */ new Date(), disabledDate.after);
+      }
+      return isBefore(/* @__PURE__ */ new Date(), disabledDate.before);
+    }, [disabledDate]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          // pr-9: chừa chỗ cho CalendarIcon (absolute right-4) để text ngày/giờ
+          // không bị icon đè khi ô hẹp.
+          `relative flex h-9 cursor-pointer items-center rounded-md border bg-card py-1 pl-3 pr-9 text-sm`,
+          props.disabled && "cursor-not-allowed select-none bg-muted",
+          props.classNames?.container
+        ),
+        onClick: () => {
+          if (!props.disabled) {
+            setOpen(true);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(DateTimeGroup, { children: /* @__PURE__ */ jsx(
+            DateTimeInput,
+            {
+              date: effectiveDate,
+              onChange: emitDate,
+              showTimeComponent,
+              readonly: disabledInput,
+              classNames: `${props.classNames} ${fieldVariants({ size })}`
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: popoverModal, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { ref, children: /* @__PURE__ */ jsx(
+              CalendarIcon,
+              {
+                className: cn(
+                  "absolute right-4 top-1/2 mt-0.5 h-4 w-4 shrink-0 -translate-y-2/3 cursor-pointer",
+                  props.disabled && "cursor-not-allowed select-none",
+                  !date && "opacity-50",
+                  props.classNames?.icon
+                ),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (!props.disabled) {
+                    setOpen(true);
+                  }
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              PopoverContent,
+              {
+                className: "flex w-auto flex-col p-0",
+                align: props.align || "center",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "border-b-1 flex max-h-[325px] border border-x-0", children: [
+                    /* @__PURE__ */ jsx(
+                      Calendar,
+                      {
+                        mode: "single",
+                        initialFocus: false,
+                        selected: effectiveDate,
+                        disabled: disabledDate,
+                        onSelect: (newDate) => {
+                          if (newDate) {
+                            const updatedDate = new Date(newDate);
+                            const baseDate = effectiveDate || /* @__PURE__ */ new Date();
+                            if (showTimeComponent) {
+                              updatedDate.setHours(baseDate.getHours());
+                              updatedDate.setMinutes(baseDate.getMinutes());
+                              updatedDate.setSeconds(baseDate.getSeconds());
+                              updatedDate.setMilliseconds(baseDate.getMilliseconds());
+                            }
+                            emitDate(updatedDate);
+                          }
+                        },
+                        month,
+                        onMonthChange: setMonth,
+                        classNames: {
+                          // v9 đổi tên: `caption` -> `month_caption`. Để tên cũ thì
+                          // Tailwind vẫn sinh class nhưng DayPicker không gắn vào đâu.
+                          month_caption: "flex justify-center pt-1 relative items-center border border-b-1 border-x-0 border-t-0 p-2"
+                        },
+                        Components: {
+                          CaptionLabel: () => {
+                            const displayMonth = month ?? effectiveDate ?? /* @__PURE__ */ new Date();
+                            let disabled = false;
+                            if (disabledDate?.before) {
+                              const minDate = disabledDate.before;
+                              if (displayMonth.getFullYear() < minDate.getFullYear()) {
+                                disabled = true;
+                              } else if (displayMonth.getFullYear() > minDate.getFullYear()) {
+                                disabled = false;
+                              } else {
+                                disabled = displayMonth.getMonth() < minDate.getMonth();
+                              }
+                            }
+                            if (disabledDate?.after) {
+                              const maxDate = disabledDate.after;
+                              if (displayMonth.getFullYear() > maxDate.getFullYear()) {
+                                disabled = true;
+                              } else if (displayMonth.getFullYear() < maxDate.getFullYear()) {
+                                disabled = false;
+                              } else {
+                                disabled = displayMonth.getMonth() > maxDate.getMonth();
+                              }
+                            }
+                            return /* @__PURE__ */ jsx(
+                              MonthYearPicker,
+                              {
+                                currentDay: displayMonth.getDate(),
+                                currentMonth: displayMonth.getMonth(),
+                                currentYear: displayMonth.getFullYear(),
+                                onChange: emitDate,
+                                disabled,
+                                minDate: !disabledDate?.before ? null : disabledDate.before,
+                                maxDate: !disabledDate?.after ? null : disabledDate.after,
+                                ...props
+                              }
+                            );
+                          }
+                        }
+                      }
+                    ),
+                    showTimeComponent && /* @__PURE__ */ jsx("div", { className: "flex flex-col border border-y-0 border-r-0", children: /* @__PURE__ */ jsxs("div", { className: "border-t-1 mt-[44px] flex overflow-hidden border border-b-0 border-l-0 border-r-0", children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: containerHourRef,
+                          className: "border-r-1 overflow-auto border border-y-0 border-l-0 p-2",
+                          children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: Array.from({ length: 24 }, (_, index) => index).map(
+                            (hour) => /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                size: "sm",
+                                ref: effectiveDate && effectiveDate.getHours() === hour ? (element) => {
+                                  hourOptionRef.current = element;
+                                } : null,
+                                variant: effectiveDate && effectiveDate.getHours() === hour ? "default" : "ghost",
+                                className: "h-7 w-7 px-3",
+                                disabled: !effectiveDate || disabledHourFunc && disabledHourFunc(hour),
+                                onClick: () => handleTimeChange("hour", hour.toString()),
+                                children: hour
+                              },
+                              hour
+                            )
+                          ) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { ref: containerMinuteRef, className: "overflow-auto p-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: Array.from({ length: 60 }, (_, index) => index).map(
+                        (minute) => /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            size: "sm",
+                            ref: effectiveDate && effectiveDate.getMinutes() === minute ? (element) => {
+                              minuteOptionRef.current = element;
+                            } : null,
+                            variant: effectiveDate && effectiveDate.getMinutes() === minute ? "default" : "ghost",
+                            className: "h-7 w-7 px-3",
+                            disabled: !effectiveDate || disabledMinuteFunc && disabledMinuteFunc(minute),
+                            onClick: () => handleTimeChange("minute", minute.toString()),
+                            children: minute.toString().padStart(2, "0")
+                          },
+                          minute
+                        )
+                      ) }) })
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-start gap-2 p-2", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "link",
+                        className: "text-destructive",
+                        disabled: !effectiveDate,
+                        onClick: () => {
+                          onChange(null);
+                          if (applyMode) {
+                            setDraftDate(null);
+                          }
+                        },
+                        children: t("common:action.delete", { defaultValue: "X\xF3a" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "link",
+                        onClick: () => {
+                          let now = getNowFunc ? getNowFunc() : /* @__PURE__ */ new Date();
+                          if (!isValid(now)) {
+                            now = /* @__PURE__ */ new Date();
+                          }
+                          onChange(now);
+                          if (applyMode) {
+                            setDraftDate(now);
+                          }
+                        },
+                        disabled: isDisabledTodayButton,
+                        children: t("common:time.current", { defaultValue: "Hi\u1EC7n t\u1EA1i" })
+                      }
+                    ),
+                    applyMode && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        className: "ml-auto",
+                        onClick: () => {
+                          onChange(draftDate);
+                          setOpen(false);
+                        },
+                        children: t("common:action.apply", { defaultValue: "\xC1p d\u1EE5ng" })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+DateTimePicker.displayName = "DateTimePicker";
+var date_time_picker_default = DateTimePicker;
+export {
+  date_time_picker_default as default
+};