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