@clubmed/trident-ui/ui/forms/DateField.js

Shared ClubMed React UI components

import { jsx as f, jsxs as x } from "react/jsx-runtime";
import { c as R } from "../../chunks/clsx.js";
import { useId as L, useRef as Z, useState as _, useCallback as A, useEffect as H } from "react";
import { Icon as w } from "@clubmed/trident-icons";
import { useValue as J } from "../hooks/useValue.js";
import { useInternalStatus as K } from "../hooks/useInternalStatus.js";
import { FormControl as Q } from "./FormControl.js";
const V = Symbol.for("constructDateFrom");
function U(e, t) {
  return typeof e == "function" ? e(t) : e && typeof e == "object" && V in e ? e[V](t) : e instanceof Date ? new e.constructor(t) : new Date(t);
}
function C(e, t) {
  return U(t || e, e);
}
function $(e, t) {
  return +C(e) - +C(t);
}
function y(e, t) {
  const n = e < 0 ? "-" : "", a = Math.abs(e).toString().padStart(t, "0");
  return n + a;
}
function W(e, t) {
  const n = C(e, t?.in);
  if (isNaN(+n))
    throw new RangeError("Invalid time value");
  const a = t?.format ?? "extended";
  let d = "";
  const s = a === "extended" ? "-" : "";
  {
    const i = y(n.getDate(), 2), h = y(n.getMonth() + 1, 2);
    d = `${y(n.getFullYear(), 4)}${s}${h}${s}${i}`;
  }
  return d;
}
const F = (e) => e ? W(new Date(e), {}) : "", X = (e, t, n) => {
  if (!e)
    return !0;
  const a = (i) => new Date(i.getFullYear(), i.getMonth(), i.getDate()), d = new Date(e), s = a(d);
  return !(t && s < a(t) || n && s > a(n));
}, ie = (e) => {
  const t = L(), {
    id: n = t,
    name: a = n,
    label: d,
    description: s,
    openDatepicker: i,
    validationStatus: h = "default",
    icon: M = "CalendarDefault",
    iconType: j,
    errorMessage: T,
    disabled: r = !1,
    required: k = !1,
    hideRequiredStar: O,
    dataTestId: q = "DateField",
    value: z,
    min: c,
    max: l,
    onChange: E,
    ...P
  } = e, I = Z(null), [S, v] = _(!1), o = K({
    isDisabled: r,
    validationStatus: h
  }), { setValue: m, value: p } = J({
    name: a,
    formatter: F,
    initialValue: z,
    onChange: (u, b) => E?.(u, new Date(b))
  }), D = F(c), g = F(l), Y = (u) => {
    m(u.target.value);
  }, B = () => {
    I.current?.showPicker();
  }, N = A(() => {
    const u = new Date(p);
    if (c && l) {
      const b = Math.abs($(u, c)), G = Math.abs($(u, l));
      m(b <= G ? D : g);
      return;
    }
    if (c) {
      m(D);
      return;
    }
    if (l) {
      m(g);
      return;
    }
  }, [l, c, g, D, m, p]);
  return H(() => {
    !X(p, c, l) && !S && N();
  }, [N, l, c, S, p]), /* @__PURE__ */ f(
    Q,
    {
      id: n,
      label: d,
      description: s,
      dataName: "DateField",
      dataTestId: q,
      disabled: r,
      required: k,
      hideRequiredStar: O,
      validationStatus: h,
      errorMessage: T,
      children: /* @__PURE__ */ x("div", { className: "relative", children: [
        /* @__PURE__ */ f(
          "input",
          {
            ...P,
            type: "date",
            className: R(
              "text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none",
              {
                "border-lightGrey focus:border-black active:border-black": o === "default",
                "pe-[52px]": o === "error" || o === "success",
                "bg-pearl text-grey": r,
                "bg-white text-black": !r,
                "border-red": !r && o === "error",
                "border-green": !r && o === "success"
              }
            ),
            id: n,
            disabled: r,
            required: k,
            ref: I,
            value: p,
            min: D,
            max: g,
            onChange: Y,
            onFocus: () => v(!0),
            onBlur: () => v(!1)
          }
        ),
        /* @__PURE__ */ x(
          "div",
          {
            className: R(
              "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
              {
                "text-grey": r,
                "text-red": !r && o === "error",
                "text-green": !r && o === "success"
              }
            ),
            children: [
              /* @__PURE__ */ x("button", { className: "pointer-events-auto leading-none", onClick: B, children: [
                /* @__PURE__ */ f(w, { name: M, iconType: j, width: "24px" }),
                /* @__PURE__ */ f("span", { className: "sr-only", children: i })
              ] }),
              /* @__PURE__ */ x("span", { className: "ms-auto flex gap-x-8", children: [
                o === "error" && /* @__PURE__ */ f(w, { name: "CrossDefault", width: "24px" }),
                o === "success" && /* @__PURE__ */ f(w, { name: "CheckDefault", width: "24px" })
              ] })
            ]
          }
        )
      ] })
    }
  );
};
export {
  ie as DateField
};
//# sourceMappingURL=DateField.js.map