@dmsi/wedgekit-react 0.0.2

package/dist/components/DateInput.js

@@ -0,0 +1,170 @@
+import {
+  findDocumentRoot
+} from "../chunk-4T7F5BZZ.js";
+import {
+  InputBase
+} from "../chunk-BWRHL2AG.js";
+import "../chunk-4C66DLIJ.js";
+import {
+  CalendarRange
+} from "../chunk-FY7PTP6E.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/DateInput.tsx
+import { useRef, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DateInput = (_a) => {
+  var _b = _a, {
+    value,
+    onChange,
+    placeholder = "MM/DD/YYYY",
+    disabled,
+    readOnly = false,
+    label
+  } = _b, props = __objRest(_b, [
+    "value",
+    "onChange",
+    "placeholder",
+    "disabled",
+    "readOnly",
+    "label"
+  ]);
+  const [visible, setVisible] = useState(false);
+  const popoverRef = useRef(null);
+  const triggerRef = useRef(null);
+  const [calendarPosition, setCalendarPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const [from, to] = [value, ""];
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      requestAnimationFrame(() => {
+        if (triggerRef.current) {
+          const rect = triggerRef.current.getBoundingClientRect();
+          setCalendarPosition({
+            top: rect.bottom + window.scrollY,
+            left: rect.left + window.scrollX,
+            width: rect.width
+          });
+        }
+      });
+    }
+  };
+  useEffect(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (triggerRef.current) {
+      resizeObserver.observe(triggerRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      var _a2;
+      if (event.key === "Escape" && popoverRef.current) {
+        setVisible(false);
+        (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  function handleDateChange(fromValue) {
+    onChange(fromValue);
+    setVisible(false);
+  }
+  const handleFocus = () => {
+    if (readOnly) return;
+    setVisible(true);
+    updatePosition();
+  };
+  function formatDisplayValue(from2) {
+    if (!from2) return "";
+    return formatDate(from2 != null ? from2 : "");
+  }
+  function formatDate(date) {
+    if (!date) return "";
+    const [y, m, d] = date.split("-");
+    return `${m}/${d}/${y}`;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      InputBase,
+      __spreadProps(__spreadValues({
+        ref: (el) => {
+          triggerRef.current = el;
+        }
+      }, props), {
+        value: formatDisplayValue(from),
+        placeholder,
+        disabled,
+        readOnly,
+        after: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" }),
+        onFocus: handleFocus,
+        onChange: () => {
+        },
+        label
+      })
+    ),
+    visible && !readOnly && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (el) => {
+            popoverRef.current = el;
+          },
+          className: "absolute z-40 bg-white",
+          style: {
+            top: `${calendarPosition.top + 16}px`,
+            left: `${calendarPosition.left - 4}px`,
+            minWidth: `${calendarPosition.width}px`
+          },
+          children: /* @__PURE__ */ jsx(
+            CalendarRange,
+            {
+              from,
+              to: to || from,
+              onChange: handleDateChange,
+              cardStyle: true,
+              mode: "single",
+              disableRange: true
+            }
+          )
+        }
+      ),
+      findDocumentRoot(popoverRef.current)
+    )
+  ] });
+};
+DateInput.displayName = "DateInput";
+export {
+  DateInput
+};