@mui/x-data-grid
Version:
The Community plan edition of the Data Grid components (MUI X).
112 lines (106 loc) • 4.11 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { useGridApiMethod } from '../../utils/useGridApiMethod';
import { useGridLogger } from '../../utils/useGridLogger';
import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
export const preferencePanelStateInitializer = (state, props) => _extends({}, state, {
preferencePanel: props.initialState?.preferencePanel ?? {
open: false
}
});
/**
* TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
*/
export const useGridPreferencesPanel = (apiRef, props) => {
const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
const hideTimeout = React.useRef();
const immediateTimeout = React.useRef();
/**
* API METHODS
*/
const hidePreferences = React.useCallback(() => {
logger.debug('Hiding Preferences Panel');
const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
if (preferencePanelState.openedPanelValue) {
apiRef.current.publishEvent('preferencePanelClose', {
openedPanelValue: preferencePanelState.openedPanelValue
});
}
apiRef.current.setState(state => _extends({}, state, {
preferencePanel: {
open: false
}
}));
apiRef.current.forceUpdate();
}, [apiRef, logger]);
// This is to prevent the preferences from closing when you open a select box or another panel,
// The issue is in MUI core V4 => Fixed in V5
const doNotHidePanel = React.useCallback(() => {
immediateTimeout.current = setTimeout(() => clearTimeout(hideTimeout.current), 0);
}, []);
// This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
// we can cancel the action if the trigger element still need the panel...
const hidePreferencesDelayed = React.useCallback(() => {
hideTimeout.current = setTimeout(hidePreferences, 100);
}, [hidePreferences]);
const showPreferences = React.useCallback((newValue, panelId, labelId) => {
logger.debug('Opening Preferences Panel');
doNotHidePanel();
apiRef.current.setState(state => _extends({}, state, {
preferencePanel: _extends({}, state.preferencePanel, {
open: true,
openedPanelValue: newValue,
panelId,
labelId
})
}));
apiRef.current.publishEvent('preferencePanelOpen', {
openedPanelValue: newValue
});
apiRef.current.forceUpdate();
}, [logger, doNotHidePanel, apiRef]);
useGridApiMethod(apiRef, {
showPreferences,
hidePreferences: hidePreferencesDelayed
}, 'public');
/**
* PRE-PROCESSING
*/
const stateExportPreProcessing = React.useCallback((prevState, context) => {
const preferencePanelToExport = gridPreferencePanelStateSelector(apiRef.current.state);
const shouldExportPreferencePanel =
// Always export if the `exportOnlyDirtyModels` property is not activated
!context.exportOnlyDirtyModels ||
// Always export if the panel was initialized
props.initialState?.preferencePanel != null ||
// Always export if the panel is opened
preferencePanelToExport.open;
if (!shouldExportPreferencePanel) {
return prevState;
}
return _extends({}, prevState, {
preferencePanel: preferencePanelToExport
});
}, [apiRef, props.initialState?.preferencePanel]);
const stateRestorePreProcessing = React.useCallback((params, context) => {
const preferencePanel = context.stateToRestore.preferencePanel;
if (preferencePanel != null) {
apiRef.current.setState(state => _extends({}, state, {
preferencePanel
}));
}
return params;
}, [apiRef]);
useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
/**
* EFFECTS
*/
React.useEffect(() => {
return () => {
clearTimeout(hideTimeout.current);
clearTimeout(immediateTimeout.current);
};
}, []);
};