1 | import { createElement, useCallback } from 'react';
|
2 | import { u as useUtils } from './useUtils-cfb96ac9.js';
|
3 | import clsx from 'clsx';
|
4 | import { makeStyles, useTheme } from '@material-ui/core/styles';
|
5 | import { P as PickerToolbar, T as ToolbarButton, c as ToolbarText } from './makePickerWithState-5a79cb8a.js';
|
6 | import { a as arrayIncludes } from './Wrapper-241966d7.js';
|
7 | import { b as ClockType, g as getMeridiem, c as convertToMeridiem } from './Clock-48fde975.js';
|
8 |
|
9 | var useStyles = makeStyles({
|
10 | toolbarLandscape: {
|
11 | flexWrap: 'wrap'
|
12 | },
|
13 | toolbarAmpmLeftPadding: {
|
14 | paddingLeft: 50
|
15 | },
|
16 | separator: {
|
17 | margin: '0 4px 0 2px',
|
18 | cursor: 'default'
|
19 | },
|
20 | hourMinuteLabel: {
|
21 | display: 'flex',
|
22 | justifyContent: 'flex-end',
|
23 | alignItems: 'flex-end'
|
24 | },
|
25 | hourMinuteLabelAmpmLandscape: {
|
26 | marginTop: 'auto'
|
27 | },
|
28 | hourMinuteLabelReverse: {
|
29 | flexDirection: 'row-reverse'
|
30 | },
|
31 | ampmSelection: {
|
32 | marginLeft: 20,
|
33 | marginRight: -20,
|
34 | display: 'flex',
|
35 | flexDirection: 'column'
|
36 | },
|
37 | ampmLandscape: {
|
38 | margin: '4px 0 auto',
|
39 | flexDirection: 'row',
|
40 | justifyContent: 'space-around',
|
41 | flexBasis: '100%'
|
42 | },
|
43 | ampmSelectionWithSeconds: {
|
44 | marginLeft: 15,
|
45 | marginRight: 10
|
46 | },
|
47 | ampmLabel: {
|
48 | fontSize: 18
|
49 | }
|
50 | }, {
|
51 | name: 'MuiPickersTimePickerToolbar'
|
52 | });
|
53 | function useMeridiemMode(date, ampm, onChange) {
|
54 | var utils = useUtils();
|
55 | var meridiemMode = getMeridiem(date, utils);
|
56 | var handleMeridiemChange = useCallback(function (mode) {
|
57 | var timeWithMeridiem = convertToMeridiem(date, mode, Boolean(ampm), utils);
|
58 | onChange(timeWithMeridiem, false);
|
59 | }, [ampm, date, onChange, utils]);
|
60 | return {
|
61 | meridiemMode: meridiemMode,
|
62 | handleMeridiemChange: handleMeridiemChange
|
63 | };
|
64 | }
|
65 | var TimePickerToolbar = function TimePickerToolbar(_ref) {
|
66 | var date = _ref.date,
|
67 | views = _ref.views,
|
68 | ampm = _ref.ampm,
|
69 | openView = _ref.openView,
|
70 | onChange = _ref.onChange,
|
71 | isLandscape = _ref.isLandscape,
|
72 | setOpenView = _ref.setOpenView;
|
73 | var utils = useUtils();
|
74 | var theme = useTheme();
|
75 | var classes = useStyles();
|
76 |
|
77 | var _useMeridiemMode = useMeridiemMode(date, ampm, onChange),
|
78 | meridiemMode = _useMeridiemMode.meridiemMode,
|
79 | handleMeridiemChange = _useMeridiemMode.handleMeridiemChange;
|
80 |
|
81 | var clockTypographyVariant = isLandscape ? 'h3' : 'h2';
|
82 | return createElement(PickerToolbar, {
|
83 | isLandscape: isLandscape,
|
84 | className: clsx(isLandscape ? classes.toolbarLandscape : ampm && classes.toolbarAmpmLeftPadding)
|
85 | }, createElement("div", {
|
86 | className: clsx(classes.hourMinuteLabel, ampm && isLandscape && classes.hourMinuteLabelAmpmLandscape, {
|
87 | rtl: classes.hourMinuteLabelReverse
|
88 | }[theme.direction])
|
89 | }, arrayIncludes(views, 'hours') && createElement(ToolbarButton, {
|
90 | variant: clockTypographyVariant,
|
91 | onClick: function onClick() {
|
92 | return setOpenView(ClockType.HOURS);
|
93 | },
|
94 | selected: openView === ClockType.HOURS,
|
95 | label: utils.getHourText(date, Boolean(ampm))
|
96 | }), arrayIncludes(views, ['hours', 'minutes']) && createElement(ToolbarText, {
|
97 | label: ":",
|
98 | variant: clockTypographyVariant,
|
99 | selected: false,
|
100 | className: classes.separator
|
101 | }), arrayIncludes(views, 'minutes') && createElement(ToolbarButton, {
|
102 | variant: clockTypographyVariant,
|
103 | onClick: function onClick() {
|
104 | return setOpenView(ClockType.MINUTES);
|
105 | },
|
106 | selected: openView === ClockType.MINUTES,
|
107 | label: utils.getMinuteText(date)
|
108 | }), arrayIncludes(views, ['minutes', 'seconds']) && createElement(ToolbarText, {
|
109 | variant: "h2",
|
110 | label: ":",
|
111 | selected: false,
|
112 | className: classes.separator
|
113 | }), arrayIncludes(views, 'seconds') && createElement(ToolbarButton, {
|
114 | variant: "h2",
|
115 | onClick: function onClick() {
|
116 | return setOpenView(ClockType.SECONDS);
|
117 | },
|
118 | selected: openView === ClockType.SECONDS,
|
119 | label: utils.getSecondText(date)
|
120 | })), ampm && createElement("div", {
|
121 | className: clsx(classes.ampmSelection, isLandscape && classes.ampmLandscape, arrayIncludes(views, 'seconds') && classes.ampmSelectionWithSeconds)
|
122 | }, createElement(ToolbarButton, {
|
123 | disableRipple: true,
|
124 | variant: "subtitle1",
|
125 | selected: meridiemMode === 'am',
|
126 | typographyClassName: classes.ampmLabel,
|
127 | label: utils.getMeridiemText('am'),
|
128 | onClick: function onClick() {
|
129 | return handleMeridiemChange('am');
|
130 | }
|
131 | }), createElement(ToolbarButton, {
|
132 | disableRipple: true,
|
133 | variant: "subtitle1",
|
134 | selected: meridiemMode === 'pm',
|
135 | typographyClassName: classes.ampmLabel,
|
136 | label: utils.getMeridiemText('pm'),
|
137 | onClick: function onClick() {
|
138 | return handleMeridiemChange('pm');
|
139 | }
|
140 | })));
|
141 | };
|
142 |
|
143 | export { TimePickerToolbar as T, useMeridiemMode as u };
|
144 |
|