@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
171 lines (167 loc) • 9.73 kB
JavaScript
;
'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.useGridDataSourcePremium = void 0;
var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _internals = require("@mui/x-data-grid-pro/internals");
var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
var _utils = require("./utils");
var _gridRowGroupingSelector = require("../rowGrouping/gridRowGroupingSelector");
var _gridAggregationSelectors = require("../aggregation/gridAggregationSelectors");
function getKeyPremium(params) {
return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.pivotModel ? {} : params.aggregationModel, params.pivotModel]);
}
const options = {
cacheOptions: {
getKey: getKeyPremium
}
};
const getStrategies = (props, groupingModelSize) => {
const previousStrategies = new Set([_internals.DataSourceRowsUpdateStrategy.Default, _internals.DataSourceRowsUpdateStrategy.GroupedData, _internals.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData]);
let currentStrategy = _internals.DataSourceRowsUpdateStrategy.Default;
if (props.treeData || !props.disableRowGrouping && groupingModelSize > 0) {
currentStrategy = props.lazyLoading ? _internals.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData : _internals.DataSourceRowsUpdateStrategy.GroupedData;
}
previousStrategies.delete(currentStrategy);
return {
currentStrategy,
previousStrategies: Array.from(previousStrategies)
};
};
const useGridDataSourcePremium = (apiRef, props) => {
const aggregationModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
const groupingModelSize = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef).length;
const setStrategyAvailability = React.useCallback(() => {
const {
currentStrategy,
previousStrategies
} = getStrategies({
treeData: props.treeData,
lazyLoading: props.lazyLoading,
disableRowGrouping: props.disableRowGrouping
}, groupingModelSize);
previousStrategies.forEach(strategy => {
apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, strategy, () => false);
});
apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, currentStrategy, props.dataSource ? () => true : () => false);
}, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
if (updatedRow && !(0, _isDeepEqual.isDeepEqual)(updatedRow, params.previousRow)) {
// Reset the outdated cache, only if the row is _actually_ updated
apiRef.current.dataSource.cache.clear();
}
const groupKeys = (0, _internals.getGroupKeys)(rowTree, params.rowId);
apiRef.current.updateNestedRows([updatedRow], groupKeys);
// To refresh the aggregation values of all parent rows and the footer row, recursively re-fetch all parent levels
(0, _utils.fetchParents)(rowTree, params.rowId, apiRef.current.dataSource.fetchRows);
}, [apiRef]);
const {
api,
debouncedFetchRows,
flatTreeStrategyProcessor,
groupedDataStrategyProcessor,
nestedDataStrategyProcessor,
events,
stopPolling
} = (0, _internals.useGridDataSourceBasePro)(apiRef, props, (0, _extends2.default)({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
handleEditRow: handleEditRowWithAggregation
} : {}, options));
const aggregateRowRef = React.useRef({});
const initialColumns = (0, _internals.gridPivotInitialColumnsSelector)(apiRef);
const pivotActive = (0, _internals.gridPivotActiveSelector)(apiRef);
const pivotModel = (0, _gridPivotingSelectors.gridPivotModelSelector)(apiRef);
const processDataSourceRows = React.useCallback(({
params,
response
}, applyRowHydration) => {
if (response.aggregateRow) {
aggregateRowRef.current = response.aggregateRow;
}
if (Object.keys(params.aggregationModel || {}).length > 0) {
if (applyRowHydration) {
apiRef.current.requestPipeProcessorsApplication('hydrateRows');
}
apiRef.current.applyAggregation();
}
if (response.pivotColumns) {
const pivotingColDef = props.pivotingColDef;
if (!pivotingColDef || typeof pivotingColDef !== 'function') {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI X: No \`pivotingColDef()\` prop provided with to the Data Grid, but response contains \`pivotColumns\`.
You need a callback to return at least a field column prop for each generated pivot column.
See [server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pivoting/) documentation for more details.` : (0, _formatErrorMessage2.default)(119));
}
// Update the grid state with new columns and column grouping model
const partialPropsOverrides = (0, _utils.getPropsOverrides)(response.pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef);
apiRef.current.setState(state => {
return (0, _extends2.default)({}, state, {
pivoting: (0, _extends2.default)({}, state.pivoting, {
propsOverrides: (0, _extends2.default)({}, state.pivoting.propsOverrides, partialPropsOverrides)
})
});
});
}
return {
params,
response
};
}, [apiRef, props.pivotingColDef, initialColumns, pivotModel]);
const resolveGroupAggregation = React.useCallback((groupId, field) => {
if (groupId === _xDataGridPro.GRID_ROOT_GROUP_ID) {
return props.dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
}
const row = apiRef.current.getRow(groupId);
return props.dataSource?.getAggregatedValue?.(row, field);
}, [apiRef, props.dataSource]);
const handleRowGroupingModelChange = React.useCallback(() => {
// Clear the rows on every grouping model change to match the pre-fix behavior on
// non-standard strategies (e.g. lazy loading) where `setRows([])` is required to
// reset the existing grouping state. `dataSourceKeepPreviousData` is intentionally
// not honored here: changing the grouping model implies the `GroupedData` strategy
// is (about to be) active, and skipping the synchronous clear would render rows in
// stale sort order (https://github.com/mui/mui-x/pull/21619).
apiRef.current.setRows([]);
// The event listener is wired regardless of the active strategy
// (see `runIf(!pivotActive && !!props.dataSource, ...)` below), so we have to gate the
// `setLoading(true)` here. `fetchRows` only clears the loading flag when a standard
// strategy is active, and we don't want to leave the overlay stuck on lazy-loading or
// other non-standard strategies. Order matters too: `setRows([])` above rebuilds
// `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
// it to survive the rebuild.
const currentStrategy = apiRef.current.getActiveStrategy(_internals.GridStrategyGroup.DataSource);
const isStandardStrategyActive = currentStrategy === _internals.DataSourceRowsUpdateStrategy.Default || currentStrategy === _internals.DataSourceRowsUpdateStrategy.GroupedData;
if (isStandardStrategyActive) {
apiRef.current.setLoading(true);
}
stopPolling();
debouncedFetchRows();
}, [apiRef, debouncedFetchRows, stopPolling]);
const privateApi = (0, _extends2.default)({}, api.private, {
resolveGroupAggregation
});
(0, _xDataGridPro.useGridApiMethod)(apiRef, api.public, 'public');
(0, _xDataGridPro.useGridApiMethod)(apiRef, privateApi, 'private');
(0, _internals.useGridRegisterStrategyProcessor)(apiRef, flatTreeStrategyProcessor.strategyName, flatTreeStrategyProcessor.group, flatTreeStrategyProcessor.processor);
(0, _internals.useGridRegisterStrategyProcessor)(apiRef, groupedDataStrategyProcessor.strategyName, groupedDataStrategyProcessor.group, groupedDataStrategyProcessor.processor);
(0, _internals.useGridRegisterStrategyProcessor)(apiRef, nestedDataStrategyProcessor.strategyName, nestedDataStrategyProcessor.group, nestedDataStrategyProcessor.processor);
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'processDataSourceRows', processDataSourceRows);
Object.entries(events).forEach(([event, handler]) => {
(0, _xDataGridPro.useGridEvent)(apiRef, event, handler);
});
(0, _xDataGridPro.useGridEvent)(apiRef, 'rowGroupingModelChange', (0, _internals.runIf)(!pivotActive && !!props.dataSource, handleRowGroupingModelChange));
(0, _xDataGridPro.useGridEvent)(apiRef, 'aggregationModelChange', (0, _internals.runIf)(!pivotActive, () => debouncedFetchRows()));
(0, _xDataGridPro.useGridEvent)(apiRef, 'pivotModeChange', (0, _internals.runIf)(!pivotActive, () => debouncedFetchRows()));
(0, _xDataGridPro.useGridEvent)(apiRef, 'pivotModelChange', (0, _internals.runIf)(pivotActive, () => debouncedFetchRows()));
React.useEffect(() => {
setStrategyAvailability();
}, [setStrategyAvailability]);
};
exports.useGridDataSourcePremium = useGridDataSourcePremium;