-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
PickersActionBar.tsx
110 lines (97 loc) · 3.34 KB
/
PickersActionBar.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import DialogActions, { DialogActionsProps } from '@mui/material/DialogActions';
import { usePickersTranslations } from '../hooks/usePickersTranslations';
export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today';
export interface PickersActionBarProps extends DialogActionsProps {
/**
* Ordered array of actions to display.
* If empty, does not display that action bar.
* @default `['cancel', 'accept']` for mobile and `[]` for desktop
*/
actions?: PickersActionBarAction[];
onAccept: () => void;
onClear: () => void;
onCancel: () => void;
onSetToday: () => void;
}
/**
* Demos:
*
* - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
* - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
*
* API:
*
* - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
*/
function PickersActionBar(props: PickersActionBarProps) {
const { onAccept, onClear, onCancel, onSetToday, actions, ...other } = props;
const translations = usePickersTranslations();
if (actions == null || actions.length === 0) {
return null;
}
const buttons = actions?.map((actionType) => {
switch (actionType) {
case 'clear':
return (
<Button data-mui-test="clear-action-button" onClick={onClear} key={actionType}>
{translations.clearButtonLabel}
</Button>
);
case 'cancel':
return (
<Button onClick={onCancel} key={actionType}>
{translations.cancelButtonLabel}
</Button>
);
case 'accept':
return (
<Button onClick={onAccept} key={actionType}>
{translations.okButtonLabel}
</Button>
);
case 'today':
return (
<Button data-mui-test="today-action-button" onClick={onSetToday} key={actionType}>
{translations.todayButtonLabel}
</Button>
);
default:
return null;
}
});
return <DialogActions {...other}>{buttons}</DialogActions>;
}
PickersActionBar.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* Ordered array of actions to display.
* If empty, does not display that action bar.
* @default `['cancel', 'accept']` for mobile and `[]` for desktop
*/
actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
/**
* If `true`, the actions do not have additional margin.
* @default false
*/
disableSpacing: PropTypes.bool,
onAccept: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
onClear: PropTypes.func.isRequired,
onSetToday: PropTypes.func.isRequired,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
PropTypes.func,
PropTypes.object,
]),
} as any;
export { PickersActionBar };