@progress/kendo-react-pivotgrid/components/AxisEditor.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 r from "react";
import { compareAxes as R } from "@progress/kendo-pivotgrid-common";
import { useCustomComponent as d, useDraggable as _, canUseRef as $ } from "@progress/kendo-react-common";
import { ColumnMenuTextFilter as B, ColumnMenuTextColumn as K } from "@progress/kendo-react-data-tools";
import { Chip as V } from "@progress/kendo-react-buttons";
import { findFilters as M, findFilter as Z } from "../utils/index.mjs";
import { PivotGridConfiguratorEditorAxesContext as j } from "./EditorContext.mjs";
import { PivotGridAxisFilterFieldsEditor as q } from "./AxisFilterFieldsEditor.mjs";
import { PivotGridConfiguratorEditorStateContext as J } from "../shared/PivotGridConfiguratorEditorStateContext.mjs";
import { PIVOT_CONFIGURATOR_ACTION as a } from "../hooks/usePivotConfiguratorEditor.mjs";
const L = r.forwardRef(
  (t, T) => {
    const u = r.useRef(0), m = r.useRef(0), f = r.useRef(null), i = r.useRef(null), h = r.useRef(null), { axes: C } = r.useContext(j), [y, x] = r.useState(!1), [n, l] = r.useContext(J);
    r.useImperativeHandle(
      i,
      () => f.current && f.current.element
    ), r.useImperativeHandle(h, () => ({ props: t, element: i.current })), r.useImperativeHandle(
      T,
      () => h.current
    );
    const [E, D] = d(t.chip || c.chip), [v, F] = d(t.dropClue || c.dropClue), [P, S] = d(
      t.columnMenuTextColumn || c.columnMenuTextColumn
    ), [A, b] = d(
      t.filterFieldsEditor || c.filterFieldsEditor
    ), I = M(n.filter, String(t.value), "in"), p = M(n.filter, String(t.value)), G = (e, o) => {
      l({ type: a.setSort, payload: o }, e);
    }, X = (e, o) => {
      o.length ? l(
        {
          type: a.setFilter,
          payload: [
            ...I || [],
            ...o.reduce(
              (s, g) => [...s, ...g.filters.filter((U) => U.value)],
              []
            )
          ]
        },
        e
      ) : l({ type: a.setFilter, payload: I }, e);
    }, N = (e) => {
      l({ type: a.remove, payload: t.dataItem }, e.syntheticEvent);
    }, O = (e) => {
      const o = e.slice(), s = Z(n.filter, String(t.dataItem.name), "in");
      return o.splice(
        1,
        0,
        /* @__PURE__ */ r.createElement(
          A,
          {
            key: "axis-filter-fields-editor",
            defaultFilter: s,
            dataItem: t.dataItem,
            data: t.dataItem.fields,
            axes: C,
            ...b
          }
        )
      ), o;
    }, Y = (e) => {
      u.current = e.clientX, m.current = e.clientY;
    }, H = (e) => {
      Math.abs(u.current - e.clientX) < 10 && Math.abs(m.current - e.clientY) < 10 || (i.current && (i.current.style.transform = `translate(${e.clientX - u.current}px, ${e.clientY - m.current}px)`), x(!0), l({ type: a.setDragItem, payload: t.dataItem }));
    }, k = () => {
      x(!1), n.dragItem && (i.current && (i.current.style.transform = ""), l({ type: a.drop, payload: t.dataItem }));
    }, w = (e) => {
      n.dragItem && (l(
        { type: a.setDropTarget, payload: t.dataItem },
        e.syntheticEvent
      ), l(
        { type: a.setDropZone, payload: C },
        e.syntheticEvent
      ));
    }, z = (e) => {
      if (n.dragItem && !y && i.current) {
        const o = i.current.getBoundingClientRect(), g = e.syntheticEvent.clientX - o.left < o.width / 2 ? "before" : "after";
        l(
          { type: a.setDropDirection, payload: g },
          e.syntheticEvent
        );
      }
    };
    return _(i, {
      onPress: Y,
      onDrag: H,
      onRelease: k
    }), /* @__PURE__ */ r.createElement(r.Fragment, null, n.dropTarget && R(n.dropTarget, t.dataItem) && n.dropDirection === "before" && /* @__PURE__ */ r.createElement(v, { ...F }), /* @__PURE__ */ r.createElement(
      E,
      {
        ref: $(E) ? f : void 0,
        ...t,
        removable: !0,
        onRemove: N,
        onMouseEnter: w,
        onMouseMove: z,
        style: { pointerEvents: y ? "none" : void 0 },
        rounded: "full",
        ...D
      },
      t.text,
      C !== "measureAxes" && /* @__PURE__ */ r.createElement(
        P,
        {
          field: String(t.value),
          itemsRender: O,
          sort: n.sort,
          onSortChange: G,
          filter: p && p.length ? [{ logic: "and", filters: p }] : void 0,
          onFilterChange: X,
          filterContent: [B],
          ...S
        }
      )
    ), n.dropTarget && R(n.dropTarget, t.dataItem) && n.dropDirection === "after" && /* @__PURE__ */ r.createElement(v, { ...F }));
  }
), c = {
  chip: V,
  columnMenuTextColumn: K,
  filterFieldsEditor: q,
  dropClue: (t) => /* @__PURE__ */ r.createElement("div", { className: "k-grouping-dropclue", style: { position: "relative", zIndex: 1e4 }, ...t })
};
L.displayName = "KendoReactPivotGridAxisEditor";
export {
  L as PivotGridAxisEditor
};