@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/datePicker/DatePicker.client.js

@@ -3,8 +3,8 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
 import dayjs, { isDayjs } from "dayjs";
-import { useMemo, useState, useEffect, useCallback } from "react";
-import { isString, isNull } from "../../helpers/validations.js";
+import { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { isNull } from "../../helpers/validations.js";
 import { DatePickerView } from "./DatePicker.view.js";
 function toDayjs(val) {
   if (isNull(val)) return null;
@@ -13,7 +13,12 @@ function toDayjs(val) {
   return d.isValid() ? d : null;
 }
 __name(toDayjs, "toDayjs");
-const sameByUnit = /* @__PURE__ */ __name((a, b, unit) => a === null && b === null ? true : a !== null && b !== null && a.isSame(b, unit), "sameByUnit");
+function sameByUnit(a, b, unit) {
+  if (a === null && b === null) return true;
+  if (a !== null && b !== null) return a.isSame(b, unit);
+  return false;
+}
+__name(sameByUnit, "sameByUnit");
 const DatePickerClient = /* @__PURE__ */ __name(({
   name,
   value,
@@ -27,6 +32,8 @@ const DatePickerClient = /* @__PURE__ */ __name(({
   helperText,
   withTime = false,
   minuteStep = 1,
+  required,
+  color = "primary",
   ...rest
 }) => {
   const unit = withTime ? "minute" : "day";
@@ -36,83 +43,221 @@ const DatePickerClient = /* @__PURE__ */ __name(({
   );
   const [date, setDate] = useState(toDayjs(value));
   const [error, setError] = useState(void 0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [viewMode, setViewMode] = useState("days");
+  const viewModeRef = useRef("days");
+  viewModeRef.current = viewMode;
+  const swipeTouchStart = useRef(null);
+  const handleDialogTouchStart = useCallback(
+    (e) => {
+      const [t] = Array.from(e.touches);
+      if (t) swipeTouchStart.current = { x: t.clientX, y: t.clientY };
+    },
+    []
+  );
+  const handleDialogTouchEnd = useCallback(
+    (e) => {
+      const start = swipeTouchStart.current;
+      swipeTouchStart.current = null;
+      if (!start) return;
+      const [t] = Array.from(e.changedTouches);
+      if (!t) return;
+      const dx = t.clientX - start.x;
+      const dy = t.clientY - start.y;
+      if (Math.abs(dy) > Math.abs(dx)) {
+        if (dy > 80) setIsOpen(false);
+      } else if (Math.abs(dx) > 50 && viewModeRef.current === "days") {
+        if (dx < 0) setViewingMonth((m) => m.add(1, "month"));
+        else setViewingMonth((m) => m.subtract(1, "month"));
+      }
+    },
+    []
+  );
+  const [viewingMonth, setViewingMonth] = useState(
+    () => toDayjs(value) ?? dayjs()
+  );
+  const [draft, setDraft] = useState(toDayjs(value));
+  const rootRef = useRef(null);
   useEffect(() => {
     const incoming = toDayjs(value);
     if (!sameByUnit(date, incoming, unit)) {
       setDate(incoming);
-      if (incoming) setError(void 0);
+      setDraft(incoming);
+      if (incoming) {
+        setViewingMonth(incoming);
+        setError(void 0);
+      }
     }
   }, [value, unit]);
-  const emitRaw = useCallback(
-    (raw) => {
-      if (raw === "") {
-        if (date !== null) setDate(null);
-        if (isString(error)) setError(void 0);
-        onValidate == null ? void 0 : onValidate(name, void 0);
-        onChange == null ? void 0 : onChange(null);
-        return;
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 480px)");
+    setIsMobile(mq.matches);
+    const handler = /* @__PURE__ */ __name((e) => setIsMobile(e.matches), "handler");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  useEffect(() => {
+    if (!isOpen || isMobile) return;
+    function handlePointerDown(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setDraft(date);
+      }
+    }
+    __name(handlePointerDown, "handlePointerDown");
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [isOpen, isMobile, date]);
+  const validateDate = useCallback(
+    (d) => {
+      if (isNull(d)) {
+        if (required) return (translations == null ? void 0 : translations.required) ?? "This field is required.";
+        return void 0;
+      }
+      if (!isNull(minDate) && (d == null ? void 0 : d.isBefore(dayjs(minDate), unit))) {
+        return (translations == null ? void 0 : translations.minDate) ?? (dayjs(minDate).isSame(dayjs(), unit) ? withTime ? "Date/time cannot be in the past." : "Date cannot be in the past." : `Must be >= ${dayjs(minDate).format(fmt)}`);
       }
-      const parsed = dayjs(raw, fmt, true);
-      const year = parsed.isValid() ? parsed.year() : dayjs(raw).year();
-      if (!parsed.isValid() || year > 9999 || year < 100) {
-        const msg = withTime ? "Invalid date/time format." : "Invalid date format.";
-        setError(msg);
-        onValidate == null ? void 0 : onValidate(name, msg);
-        onChange == null ? void 0 : onChange(null);
-        return;
+      if (!isNull(maxDate) && (d == null ? void 0 : d.isAfter(dayjs(maxDate), unit))) {
+        return (translations == null ? void 0 : translations.maxDate) ?? (dayjs(maxDate).isSame(dayjs(), unit) ? withTime ? "Date/time cannot be in the future." : "Date cannot be in the future." : `Must be <= ${dayjs(maxDate).format(fmt)}`);
       }
-      if (!isNull(minDate) && parsed.isBefore(dayjs(minDate), unit)) {
-        const msg = (translations == null ? void 0 : translations.minDate) ?? (dayjs(minDate).isSame(dayjs(), unit) ? withTime ? "Date/time cannot be in the past." : "Date cannot be in the past." : `Must be ≥ ${dayjs(minDate).format(fmt)}`);
-        setError(msg);
-        onValidate == null ? void 0 : onValidate(name, msg);
-        onChange == null ? void 0 : onChange(null);
-        return;
+      return void 0;
+    },
+    [minDate, maxDate, unit, fmt, required, withTime, translations]
+  );
+  const commit = useCallback(
+    (d) => {
+      const err = validateDate(d);
+      setError(err);
+      onValidate == null ? void 0 : onValidate(name, err);
+      if (!err) {
+        setDate(d);
+        onChange == null ? void 0 : onChange(d);
       }
-      if (!isNull(maxDate) && parsed.isAfter(dayjs(maxDate), unit)) {
-        const msg = (translations == null ? void 0 : translations.maxDate) ?? (dayjs(maxDate).isSame(dayjs(), unit) ? withTime ? "Date/time cannot be in the future." : "Date cannot be in the future." : `Must be ≤ ${dayjs(maxDate).format(fmt)}`);
-        setError(msg);
-        onValidate == null ? void 0 : onValidate(name, msg);
-        onChange == null ? void 0 : onChange(null);
-        return;
+    },
+    [validateDate, onChange, onValidate, name]
+  );
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => {
+      if (!prev) {
+        setViewingMonth(date ?? dayjs());
+        setDraft(date);
+        setViewMode("days");
       }
-      const snapped = withTime ? parsed.minute(
-        Math.round(parsed.minute() / Math.max(1, minuteStep)) * Math.max(1, minuteStep)
-      ) : parsed;
-      if (!sameByUnit(date, snapped, unit)) setDate(snapped);
-      if (isString(error)) setError(void 0);
-      onValidate == null ? void 0 : onValidate(name, void 0);
-      onChange == null ? void 0 : onChange(snapped);
+      return !prev;
+    });
+  }, [date]);
+  const handleViewModeChange = useCallback((mode) => {
+    setViewMode(mode);
+  }, []);
+  const handleMonthSelect = useCallback((month) => {
+    setViewingMonth((m) => m.month(month));
+    setViewMode("days");
+  }, []);
+  const handleYearSelect = useCallback((year) => {
+    setViewingMonth((m) => m.year(year));
+    setViewMode("months");
+  }, []);
+  const handlePrevMonth = useCallback(() => {
+    setViewingMonth((m) => {
+      const mode = viewModeRef.current;
+      if (mode === "months") return m.subtract(1, "year");
+      if (mode === "years") return m.subtract(10, "year");
+      return m.subtract(1, "month");
+    });
+  }, []);
+  const handleNextMonth = useCallback(() => {
+    setViewingMonth((m) => {
+      const mode = viewModeRef.current;
+      if (mode === "months") return m.add(1, "year");
+      if (mode === "years") return m.add(10, "year");
+      return m.add(1, "month");
+    });
+  }, []);
+  const handleDayClick = useCallback(
+    (day) => {
+      const withExistingTime = withTime && draft ? day.hour(draft.hour()).minute(draft.minute()).second(0).millisecond(0) : day.startOf("day");
+      if (!withTime) {
+        commit(withExistingTime);
+        setDraft(withExistingTime);
+        setIsOpen(false);
+      } else {
+        setDraft(withExistingTime);
+      }
+    },
+    [withTime, draft, commit]
+  );
+  const handleToday = useCallback(() => {
+    const today = dayjs().startOf("day");
+    setViewingMonth(today);
+    setDraft(today);
+  }, []);
+  const handleClear = useCallback(() => {
+    setDraft(null);
+    commit(null);
+    setIsOpen(false);
+  }, [commit]);
+  const handleApply = useCallback(() => {
+    let snapped = draft;
+    if (withTime && snapped) {
+      snapped = snapped.minute(
+        Math.round(snapped.minute() / Math.max(1, minuteStep)) * Math.max(1, minuteStep)
+      ).second(0).millisecond(0);
+    }
+    commit(snapped);
+    if (!validateDate(snapped)) {
+      setIsOpen(false);
+    }
+  }, [draft, withTime, minuteStep, commit, validateDate]);
+  const handleTimeChange = useCallback(
+    (val, timeUnit) => {
+      setDraft((prev) => {
+        const base = prev ?? dayjs().startOf("day");
+        return timeUnit === "hour" ? base.hour(val) : base.minute(val);
+      });
     },
-    [
-      date,
-      error,
-      fmt,
-      maxDate,
-      minDate,
-      minuteStep,
-      name,
-      onChange,
-      onValidate,
-      translations,
-      unit,
-      withTime
-    ]
+    []
   );
   return /* @__PURE__ */ jsx(
-    DatePickerView,
+    "div",
     {
-      ...rest,
-      errorText: error,
-      format: fmt,
-      helperText,
-      label,
-      maxDate,
-      minDate,
-      minuteStep,
-      name,
-      value: date,
-      withTime,
-      onChangeInput: emitRaw
+      ref: rootRef,
+      style: { position: "relative", display: "inline-block", width: "100%" },
+      children: /* @__PURE__ */ jsx(
+        DatePickerView,
+        {
+          ...rest,
+          color,
+          dialogPortalTarget: isMobile ? document.body : null,
+          errorText: error,
+          format: fmt,
+          helperText,
+          isOpen,
+          label,
+          maxDate,
+          minDate,
+          minuteStep,
+          name,
+          required,
+          selectedDate: draft,
+          viewingMonth,
+          viewMode,
+          withTime,
+          onApply: handleApply,
+          onClear: handleClear,
+          onDayClick: handleDayClick,
+          onDialogTouchEnd: handleDialogTouchEnd,
+          onDialogTouchStart: handleDialogTouchStart,
+          onMonthSelect: handleMonthSelect,
+          onNextMonth: handleNextMonth,
+          onPrevMonth: handlePrevMonth,
+          onTimeChange: handleTimeChange,
+          onToday: handleToday,
+          onToggle: handleToggle,
+          onViewModeChange: handleViewModeChange,
+          onYearSelect: handleYearSelect
+        }
+      )
     }
   );
 }, "DatePickerClient");