@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
242 lines (231 loc) • 10.6 kB
JavaScript
"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.useGridRowGrouping = exports.rowGroupingStateInitializer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _internals = require("@mui/x-data-grid-pro/internals");
var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
var _rowGroupingReorderValidator = require("../rowReorder/rowGroupingReorderValidator");
const rowGroupingStateInitializer = (state, props, apiRef) => {
apiRef.current.caches.rowGrouping = {
rulesOnLastRowTreeCreation: []
};
return (0, _extends2.default)({}, state, {
rowGrouping: {
model: props.rowGroupingModel ?? props.initialState?.rowGrouping?.model ?? []
}
});
};
/**
* @requires useGridColumns (state, method) - can be after, async only
* @requires useGridRows (state, method) - can be after, async only
* @requires useGridParamsApi (method) - can be after, async only
*/
exports.rowGroupingStateInitializer = rowGroupingStateInitializer;
const useGridRowGrouping = (apiRef, props) => {
apiRef.current.registerControlState({
stateId: 'rowGrouping',
propModel: props.rowGroupingModel,
propOnChange: props.onRowGroupingModelChange,
stateSelector: _gridRowGroupingSelector.gridRowGroupingModelSelector,
changeEvent: 'rowGroupingModelChange'
});
/*
* API METHODS
*/
const setRowGroupingModel = React.useCallback(model => {
const currentModel = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
if (currentModel !== model) {
apiRef.current.setState((0, _gridRowGroupingUtils.mergeStateWithRowGroupingModel)(model));
(0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
}
}, [apiRef, props.disableRowGrouping]);
const addRowGroupingCriteria = React.useCallback((field, groupingIndex) => {
const currentModel = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
if (currentModel.includes(field)) {
return;
}
const cleanGroupingIndex = groupingIndex ?? currentModel.length;
const updatedModel = [...currentModel.slice(0, cleanGroupingIndex), field, ...currentModel.slice(cleanGroupingIndex)];
apiRef.current.setRowGroupingModel(updatedModel);
}, [apiRef]);
const removeRowGroupingCriteria = React.useCallback(field => {
const currentModel = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
if (!currentModel.includes(field)) {
return;
}
apiRef.current.setRowGroupingModel(currentModel.filter(el => el !== field));
}, [apiRef]);
const setRowGroupingCriteriaIndex = React.useCallback((field, targetIndex) => {
const currentModel = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
const currentTargetIndex = currentModel.indexOf(field);
if (currentTargetIndex === -1) {
return;
}
const updatedModel = [...currentModel];
updatedModel.splice(targetIndex, 0, updatedModel.splice(currentTargetIndex, 1)[0]);
apiRef.current.setRowGroupingModel(updatedModel);
}, [apiRef]);
const rowGroupingApi = {
setRowGroupingModel,
addRowGroupingCriteria,
removeRowGroupingCriteria,
setRowGroupingCriteriaIndex
};
(0, _xDataGridPro.useGridApiMethod)(apiRef, rowGroupingApi, 'public');
/**
* PRE-PROCESSING
*/
const addColumnMenuButtons = React.useCallback((columnMenuItems, colDef) => {
if (props.disableRowGrouping) {
return columnMenuItems;
}
if ((0, _gridRowGroupingUtils.isGroupingColumn)(colDef.field) || colDef.groupable) {
return [...columnMenuItems, 'columnMenuGroupingItem'];
}
return columnMenuItems;
}, [props.disableRowGrouping]);
const addGetRowsParams = React.useCallback(params => {
return (0, _extends2.default)({}, params, {
groupFields: (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef)
});
}, [apiRef]);
const stateExportPreProcessing = React.useCallback((prevState, context) => {
const rowGroupingModelToExport = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
const shouldExportRowGroupingModel =
// Always export if the `exportOnlyDirtyModels` property is not activated
!context.exportOnlyDirtyModels ||
// Always export if the model is controlled
props.rowGroupingModel != null ||
// Always export if the model has been initialized
props.initialState?.rowGrouping?.model != null ||
// Export if the model is not empty
Object.keys(rowGroupingModelToExport).length > 0;
if (!shouldExportRowGroupingModel) {
return prevState;
}
return (0, _extends2.default)({}, prevState, {
rowGrouping: {
model: rowGroupingModelToExport
}
});
}, [apiRef, props.rowGroupingModel, props.initialState?.rowGrouping?.model]);
const stateRestorePreProcessing = React.useCallback((params, context) => {
if (props.disableRowGrouping) {
return params;
}
const rowGroupingModel = context.stateToRestore.rowGrouping?.model;
if (rowGroupingModel != null) {
apiRef.current.setState((0, _gridRowGroupingUtils.mergeStateWithRowGroupingModel)(rowGroupingModel));
}
return params;
}, [apiRef, props.disableRowGrouping]);
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowsParams', addGetRowsParams);
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
/*
* EVENTS
*/
const handleCellKeyDown = React.useCallback((params, event) => {
const cellParams = apiRef.current.getCellParams(params.id, params.field);
if ((0, _gridRowGroupingUtils.isGroupingColumn)(cellParams.field) && event.key === ' ' && !event.shiftKey) {
event.stopPropagation();
event.preventDefault();
if (params.rowNode.type !== 'group') {
return;
}
const isOnGroupingCell = props.rowGroupingColumnMode === 'single' || (0, _gridRowGroupingUtils.getRowGroupingFieldFromGroupingCriteria)(params.rowNode.groupingField) === params.field;
if (!isOnGroupingCell) {
return;
}
if (props.dataSource && !params.rowNode.childrenExpanded) {
apiRef.current.dataSource.fetchRows(params.id);
return;
}
apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
}
}, [apiRef, props.rowGroupingColumnMode, props.dataSource]);
const checkGroupingColumnsModelDiff = React.useCallback(() => {
const sanitizedRowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
const rulesOnLastRowTreeCreation = apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation || [];
const groupingRules = (0, _gridRowGroupingUtils.getGroupingRules)({
sanitizedRowGroupingModel,
columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef)
});
if (!(0, _gridRowGroupingUtils.areGroupingRulesEqual)(rulesOnLastRowTreeCreation, groupingRules)) {
apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
(0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
// Refresh the row tree creation strategy processing
// TODO: Add a clean way to re-run a strategy processing without publishing a private event
if (apiRef.current.getActiveStrategy(_internals.GridStrategyGroup.RowTree) === _internals.RowGroupingStrategy.Default) {
apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
}
}
}, [apiRef, props.disableRowGrouping]);
const isValidRowReorderProp = props.isValidRowReorder;
const isRowReorderValid = React.useCallback((initialValue, {
sourceRowId,
targetRowId,
dropPosition,
dragDirection
}) => {
if ((0, _xDataGridPro.gridRowMaximumTreeDepthSelector)(apiRef) === 1 || props.treeData) {
return initialValue;
}
const expandedSortedRowIndexLookup = (0, _xDataGridPro.gridExpandedSortedRowIndexLookupSelector)(apiRef);
const expandedSortedRowIds = (0, _xDataGridPro.gridExpandedSortedRowIdsSelector)(apiRef);
const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
const targetRowIndex = expandedSortedRowIndexLookup[targetRowId];
const sourceNode = rowTree[sourceRowId];
const targetNode = rowTree[targetRowId];
const prevNode = targetRowIndex > 0 ? rowTree[expandedSortedRowIds[targetRowIndex - 1]] : null;
const nextNode = targetRowIndex < expandedSortedRowIds.length - 1 ? rowTree[expandedSortedRowIds[targetRowIndex + 1]] : null;
// Basic validity checks
if (!sourceNode || !targetNode) {
return false;
}
// Create context object
const context = {
apiRef,
sourceNode,
targetNode,
prevNode,
nextNode,
dropPosition,
dragDirection
};
// First apply internal validation
let isValid = _rowGroupingReorderValidator.rowGroupingReorderValidator.validate(context);
// If internal validation passes AND user provided additional validation
if (isValid && isValidRowReorderProp) {
// Apply additional user restrictions
isValid = isValidRowReorderProp(context);
}
if (isValid) {
return true;
}
return false;
}, [apiRef, props.treeData, isValidRowReorderProp]);
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'isRowReorderValid', isRowReorderValid);
(0, _xDataGridPro.useGridEvent)(apiRef, 'cellKeyDown', handleCellKeyDown);
(0, _xDataGridPro.useGridEvent)(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
(0, _xDataGridPro.useGridEvent)(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
/*
* EFFECTS
*/
React.useEffect(() => {
if (props.rowGroupingModel !== undefined) {
apiRef.current.setRowGroupingModel(props.rowGroupingModel);
}
}, [apiRef, props.rowGroupingModel]);
};
exports.useGridRowGrouping = useGridRowGrouping;