@progress/kendo-react-pivotgrid/components/AxisFilterFieldsEditor.mjs

React PivotGrid (also called Pivot Table) can be data-bound to an OLAP service and customized extensively. KendoReact PivotGrid package

/**
 * @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 { TreeView as W } from "@progress/kendo-react-treeview";
import { Button as k } from "@progress/kendo-react-buttons";
import { Skeleton as Y } from "@progress/kendo-react-indicators";
import { useLocalization as Z } from "@progress/kendo-react-intl";
import { ColumnMenuItem as $, ColumnMenuForm as ee } from "@progress/kendo-react-data-tools";
import { useCustomComponent as l, classNames as te } from "@progress/kendo-react-common";
import { gridLayoutIcon as ne } from "@progress/kendo-svg-icons";
import { recursiveMap as v, flatMap as ae, compareFields as oe } from "../utils/index.mjs";
import { fieldMenuReset as M, messages as N, fieldMenuApply as P } from "../messages/index.mjs";
import { PivotGridConfiguratorEditorEventsContext as ie } from "../shared/PivotGridConfiguratorEditorEventsContext.mjs";
import { PivotGridConfiguratorEditorStateContext as re } from "../shared/PivotGridConfiguratorEditorStateContext.mjs";
import { useExpansion as le, EXPANSION_ACTION as me } from "../hooks/useExpansion.mjs";
import { PIVOT_CONFIGURATOR_ACTION as u } from "../hooks/usePivotConfiguratorEditor.mjs";
const ce = t.forwardRef((o, S) => {
  const { data: w, dataItem: p, defaultFilter: h } = { ...i, ...o }, f = t.useRef(null), m = t.useRef(null), C = Z(), [A, B] = l(
    o.columnMenuItem || i.columnMenuItem
  ), [R, T] = l(
    o.columnMenuForm || i.columnMenuForm
  ), [V, O] = l(
    o.resetButton || i.resetButton
  ), [D, G] = l(
    o.applyButton || i.applyButton
  ), [q, L] = l(
    o.treeView || i.treeView
  ), [_, b] = l(o.noData || i.noData);
  t.useImperativeHandle(m, () => ({ props: o, element: f.current })), t.useImperativeHandle(S, () => m.current);
  const [d, s] = t.useState(!1), { onAxisFilterFieldsExpandChange: I, onAxisFilterFieldExpand: g } = t.useContext(
    ie
  ), [, F] = t.useContext(re), [r, H] = t.useState(h), y = r ? r.value.split(",") : [], [j, z] = le([], void 0, m, oe), x = {
    caption: (e) => e.dataItem.caption,
    id: (e) => e.dataItem.uniqueName,
    parent: (e, a) => a && a.value,
    value: (e) => e.dataItem.defaultHierarchy || e.dataItem.uniqueName,
    expanded: (e) => j.some((a) => a.uniqueName === e.id),
    checked: (e) => !y.length || (y || []).some((a) => a === e.dataItem.uniqueName),
    hasChildren: (e) => parseInt(e.dataItem.childrenCardinality, 10) > 0,
    children: (e) => v(e.dataItem.children, x, e),
    checkIndeterminate: (e) => {
      const a = (e.children || []).length && e.children.every((n) => n.checked);
      return a && (e.checked = !0), (e.children || []).some((n) => n.checked) && !a;
    }
  }, c = v(w, x), E = ae(c), K = (e) => {
    s(!d), I && I({
      value: !d,
      target: m.current,
      syntheticEvent: e
    });
  }, U = (e) => {
    z({ type: me.toggle, payload: e.item.dataItem }, e.syntheticEvent), g && g({
      value: e.item.dataItem,
      target: m.current,
      syntheticEvent: e.syntheticEvent
    });
  }, X = (e) => {
    let a;
    e.item.checked ? a = {
      field: String(p.name),
      operator: "in",
      value: E.filter((n) => n.checked).map((n) => String(n.value)).filter((n) => n !== e.item.value && n !== e.item.parent).join(",")
    } : a = {
      field: String(p.name),
      operator: "in",
      value: E.filter((n) => n.checked).map((n) => String(n.value)).concat([e.item.value]).join(",")
    }, H(a);
  }, J = (e) => {
    s(!1), r && F(
      {
        type: u.removeFilter,
        payload: r
      },
      e
    );
  }, Q = (e) => {
    s(!1), r && F(
      {
        type: h ? u.changeFilter : u.addFilter,
        payload: r
      },
      e
    );
  };
  return /* @__PURE__ */ t.createElement(
    "div",
    {
      ref: f,
      id: o.id,
      tabIndex: o.tabIndex,
      style: o.style,
      className: te("k-columnmenu-item-wrapper", o.className)
    },
    /* @__PURE__ */ t.createElement(
      A,
      {
        ...B,
        title: "Include Fields",
        iconClass: "k-i-grid-layout",
        svgIcon: ne,
        onClick: K
      }
    ),
    /* @__PURE__ */ t.createElement(
      R,
      {
        show: d,
        actions: /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(V, { type: "reset", onClick: J, ...O }, C.toLanguageString(M, N[M])), /* @__PURE__ */ t.createElement(D, { themeColor: "primary", onClick: Q, ...G }, C.toLanguageString(P, N[P]))),
        ...T
      },
      c && c.length ? /* @__PURE__ */ t.createElement(
        q,
        {
          data: c,
          checkboxes: !0,
          onExpandChange: U,
          onCheckChange: X,
          textField: "caption",
          expandIcons: !0,
          hasChildrenField: "hasChildren",
          checkIndeterminateField: "checkIndeterminate",
          childrenField: "children",
          ...L
        }
      ) : /* @__PURE__ */ t.createElement(_, { ...b })
    )
  );
}), i = {
  data: [],
  resetButton: k,
  applyButton: k,
  treeView: W,
  noData: () => /* @__PURE__ */ t.createElement(Y, { shape: "rectangle", style: { height: "20px", width: "calc(100% - 16px)", margin: 8 } }),
  columnMenuItem: $,
  columnMenuForm: ee
};
ce.displayName = "KendoReactPivotGridAxisFilterFieldsEditor";
export {
  ce as PivotGridAxisFilterFieldsEditor
};