koval-ui/dist/src/lib/InputDateTime/InputDateTime.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as o, jsxs as k } from "react/jsx-runtime";
import { forwardRef as B, useCallback as f, useState as u, useEffect as i, Fragment as L } from "react";
import M from "classnames";
import { ValidationState as P } from "../../internal/inputs/ValidationProps.js";
import { useValidation as q } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as z } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as A } from "../../internal/inputs/useExternalValidation.js";
import { useInternalRef as G } from "../../internal/hooks/useInternalRef.js";
/* empty css                */
import g from "./InputDateTime.module.css.js";
import { InputDate as H } from "../InputDate/InputDate.js";
import { InputTime as J } from "../InputTime/InputTime.js";
const K = () => {
}, Q = B(
  ({
    prefix: U,
    className: I,
    placeholder: b = "",
    disabled: D,
    value: a,
    onChange: h = () => {
    },
    onFocus: y = () => {
    },
    onBlur: C = () => {
    },
    onKeyDown: E = () => {
    },
    onKeyUp: V = () => {
    },
    // TODO: enable controlled/non-controlled mode
    // defaultValue,
    validation: r,
    errorMessage: N,
    revalidateOnFormChange: R,
    ...S
  }, w) => {
    const t = G(w), j = !!r, { validateTextual: s, validity: T, setValidity: m } = q({ validation: r, hasValidators: j });
    z(t, s, R), A({ errorMessage: N, inputRef: t, setValidity: m, validation: r });
    const F = f(() => {
      m(P.error);
    }, [m]), [l, p] = u(""), [c, d] = u("00:00"), [x, v] = u(a || "T00:00");
    i(() => {
      if (v(a || "T00:00"), a !== void 0 && a !== "T00:00") {
        const [e, n] = a.split("T");
        p(e), d(n);
      } else
        p(""), d("00:00");
    }, [a]);
    const O = f((e) => {
      p(e.target.value);
    }, []), $ = f((e) => {
      d(e.target.value);
    }, []);
    return i(() => {
      v(`${l}T${c}`);
    }, [l, c]), i(() => {
      var e;
      (e = t.current) == null || e.dispatchEvent(new Event("change", { bubbles: !0 }));
    }, [x, t]), i(() => {
      var e;
      (e = t.current) == null || e.addEventListener("change", (n) => {
        s(n), h(n);
      });
    }, [t, h, s]), /* @__PURE__ */ o(L, { children: /* @__PURE__ */ k("div", { className: M(g.wrapper, I), children: [
      /* @__PURE__ */ o(
        "input",
        {
          ...S,
          type: "text",
          placeholder: b,
          className: g.inputMarionette,
          ref: t,
          disabled: D,
          value: x,
          onChange: K,
          onBlur: C,
          onFocus: y,
          onKeyUp: V,
          onKeyDown: E,
          onInvalid: F
        }
      ),
      /* @__PURE__ */ o(
        H,
        {
          value: l,
          onChange: O,
          validation: T,
          displayIcon: !1
        }
      ),
      /* @__PURE__ */ o(J, { value: c, onChange: $, validation: T })
    ] }) });
  }
);
Q.displayName = "InputDateTime";
export {
  Q as InputDateTime
};
//# sourceMappingURL=InputDateTime.js.map