-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
GridToolbarColumnsButton.tsx
95 lines (85 loc) · 3.35 KB
/
GridToolbarColumnsButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import * as React from 'react';
import PropTypes from 'prop-types';
import { ButtonProps } from '@mui/material/Button';
import { TooltipProps } from '@mui/material/Tooltip';
import { unstable_useId as useId } from '@mui/material/utils';
import { useGridSelector } from '../../hooks/utils/useGridSelector';
import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
interface GridToolbarColumnsButtonProps {
/**
* The props used for each slot inside.
* @default {}
*/
slotProps?: { button?: Partial<ButtonProps>; tooltip?: Partial<TooltipProps> };
}
const GridToolbarColumnsButton = React.forwardRef<HTMLButtonElement, GridToolbarColumnsButtonProps>(
function GridToolbarColumnsButton(props, ref) {
const { slotProps = {} } = props;
const buttonProps = slotProps.button || {};
const tooltipProps = slotProps.tooltip || {};
const columnButtonId = useId();
const columnPanelId = useId();
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
const showColumns = (event: React.MouseEvent<HTMLButtonElement>) => {
if (
preferencePanel.open &&
preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns
) {
apiRef.current.hidePreferences();
} else {
apiRef.current.showPreferences(
GridPreferencePanelsValue.columns,
columnPanelId,
columnButtonId,
);
}
buttonProps.onClick?.(event);
};
// Disable the button if the corresponding is disabled
if (rootProps.disableColumnSelector) {
return null;
}
const isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
return (
<rootProps.slots.baseTooltip
title={apiRef.current.getLocaleText('toolbarColumnsLabel')}
enterDelay={1000}
{...tooltipProps}
{...rootProps.slotProps?.baseTooltip}
>
<rootProps.slots.baseButton
ref={ref}
id={columnButtonId}
size="small"
aria-label={apiRef.current.getLocaleText('toolbarColumnsLabel')}
aria-haspopup="menu"
aria-expanded={isOpen}
aria-controls={isOpen ? columnPanelId : undefined}
startIcon={<rootProps.slots.columnSelectorIcon />}
{...buttonProps}
onClick={showColumns}
{...rootProps.slotProps?.baseButton}
>
{apiRef.current.getLocaleText('toolbarColumns')}
</rootProps.slots.baseButton>
</rootProps.slots.baseTooltip>
);
},
);
GridToolbarColumnsButton.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: PropTypes.object,
} as any;
export { GridToolbarColumnsButton };