koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
111 lines (110 loc) • 3.36 kB
JavaScript
"use client";
import { jsx as o, jsxs as V } from "react/jsx-runtime";
import { memo as j, useState as h, useEffect as g, useCallback as d, useMemo as w } from "react";
import B from "classnames";
import { IconClose as L } from "../../../internal/Icons/IconClose.js";
import { IconEdit as P } from "../../../internal/Icons/IconEdit.js";
import { IconColumns as A } from "../../../internal/Icons/IconColumns.js";
import { useBrowserLocale as R } from "../../../internal/locale/useBrowserLocale.js";
import m from "./Dialog.module.css.js";
import { ColumnTypes as t } from "../types.js";
import { PercentageInput as W } from "./PercentageInput.js";
import { useDialogState as $ } from "../../Dialog/useDialogState.js";
import { Dialog as q } from "../../Dialog/Dialog.js";
import { FormField as D } from "../../FormField/FormField.js";
import { Select as z } from "../../Select/Select.js";
import { InputDate as G } from "../../InputDate/InputDate.js";
import { InputText as T } from "../../InputText/InputText.js";
import { InputNumeric as I } from "../../InputNumeric/InputNumeric.js";
const i = (r) => {
const e = ({ onChange: c = () => {
}, ...p }) => {
const s = d(
(l) => {
c(l.target?.value);
},
[c]
);
return /* @__PURE__ */ o(r, { ...p, mode: "floating", onChange: s });
};
return e.displayName = r.displayName, e;
}, H = {
[t.text]: i(T),
[t.currency]: i(I),
[t.decimal]: i(I),
[t.unit]: i(I),
[t.percentage]: W,
[t.select]: i(T),
[t.date]: i(G)
}, J = j(({ id: r, columnsConfig: e = [], selectionAmount: c, onEdit: p }) => {
const { dialogParams: s, closeDialog: l } = $(r), [a, y] = h(e[0].id);
g(() => {
s?.columnId && y(s?.columnId);
}, [s?.columnId]);
const E = d((n) => {
y(n.target.value);
}, []), [N, v] = h(t.text);
g(() => {
const n = e.find(({ id: f }) => f === a)?.type || t.text;
v(n);
}, [e, a, v]);
const F = w(() => H[N], [N]), [u, x] = h("");
g(() => {
x("");
}, [a]);
const C = d(() => {
p(a || e[0].id, u), l();
}, [l, e, p, a, u]), S = d(() => {
l();
}, [l]), b = w(
() => [
[
{ title: "Cancel", onClick: S, icon: L },
{
title: "Apply change",
icon: P,
onClick: C,
type: "link"
}
]
],
[C, S]
), k = R(), M = new Intl.NumberFormat(k, {
style: "decimal"
}).format(c || 0);
return /* @__PURE__ */ o(
q,
{
animation: "scale-in",
showCloseButton: !1,
dialogTitle: `Edit ${M} row(s)`,
id: r,
className: m.dialog,
actions: b,
children: /* @__PURE__ */ V("div", { className: m.fieldset, children: [
/* @__PURE__ */ o(D, { className: m.field, label: "Column:", children: /* @__PURE__ */ o(
z,
{
prefix: A,
value: a,
onChange: E,
children: e.map(({ id: n, name: f }) => /* @__PURE__ */ o("option", { value: n, children: f }, n))
}
) }),
/* @__PURE__ */ o(
D,
{
className: B(m.field, m.valueField),
label: "New value:",
children: /* @__PURE__ */ o(F, { value: u, onChange: x })
}
)
] })
}
);
});
J.displayName = "EditDialog";
export {
J as EditDialog
};
//# sourceMappingURL=EditDialog.js.map