@dndbuilder.com/react
Version:
Drag and drop builder for React
82 lines (81 loc) • 2.41 kB
JavaScript
"use client";
import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { Input as I } from "../shared/input.js";
import { Label as S } from "../shared/label.js";
import { useSettings as b } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as j } from "../../../../../store/selectors.js";
import { createId as B, classNames as C } from "../../../../../utils.js";
import { useAppSelector as y } from "../../hooks/use-app-selector.js";
import { cva as E } from "../../../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
import { l as F } from "../../../../../_virtual/lodash.js";
import { useRef as R, useEffect as A } from "react";
import { useFieldName as L } from "../../hooks/use-field-name.js";
import { BreakpointSelector as q } from "../shared/breakpoint-selector.js";
import { LanguageSelector as D } from "../shared/language-selector.js";
const G = E("", {
variants: {
direction: {
row: "flex-row justify-between items-center",
col: "flex-col"
}
},
defaultVariants: {
direction: "col"
}
}), _ = ({
className: c,
label: o,
responsive: a,
mode: i,
isLocalized: l,
type: f,
fieldName: u,
direction: p,
inputProps: d,
labelProps: x,
placeholder: N,
min: g,
max: h
}) => {
const v = y(j), t = R(null), w = L({
key: u,
responsive: a,
mode: i,
isLocalized: l
}), [m, V] = b(w, f), n = B(), k = F.debounce((r) => {
V(r);
}, 400);
return A(() => {
t.current && (t.current.value = m ?? "");
}, [v, m]), /* @__PURE__ */ s(
"div",
{
className: C("mt-4 flex w-full gap-1.5", G({ direction: p, className: c })),
children: [
o && /* @__PURE__ */ s(S, { htmlFor: n, className: "flex w-full flex-1 items-center", ...x, children: [
/* @__PURE__ */ e("span", { children: o }),
a && /* @__PURE__ */ e(q, {}),
l && /* @__PURE__ */ e(D, { className: "ms-auto" })
] }),
/* @__PURE__ */ e(
I,
{
ref: t,
id: n,
className: "flex-1 text-[12px]",
defaultValue: "",
onChange: (r) => k(r.target.value),
placeholder: N,
min: g,
max: h,
...d
}
)
]
}
);
};
export {
_ as InputControl
};
//# sourceMappingURL=input.control.js.map