@mui/x-data-grid
Version:
The Community plan edition of the Data Grid components (MUI X).
314 lines (306 loc) • 14.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.columnsStateInitializer = void 0;
exports.useGridColumns = useGridColumns;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _useGridApiMethod = require("../../utils/useGridApiMethod");
var _useGridLogger = require("../../utils/useGridLogger");
var _gridColumnsSelector = require("./gridColumnsSelector");
var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
var _pipeProcessing = require("../../core/pipeProcessing");
var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
var _gridColumnsUtils = require("./gridColumnsUtils");
var _preferencesPanel = require("../preferencesPanel");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const columnsStateInitializer = (state, props, apiRef) => {
const columnsState = (0, _gridColumnsUtils.createColumnsState)({
apiRef,
columnsToUpsert: props.columns,
initialState: props.initialState?.columns,
columnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
keepOnlyColumnsToUpsert: true
});
return (0, _extends2.default)({}, state, {
columns: columnsState,
// In pro/premium, this part of the state is defined. We give it an empty but defined value
// for the community version.
pinnedColumns: state.pinnedColumns ?? _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS
});
};
/**
* @requires useGridParamsApi (method)
* @requires useGridDimensions (method, event) - can be after
* TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
*/
exports.columnsStateInitializer = columnsStateInitializer;
function useGridColumns(apiRef, props) {
const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
const previousColumnsProp = React.useRef(props.columns);
apiRef.current.registerControlState({
stateId: 'visibleColumns',
propModel: props.columnVisibilityModel,
propOnChange: props.onColumnVisibilityModelChange,
stateSelector: _gridColumnsSelector.gridColumnVisibilityModelSelector,
changeEvent: 'columnVisibilityModelChange'
});
const setGridColumnsState = React.useCallback(columnsState => {
logger.debug('Updating columns state.');
apiRef.current.setState(mergeColumnsState(columnsState));
apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
apiRef.current.updateRenderContext?.();
apiRef.current.forceUpdate();
}, [logger, apiRef]);
/**
* API METHODS
*/
const getColumn = React.useCallback(field => (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef)[field], [apiRef]);
const getAllColumns = React.useCallback(() => (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef), [apiRef]);
const getVisibleColumns = React.useCallback(() => (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef), [apiRef]);
const getColumnIndex = React.useCallback((field, useVisibleColumns = true) => {
const columns = useVisibleColumns ? (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef) : (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
return columns.findIndex(col => col.field === field);
}, [apiRef]);
const getColumnPosition = React.useCallback(field => {
const index = getColumnIndex(field);
return (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef)[index];
}, [apiRef, getColumnIndex]);
const setColumnVisibilityModel = React.useCallback(model => {
const currentModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
if (currentModel !== model) {
apiRef.current.setState(state => (0, _extends2.default)({}, state, {
columns: (0, _gridColumnsUtils.createColumnsState)({
apiRef,
columnsToUpsert: [],
initialState: undefined,
columnVisibilityModel: model,
keepOnlyColumnsToUpsert: false
})
}));
apiRef.current.updateRenderContext?.();
apiRef.current.forceUpdate();
}
}, [apiRef]);
const updateColumns = React.useCallback(columns => {
const columnsState = (0, _gridColumnsUtils.createColumnsState)({
apiRef,
columnsToUpsert: columns,
initialState: undefined,
keepOnlyColumnsToUpsert: false
});
setGridColumnsState(columnsState);
}, [apiRef, setGridColumnsState]);
const setColumnVisibility = React.useCallback((field, isVisible) => {
const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
if (isVisible !== isCurrentlyVisible) {
const newModel = (0, _extends2.default)({}, columnVisibilityModel, {
[field]: isVisible
});
apiRef.current.setColumnVisibilityModel(newModel);
}
}, [apiRef]);
const getColumnIndexRelativeToVisibleColumns = React.useCallback(field => {
const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
return allColumns.findIndex(col => col === field);
}, [apiRef]);
const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
const oldIndexPosition = getColumnIndexRelativeToVisibleColumns(field);
if (oldIndexPosition === targetIndexPosition) {
return;
}
logger.debug(`Moving column ${field} to index ${targetIndexPosition}`);
const updatedColumns = [...allColumns];
const fieldRemoved = updatedColumns.splice(oldIndexPosition, 1)[0];
updatedColumns.splice(targetIndexPosition, 0, fieldRemoved);
setGridColumnsState((0, _extends2.default)({}, (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state), {
orderedFields: updatedColumns
}));
const params = {
column: apiRef.current.getColumn(field),
targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(field),
oldIndex: oldIndexPosition
};
apiRef.current.publishEvent('columnIndexChange', params);
}, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
const setColumnWidth = React.useCallback((field, width) => {
logger.debug(`Updating column ${field} width to ${width}`);
const columnsState = (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state);
const column = columnsState.lookup[field];
const newColumn = (0, _extends2.default)({}, column, {
width,
hasBeenResized: true
});
setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _extends2.default)({}, columnsState, {
lookup: (0, _extends2.default)({}, columnsState.lookup, {
[field]: newColumn
})
}), apiRef.current.getRootDimensions()));
apiRef.current.publishEvent('columnWidthChange', {
element: apiRef.current.getColumnHeaderElement(field),
colDef: newColumn,
width
});
}, [apiRef, logger, setGridColumnsState]);
const columnApi = {
getColumn,
getAllColumns,
getColumnIndex,
getColumnPosition,
getVisibleColumns,
getColumnIndexRelativeToVisibleColumns,
updateColumns,
setColumnVisibilityModel,
setColumnVisibility,
setColumnWidth
};
const columnReorderApi = {
setColumnIndex
};
(0, _useGridApiMethod.useGridApiMethod)(apiRef, columnApi, 'public');
(0, _useGridApiMethod.useGridApiMethod)(apiRef, columnReorderApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
/**
* PRE-PROCESSING
*/
const stateExportPreProcessing = React.useCallback((prevState, context) => {
const columnsStateToExport = {};
const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
const shouldExportColumnVisibilityModel =
// Always export if the `exportOnlyDirtyModels` property is not activated
!context.exportOnlyDirtyModels ||
// Always export if the model is controlled
props.columnVisibilityModel != null ||
// Always export if the model has been initialized
// TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 ||
// Always export if the model is not empty
Object.keys(columnVisibilityModelToExport).length > 0;
if (shouldExportColumnVisibilityModel) {
columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
}
columnsStateToExport.orderedFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
const columns = (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
const dimensions = {};
columns.forEach(colDef => {
if (colDef.hasBeenResized) {
const colDefDimensions = {};
_gridColumnsUtils.COLUMNS_DIMENSION_PROPERTIES.forEach(propertyName => {
let propertyValue = colDef[propertyName];
if (propertyValue === Infinity) {
propertyValue = -1;
}
colDefDimensions[propertyName] = propertyValue;
});
dimensions[colDef.field] = colDefDimensions;
}
});
if (Object.keys(dimensions).length > 0) {
columnsStateToExport.dimensions = dimensions;
}
return (0, _extends2.default)({}, prevState, {
columns: columnsStateToExport
});
}, [apiRef, props.columnVisibilityModel, props.initialState?.columns]);
const stateRestorePreProcessing = React.useCallback((params, context) => {
const columnVisibilityModelToImport = context.stateToRestore.columns?.columnVisibilityModel;
const initialState = context.stateToRestore.columns;
if (columnVisibilityModelToImport == null && initialState == null) {
return params;
}
const columnsState = (0, _gridColumnsUtils.createColumnsState)({
apiRef,
columnsToUpsert: [],
initialState,
columnVisibilityModel: columnVisibilityModelToImport,
keepOnlyColumnsToUpsert: false
});
apiRef.current.setState(mergeColumnsState(columnsState));
if (initialState != null) {
apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
}
return params;
}, [apiRef]);
const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
if (value === _preferencesPanel.GridPreferencePanelsValue.columns) {
const ColumnsPanel = props.slots.columnsPanel;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnsPanel, (0, _extends2.default)({}, props.slotProps?.columnsPanel));
}
return initialValue;
}, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
const addColumnMenuItems = React.useCallback(columnMenuItems => {
if (props.disableColumnSelector) {
return columnMenuItems;
}
return [...columnMenuItems, 'columnMenuColumnsItem'];
}, [props.disableColumnSelector]);
(0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItems);
(0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
(0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
(0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
/*
* EVENTS
*/
const prevInnerWidth = React.useRef(null);
const handleGridSizeChange = viewportInnerSize => {
if (prevInnerWidth.current !== viewportInnerSize.width) {
prevInnerWidth.current = viewportInnerSize.width;
setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state), apiRef.current.getRootDimensions()));
}
};
(0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
/**
* APPLIERS
*/
const hydrateColumns = React.useCallback(() => {
logger.info(`Columns pipe processing have changed, regenerating the columns`);
const columnsState = (0, _gridColumnsUtils.createColumnsState)({
apiRef,
columnsToUpsert: [],
initialState: undefined,
keepOnlyColumnsToUpsert: false
});
setGridColumnsState(columnsState);
}, [apiRef, logger, setGridColumnsState]);
(0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateColumns', hydrateColumns);
/*
* EFFECTS
*/
// The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
// As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
const isFirstRender = React.useRef(true);
React.useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
logger.info(`GridColumns have changed, new length ${props.columns.length}`);
if (previousColumnsProp.current === props.columns) {
return;
}
const columnsState = (0, _gridColumnsUtils.createColumnsState)({
apiRef,
initialState: undefined,
// If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
columnsToUpsert: props.columns,
keepOnlyColumnsToUpsert: true
});
previousColumnsProp.current = props.columns;
setGridColumnsState(columnsState);
}, [logger, apiRef, setGridColumnsState, props.columns]);
React.useEffect(() => {
if (props.columnVisibilityModel !== undefined) {
apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
}
}, [apiRef, logger, props.columnVisibilityModel]);
}
function mergeColumnsState(columnsState) {
return state => (0, _extends2.default)({}, state, {
columns: columnsState
});
}