@progress/kendo-react-pivotgrid
Version:
React PivotGrid (also called Pivot Table) can be data-bound to an OLAP service and customized extensively. KendoReact PivotGrid package
125 lines (124 loc) • 5.03 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 * as t from "react";
import { Button as x } from "@progress/kendo-react-buttons";
import { useCustomComponent as f, classNames as E, canUseRef as L } from "@progress/kendo-react-common";
import { useLocalization as w } from "@progress/kendo-react-intl";
import { Form as G, FormElement as H } from "@progress/kendo-react-form";
import { PivotGridConfiguratorEditor as M } from "./ConfiguratorEditor.mjs";
import { configuratorTitle as v, messages as d, configuratorCancel as F, configuratorApply as h } from "../messages/index.mjs";
const j = t.forwardRef(
(e, A) => {
const { horizontal: l, data: k, rowAxes: u, columnAxes: c, measureAxes: m } = { ...a, ...e }, g = t.useRef(null), o = t.useRef(null), r = t.useRef(null), s = w(), [R, N] = f(
e.editor || a.editor
), [C, S] = f(e.form || a.form), [b, z] = f(
e.formElement || a.formElement
);
t.useImperativeHandle(o, () => ({ props: e, element: g.current })), t.useImperativeHandle(
A,
() => o.current
);
const P = (n, i) => {
e.onRowAxesChange && e.onRowAxesChange({
target: o.current,
value: n.rowAxes,
syntheticEvent: i
}), e.onColumnAxesChange && e.onColumnAxesChange({
target: o.current,
value: n.columnAxes,
syntheticEvent: i
}), e.onMeasureAxesChange && e.onMeasureAxesChange({
target: o.current,
value: n.measureAxes,
syntheticEvent: i
}), e.onSortChange && e.onSortChange({
target: o.current,
value: n.sort,
syntheticEvent: i
}), e.onFilterChange && e.onFilterChange({
target: o.current,
value: n.filter,
syntheticEvent: i
});
}, y = {
rowAxes: u,
columnAxes: c,
measureAxes: m,
sort: e.sort,
filter: e.filter
};
return t.useEffect(() => {
r.current && r.current.onChange("rowAxes", { value: u });
}, [u]), t.useEffect(() => {
r.current && r.current.onChange("columnAxes", { value: c });
}, [c]), t.useEffect(() => {
r.current && r.current.onChange("measureAxes", { value: m });
}, [m]), t.useEffect(() => {
r.current && r.current.onChange("sort", { value: e.sort });
}, [e.sort]), t.useEffect(() => {
r.current && r.current.onChange("filter", { value: e.filter });
}, [e.filter]), /* @__PURE__ */ t.createElement(
"div",
{
ref: g,
id: e.id,
tabIndex: e.tabIndex,
style: e.style,
className: E("k-pivotgrid-configurator", e.className)
},
/* @__PURE__ */ t.createElement(
"div",
{
className: E("k-pivotgrid-configurator-panel", "k-pivotgrid-configurator-push", {
"k-pivotgrid-configurator-horizontal": l,
"k-pivotgrid-configurator-vertical": !l
})
},
/* @__PURE__ */ t.createElement("div", { className: "k-pivotgrid-configurator-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-pivotgrid-configurator-header-text" }, s.toLanguageString(v, d[v]))),
/* @__PURE__ */ t.createElement(
C,
{
ref: L(C) ? r : void 0,
initialValues: y,
onSubmit: P,
render: (n) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-pivotgrid-configurator-content" }, /* @__PURE__ */ t.createElement(b, { horizontal: l, ...z }, /* @__PURE__ */ t.createElement(
R,
{
...n,
horizontal: e.horizontal,
onFieldsEditorFieldExpand: e.onFieldsEditorFieldExpand,
onFieldsEditorFieldCheck: e.onFieldsEditorFieldCheck,
onAxisFilterFieldExpand: e.onAxisFilterFieldExpand,
onAxisFilterFieldsExpandChange: e.onAxisFilterFieldsExpandChange,
data: k,
...N
}
))), /* @__PURE__ */ t.createElement("div", { className: "k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ t.createElement(x, { type: "submit", onClick: n.onFormReset }, s.toLanguageString(
F,
d[F]
)), /* @__PURE__ */ t.createElement(x, { themeColor: "primary", type: "submit", onClick: n.onSubmit }, s.toLanguageString(h, d[h])))),
...S
}
)
)
);
}
), a = {
form: G,
formElement: H,
editor: M,
horizontal: !1,
data: [],
columnAxes: [],
rowAxes: [],
measureAxes: []
};
j.displayName = "KendoReactPivotGridConfigurator";
export {
j as PivotGridConfigurator
};