@clubmed/trident-ui/molecules/Forms/DateField.js

Shared ClubMed React UI components

import { jsx as m, jsxs as x } from "react/jsx-runtime";
import { c as E } from "../../chunks/index.js";
import { useId as _, useRef as z } from "react";
import { Icon as I } from "../../atoms/Icons/Icon.js";
import "@clubmed/trident-icons";
import { useValue as G } from "../../hooks/useValue.js";
import { useInternalStatus as Z } from "../../hooks/useInternalStatus.js";
import { FormControl as $ } from "./FormControl.js";
function T(t) {
  "@babel/helpers - typeof";
  return T = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
    return typeof e;
  } : function(e) {
    return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
  }, T(t);
}
function F(t, e) {
  if (e.length < t)
    throw new TypeError(t + " argument required, but only " + e.length + " present");
}
function A(t) {
  F(1, arguments);
  var e = Object.prototype.toString.call(t);
  return t instanceof Date || T(t) === "object" && e === "[object Date]" ? new Date(t.getTime()) : typeof t == "number" || e === "[object Number]" ? new Date(t) : ((typeof t == "string" || e === "[object String]") && typeof console < "u" && (console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"), console.warn(new Error().stack)), /* @__PURE__ */ new Date(NaN));
}
function l(t, e) {
  for (var i = t < 0 ? "-" : "", n = Math.abs(t).toString(); n.length < e; )
    n = "0" + n;
  return i + n;
}
function H(t, e) {
  var i, n;
  F(1, arguments);
  var o = A(t);
  if (isNaN(o.getTime()))
    throw new RangeError("Invalid time value");
  var d = String((i = e == null ? void 0 : e.format) !== null && i !== void 0 ? i : "extended"), c = String((n = e == null ? void 0 : e.representation) !== null && n !== void 0 ? n : "complete");
  if (d !== "extended" && d !== "basic")
    throw new RangeError("format must be 'extended' or 'basic'");
  if (c !== "date" && c !== "time" && c !== "complete")
    throw new RangeError("representation must be 'date', 'time', or 'complete'");
  var s = "", f = "", g = d === "extended" ? "-" : "", w = d === "extended" ? ":" : "";
  if (c !== "time") {
    var r = l(o.getDate(), 2), v = l(o.getMonth() + 1, 2), D = l(o.getFullYear(), 4);
    s = "".concat(D).concat(g).concat(v).concat(g).concat(r);
  }
  if (c !== "date") {
    var p = o.getTimezoneOffset();
    if (p !== 0) {
      var h = Math.abs(p), S = l(Math.floor(h / 60), 2), N = l(h % 60, 2), b = p < 0 ? "+" : "-";
      f = "".concat(b).concat(S, ":").concat(N);
    } else
      f = "Z";
    var k = l(o.getHours(), 2), y = l(o.getMinutes(), 2), a = l(o.getSeconds(), 2), j = s === "" ? "" : "T", C = [k, y, a].join(w);
    s = "".concat(s).concat(j).concat(C).concat(f);
  }
  return s;
}
const M = (t) => t ? H(new Date(t), { representation: "date" }) : "", X = (t) => {
  const e = _(), {
    id: i = e,
    name: n = i,
    label: o,
    description: d,
    openDatepicker: c,
    validationStatus: s = "default",
    icon: f = "CalendarDefault",
    iconType: g,
    errorMessage: w,
    disabled: r = !1,
    required: v = !1,
    hideRequiredStar: D,
    dataTestId: p = "DateField",
    value: h,
    min: S,
    max: N,
    onChange: b,
    ...k
  } = t, y = z(null), a = Z({
    isDisabled: r,
    validationStatus: s
  }), { setValue: j, value: C } = G({
    name: n,
    formatter: M,
    initialValue: h,
    onChange: (u, V) => b == null ? void 0 : b(u, new Date(V))
  }), R = M(S), O = M(N), q = (u) => {
    j(u.target.value);
  }, P = () => {
    var u;
    (u = y.current) == null || u.showPicker();
  };
  return /* @__PURE__ */ m(
    $,
    {
      id: i,
      label: o,
      description: d,
      dataName: "DateField",
      dataTestId: p,
      disabled: r,
      required: v,
      hideRequiredStar: D,
      validationStatus: s,
      errorMessage: w,
      children: /* @__PURE__ */ x("div", { className: "relative", children: [
        /* @__PURE__ */ m(
          "input",
          {
            ...k,
            type: "date",
            className: E(
              "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": a === "default",
                "pe-[52px]": a === "error" || a === "success",
                "bg-pearl text-grey": r,
                "bg-white text-black": !r,
                "border-red": !r && a === "error",
                "border-green": !r && a === "success"
              }
            ),
            id: i,
            disabled: r,
            required: v,
            ref: y,
            value: C,
            min: R,
            max: O,
            onChange: q
          }
        ),
        /* @__PURE__ */ x(
          "div",
          {
            className: E(
              "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
              {
                "text-grey": r,
                "text-red": !r && a === "error",
                "text-green": !r && a === "success"
              }
            ),
            children: [
              /* @__PURE__ */ x("button", { className: "pointer-events-auto leading-none", onClick: P, children: [
                /* @__PURE__ */ m(I, { name: f, iconType: g, width: "24px" }),
                /* @__PURE__ */ m("span", { className: "sr-only", children: c })
              ] }),
              /* @__PURE__ */ x("span", { className: "ms-auto flex gap-x-8", children: [
                a === "error" && /* @__PURE__ */ m(I, { name: "CrossDefault", width: "24px" }),
                a === "success" && /* @__PURE__ */ m(I, { name: "CheckDefault", width: "24px" })
              ] })
            ]
          }
        )
      ] })
    }
  );
};
export {
  X as DateField
};
//# sourceMappingURL=DateField.js.map