@mui/x-data-grid-premium/components/pivotPanel/GridPivotPanelBody.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.GridPivotPanelBody = GridPivotPanelBody;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _internals = require("@mui/x-data-grid-pro/internals");
var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _GridPivotPanelField = require("./GridPivotPanelField");
var _collapsible = require("../collapsible");
var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
var _resizablePanel = require("../resizablePanel");
var _jsxRuntime = require("react/jsx-runtime");
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    root: ['pivotPanelBody'],
    availableFields: ['pivotPanelAvailableFields'],
    sections: ['pivotPanelSections'],
    scrollArea: ['pivotPanelScrollArea'],
    section: ['pivotPanelSection'],
    sectionTitle: ['pivotPanelSectionTitle'],
    fieldList: ['pivotPanelFieldList'],
    placeholder: ['pivotPanelPlaceholder']
  };
  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const GridPivotPanelBodyRoot = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'PivotPanelBody'
})({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden'
});
const GridPivotPanelAvailableFields = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
  name: 'MuiDataGrid',
  slot: 'PivotPanelAvailableFields'
})({
  flex: 1,
  minHeight: 84,
  transition: _internals.vars.transition(['background-color'], {
    duration: _internals.vars.transitions.duration.short,
    easing: _internals.vars.transitions.easing.easeInOut
  }),
  '&[data-drag-over="true"]': {
    backgroundColor: _internals.vars.colors.interactive.hover
  }
});
const GridPivotPanelSections = (0, _styles.styled)(_resizablePanel.ResizablePanel, {
  name: 'MuiDataGrid',
  slot: 'PivotPanelSections'
})({
  position: 'relative',
  minHeight: 158,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column'
});
const GridPivotPanelScrollArea = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
  name: 'MuiDataGrid',
  slot: 'PivotPanelScrollArea'
})({
  height: '100%'
});
const GridPivotPanelSection = (0, _styles.styled)(_collapsible.Collapsible, {
  name: 'MuiDataGrid',
  slot: 'PivotPanelSection'
})({
  margin: _internals.vars.spacing(0.5, 1),
  transition: _internals.vars.transition(['border-color', 'background-color'], {
    duration: _internals.vars.transitions.duration.short,
    easing: _internals.vars.transitions.easing.easeInOut
  }),
  '&[data-drag-over="true"]': {
    backgroundColor: _internals.vars.colors.interactive.hover,
    outline: `2px solid ${_internals.vars.colors.interactive.selected}`
  }
});
const GridPivotPanelSectionTitle = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'PivotPanelSectionTitle'
})({
  flex: 1,
  marginRight: _internals.vars.spacing(1.75),
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: _internals.vars.spacing(1),
  font: _internals.vars.typography.font.body,
  fontWeight: _internals.vars.typography.fontWeight.medium
});
const GridPivotPanelFieldList = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'PivotPanelFieldList'
})({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  padding: _internals.vars.spacing(0.5, 0)
});
const GridPivotPanelPlaceholder = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'PivotPanelPlaceholder'
})({
  flex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textWrap: 'balance',
  textAlign: 'center',
  minHeight: 38,
  height: '100%',
  padding: _internals.vars.spacing(0, 1),
  color: _internals.vars.colors.foreground.muted,
  font: _internals.vars.typography.font.body
});
const INITIAL_DRAG_STATE = {
  active: false,
  dropZone: null,
  initialModelKey: null
};
function GridPivotPanelBody({
  searchValue
}) {
  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
  const initialColumns = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotInitialColumnsSelector);
  const fields = React.useMemo(() => Array.from(initialColumns.keys()), [initialColumns]);
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const [drag, setDrag] = React.useState(INITIAL_DRAG_STATE);
  const pivotModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotModelSelector);
  const classes = useUtilityClasses(rootProps);
  const getColumnName = React.useCallback(field => {
    const column = initialColumns.get(field);
    return column?.headerName || field;
  }, [initialColumns]);
  const pivotModelFields = React.useMemo(() => {
    const pivotModelArray = pivotModel.rows.concat(pivotModel.columns, pivotModel.values);
    return new Set(pivotModelArray.map(item => item.field));
  }, [pivotModel]);
  const availableFields = React.useMemo(() => {
    return fields.filter(field => {
      if (pivotModelFields.has(field)) {
        return false;
      }
      if (initialColumns.get(field)?.pivotable === false) {
        return false;
      }
      if (searchValue) {
        const fieldName = getColumnName(field);
        return fieldName.toLowerCase().includes(searchValue.toLowerCase());
      }
      return true;
    });
  }, [searchValue, fields, getColumnName, pivotModelFields, initialColumns]);
  const handleDragStart = modelKey => {
    setDrag({
      active: true,
      initialModelKey: modelKey,
      dropZone: null
    });
  };
  const handleDragEnd = () => {
    setDrag(INITIAL_DRAG_STATE);
  };
  const handleDrop = event => {
    setDrag(INITIAL_DRAG_STATE);

    // The drop event was already handled by a child
    if (event.defaultPrevented) {
      return;
    }
    event.preventDefault();
    const {
      field,
      modelKey: originSection
    } = JSON.parse(event.dataTransfer.getData('text/plain'));
    const targetSection = event.currentTarget.getAttribute('data-section');
    if (originSection === targetSection) {
      return;
    }
    apiRef.current.updatePivotModel({
      field,
      targetSection,
      originSection
    });
  };
  const handleDragOver = React.useCallback(event => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }, []);
  const handleDragEnter = React.useCallback(event => {
    if (!event.currentTarget.contains(event.relatedTarget)) {
      const dropZone = event.currentTarget.getAttribute('data-section');
      setDrag(v => (0, _extends2.default)({}, v, {
        active: true,
        dropZone
      }));
    }
  }, []);
  const handleDragLeave = React.useCallback(event => {
    if (!event.currentTarget.contains(event.relatedTarget)) {
      setDrag(v => (0, _extends2.default)({}, v, {
        active: true,
        dropZone: v.initialModelKey
      }));
    }
  }, []);
  const rowsLabel = apiRef.current.getLocaleText('pivotRows');
  const columnsLabel = apiRef.current.getLocaleText('pivotColumns');
  const valuesLabel = apiRef.current.getLocaleText('pivotValues');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelBodyRoot, {
    ownerState: rootProps,
    className: classes.root,
    "data-dragging": drag.active,
    onDragLeave: handleDragLeave,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelAvailableFields, {
      ownerState: rootProps,
      className: classes.availableFields,
      onDrop: handleDrop,
      onDragEnter: handleDragEnter,
      onDragOver: handleDragOver,
      "data-section": null,
      "data-drag-over": drag.active && drag.dropZone === null,
      children: [availableFields.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
        ownerState: rootProps,
        className: classes.placeholder,
        children: apiRef.current.getLocaleText('pivotNoFields')
      }), availableFields.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
        ownerState: rootProps,
        className: classes.fieldList,
        children: availableFields.map(field => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
          field: field,
          modelKey: null,
          onDragStart: handleDragStart,
          onDragEnd: handleDragEnd,
          children: getColumnName(field)
        }, field))
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSections, {
      ownerState: rootProps,
      className: classes.sections,
      direction: "vertical",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_resizablePanel.ResizablePanelHandle, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelScrollArea, {
        ownerState: rootProps,
        className: classes.scrollArea,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSection, {
          ownerState: rootProps,
          className: classes.section,
          onDrop: handleDrop,
          onDragEnter: handleDragEnter,
          onDragOver: handleDragOver,
          "data-section": "rows",
          "data-drag-over": drag.dropZone === 'rows',
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
            "aria-label": apiRef.current.getLocaleText('pivotRows'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSectionTitle, {
              ownerState: rootProps,
              className: classes.sectionTitle,
              children: [rowsLabel, pivotModel.rows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
                badgeContent: pivotModel.rows.length
              })]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
            children: [pivotModel.rows.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
              ownerState: rootProps,
              className: classes.placeholder,
              children: apiRef.current.getLocaleText('pivotDragToRows')
            }), pivotModel.rows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
              ownerState: rootProps,
              className: classes.fieldList,
              children: pivotModel.rows.map(modelValue => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
                field: modelValue.field,
                modelKey: "rows",
                modelValue: modelValue,
                "data-field": modelValue.field,
                onDragStart: handleDragStart,
                onDragEnd: handleDragEnd,
                children: getColumnName(modelValue.field)
              }, modelValue.field))
            })]
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSection, {
          ownerState: rootProps,
          className: classes.section,
          onDrop: handleDrop,
          onDragEnter: handleDragEnter,
          onDragOver: handleDragOver,
          "data-section": "columns",
          "data-drag-over": drag.dropZone === 'columns',
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
            "aria-label": apiRef.current.getLocaleText('pivotColumns'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSectionTitle, {
              ownerState: rootProps,
              className: classes.sectionTitle,
              children: [columnsLabel, pivotModel.columns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
                badgeContent: pivotModel.columns.length
              })]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
            children: [pivotModel.columns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
              ownerState: rootProps,
              className: classes.placeholder,
              children: apiRef.current.getLocaleText('pivotDragToColumns')
            }), pivotModel.columns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
              ownerState: rootProps,
              className: classes.fieldList,
              children: pivotModel.columns.map(modelValue => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
                field: modelValue.field,
                modelKey: "columns",
                modelValue: modelValue,
                onDragStart: handleDragStart,
                onDragEnd: handleDragEnd,
                children: getColumnName(modelValue.field)
              }, modelValue.field))
            })]
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSection, {
          ownerState: rootProps,
          className: classes.section,
          onDrop: handleDrop,
          onDragEnter: handleDragEnter,
          onDragOver: handleDragOver,
          "data-section": "values",
          "data-drag-over": drag.dropZone === 'values',
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
            "aria-label": apiRef.current.getLocaleText('pivotValues'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSectionTitle, {
              ownerState: rootProps,
              className: classes.sectionTitle,
              children: [valuesLabel, pivotModel.values.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
                badgeContent: pivotModel.values.length
              })]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
            children: [pivotModel.values.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
              ownerState: rootProps,
              className: classes.placeholder,
              children: apiRef.current.getLocaleText('pivotDragToValues')
            }), pivotModel.values.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
              ownerState: rootProps,
              className: classes.fieldList,
              children: pivotModel.values.map(modelValue => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
                field: modelValue.field,
                modelKey: "values",
                modelValue: modelValue,
                onDragStart: handleDragStart,
                onDragEnd: handleDragEnd,
                children: getColumnName(modelValue.field)
              }, modelValue.field))
            })]
          })]
        })]
      })]
    })]
  });
}