@mui/x-data-grid-premium/hooks/features/pivoting/useGridPivoting.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useGridPivoting = exports.pivotingStateInitializer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
var _useOnMount = _interopRequireDefault(require("@mui/utils/useOnMount"));
var _internals = require("@mui/x-data-grid-pro/internals");
var _gridPivotingSelectors = require("./gridPivotingSelectors");
var _utils = require("./utils");
var _gridAggregationUtils = require("../aggregation/gridAggregationUtils");
const emptyPivotModel = {
  rows: [],
  columns: [],
  values: []
};
const pivotingStateInitializer = (state, props, apiRef) => {
  if (!(0, _utils.isPivotingAvailable)(props)) {
    return (0, _extends2.default)({}, state, {
      pivoting: {
        active: false,
        model: emptyPivotModel,
        panelOpen: false
      }
    });
  }
  const initialColumns = (0, _utils.getInitialColumns)(props.columns ?? [], props.getPivotDerivedColumns, apiRef.current.getLocaleText);
  return (0, _extends2.default)({}, state, {
    pivoting: {
      active: props.pivotActive ?? props.initialState?.pivoting?.enabled ?? false,
      model: props.pivotModel ?? props.initialState?.pivoting?.model ?? emptyPivotModel,
      panelOpen: props.pivotPanelOpen ?? props.initialState?.pivoting?.panelOpen ?? false,
      initialColumns
    }
  });
};
exports.pivotingStateInitializer = pivotingStateInitializer;
const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) => {
  const isPivotActive = (0, _internals.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
  const exportedStateRef = React.useRef(null);
  const nonPivotDataRef = React.useRef(undefined);
  const isPivotingAvailable = (0, _utils.isPivotingAvailable)(props);
  apiRef.current.registerControlState({
    stateId: 'pivotModel',
    propModel: props.pivotModel,
    propOnChange: props.onPivotModelChange,
    stateSelector: _gridPivotingSelectors.gridPivotModelSelector,
    changeEvent: 'pivotModelChange'
  });
  apiRef.current.registerControlState({
    stateId: 'pivotMode',
    propModel: props.pivotActive,
    propOnChange: props.onPivotActiveChange,
    stateSelector: _gridPivotingSelectors.gridPivotActiveSelector,
    changeEvent: 'pivotModeChange'
  });
  apiRef.current.registerControlState({
    stateId: 'pivotPanelOpen',
    propModel: props.pivotPanelOpen,
    propOnChange: props.onPivotPanelOpenChange,
    stateSelector: _gridPivotingSelectors.gridPivotPanelOpenSelector,
    changeEvent: 'pivotPanelOpenChange'
  });
  const getInitialData = React.useCallback(() => {
    if (!exportedStateRef.current) {
      exportedStateRef.current = apiRef.current.exportState();
    }
    const rowIds = (0, _xDataGridPro.gridDataRowIdsSelector)(apiRef);
    const rowsLookup = (0, _xDataGridPro.gridRowsLookupSelector)(apiRef);
    const rows = rowIds.map(id => rowsLookup[id]);
    const initialColumns = (0, _utils.getInitialColumns)(originalColumnsProp, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
    return {
      rows,
      columns: initialColumns
    };
  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp]);
  const computePivotingState = React.useCallback(({
    active,
    model: pivotModel
  }) => {
    if (active && pivotModel) {
      const {
        rows,
        columns
      } = nonPivotDataRef.current || {
        rows: [],
        columns: new Map()
      };
      return {
        initialColumns: columns,
        // TODO: fix getPivotedData called twice in controlled mode
        propsOverrides: (0, _utils.getPivotedData)({
          rows,
          columns,
          pivotModel,
          apiRef: apiRef,
          pivotingColDef: props.pivotingColDef
        })
      };
    }
    return undefined;
  }, [apiRef, props.pivotingColDef]);
  (0, _useOnMount.default)(() => {
    if (!isPivotingAvailable || !isPivotActive) {
      return undefined;
    }
    const isLoading = (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef) ?? false;
    const runPivoting = () => {
      nonPivotDataRef.current = getInitialData();
      apiRef.current.setState(state => {
        const pivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting));
        return (0, _extends2.default)({}, state, {
          pivoting: pivotingState
        });
      });
    };
    if (!isLoading) {
      runPivoting();
      return undefined;
    }
    const unsubscribe = apiRef.current?.store.subscribe(() => {
      const loading = (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef);
      if (loading === false) {
        unsubscribe();
        runPivoting();
      }
    });
    return unsubscribe;
  });
  (0, _useEnhancedEffect.default)(() => {
    if (!isPivotingAvailable || !isPivotActive) {
      if (exportedStateRef.current) {
        apiRef.current.restoreState(exportedStateRef.current);
        exportedStateRef.current = null;
      }
      if (nonPivotDataRef.current) {
        apiRef.current.setRows(nonPivotDataRef.current.rows);
        nonPivotDataRef.current = undefined;
      }
    }
  }, [isPivotActive, apiRef, isPivotingAvailable]);
  const setPivotModel = React.useCallback(callback => {
    if (!isPivotingAvailable) {
      return;
    }
    apiRef.current.setState(state => {
      const newPivotModel = typeof callback === 'function' ? callback(state.pivoting?.model) : callback;
      if (state.pivoting?.model === newPivotModel) {
        return state;
      }
      const newPivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState((0, _extends2.default)({}, state.pivoting, {
        model: newPivotModel
      })), {
        model: newPivotModel
      });
      return (0, _extends2.default)({}, state, {
        pivoting: newPivotingState
      });
    });
  }, [apiRef, computePivotingState, isPivotingAvailable]);
  const updatePivotModel = React.useCallback(({
    field,
    targetSection,
    originSection,
    targetField,
    targetFieldPosition
  }) => {
    if (field === targetField) {
      return;
    }
    apiRef.current.setPivotModel(prev => {
      const newModel = (0, _extends2.default)({}, prev);
      const isSameSection = targetSection === originSection;
      const hidden = originSection === null ? false : prev[originSection].find(item => item.field === field)?.hidden ?? false;
      if (targetSection) {
        const newSectionArray = [...prev[targetSection]];
        let toIndex = newSectionArray.length;
        if (targetField) {
          const fromIndex = newSectionArray.findIndex(item => item.field === field);
          if (fromIndex > -1) {
            newSectionArray.splice(fromIndex, 1);
          }
          toIndex = newSectionArray.findIndex(item => item.field === targetField);
          if (targetFieldPosition === 'bottom') {
            toIndex += 1;
          }
        }
        if (targetSection === 'values') {
          const initialColumns = (0, _internals.gridPivotInitialColumnsSelector)(apiRef);
          const aggFunc = isSameSection ? prev.values.find(item => item.field === field)?.aggFunc : (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
            aggregationFunctions: props.aggregationFunctions,
            colDef: initialColumns.get(field),
            isDataSource: false
          })[0];
          newSectionArray.splice(toIndex, 0, {
            field,
            aggFunc,
            hidden
          });
          newModel.values = newSectionArray;
        } else if (targetSection === 'columns') {
          const sort = isSameSection ? prev.columns.find(item => item.field === field)?.sort : undefined;
          newSectionArray.splice(toIndex, 0, {
            field,
            sort,
            hidden
          });
          newModel.columns = newSectionArray;
        } else if (targetSection === 'rows') {
          newSectionArray.splice(toIndex, 0, {
            field,
            hidden
          });
          newModel.rows = newSectionArray;
        }
      }
      if (!isSameSection && originSection) {
        newModel[originSection] = prev[originSection].filter(f => f.field !== field);
      }
      return newModel;
    });
  }, [apiRef, props.aggregationFunctions]);
  const setPivotActive = React.useCallback(callback => {
    if (!isPivotingAvailable) {
      return;
    }
    apiRef.current.selectRows([], false, true);
    apiRef.current.setState(state => {
      const newPivotMode = typeof callback === 'function' ? callback(state.pivoting?.active) : callback;
      if (state.pivoting?.active === newPivotMode) {
        return state;
      }
      if (newPivotMode) {
        nonPivotDataRef.current = getInitialData();
      }
      const newPivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState((0, _extends2.default)({}, state.pivoting, {
        active: newPivotMode
      })), {
        active: newPivotMode
      });
      const newState = (0, _extends2.default)({}, state, {
        pivoting: newPivotingState
      });
      return newState;
    });
  }, [apiRef, computePivotingState, getInitialData, isPivotingAvailable]);
  const setPivotPanelOpen = React.useCallback(callback => {
    if (!isPivotingAvailable) {
      return;
    }
    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
      pivoting: (0, _extends2.default)({}, state.pivoting, {
        panelOpen: typeof callback === 'function' ? callback(state.pivoting?.panelOpen) : callback
      })
    }));
  }, [apiRef, isPivotingAvailable]);
  const addColumnMenuButton = React.useCallback(menuItems => {
    if (isPivotingAvailable) {
      return [...menuItems, 'columnMenuPivotItem'];
    }
    return menuItems;
  }, [isPivotingAvailable]);
  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuButton);
  const updateNonPivotColumns = React.useCallback((columns, keepPreviousColumns = true) => {
    if (!nonPivotDataRef.current || !isPivotingAvailable) {
      return;
    }
    if (keepPreviousColumns) {
      (0, _utils.getInitialColumns)(columns, props.getPivotDerivedColumns, apiRef.current.getLocaleText).forEach(col => {
        nonPivotDataRef.current.columns.set(col.field, col);
      });
    } else {
      nonPivotDataRef.current.columns = (0, _utils.getInitialColumns)(columns, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
    }
    apiRef.current.setState(state => {
      return (0, _extends2.default)({}, state, {
        pivoting: (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting), {
          initialColumns: nonPivotDataRef.current?.columns
        })
      });
    });
  }, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState]);
  const updateNonPivotRows = React.useCallback((rows, keepPreviousRows = true) => {
    if (!nonPivotDataRef.current || !rows || rows.length === 0) {
      return;
    }
    if (keepPreviousRows) {
      const rowsMap = new Map();
      nonPivotDataRef.current.rows.forEach(row => {
        rowsMap.set((0, _xDataGridPro.gridRowIdSelector)(apiRef, row), row);
      });
      rows.forEach(row => {
        const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
        // eslint-disable-next-line no-underscore-dangle
        if (row._action === 'delete') {
          rowsMap.delete(rowId);
        } else {
          rowsMap.set(rowId, row);
        }
      });
      nonPivotDataRef.current.rows = Array.from(rowsMap.values());
    } else {
      nonPivotDataRef.current.rows = rows;
    }
    apiRef.current.setState(state => {
      return (0, _extends2.default)({}, state, {
        pivoting: (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting))
      });
    });
  }, [apiRef, computePivotingState]);
  (0, _internals.useGridApiMethod)(apiRef, {
    setPivotModel,
    setPivotActive,
    setPivotPanelOpen
  }, 'public');
  (0, _internals.useGridApiMethod)(apiRef, {
    updatePivotModel,
    updateNonPivotColumns,
    updateNonPivotRows
  }, 'private');
  (0, _useEnhancedEffect.default)(() => {
    apiRef.current.updateNonPivotColumns(originalColumnsProp, false);
  }, [originalColumnsProp, apiRef]);
  (0, _useEnhancedEffect.default)(() => {
    apiRef.current.updateNonPivotRows(originalRowsProp, false);
  }, [originalRowsProp, apiRef]);
  (0, _useEnhancedEffect.default)(() => {
    if (props.pivotModel !== undefined) {
      apiRef.current.setPivotModel(props.pivotModel);
    }
  }, [apiRef, props.pivotModel]);
  (0, _useEnhancedEffect.default)(() => {
    if (props.pivotActive !== undefined) {
      apiRef.current.setPivotActive(props.pivotActive);
    }
  }, [apiRef, props.pivotActive]);
  (0, _useEnhancedEffect.default)(() => {
    if (props.pivotPanelOpen !== undefined) {
      apiRef.current.setPivotPanelOpen(props.pivotPanelOpen);
    }
  }, [apiRef, props.pivotPanelOpen]);
};
exports.useGridPivoting = useGridPivoting;