@jirawatpyk/aura-react 4.4.2 → 4.5.1

package/dist/esm/TimePicker.js

@@ -5,55 +5,61 @@ import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedR
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
 import { Field } from "./forms.js";
-const h = React.createElement;
 function pad(n) {
   return (n < 10 ? "0" : "") + n;
 }
 function toMin(t) {
-  var m = /^(\d{2}):(\d{2})$/.exec(t || "");
+  const m = /^(\d{2}):(\d{2})$/.exec(t || "");
   return m ? +m[1] * 60 + +m[2] : null;
 }
 function fromMin(n) {
   return pad(Math.floor(n / 60)) + ":" + pad(n % 60);
 }
 function parseTime(text) {
-  var s = String(text || "").trim().toLowerCase().replace(/\s*(น\.?|นาฬิกา)$/, "").trim();
-  var pm = /\s*(pm|p\.m\.)$/.test(s), am = /\s*(am|a\.m\.)$/.test(s);
+  let s = String(text || "").trim().toLowerCase().replace(/\s*(น\.?|นาฬิกา)$/, "").trim();
+  const pm = /\s*(pm|p\.m\.)$/.test(s), am = /\s*(am|a\.m\.)$/.test(s);
   s = s.replace(/\s*(am|pm|a\.m\.|p\.m\.)$/, "");
-  var m = /^(\d{1,2})(?:[:.](\d{2}))?$/.exec(s) || /^(\d{1,2})(\d{2})$/.exec(s);
+  const m = /^(\d{1,2})(?:[:.](\d{2}))?$/.exec(s) || /^(\d{1,2})(\d{2})$/.exec(s);
   if (!m) return null;
-  var hh = +m[1], mm = m[2] ? +m[2] : 0;
+  let hh = +m[1], mm = m[2] ? +m[2] : 0;
   if (pm && hh < 12) hh += 12;
   if (am && hh === 12) hh = 0;
   if (hh > 23 || mm > 59) return null;
   return pad(hh) + ":" + pad(mm);
 }
 const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
-  var t = useStrings();
-  var auto = uid(), id = props.id || auto, listId = id + "-list";
-  var st = useMaybeControlled(props.value, props.defaultValue == null ? null : props.defaultValue, props.onChange);
-  var value = st[0];
-  var step = props.step || 30, lo = toMin(props.min) != null ? toMin(props.min) : 0, hi = toMin(props.max) != null ? toMin(props.max) : 24 * 60 - 1;
-  var slots = React.useMemo(function() {
-    var out = [];
-    for (var m = lo; m <= hi; m += step) out.push(fromMin(m));
-    return out;
-  }, [lo, hi, step]);
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto, listId = id + "-list";
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue == null ? null : props.defaultValue,
+    props.onChange
+  );
+  const value = st[0];
+  const step = props.step || 30, lo = toMin(props.min) != null ? toMin(props.min) : 0, hi = toMin(props.max) != null ? toMin(props.max) : 24 * 60 - 1;
+  const slots = React.useMemo(
+    function() {
+      const out = [];
+      for (let m = lo; m <= hi; m += step) out.push(fromMin(m));
+      return out;
+    },
+    [lo, hi, step]
+  );
   function blocked(v) {
-    var n = toMin(v);
+    const n = toMin(v);
     return n == null || n < lo || n > hi || props.isTimeDisabled && props.isTimeDisabled(v);
   }
-  var openState = React.useState(false), open = openState[0], setOpen = openState[1];
-  var editState = React.useState(null), editing = editState[0], setEditing = editState[1];
-  var aState = React.useState(0), active = aState[0], setActive = aState[1];
-  var errState = React.useState(null);
-  var pos = React.useState(null);
-  var boxRef = React.useRef(null), inputRef = React.useRef(null), listRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
-  var mounted = useMounted();
+  const openState = React.useState(false), open = openState[0], setOpen = openState[1];
+  const editState = React.useState(null), editing = editState[0], setEditing = editState[1];
+  const aState = React.useState(0), active = aState[0], setActive = aState[1];
+  const errState = React.useState(null);
+  const pos = React.useState(null);
+  const boxRef = React.useRef(null), inputRef = React.useRef(null), listRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+  const mounted = useMounted();
   function nearest(v) {
-    var n = toMin(v);
+    const n = toMin(v);
     if (n == null) return 0;
-    var best = 0;
+    let best = 0;
     slots.forEach(function(s, i) {
       if (Math.abs(toMin(s) - n) < Math.abs(toMin(slots[best]) - n)) best = i;
     });
@@ -61,35 +67,51 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
   }
   function place() {
     if (!boxRef.current) return;
-    var r = boxRef.current.getBoundingClientRect(), below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
-    pos[1]({ left: r.left, width: Math.max(r.width, 160), top: up ? void 0 : r.bottom + 4, bottom: up ? window.innerHeight - r.top + 4 : void 0, maxHeight: Math.min(280, (up ? r.top : below) - 8) });
+    const r = boxRef.current.getBoundingClientRect(), below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
+    pos[1]({
+      left: r.left,
+      width: Math.max(r.width, 160),
+      top: up ? void 0 : r.bottom + 4,
+      bottom: up ? window.innerHeight - r.top + 4 : void 0,
+      maxHeight: Math.min(280, (up ? r.top : below) - 8)
+    });
   }
-  useIsoLayoutEffect(function() {
-    if (open) place();
-  }, [open]);
-  React.useEffect(function() {
-    if (!open) return;
-    function outside(e) {
-      if (boxRef.current && boxRef.current.contains(e.target) || listRef.current && listRef.current.contains(e.target)) return;
-      setOpen(false);
-    }
-    function onScroll(e) {
-      if (!listRef.current || !listRef.current.contains(e.target)) place();
-    }
-    document.addEventListener("pointerdown", outside, true);
-    window.addEventListener("scroll", onScroll, true);
-    window.addEventListener("resize", place);
-    return function() {
-      document.removeEventListener("pointerdown", outside, true);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", place);
-    };
-  }, [open]);
-  React.useEffect(function() {
-    if (!open || !listRef.current) return;
-    var el = listRef.current.querySelector('[data-idx="' + active + '"]');
-    if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
-  }, [active, open]);
+  useIsoLayoutEffect(
+    function() {
+      if (open) place();
+    },
+    [open]
+  );
+  React.useEffect(
+    function() {
+      if (!open) return;
+      function outside(e) {
+        if (boxRef.current && boxRef.current.contains(e.target) || listRef.current && listRef.current.contains(e.target))
+          return;
+        setOpen(false);
+      }
+      function onScroll(e) {
+        if (!listRef.current || !listRef.current.contains(e.target)) place();
+      }
+      document.addEventListener("pointerdown", outside, true);
+      window.addEventListener("scroll", onScroll, true);
+      window.addEventListener("resize", place);
+      return function() {
+        document.removeEventListener("pointerdown", outside, true);
+        window.removeEventListener("scroll", onScroll, true);
+        window.removeEventListener("resize", place);
+      };
+    },
+    [open]
+  );
+  React.useEffect(
+    function() {
+      if (!open || !listRef.current) return;
+      const el = listRef.current.querySelector('[data-idx="' + active + '"]');
+      if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+    },
+    [active, open]
+  );
   function show() {
     if (open || props.disabled || props.readOnly) return;
     setActive(nearest(value || props.suggest || fromMin(lo)));
@@ -110,7 +132,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
     return true;
   }
   function choose(i) {
-    var v = slots[i];
+    const v = slots[i];
     if (!v || blocked(v)) return;
     commit(v);
     setEditing(null);
@@ -119,25 +141,25 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
   }
   function commitTyped() {
     if (editing == null) return;
-    var txt = editing.trim();
+    const txt = editing.trim();
     if (!txt) commit(null);
     else {
-      var v = parseTime(txt);
+      const v = parseTime(txt);
       if (v) commit(v);
       else errState[1](t.timeInvalid);
     }
     setEditing(null);
   }
   function move(d) {
-    var i = active;
-    for (var k = 0; k < slots.length; k++) {
+    let i = active;
+    for (let k = 0; k < slots.length; k++) {
       i = Math.min(slots.length - 1, Math.max(0, i + d));
       if (!blocked(slots[i])) break;
     }
     setActive(i);
   }
   function onKeyDown(e) {
-    var k = e.key;
+    const k = e.key;
     if (k === "ArrowDown") {
       e.preventDefault();
       if (!open) show();
@@ -178,52 +200,56 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
       if (open) setOpen(false);
     }
   }
-  var error = errState[0] || props.error;
-  var list = open && mounted && pos[0] ? createPortal(
-    h(
-      "div",
-      { ref: listRef, className: "aura-combo__popover aura-time__popover", style: pos[0] },
-      h(
-        "ul",
-        { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" },
-        slots.map(function(s, i) {
-          var dis = blocked(s), sel = s === value;
-          return h(
-            "li",
-            {
-              key: s,
-              id: id + "-opt-" + i,
-              role: "option",
-              "data-idx": i,
-              "aria-selected": sel,
-              "aria-disabled": dis || void 0,
-              className: cx("aura-combo__option aura-time__option", i === active && "is-active", sel && "is-selected", dis && "is-disabled"),
-              onPointerDown: function(e) {
-                e.preventDefault();
-              },
-              onClick: function() {
-                choose(i);
-              },
-              onPointerMove: function() {
-                if (active !== i) setActive(i);
-              }
-            },
-            h("span", { className: "aura-combo__label" }, s),
-            sel ? h(Icon, { name: "check", className: "aura-combo__check" }) : null
-          );
-        })
-      )
-    ),
+  const error = errState[0] || props.error;
+  const list = open && mounted && pos[0] ? createPortal(
+    /* @__PURE__ */ React.createElement("div", { ref: listRef, className: "aura-combo__popover aura-time__popover", style: pos[0] }, /* @__PURE__ */ React.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, slots.map(function(s, i) {
+      const dis = blocked(s), sel = s === value;
+      return /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: s,
+          id: id + "-opt-" + i,
+          role: "option",
+          "data-idx": i,
+          "aria-selected": sel,
+          "aria-disabled": dis || void 0,
+          className: cx(
+            "aura-combo__option aura-time__option",
+            i === active && "is-active",
+            sel && "is-selected",
+            dis && "is-disabled"
+          ),
+          onPointerDown: function(e) {
+            e.preventDefault();
+          },
+          onClick: function() {
+            choose(i);
+          },
+          onPointerMove: function() {
+            if (active !== i) setActive(i);
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, s),
+        sel ? /* @__PURE__ */ React.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+      );
+    }))),
     document.body
   ) : null;
-  return h(
+  return /* @__PURE__ */ React.createElement(
     Field,
-    { id, label: props.label, hint: props.hint, error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
-    h(
-      "div",
-      { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") },
-      h(Icon, { name: "clock", className: "aura-input__icon" }),
-      h("input", {
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React.createElement(Icon, { name: "clock", className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
+      "input",
+      {
         ref: inputMerged,
         id,
         type: "text",
@@ -245,7 +271,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
         value: editing != null ? editing : value || "",
         onChange: function(e) {
           setEditing(e.target.value);
-          var v = parseTime(e.target.value);
+          const v = parseTime(e.target.value);
           if (v) {
             if (!open) show();
             setActive(nearest(v));
@@ -260,8 +286,10 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
             setOpen(false);
           }, 0);
         }
-      }),
-      props.clearable !== false && value != null && !props.disabled ? h("button", {
+      }
+    ), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
         type: "button",
         className: "aura-combo__clear",
         "aria-label": t.clear(props.label),
@@ -271,28 +299,28 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
           setEditing(null);
           if (inputRef.current) inputRef.current.focus();
         }
-      }, h(Icon, { name: "x" })) : null,
-      h(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          "aria-hidden": true,
-          className: "aura-combo__toggle",
-          onPointerDown: function(e) {
-            e.preventDefault();
-          },
-          onClick: function() {
-            if (open) setOpen(false);
-            else {
-              show();
-              inputRef.current && inputRef.current.focus();
-            }
-          }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+    ) : null, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: "aura-combo__toggle",
+        onPointerDown: function(e) {
+          e.preventDefault();
         },
-        h(Icon, { name: "chevron-down" })
-      )
-    ),
+        onClick: function() {
+          if (open) setOpen(false);
+          else {
+            show();
+            inputRef.current && inputRef.current.focus();
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down" })
+    )),
     list
   );
 });