@mui/x-data-grid-premium/components/pivotPanel/GridPivotPanelFieldMenu.js

The Premium plan edition of the MUI X Data Grid Components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridPivotPanelFieldMenu = GridPivotPanelFieldMenu;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
var _jsxRuntime = require("react/jsx-runtime");
function GridPivotPanelFieldMenu(props) {
  const {
    field,
    modelKey
  } = props;
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const [open, setOpen] = React.useState(false);
  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
  const isAvailableField = modelKey === null;
  const pivotModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotModelSelector);
  const fieldIndexInModel = !isAvailableField ? pivotModel[modelKey].findIndex(item => item.field === field) : -1;
  const modelLength = !isAvailableField ? pivotModel[modelKey].length : 0;
  const canMoveUp = fieldIndexInModel > 0;
  const canMoveDown = !isAvailableField && fieldIndexInModel < modelLength - 1;
  const menuId = (0, _useId.default)();
  const triggerId = (0, _useId.default)();
  const triggerRef = React.useRef(null);
  const getMenuItems = React.useCallback(() => {
    if (isAvailableField) {
      return [{
        key: 'rows',
        label: apiRef.current.getLocaleText('pivotMenuAddToRows')
      }, {
        key: 'columns',
        label: apiRef.current.getLocaleText('pivotMenuAddToColumns')
      }, {
        key: 'values',
        label: apiRef.current.getLocaleText('pivotMenuAddToValues')
      }];
    }
    return [{
      key: 'up',
      label: apiRef.current.getLocaleText('pivotMenuMoveUp'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveUpIcon, {}),
      disabled: !canMoveUp
    }, {
      key: 'down',
      label: apiRef.current.getLocaleText('pivotMenuMoveDown'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveDownIcon, {}),
      disabled: !canMoveDown
    }, {
      divider: true
    }, {
      key: 'top',
      label: apiRef.current.getLocaleText('pivotMenuMoveToTop'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveToTopIcon, {}),
      disabled: !canMoveUp
    }, {
      key: 'bottom',
      label: apiRef.current.getLocaleText('pivotMenuMoveToBottom'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuMoveToBottomIcon, {}),
      disabled: !canMoveDown
    }, {
      divider: true
    }, {
      key: 'rows',
      label: apiRef.current.getLocaleText('pivotMenuRows'),
      icon: modelKey === 'rows' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
    }, {
      key: 'columns',
      label: apiRef.current.getLocaleText('pivotMenuColumns'),
      icon: modelKey === 'columns' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
    }, {
      key: 'values',
      label: apiRef.current.getLocaleText('pivotMenuValues'),
      icon: modelKey === 'values' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuCheckIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
    }, {
      divider: true
    }, {
      key: null,
      label: apiRef.current.getLocaleText('pivotMenuRemove'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuRemoveIcon, {})
    }];
  }, [isAvailableField, apiRef, rootProps, canMoveUp, canMoveDown, modelKey]);
  const handleClick = () => {
    setOpen(!open);
  };
  const handleClose = () => {
    setOpen(false);
  };
  const handleMove = to => {
    handleClose();

    // Do nothing if the field is already in the target section
    if (to === modelKey) {
      return;
    }
    let targetField;
    let targetFieldPosition = null;
    let targetSection = modelKey;
    switch (to) {
      case 'up':
        targetField = pivotModel[modelKey][fieldIndexInModel - 1].field;
        targetFieldPosition = 'top';
        break;
      case 'down':
        targetField = pivotModel[modelKey][fieldIndexInModel + 1].field;
        targetFieldPosition = 'bottom';
        break;
      case 'top':
        targetField = pivotModel[modelKey][0].field;
        targetFieldPosition = 'top';
        break;
      case 'bottom':
        targetField = pivotModel[modelKey][modelLength - 1].field;
        targetFieldPosition = 'bottom';
        break;
      case 'rows':
      case 'columns':
      case 'values':
      case null:
        targetSection = to;
        break;
      default:
        break;
    }
    apiRef.current.updatePivotModel({
      field,
      targetField,
      targetFieldPosition,
      targetSection,
      originSection: modelKey
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
      size: "small"
    }, rootProps.slotProps?.baseIconButton, {
      id: triggerId,
      "aria-haspopup": "true",
      "aria-controls": open ? menuId : undefined,
      "aria-expanded": open ? 'true' : undefined,
      "aria-label": apiRef.current.getLocaleText('pivotMenuOptions'),
      onClick: handleClick,
      ref: triggerRef,
      children: isAvailableField ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotMenuAddIcon, {
        fontSize: "small"
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuIcon, {
        fontSize: "small"
      })
    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridMenu, {
      target: triggerRef.current,
      open: open,
      onClose: handleClose,
      position: "bottom-start",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, (0, _extends2.default)({
        id: menuId,
        "aria-labelledby": triggerId,
        autoFocusItem: true
      }, rootProps.slotProps?.baseMenuList, {
        children: getMenuItems().map((item, index) => 'divider' in item ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseDivider, {}, `divider-${index}`) : /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
          disabled: item.disabled,
          onClick: () => handleMove(item.key),
          iconStart: item.icon
        }, rootProps.slotProps?.baseMenuItem, {
          children: item.label
        }), item.key))
      }))
    })]
  });
}