@dndbuilder.com/react
Version:
Drag and drop builder for React
70 lines (69 loc) • 2.13 kB
JavaScript
"use client";
import { jsxs as m, jsx as r } from "react/jsx-runtime";
import { Label as p } from "../shared/label.js";
import { useSettings as u } from "../../hooks/use-settings.js";
import { Input as i } from "../shared/input.js";
import { Button as d } from "../shared/button.js";
import { BsTrash as h } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { l as c } from "../../../../../_virtual/lodash.js";
import { SettingsType as v } from "../../types/index.js";
const k = () => {
const [e, n] = u(
"customAttributes",
v.ADVANCED
);
return /* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ r(p, { className: "mb-1.5 block", children: "Custom Attributes" }),
e == null ? void 0 : e.map((o, a, s) => /* @__PURE__ */ m("div", { className: "mb-3 flex items-center gap-3", children: [
/* @__PURE__ */ r(
i,
{
placeholder: "Name",
value: o.name,
onChange: (t) => {
const l = c.cloneDeep([...s]);
l[a].name = t.target.value, n(l);
}
}
),
/* @__PURE__ */ r(
i,
{
placeholder: "Value",
value: o.value,
onChange: (t) => {
const l = c.cloneDeep([...s]);
l[a].value = t.target.value, n(l);
}
}
),
/* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
h,
{
onClick: () => {
const t = [...e];
t.splice(a, 1), n(t);
},
className: "hover:text-danger-500 cursor-pointer"
}
) })
] }, a)),
/* @__PURE__ */ r(
d,
{
onClick: () => {
const o = e ? [...e] : [];
o.push({ name: "", value: "" }), n(o);
},
disabled: !!(e != null && e.length) && !(e != null && e.every((o) => o.name && o.value)),
variant: "secondary",
className: "w-full",
children: "Add new"
}
)
] });
};
export {
k as CustomAttributeControl
};
//# sourceMappingURL=custom-attributes.control.js.map