@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
276 lines (275 loc) • 8.4 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 e from "react";
import { Field as p } from "@progress/kendo-react-form";
import { Label as g } from "@progress/kendo-react-labels";
import { useLocalization as se } from "@progress/kendo-react-intl";
import { useCustomComponent as d } from "@progress/kendo-react-common";
import { PivotGridAxesEditor as f } from "./AxesEditor.mjs";
import { PivotGridFieldsEditor as ae } from "./FieldsEditor.mjs";
import { configuratorEditorSearchTitle as I, messages as u, configuratorColumnsTitle as S, configuratorMissingFields as x, configuratorRowsTitle as G, configuratorMeasuresTitle as z } from "../messages/index.mjs";
import { usePivotConfiguratorEditor as ie, PIVOT_CONFIGURATOR_ACTION as c } from "../hooks/usePivotConfiguratorEditor.mjs";
import { PivotGridConfiguratorEditorEventsContext as le } from "../shared/PivotGridConfiguratorEditorEventsContext.mjs";
import { PivotGridConfiguratorEditorStateContext as de } from "../shared/PivotGridConfiguratorEditorStateContext.mjs";
const ce = e.forwardRef((E, D) => {
const {
onFieldsEditorFieldCheck: v,
onFieldsEditorFieldCheckAction: h = r.onFieldsEditorFieldCheckAction,
onFieldsEditorFieldExpand: P,
onFieldsEditorFieldExpandAction: N = r.onFieldsEditorFieldExpandAction,
onAxisFilterFieldExpand: R,
onAxisFilterFieldsExpandChange: T
} = E, o = {
onFieldsEditorFieldCheck: v,
onFieldsEditorFieldCheckAction: h,
horizontal: r.horizontal,
axesEditor: r.axesEditor,
...E
}, [Z, O] = d(
o.fieldsLabel || r.fieldsLabel
), [B, H] = d(
o.fieldsEditor || r.fieldsEditor
), [_, K] = d(
o.columnAxesLabel || r.columnAxesLabel
), [U, V] = d(
o.columnAxesEditor || r.columnAxesEditor
), [j, q] = d(
o.rowAxesLabel || r.rowAxesLabel
), [J, Q] = d(
o.rowAxesEditor || r.rowAxesEditor
), [W, X] = d(
o.measureAxesLabel || r.measureAxesLabel
), [Y, $] = d(
o.measureAxesEditor || r.measureAxesEditor
), ee = e.useRef(null), i = e.useRef(null), m = se(), [n, s] = ie(o, i);
e.useImperativeHandle(i, () => ({
element: ee.current,
props: o,
state: n
})), e.useImperativeHandle(D, () => i.current);
const F = () => {
n.dragItem && s({ type: c.setDropZone, payload: "columnAxes" });
}, L = () => {
n.dragItem && s({ type: c.setDropZone, payload: null });
}, C = () => {
n.dragItem && s({ type: c.setDropZone, payload: "rowAxes" });
}, y = () => {
n.dragItem && s({ type: c.setDropZone, payload: null });
}, M = () => {
n.dragItem && s({ type: c.setDropZone, payload: "measureAxes" });
}, w = () => {
n.dragItem && s({ type: c.setDropZone, payload: null });
}, te = (t) => {
const l = {
target: t.target,
currentTarget: i.current,
value: t.value,
syntheticEvent: t.syntheticEvent
};
if (N) {
const a = N(l, o, n);
a && (Array.isArray(a) ? a.filter(Boolean).map((A) => A && s({ ...A }, t.syntheticEvent)) : s({ ...a }, t.syntheticEvent));
}
P && P({
target: t.target,
currentTarget: i.current,
value: t.value,
syntheticEvent: t.syntheticEvent
});
}, oe = (t) => {
const l = {
target: t.target,
currentTarget: i.current,
value: t.value,
syntheticEvent: t.syntheticEvent
};
if (h) {
const a = h(l, o, n);
a && (Array.isArray(a) ? a.filter(Boolean).map((A) => A && s({ ...A }, t.syntheticEvent)) : s({ ...a }, t.syntheticEvent));
}
v && v(l);
}, ne = (t) => {
const l = {
target: t.target,
currentTarget: i.current,
value: t.value,
syntheticEvent: t.syntheticEvent
};
R && R(l);
}, re = (t) => {
const l = {
target: t.target,
currentTarget: i.current,
value: t.value,
syntheticEvent: t.syntheticEvent
};
T && T(l);
}, b = o.horizontal ? "div" : e.Fragment, k = o.horizontal ? { className: "k-form-field-wrapper" } : {};
return /* @__PURE__ */ e.createElement(
le.Provider,
{
value: {
onAxisFilterFieldExpand: ne,
onAxisFilterFieldsExpandChange: re
}
},
/* @__PURE__ */ e.createElement(de.Provider, { value: [n, s] }, /* @__PURE__ */ e.createElement(b, { ...k }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ e.createElement(Z, { name: "", component: g, ...O }, m.toLanguageString(
I,
u[I]
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ e.createElement("div", { className: "k-fields-list-wrapper" }, /* @__PURE__ */ e.createElement(
B,
{
data: o.data,
onExpand: te,
onCheck: oe,
columnAxes: n.columnAxes,
rowAxes: n.rowAxes,
measureAxes: n.measureAxes,
...H
}
)))), /* @__PURE__ */ e.createElement(b, { ...k }, /* @__PURE__ */ e.createElement(
"div",
{
className: "k-form-field",
onMouseEnter: F,
onMouseLeave: L
},
/* @__PURE__ */ e.createElement(
p,
{
name: "columnAxes",
field: "columnAxes",
component: _,
...K
},
m.toLanguageString(
S,
u[S]
)
)
), o.valueGetter("columnAxes").length ? /* @__PURE__ */ e.createElement(
p,
{
name: "columnAxes",
field: "columnAxes",
component: U,
onMouseEnter: F,
onMouseLeave: L,
className: "k-column-fields",
...V
}
) : /* @__PURE__ */ e.createElement(
"div",
{
className: "k-settings-description",
onMouseEnter: F,
onMouseLeave: L
},
m.toLanguageString(
x,
u[x]
)
), /* @__PURE__ */ e.createElement(
"div",
{
className: "k-form-field",
onMouseEnter: C,
onMouseLeave: y
},
/* @__PURE__ */ e.createElement(p, { name: "rowAxes", field: "rowAxes", component: j, ...q }, m.toLanguageString(G, u[G]))
), o.valueGetter("rowAxes").length ? /* @__PURE__ */ e.createElement(
p,
{
name: "rowAxes",
field: "rowAxes",
component: J,
onMouseEnter: C,
onMouseLeave: y,
className: "k-column-fields",
...Q
}
) : /* @__PURE__ */ e.createElement(
"div",
{
className: "k-settings-description",
onMouseEnter: C,
onMouseLeave: y
},
m.toLanguageString(
x,
u[x]
)
)), /* @__PURE__ */ e.createElement(b, { ...k }, /* @__PURE__ */ e.createElement(
"div",
{
className: "k-form-field",
onMouseEnter: M,
onMouseLeave: w
},
/* @__PURE__ */ e.createElement(
p,
{
name: "measureAxes",
field: "measureAxes",
component: W,
...X
},
m.toLanguageString(
z,
u[z]
)
)
), o.valueGetter("measureAxes").length ? /* @__PURE__ */ e.createElement(
p,
{
name: "measureAxes",
field: "measureAxes",
component: Y,
onMouseEnter: M,
onMouseLeave: w,
className: "k-column-fields",
...$
}
) : /* @__PURE__ */ e.createElement(
"div",
{
className: "k-settings-description",
onMouseEnter: M,
onMouseLeave: w
},
m.toLanguageString(
x,
u[x]
)
)))
);
}), r = {
data: [],
horizontal: !1,
fieldsLabel: g,
fieldsEditor: ae,
columnAxesLabel: g,
columnAxesEditor: f,
rowAxesLabel: g,
rowAxesEditor: f,
measureAxesLabel: g,
measureAxesEditor: f,
axesEditor: f,
onFieldsEditorFieldCheckAction: (E) => ({
type: c.toggleSelection,
payload: E.value
}),
onFieldsEditorFieldExpandAction: (E) => ({
type: c.toggleExpansion,
payload: E.value
})
};
ce.displayName = "KendoReactPivotGridConfiguratorEditor";
export {
ce as PivotGridConfiguratorEditor
};