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