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