@progress/kendo-react-chart-wizard
Version:
React Chart Wizard lets you create a chart using data from a Grid, another data-bound component, or an external source
94 lines (93 loc) • 3.44 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import n from "react";
import { Button as b } from "@progress/kendo-react-buttons";
import { Grid as I, GridToolbar as D, GridColumn as s } from "@progress/kendo-react-grid";
import { useLocalization as w } from "@progress/kendo-react-intl";
import { plusIcon as A } from "@progress/kendo-svg-icons";
import { RemoveSeriesContext as G, ReorderContext as R, SeriesEditContext as k, SeriesHeaderCell as y, SeriesDataCell as z, SeriesDataEditCell as o } from "./SeriesGridCells.mjs";
import { configurationSeriesAdd as N } from "../messages.mjs";
import { ChartWizardCommon as P } from "@progress/kendo-charts";
const { messages: L } = P, W = (a) => {
const [m, r] = n.useState({}), [c, u] = n.useState(null), f = (e) => {
if (c === e)
return;
const t = a.data.slice(), i = t.findIndex((l) => l === c), d = t.findIndex((l) => l === e);
t.splice(i, 1), t.splice(d, 0, c || t[0]), a.onChange.call(void 0, t);
}, g = (e) => {
u(e);
}, C = () => {
const e = a.initialData.find((t) => !a.data.find((i) => i.id === t.id));
e && a.onChange.call(void 0, [...a.data, e]);
}, h = (e) => {
r((t) => ({ ...t, [e.id]: !0 }));
}, E = (e) => {
r((t) => Object.keys(t).reduce((i, d) => {
if (d === e.id) {
const l = { ...t };
return delete l[d], l;
}
return i;
}, {}));
}, v = (e) => {
const t = e.field || "", i = a.data.map((d) => d.id === e.dataItem.id ? { ...d, [t]: e.value } : d);
a.onChange.call(void 0, i);
}, x = (e) => {
const t = a.data.filter((i) => i.id !== e);
a.onChange.call(void 0, t);
}, S = (e) => {
r(e.edit);
};
return /* @__PURE__ */ n.createElement(G.Provider, { value: { onRemove: x, count: a.data.length } }, /* @__PURE__ */ n.createElement(R.Provider, { value: { reorder: f, dragStart: g } }, /* @__PURE__ */ n.createElement(k.Provider, { value: { enterEdit: h, exitEdit: E } }, /* @__PURE__ */ n.createElement(
I,
{
className: "k-series-grid",
style: { width: "100%" },
size: "medium",
data: a.data,
dataItemKey: "id",
onItemChange: v,
scrollable: "none",
editable: !0,
cells: {
headerCell: y,
data: z,
edit: {
text: o,
boolean: o,
numeric: o,
date: o
}
},
edit: m,
onEditChange: S
},
/* @__PURE__ */ n.createElement(D, null, /* @__PURE__ */ n.createElement(
b,
{
type: "button",
className: "k-toolbar-button",
fillMode: "flat",
onClick: C,
disabled: a.data.length === a.initialData.length,
svgIcon: A,
icon: "plus"
},
w().toLanguageString(
N,
L.configurationSeriesAdd
)
)),
/* @__PURE__ */ n.createElement(s, { field: "reorder", width: "40px", editable: !1 }),
/* @__PURE__ */ n.createElement(s, { field: "name", title: "Name" }),
/* @__PURE__ */ n.createElement(s, { field: "delete", width: "40px", editable: !1 })
))));
};
export {
W as SeriesGrid
};