@dmsi/wedgekit-react 0.0.2

package/dist/components/Time.js

@@ -0,0 +1,353 @@
+import {
+  Stack
+} from "../chunk-U42SKNR6.js";
+import {
+  findDocumentRoot
+} from "../chunk-4T7F5BZZ.js";
+import {
+  InputBase
+} from "../chunk-BWRHL2AG.js";
+import "../chunk-4C66DLIJ.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import {
+  typography
+} from "../chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/Time.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
+var Time = (_a) => {
+  var _b = _a, { onChange, format = "12h" } = _b, props = __objRest(_b, ["onChange", "format"]);
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const inputRef = useRef(null);
+  const inputContainerRef = useRef(null);
+  const timeRef = useRef(null);
+  const [timePosition, setTimePosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const [hour, setHour] = useState(null);
+  const [minute, setMinute] = useState(null);
+  const [meridiem, setMeridiem] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const is12HourFormat = format === "12h";
+  const formattedTime = hour && minute ? is12HourFormat ? meridiem ? `${hour}:${minute} ${meridiem}` : `${hour}:${minute}` : `${hour}:${minute}` : "";
+  const updatePosition = () => {
+    if (inputContainerRef.current) {
+      const rect = inputContainerRef.current.getBoundingClientRect();
+      setTimePosition({
+        top: rect.bottom + window.scrollY + 6,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  };
+  useEffect(() => {
+    if (showTimePicker) {
+      updatePosition();
+    }
+  }, [showTimePicker, is12HourFormat]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (inputRef.current && timeRef.current && !inputRef.current.contains(event.target) && !timeRef.current.contains(event.target)) {
+        setShowTimePicker(false);
+      }
+    };
+    if (showTimePicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showTimePicker, is12HourFormat]);
+  useEffect(() => {
+    if (formattedTime && hasInteracted) {
+      setInputValue(formattedTime);
+      onChange == null ? void 0 : onChange({
+        target: { value: formattedTime }
+      });
+    }
+  }, [formattedTime, hasInteracted, onChange]);
+  const handleFocus = () => {
+    if (!props.disabled && !props.readOnly) {
+      setHasInteracted(true);
+      setShowTimePicker(true);
+      if (is12HourFormat && meridiem === null) {
+        setMeridiem("AM");
+      }
+    }
+  };
+  const handleSelect = (type, value) => {
+    if (type === "hour") setHour(value);
+    if (type === "minute") setMinute(value);
+    if (type === "meridiem") setMeridiem(value);
+    setTimeout(() => {
+      const allSet = (type === "hour" ? value : hour) && (type === "minute" ? value : minute) && (is12HourFormat ? type === "meridiem" ? value : meridiem : true);
+      if (allSet) {
+        setShowTimePicker(false);
+      }
+    }, 100);
+  };
+  useEffect(() => {
+    if (!showTimePicker && formattedTime) {
+      setInputValue(formattedTime);
+    }
+  }, [showTimePicker, formattedTime]);
+  const handleInputChange = (e) => {
+    const value = e.target.value.toUpperCase().replace(/[^0-9:APM ]/gi, "").trim();
+    setInputValue(value);
+    if (value === "") {
+      setHour(null);
+      setMinute(null);
+      setMeridiem(null);
+      setShowTimePicker(true);
+    }
+    const match = value.match(
+      is12HourFormat ? /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/ : /^(\d{1,2}):(\d{2})$/
+    );
+    if (match) {
+      const [, hRaw, mRaw, mer] = match;
+      const h = parseInt(hRaw, 10);
+      const m = parseInt(mRaw, 10);
+      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+        let hStr;
+        const mStr = m.toString().padStart(2, "0");
+        let meridiemValue = mer;
+        if (is12HourFormat) {
+          hStr = (h % 12 || 12).toString().padStart(2, "0");
+          if (h > 12) {
+            meridiemValue = "PM";
+          }
+          setHour(hStr);
+          setMinute(mStr);
+          if (meridiemValue) {
+            setMeridiem(meridiemValue);
+          }
+        } else {
+          hStr = h.toString().padStart(2, "0");
+          setHour(hStr);
+          setMinute(mStr);
+        }
+      }
+    }
+    onChange == null ? void 0 : onChange(e);
+  };
+  const selectedRefs = {
+    hour: useRef(null),
+    minute: useRef(null),
+    meridiem: useRef(null)
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      setShowTimePicker(false);
+      return;
+    }
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+    e.preventDefault();
+    let h;
+    let m;
+    let mer;
+    if (hour === null || minute === null || is12HourFormat && meridiem === null) {
+      const now = /* @__PURE__ */ new Date();
+      h = now.getHours();
+      m = Math.round(now.getMinutes() / 5) * 5;
+      if (m === 60) {
+        m = 0;
+        h += 1;
+      }
+      if (is12HourFormat) {
+        mer = h >= 12 ? "PM" : "AM";
+        h = h % 12 || 12;
+      } else {
+        mer = "AM";
+      }
+    } else {
+      h = parseInt(hour, 10);
+      m = parseInt(minute, 10);
+      mer = meridiem || "AM";
+    }
+    const step = 5;
+    const remainder = m % step;
+    m += e.key === "ArrowDown" ? remainder === 0 ? step : step - remainder : -(remainder === 0 ? step : remainder);
+    if (m >= 60) {
+      m -= 60;
+      h += 1;
+    } else if (m < 0) {
+      m += 60;
+      h -= 1;
+    }
+    if (is12HourFormat) {
+      if (h > 12) {
+        h = 1;
+        mer = mer === "AM" ? "PM" : "AM";
+      } else if (h <= 0) {
+        h = 12;
+        mer = mer === "AM" ? "PM" : "AM";
+      }
+    } else {
+      h = (h + 24) % 24;
+    }
+    setHour(h.toString().padStart(2, "0"));
+    setMinute(m.toString().padStart(2, "0"));
+    if (is12HourFormat) setMeridiem(mer);
+  };
+  useEffect(() => {
+    if (showTimePicker) {
+      setTimeout(() => {
+        var _a2, _b2, _c;
+        (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
+          block: "nearest",
+          behavior: "instant"
+        });
+        (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
+          block: "nearest",
+          behavior: "instant"
+        });
+        if (is12HourFormat) {
+          (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
+            block: "nearest",
+            behavior: "instant"
+          });
+        }
+      }, 0);
+    }
+  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
+  const renderOptions = (items, type) => items.map((val) => {
+    const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
+    return /* @__PURE__ */ jsx(
+      TimeCell,
+      {
+        selected: isSelected,
+        ref: isSelected ? (el) => {
+          selectedRefs[type].current = el;
+        } : null,
+        onClick: () => handleSelect(type, val),
+        className: clsx("!size-10 cursor-pointer", typography.caption),
+        children: val
+      },
+      val
+    );
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "relative max-w-38", children: [
+    /* @__PURE__ */ jsx(
+      InputBase,
+      __spreadProps(__spreadValues({}, props), {
+        ref: inputRef,
+        inputContainerRef,
+        value: inputValue,
+        placeholder: is12HourFormat ? "hh:mm am" : "hh:mm",
+        after: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "schedule" }) }),
+        onFocus: handleFocus,
+        caption: props.caption,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        type: "text"
+      })
+    ),
+    showTimePicker && createPortal(
+      /* @__PURE__ */ jsx(
+        Stack,
+        {
+          elevation: 4,
+          height: 240,
+          position: "absolute",
+          backgroundColor: "background-grouped-primary-normal",
+          overflowX: "hidden",
+          overflowY: "hidden",
+          zIndex: 50,
+          top: timePosition.top,
+          left: timePosition.left,
+          minWidth: timePosition.width,
+          maxWidth: 0,
+          rounded: true,
+          children: /* @__PURE__ */ jsxs("div", { ref: timeRef, className: "px-4 flex h-60", children: [
+            /* @__PURE__ */ jsx("div", { className: clsx(timePickerScrollableStyle), children: renderOptions(
+              Array.from(
+                { length: is12HourFormat ? 12 : 24 },
+                (_, i) => (i + 1).toString().padStart(2, "0")
+              ),
+              "hour"
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: clsx(timePickerScrollableStyle), children: renderOptions(
+              Array.from(
+                { length: 12 },
+                (_, i) => (i * 5).toString().padStart(2, "0")
+              ),
+              "minute"
+            ) }),
+            is12HourFormat && /* @__PURE__ */ jsx("div", { className: "py-4", children: renderOptions(["AM", "PM"], "meridiem") })
+          ] })
+        }
+      ),
+      findDocumentRoot(timeRef.current)
+    )
+  ] });
+};
+function TimeCell(_a) {
+  var _b = _a, {
+    selected = false,
+    start = false,
+    intermediate = false,
+    end = false,
+    today = false,
+    disabled = false,
+    onClick,
+    onHover,
+    onKeyDown,
+    children,
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "start",
+    "intermediate",
+    "end",
+    "today",
+    "disabled",
+    "onClick",
+    "onHover",
+    "onKeyDown",
+    "children",
+    "className",
+    "ref"
+  ]);
+  const isDefault = !selected && !start && !intermediate && !end && !today;
+  const isToday = today && !selected && !start && !intermediate && !end;
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      onPointerOver: onHover,
+      onClick,
+      onKeyDown,
+      disabled,
+      ref,
+      className: clsx(
+        "w-full h-full aspect-square flex items-center justify-center ",
+        isDefault && "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
+        isToday && "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
+        selected && "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
+        start && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
+        end && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
+        intermediate && "bg-action-100 border-y border-action-400",
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+}
+export {
+  Time
+};