@mui/x-data-grid-premium/components/chartsPanel/data/GridChartsPanelDataFieldMenu.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.GridChartsPanelDataFieldMenu = GridChartsPanelDataFieldMenu;
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 _gridChartsIntegrationSelectors = require("../../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors");
var _jsxRuntime = require("react/jsx-runtime");
function GridChartsPanelDataFieldMenu(props) {
  const {
    field,
    section,
    blockedSections,
    dimensionsLabel,
    valuesLabel
  } = props;
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const [open, setOpen] = React.useState(false);
  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
  const activeChartId = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector);
  const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsDimensionsSelector, activeChartId);
  const values = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsValuesSelector, activeChartId);
  const isAvailableField = section === null;
  const fieldIndexInModel = !isAvailableField ? (section === 'dimensions' ? dimensions : values).findIndex(item => item.field === field) : -1;
  const modelLength = !isAvailableField ? (section === 'dimensions' ? dimensions : values).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 menuItems = React.useMemo(() => {
    if (isAvailableField) {
      return [{
        key: 'dimensions',
        label: apiRef.current.getLocaleText('chartsMenuAddToDimensions')(dimensionsLabel)
      }, {
        key: 'values',
        label: apiRef.current.getLocaleText('chartsMenuAddToValues')(valuesLabel)
      }].filter(item => !blockedSections?.includes(item.key));
    }
    const moveMenuItems = [{
      key: 'up',
      label: apiRef.current.getLocaleText('chartsMenuMoveUp'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveUpIcon, {}),
      disabled: !canMoveUp
    }, {
      key: 'down',
      label: apiRef.current.getLocaleText('chartsMenuMoveDown'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveDownIcon, {}),
      disabled: !canMoveDown
    }, {
      divider: true
    }, {
      key: 'top',
      label: apiRef.current.getLocaleText('chartsMenuMoveToTop'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveToTopIcon, {}),
      disabled: !canMoveUp
    }, {
      key: 'bottom',
      label: apiRef.current.getLocaleText('chartsMenuMoveToBottom'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuMoveToBottomIcon, {}),
      disabled: !canMoveDown
    }, {
      divider: true
    }];
    const removeMenuItem = [{
      key: null,
      label: apiRef.current.getLocaleText('chartsMenuRemove'),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuRemoveIcon, {})
    }];
    const addToSectionMenuItems = [{
      key: 'dimensions',
      label: apiRef.current.getLocaleText('chartsMenuAddToDimensions')(dimensionsLabel),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
    }, {
      key: 'values',
      label: apiRef.current.getLocaleText('chartsMenuAddToValues')(valuesLabel),
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
    }].filter(item => item.key !== section && !blockedSections?.includes(item.key));
    if (addToSectionMenuItems.length > 0) {
      addToSectionMenuItems.push({
        divider: true
      });
    }
    return [...moveMenuItems, ...addToSectionMenuItems, ...removeMenuItem];
  }, [isAvailableField, apiRef, rootProps, canMoveUp, canMoveDown, section, blockedSections, dimensionsLabel, valuesLabel]);
  if (menuItems.length === 0) {
    return null;
  }
  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 === section) {
      return;
    }
    const items = section === 'dimensions' ? dimensions : values;
    let targetField;
    let targetFieldPosition = null;
    let targetSection = section;
    switch (to) {
      case 'up':
        targetField = items[fieldIndexInModel - 1].field;
        targetFieldPosition = 'top';
        break;
      case 'down':
        targetField = items[fieldIndexInModel + 1].field;
        targetFieldPosition = 'bottom';
        break;
      case 'top':
        targetField = items[0].field;
        targetFieldPosition = 'top';
        break;
      case 'bottom':
        targetField = items[modelLength - 1].field;
        targetFieldPosition = 'bottom';
        break;
      case 'dimensions':
      case 'values':
      case null:
        targetSection = to;
        break;
      default:
        break;
    }
    apiRef.current.chartsIntegration.updateDataReference(field, section, targetSection, targetField, targetFieldPosition || undefined);
  };
  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('chartsMenuOptions'),
      onClick: handleClick,
      ref: triggerRef,
      children: isAvailableField ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsMenuAddIcon, {
        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: menuItems.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))
      }))
    })]
  });
}