1 | import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
2 | import React__default, { createContext, useMemo, createElement, useContext, useState, useCallback, useEffect, useDebugValue, useRef, cloneElement, useLayoutEffect, Fragment, Component, memo, forwardRef } from 'react';
|
3 | import { func, oneOfType, object, string, element, arrayOf, bool, any, number, instanceOf, oneOf, node } from 'prop-types';
|
4 | import clsx from 'clsx';
|
5 | import _extends from '@babel/runtime/helpers/esm/extends';
|
6 | import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
7 | import Typography from '@material-ui/core/Typography';
|
8 | import { makeStyles, fade, withStyles, createStyles, useTheme } from '@material-ui/core/styles';
|
9 | import Button from '@material-ui/core/Button';
|
10 | import Toolbar from '@material-ui/core/Toolbar';
|
11 | import TextField from '@material-ui/core/TextField';
|
12 | import IconButton from '@material-ui/core/IconButton';
|
13 | import InputAdornment from '@material-ui/core/InputAdornment';
|
14 | import { Rifm } from 'rifm';
|
15 | import SvgIcon from '@material-ui/core/SvgIcon';
|
16 | import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
|
17 | import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
|
18 | import _createClass from '@babel/runtime/helpers/esm/createClass';
|
19 | import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
|
20 | import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
|
21 | import _inherits from '@babel/runtime/helpers/esm/inherits';
|
22 | import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
23 | import CircularProgress from '@material-ui/core/CircularProgress';
|
24 | import DialogActions from '@material-ui/core/DialogActions';
|
25 | import DialogContent from '@material-ui/core/DialogContent';
|
26 | import Dialog from '@material-ui/core/Dialog';
|
27 | import Popover from '@material-ui/core/Popover';
|
28 | import Grid from '@material-ui/core/Grid';
|
29 | import Tab from '@material-ui/core/Tab';
|
30 | import Tabs from '@material-ui/core/Tabs';
|
31 | import Paper from '@material-ui/core/Paper';
|
32 |
|
33 | var MuiPickersContext = createContext(null);
|
34 | var MuiPickersUtilsProvider = function MuiPickersUtilsProvider(_ref) {
|
35 | var Utils = _ref.utils,
|
36 | children = _ref.children,
|
37 | locale = _ref.locale,
|
38 | libInstance = _ref.libInstance;
|
39 | var utils = useMemo(function () {
|
40 | return new Utils({
|
41 | locale: locale,
|
42 | instance: libInstance
|
43 | });
|
44 | }, [Utils, libInstance, locale]);
|
45 | return createElement(MuiPickersContext.Provider, {
|
46 | value: utils,
|
47 | children: children
|
48 | });
|
49 | };
|
50 | process.env.NODE_ENV !== "production" ? MuiPickersUtilsProvider.propTypes = {
|
51 | utils: func.isRequired,
|
52 | locale: oneOfType([object, string]),
|
53 | children: oneOfType([element.isRequired, arrayOf(element.isRequired)]).isRequired
|
54 | } : void 0;
|
55 |
|
56 | var checkUtils = function checkUtils(utils) {
|
57 | if (!utils) {
|
58 |
|
59 | throw new Error('Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports. Recommendation: use named imports from the module index.');
|
60 | }
|
61 | };
|
62 | function useUtils() {
|
63 | var utils = useContext(MuiPickersContext);
|
64 | checkUtils(utils);
|
65 | return utils;
|
66 | }
|
67 |
|
68 | var useStyles = makeStyles(function (theme) {
|
69 | var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background["default"]);
|
70 | return {
|
71 | toolbarTxt: {
|
72 | color: fade(textColor, 0.54)
|
73 | },
|
74 | toolbarBtnSelected: {
|
75 | color: textColor
|
76 | }
|
77 | };
|
78 | }, {
|
79 | name: 'MuiPickersToolbarText'
|
80 | });
|
81 |
|
82 | var ToolbarText = function ToolbarText(_ref) {
|
83 | var selected = _ref.selected,
|
84 | label = _ref.label,
|
85 | _ref$className = _ref.className,
|
86 | className = _ref$className === void 0 ? null : _ref$className,
|
87 | other = _objectWithoutProperties(_ref, ["selected", "label", "className"]);
|
88 |
|
89 | var classes = useStyles();
|
90 | return createElement(Typography, _extends({
|
91 | children: label,
|
92 | className: clsx(classes.toolbarTxt, className, selected && classes.toolbarBtnSelected)
|
93 | }, other));
|
94 | };
|
95 |
|
96 | var ToolbarButton = function ToolbarButton(_ref) {
|
97 | var classes = _ref.classes,
|
98 | _ref$className = _ref.className,
|
99 | className = _ref$className === void 0 ? null : _ref$className,
|
100 | label = _ref.label,
|
101 | selected = _ref.selected,
|
102 | variant = _ref.variant,
|
103 | align = _ref.align,
|
104 | typographyClassName = _ref.typographyClassName,
|
105 | other = _objectWithoutProperties(_ref, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
|
106 |
|
107 | return createElement(Button, _extends({
|
108 | variant: "text",
|
109 | className: clsx(classes.toolbarBtn, className)
|
110 | }, other), createElement(ToolbarText, {
|
111 | align: align,
|
112 | className: typographyClassName,
|
113 | variant: variant,
|
114 | label: label,
|
115 | selected: selected
|
116 | }));
|
117 | };
|
118 |
|
119 | process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
|
120 | selected: bool.isRequired,
|
121 | label: string.isRequired,
|
122 | classes: any.isRequired,
|
123 | className: string,
|
124 | innerRef: any
|
125 | } : void 0;
|
126 | ToolbarButton.defaultProps = {
|
127 | className: ''
|
128 | };
|
129 | var styles = createStyles({
|
130 | toolbarBtn: {
|
131 | padding: 0,
|
132 | minWidth: '16px',
|
133 | textTransform: 'none'
|
134 | }
|
135 | });
|
136 | var ToolbarButton$1 = withStyles(styles, {
|
137 | name: 'MuiPickersToolbarButton'
|
138 | })(ToolbarButton);
|
139 |
|
140 | var useStyles$1 = makeStyles(function (theme) {
|
141 | return {
|
142 | toolbar: {
|
143 | display: 'flex',
|
144 | flexDirection: 'row',
|
145 | alignItems: 'center',
|
146 | justifyContent: 'center',
|
147 | height: 100,
|
148 | backgroundColor: theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"]
|
149 | },
|
150 | toolbarLandscape: {
|
151 | height: 'auto',
|
152 | maxWidth: 150,
|
153 | padding: 8,
|
154 | justifyContent: 'flex-start'
|
155 | }
|
156 | };
|
157 | }, {
|
158 | name: 'MuiPickersToolbar'
|
159 | });
|
160 |
|
161 | var PickerToolbar = function PickerToolbar(_ref) {
|
162 | var children = _ref.children,
|
163 | isLandscape = _ref.isLandscape,
|
164 | _ref$className = _ref.className,
|
165 | className = _ref$className === void 0 ? null : _ref$className,
|
166 | other = _objectWithoutProperties(_ref, ["children", "isLandscape", "className"]);
|
167 |
|
168 | var classes = useStyles$1();
|
169 | return createElement(Toolbar, _extends({
|
170 | className: clsx(classes.toolbar, className, isLandscape && classes.toolbarLandscape)
|
171 | }, other), children);
|
172 | };
|
173 |
|
174 |
|
175 | function arrayIncludes(array, itemOrItems) {
|
176 | if (Array.isArray(itemOrItems)) {
|
177 | return itemOrItems.every(function (item) {
|
178 | return array.indexOf(item) !== -1;
|
179 | });
|
180 | }
|
181 |
|
182 | return array.indexOf(itemOrItems) !== -1;
|
183 | }
|
184 |
|
185 | var findClosestEnabledDate = function findClosestEnabledDate(_ref) {
|
186 | var date = _ref.date,
|
187 | utils = _ref.utils,
|
188 | minDate = _ref.minDate,
|
189 | maxDate = _ref.maxDate,
|
190 | disableFuture = _ref.disableFuture,
|
191 | disablePast = _ref.disablePast,
|
192 | shouldDisableDate = _ref.shouldDisableDate;
|
193 | var today = utils.startOfDay(utils.date());
|
194 |
|
195 | if (disablePast && utils.isBefore(minDate, today)) {
|
196 | minDate = today;
|
197 | }
|
198 |
|
199 | if (disableFuture && utils.isAfter(maxDate, today)) {
|
200 | maxDate = today;
|
201 | }
|
202 |
|
203 | var forward = date;
|
204 | var backward = date;
|
205 |
|
206 | if (utils.isBefore(date, minDate)) {
|
207 | forward = utils.date(minDate);
|
208 | backward = null;
|
209 | }
|
210 |
|
211 | if (utils.isAfter(date, maxDate)) {
|
212 | if (backward) {
|
213 | backward = utils.date(maxDate);
|
214 | }
|
215 |
|
216 | forward = null;
|
217 | }
|
218 |
|
219 | while (forward || backward) {
|
220 | if (forward && utils.isAfter(forward, maxDate)) {
|
221 | forward = null;
|
222 | }
|
223 |
|
224 | if (backward && utils.isBefore(backward, minDate)) {
|
225 | backward = null;
|
226 | }
|
227 |
|
228 | if (forward) {
|
229 | if (!shouldDisableDate(forward)) {
|
230 | return forward;
|
231 | }
|
232 |
|
233 | forward = utils.addDays(forward, 1);
|
234 | }
|
235 |
|
236 | if (backward) {
|
237 | if (!shouldDisableDate(backward)) {
|
238 | return backward;
|
239 | }
|
240 |
|
241 | backward = utils.addDays(backward, -1);
|
242 | }
|
243 | }
|
244 |
|
245 |
|
246 | return utils.date();
|
247 | };
|
248 | var isYearOnlyView = function isYearOnlyView(views) {
|
249 | return views.length === 1 && views[0] === 'year';
|
250 | };
|
251 | var isYearAndMonthViews = function isYearAndMonthViews(views) {
|
252 | return views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');
|
253 | };
|
254 | var getFormatByViews = function getFormatByViews(views, utils) {
|
255 | if (isYearOnlyView(views)) {
|
256 | return utils.yearFormat;
|
257 | }
|
258 |
|
259 | if (isYearAndMonthViews(views)) {
|
260 | return utils.yearMonthFormat;
|
261 | }
|
262 |
|
263 | return utils.dateFormat;
|
264 | };
|
265 |
|
266 | var useStyles$2 = makeStyles({
|
267 | toolbar: {
|
268 | flexDirection: 'column',
|
269 | alignItems: 'flex-start'
|
270 | },
|
271 | toolbarLandscape: {
|
272 | padding: 16
|
273 | },
|
274 | dateLandscape: {
|
275 | marginRight: 16
|
276 | }
|
277 | }, {
|
278 | name: 'MuiPickersDatePickerRoot'
|
279 | });
|
280 | var DatePickerToolbar = function DatePickerToolbar(_ref) {
|
281 | var date = _ref.date,
|
282 | views = _ref.views,
|
283 | setOpenView = _ref.setOpenView,
|
284 | isLandscape = _ref.isLandscape,
|
285 | openView = _ref.openView;
|
286 | var utils = useUtils();
|
287 | var classes = useStyles$2();
|
288 | var isYearOnly = useMemo(function () {
|
289 | return isYearOnlyView(views);
|
290 | }, [views]);
|
291 | var isYearAndMonth = useMemo(function () {
|
292 | return isYearAndMonthViews(views);
|
293 | }, [views]);
|
294 | return createElement(PickerToolbar, {
|
295 | isLandscape: isLandscape,
|
296 | className: clsx(!isYearOnly && classes.toolbar, isLandscape && classes.toolbarLandscape)
|
297 | }, createElement(ToolbarButton$1, {
|
298 | variant: isYearOnly ? 'h3' : 'subtitle1',
|
299 | onClick: function onClick() {
|
300 | return setOpenView('year');
|
301 | },
|
302 | selected: openView === 'year',
|
303 | label: utils.getYearText(date)
|
304 | }), !isYearOnly && !isYearAndMonth && createElement(ToolbarButton$1, {
|
305 | variant: "h4",
|
306 | selected: openView === 'date',
|
307 | onClick: function onClick() {
|
308 | return setOpenView('date');
|
309 | },
|
310 | align: isLandscape ? 'left' : 'center',
|
311 | label: utils.getDatePickerHeaderText(date),
|
312 | className: clsx(isLandscape && classes.dateLandscape)
|
313 | }), isYearAndMonth && createElement(ToolbarButton$1, {
|
314 | variant: "h4",
|
315 | onClick: function onClick() {
|
316 | return setOpenView('month');
|
317 | },
|
318 | selected: openView === 'month',
|
319 | label: utils.getMonthText(date)
|
320 | }));
|
321 | };
|
322 |
|
323 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
324 |
|
325 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
326 | var PureDateInput = function PureDateInput(_ref) {
|
327 | var inputValue = _ref.inputValue,
|
328 | inputVariant = _ref.inputVariant,
|
329 | validationError = _ref.validationError,
|
330 | InputProps = _ref.InputProps,
|
331 | onOpen = _ref.openPicker,
|
332 | _ref$TextFieldCompone = _ref.TextFieldComponent,
|
333 | TextFieldComponent = _ref$TextFieldCompone === void 0 ? TextField : _ref$TextFieldCompone,
|
334 | other = _objectWithoutProperties(_ref, ["inputValue", "inputVariant", "validationError", "InputProps", "openPicker", "TextFieldComponent"]);
|
335 |
|
336 | var PureDateInputProps = useMemo(function () {
|
337 | return _objectSpread({}, InputProps, {
|
338 | readOnly: true
|
339 | });
|
340 | }, [InputProps]);
|
341 | return createElement(TextFieldComponent, _extends({
|
342 | error: Boolean(validationError),
|
343 | helperText: validationError
|
344 | }, other, {
|
345 |
|
346 | onClick: onOpen,
|
347 | value: inputValue,
|
348 | variant: inputVariant,
|
349 | InputProps: PureDateInputProps,
|
350 | onKeyDown: function onKeyDown(e) {
|
351 |
|
352 | if (e.keyCode === 32) {
|
353 | e.stopPropagation();
|
354 | onOpen();
|
355 | }
|
356 | }
|
357 | }));
|
358 | };
|
359 | PureDateInput.displayName = 'PureDateInput';
|
360 |
|
361 | var KeyboardIcon = function KeyboardIcon(props) {
|
362 | return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
|
363 | d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
|
364 | }), React__default.createElement("path", {
|
365 | fill: "none",
|
366 | d: "M0 0h24v24H0z"
|
367 | }));
|
368 | };
|
369 |
|
370 | var getDisplayDate = function getDisplayDate(value, format, utils, isEmpty, _ref) {
|
371 | var invalidLabel = _ref.invalidLabel,
|
372 | emptyLabel = _ref.emptyLabel,
|
373 | labelFunc = _ref.labelFunc;
|
374 | var date = utils.date(value);
|
375 |
|
376 | if (labelFunc) {
|
377 | return labelFunc(isEmpty ? null : date, invalidLabel);
|
378 | }
|
379 |
|
380 | if (isEmpty) {
|
381 | return emptyLabel || '';
|
382 | }
|
383 |
|
384 | return utils.isValid(date) ? utils.format(date, format) : invalidLabel;
|
385 | };
|
386 |
|
387 | var getComparisonMaxDate = function getComparisonMaxDate(utils, strictCompareDates, date) {
|
388 | if (strictCompareDates) {
|
389 | return date;
|
390 | }
|
391 |
|
392 | return utils.endOfDay(date);
|
393 | };
|
394 |
|
395 | var getComparisonMinDate = function getComparisonMinDate(utils, strictCompareDates, date) {
|
396 | if (strictCompareDates) {
|
397 | return date;
|
398 | }
|
399 |
|
400 | return utils.startOfDay(date);
|
401 | };
|
402 |
|
403 | var validate = function validate(value, utils, _ref2) {
|
404 | var maxDate = _ref2.maxDate,
|
405 | minDate = _ref2.minDate,
|
406 | disablePast = _ref2.disablePast,
|
407 | disableFuture = _ref2.disableFuture,
|
408 | maxDateMessage = _ref2.maxDateMessage,
|
409 | minDateMessage = _ref2.minDateMessage,
|
410 | invalidDateMessage = _ref2.invalidDateMessage,
|
411 | strictCompareDates = _ref2.strictCompareDates;
|
412 | var parsedValue = utils.date(value);
|
413 |
|
414 | if (value === null) {
|
415 | return '';
|
416 | }
|
417 |
|
418 | if (!utils.isValid(value)) {
|
419 | return invalidDateMessage;
|
420 | }
|
421 |
|
422 | if (maxDate && utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date(maxDate)))) {
|
423 | return maxDateMessage;
|
424 | }
|
425 |
|
426 | if (disableFuture && utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date()))) {
|
427 | return maxDateMessage;
|
428 | }
|
429 |
|
430 | if (minDate && utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date(minDate)))) {
|
431 | return minDateMessage;
|
432 | }
|
433 |
|
434 | if (disablePast && utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date()))) {
|
435 | return minDateMessage;
|
436 | }
|
437 |
|
438 | return '';
|
439 | };
|
440 | function pick12hOr24hFormat(userFormat) {
|
441 | var ampm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
442 | var formats = arguments.length > 2 ? arguments[2] : undefined;
|
443 |
|
444 | if (userFormat) {
|
445 | return userFormat;
|
446 | }
|
447 |
|
448 | return ampm ? formats['12h'] : formats['24h'];
|
449 | }
|
450 | function makeMaskFromFormat(format, numberMaskChar) {
|
451 | return format.replace(/[a-z]/gi, numberMaskChar);
|
452 | }
|
453 | var maskedDateFormatter = function maskedDateFormatter(mask, numberMaskChar, refuse) {
|
454 | return function (value) {
|
455 | var result = '';
|
456 | var parsed = value.replace(refuse, '');
|
457 |
|
458 | if (parsed === '') {
|
459 | return parsed;
|
460 | }
|
461 |
|
462 | var i = 0;
|
463 | var n = 0;
|
464 |
|
465 | while (i < mask.length) {
|
466 | var maskChar = mask[i];
|
467 |
|
468 | if (maskChar === numberMaskChar && n < parsed.length) {
|
469 | var parsedChar = parsed[n];
|
470 | result += parsedChar;
|
471 | n += 1;
|
472 | } else {
|
473 | result += maskChar;
|
474 | }
|
475 |
|
476 | i += 1;
|
477 | }
|
478 |
|
479 | return result;
|
480 | };
|
481 | };
|
482 |
|
483 | function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
484 |
|
485 | function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
486 | var KeyboardDateInput = function KeyboardDateInput(_ref) {
|
487 | var inputValue = _ref.inputValue,
|
488 | inputVariant = _ref.inputVariant,
|
489 | validationError = _ref.validationError,
|
490 | KeyboardButtonProps = _ref.KeyboardButtonProps,
|
491 | InputAdornmentProps = _ref.InputAdornmentProps,
|
492 | onOpen = _ref.openPicker,
|
493 | onChange = _ref.onChange,
|
494 | InputProps = _ref.InputProps,
|
495 | mask = _ref.mask,
|
496 | _ref$maskChar = _ref.maskChar,
|
497 | maskChar = _ref$maskChar === void 0 ? '_' : _ref$maskChar,
|
498 | _ref$refuse = _ref.refuse,
|
499 | refuse = _ref$refuse === void 0 ? /[^\d]+/gi : _ref$refuse,
|
500 | format = _ref.format,
|
501 | keyboardIcon = _ref.keyboardIcon,
|
502 | disabled = _ref.disabled,
|
503 | rifmFormatter = _ref.rifmFormatter,
|
504 | _ref$TextFieldCompone = _ref.TextFieldComponent,
|
505 | TextFieldComponent = _ref$TextFieldCompone === void 0 ? TextField : _ref$TextFieldCompone,
|
506 | other = _objectWithoutProperties(_ref, ["inputValue", "inputVariant", "validationError", "KeyboardButtonProps", "InputAdornmentProps", "openPicker", "onChange", "InputProps", "mask", "maskChar", "refuse", "format", "keyboardIcon", "disabled", "rifmFormatter", "TextFieldComponent"]);
|
507 |
|
508 | var inputMask = mask || makeMaskFromFormat(format, maskChar);
|
509 |
|
510 | var formatter = useMemo(function () {
|
511 | return maskedDateFormatter(inputMask, maskChar, refuse);
|
512 | }, [inputMask, maskChar, refuse]);
|
513 | var position = InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
|
514 |
|
515 | var handleChange = function handleChange(text) {
|
516 | var finalString = text === '' || text === inputMask ? null : text;
|
517 | onChange(finalString);
|
518 | };
|
519 |
|
520 | return createElement(Rifm, {
|
521 | key: inputMask,
|
522 | value: inputValue,
|
523 | onChange: handleChange,
|
524 | refuse: refuse,
|
525 | format: rifmFormatter || formatter
|
526 | }, function (_ref2) {
|
527 | var onChange = _ref2.onChange,
|
528 | value = _ref2.value;
|
529 | return createElement(TextFieldComponent, _extends({
|
530 | disabled: disabled,
|
531 | error: Boolean(validationError),
|
532 | helperText: validationError
|
533 | }, other, {
|
534 | value: value,
|
535 | onChange: onChange,
|
536 | variant: inputVariant,
|
537 | InputProps: _objectSpread$1({}, InputProps, _defineProperty({}, "".concat(position, "Adornment"), createElement(InputAdornment, _extends({
|
538 | position: position
|
539 | }, InputAdornmentProps), createElement(IconButton, _extends({
|
540 | disabled: disabled
|
541 | }, KeyboardButtonProps, {
|
542 | onClick: onOpen
|
543 | }), keyboardIcon))))
|
544 | }));
|
545 | });
|
546 | };
|
547 | KeyboardDateInput.defaultProps = {
|
548 | keyboardIcon: createElement(KeyboardIcon, null)
|
549 | };
|
550 |
|
551 | function useOpenState(_ref) {
|
552 | var open = _ref.open,
|
553 | onOpen = _ref.onOpen,
|
554 | onClose = _ref.onClose;
|
555 | var setIsOpenState = null;
|
556 |
|
557 | if (open === undefined || open === null) {
|
558 |
|
559 | var _useState = useState(false);
|
560 |
|
561 | var _useState2 = _slicedToArray(_useState, 2);
|
562 |
|
563 | open = _useState2[0];
|
564 | setIsOpenState = _useState2[1];
|
565 | }
|
566 |
|
567 |
|
568 | var setIsOpen = useCallback(function (newIsOpen) {
|
569 | setIsOpenState && setIsOpenState(newIsOpen);
|
570 | return newIsOpen ? onOpen && onOpen() : onClose && onClose();
|
571 | }, [onOpen, onClose, setIsOpenState]);
|
572 | return {
|
573 | isOpen: open,
|
574 | setIsOpen: setIsOpen
|
575 | };
|
576 | }
|
577 |
|
578 | var useValueToDate = function useValueToDate(utils, _ref) {
|
579 | var value = _ref.value,
|
580 | initialFocusedDate = _ref.initialFocusedDate;
|
581 | var nowRef = useRef(utils.date());
|
582 | var date = utils.date(value || initialFocusedDate || nowRef.current);
|
583 | return date && utils.isValid(date) ? date : nowRef.current;
|
584 | };
|
585 |
|
586 | function useDateValues(props, options) {
|
587 | var utils = useUtils();
|
588 | var date = useValueToDate(utils, props);
|
589 | var format = props.format || options.getDefaultFormat();
|
590 | return {
|
591 | date: date,
|
592 | format: format
|
593 | };
|
594 | }
|
595 |
|
596 | function usePickerState(props, options) {
|
597 | var autoOk = props.autoOk,
|
598 | disabled = props.disabled,
|
599 | readOnly = props.readOnly,
|
600 | onAccept = props.onAccept,
|
601 | _onChange = props.onChange,
|
602 | onError = props.onError,
|
603 | value = props.value,
|
604 | variant = props.variant;
|
605 | var utils = useUtils();
|
606 |
|
607 | var _useOpenState = useOpenState(props),
|
608 | isOpen = _useOpenState.isOpen,
|
609 | setIsOpen = _useOpenState.setIsOpen;
|
610 |
|
611 | var _useDateValues = useDateValues(props, options),
|
612 | date = _useDateValues.date,
|
613 | format = _useDateValues.format;
|
614 |
|
615 | var _useState = useState(date),
|
616 | _useState2 = _slicedToArray(_useState, 2),
|
617 | pickerDate = _useState2[0],
|
618 | setPickerDate = _useState2[1];
|
619 |
|
620 | useEffect(function () {
|
621 |
|
622 | if (!isOpen && !utils.isEqual(pickerDate, date)) {
|
623 | setPickerDate(date);
|
624 | }
|
625 | }, [date, isOpen, pickerDate, utils]);
|
626 | var acceptDate = useCallback(function (acceptedDate) {
|
627 | _onChange(acceptedDate);
|
628 |
|
629 | if (onAccept) {
|
630 | onAccept(acceptedDate);
|
631 | }
|
632 |
|
633 | setIsOpen(false);
|
634 | }, [onAccept, _onChange, setIsOpen]);
|
635 | var wrapperProps = useMemo(function () {
|
636 | return {
|
637 | format: format,
|
638 | open: isOpen,
|
639 | onClear: function onClear() {
|
640 | return acceptDate(null);
|
641 | },
|
642 | onAccept: function onAccept() {
|
643 | return acceptDate(pickerDate);
|
644 | },
|
645 | onSetToday: function onSetToday() {
|
646 | return setPickerDate(utils.date());
|
647 | },
|
648 | onDismiss: function onDismiss() {
|
649 | setIsOpen(false);
|
650 | }
|
651 | };
|
652 | }, [acceptDate, format, isOpen, pickerDate, setIsOpen, utils]);
|
653 | var pickerProps = useMemo(function () {
|
654 | return {
|
655 | date: pickerDate,
|
656 | onChange: function onChange(newDate) {
|
657 | var isFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
658 | setPickerDate(newDate);
|
659 |
|
660 | if (isFinish && autoOk) {
|
661 | acceptDate(newDate);
|
662 | return;
|
663 | }
|
664 |
|
665 |
|
666 | if (variant === 'inline' || variant === 'static') {
|
667 | _onChange(newDate);
|
668 |
|
669 | onAccept && onAccept(newDate);
|
670 | }
|
671 | }
|
672 | };
|
673 | }, [acceptDate, autoOk, onAccept, _onChange, pickerDate, variant]);
|
674 | var validationError = validate(value, utils, props);
|
675 | useEffect(function () {
|
676 | if (onError) {
|
677 | onError(validationError, value);
|
678 | }
|
679 | }, [onError, validationError, value]);
|
680 | var inputValue = getDisplayDate(date, format, utils, value === null, props);
|
681 | var inputProps = useMemo(function () {
|
682 | return {
|
683 | inputValue: inputValue,
|
684 | validationError: validationError,
|
685 | openPicker: function openPicker() {
|
686 | return !readOnly && !disabled && setIsOpen(true);
|
687 | }
|
688 | };
|
689 | }, [disabled, inputValue, readOnly, setIsOpen, validationError]);
|
690 | var pickerState = {
|
691 | pickerProps: pickerProps,
|
692 | inputProps: inputProps,
|
693 | wrapperProps: wrapperProps
|
694 | };
|
695 | useDebugValue(pickerState);
|
696 | return pickerState;
|
697 | }
|
698 |
|
699 | function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
700 |
|
701 | function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
702 | var date = oneOfType([object, string, number, instanceOf(Date)]);
|
703 | var datePickerView = oneOf(['year', 'month', 'day']);
|
704 |
|
705 |
|
706 | var timePickerDefaultProps = {
|
707 | ampm: true,
|
708 | invalidDateMessage: 'Invalid Time Format'
|
709 | };
|
710 | var datePickerDefaultProps = {
|
711 | minDate: new Date('1900-01-01'),
|
712 | maxDate: new Date('2100-01-01'),
|
713 | invalidDateMessage: 'Invalid Date Format',
|
714 | minDateMessage: 'Date should not be before minimal date',
|
715 | maxDateMessage: 'Date should not be after maximal date',
|
716 | allowKeyboardControl: true
|
717 | };
|
718 | var dateTimePickerDefaultProps = _objectSpread$2({}, timePickerDefaultProps, {}, datePickerDefaultProps, {
|
719 | showTabs: true
|
720 | });
|
721 |
|
722 | function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
723 |
|
724 | function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
725 |
|
726 | function parseInputString(value, utils, format) {
|
727 | try {
|
728 | return utils.parse(value, format);
|
729 | } catch (_unused) {
|
730 | return null;
|
731 | }
|
732 | }
|
733 |
|
734 | function useKeyboardPickerState(props, options) {
|
735 | var _props$format = props.format,
|
736 | format = _props$format === void 0 ? options.getDefaultFormat() : _props$format,
|
737 | inputValue = props.inputValue,
|
738 | _onChange = props.onChange,
|
739 | value = props.value;
|
740 | var utils = useUtils();
|
741 | var displayDate = getDisplayDate(value, format, utils, value === null, props);
|
742 |
|
743 | var _useState = useState(displayDate),
|
744 | _useState2 = _slicedToArray(_useState, 2),
|
745 | innerInputValue = _useState2[0],
|
746 | setInnerInputValue = _useState2[1];
|
747 |
|
748 | var dateValue = inputValue ? parseInputString(inputValue, utils, format) : value;
|
749 | useEffect(function () {
|
750 | if (value === null || utils.isValid(value)) {
|
751 | setInnerInputValue(displayDate);
|
752 | }
|
753 | }, [displayDate, setInnerInputValue, utils, value]);
|
754 | var handleKeyboardChange = useCallback(function (date) {
|
755 | _onChange(date, date === null ? null : utils.format(date, format));
|
756 | }, [format, _onChange, utils]);
|
757 |
|
758 | var _usePickerState = usePickerState(
|
759 | _objectSpread$3({}, props, {
|
760 | value: dateValue,
|
761 | onChange: handleKeyboardChange
|
762 | }), options),
|
763 | innerInputProps = _usePickerState.inputProps,
|
764 | wrapperProps = _usePickerState.wrapperProps,
|
765 | pickerProps = _usePickerState.pickerProps;
|
766 |
|
767 | var inputProps = useMemo(function () {
|
768 | return _objectSpread$3({}, innerInputProps, {
|
769 |
|
770 | format: wrapperProps.format,
|
771 | inputValue: inputValue || innerInputValue,
|
772 | onChange: function onChange(value) {
|
773 | setInnerInputValue(value || '');
|
774 | var date = value === null ? null : utils.parse(value, wrapperProps.format);
|
775 |
|
776 | _onChange(date, value);
|
777 | }
|
778 | });
|
779 | }, [innerInputProps, innerInputValue, inputValue, _onChange, utils, wrapperProps.format]);
|
780 | return {
|
781 | inputProps: inputProps,
|
782 | wrapperProps: wrapperProps,
|
783 | pickerProps: pickerProps
|
784 | };
|
785 | }
|
786 |
|
787 | var useStyles$3 = makeStyles(function (theme) {
|
788 | return {
|
789 | day: {
|
790 | width: 36,
|
791 | height: 36,
|
792 | fontSize: theme.typography.caption.fontSize,
|
793 | margin: '0 2px',
|
794 | color: theme.palette.text.primary,
|
795 | fontWeight: theme.typography.fontWeightMedium,
|
796 | padding: 0
|
797 | },
|
798 | hidden: {
|
799 | opacity: 0,
|
800 | pointerEvents: 'none'
|
801 | },
|
802 | current: {
|
803 | color: theme.palette.primary.main,
|
804 | fontWeight: 600
|
805 | },
|
806 | daySelected: {
|
807 | color: theme.palette.primary.contrastText,
|
808 | backgroundColor: theme.palette.primary.main,
|
809 | fontWeight: theme.typography.fontWeightMedium,
|
810 | '&:hover': {
|
811 | backgroundColor: theme.palette.primary.main
|
812 | }
|
813 | },
|
814 | dayDisabled: {
|
815 | pointerEvents: 'none',
|
816 | color: theme.palette.text.hint
|
817 | }
|
818 | };
|
819 | }, {
|
820 | name: 'MuiPickersDay'
|
821 | });
|
822 | var Day = function Day(_ref) {
|
823 | var children = _ref.children,
|
824 | disabled = _ref.disabled,
|
825 | hidden = _ref.hidden,
|
826 | current = _ref.current,
|
827 | selected = _ref.selected,
|
828 | other = _objectWithoutProperties(_ref, ["children", "disabled", "hidden", "current", "selected"]);
|
829 |
|
830 | var classes = useStyles$3();
|
831 | var className = clsx(classes.day, hidden && classes.hidden, current && classes.current, selected && classes.daySelected, disabled && classes.dayDisabled);
|
832 | return createElement(IconButton, _extends({
|
833 | className: className,
|
834 | tabIndex: hidden || disabled ? -1 : 0
|
835 | }, other), createElement(Typography, {
|
836 | variant: "body2",
|
837 | color: "inherit"
|
838 | }, children));
|
839 | };
|
840 | Day.displayName = 'Day';
|
841 | process.env.NODE_ENV !== "production" ? Day.propTypes = {
|
842 | current: bool,
|
843 | disabled: bool,
|
844 | hidden: bool,
|
845 | selected: bool
|
846 | } : void 0;
|
847 | Day.defaultProps = {
|
848 | disabled: false,
|
849 | hidden: false,
|
850 | current: false,
|
851 | selected: false
|
852 | };
|
853 |
|
854 | var DayWrapper = function DayWrapper(_ref) {
|
855 | var children = _ref.children,
|
856 | value = _ref.value,
|
857 | disabled = _ref.disabled,
|
858 | onSelect = _ref.onSelect,
|
859 | dayInCurrentMonth = _ref.dayInCurrentMonth,
|
860 | other = _objectWithoutProperties(_ref, ["children", "value", "disabled", "onSelect", "dayInCurrentMonth"]);
|
861 |
|
862 | var handleClick = useCallback(function () {
|
863 | return onSelect(value);
|
864 | }, [onSelect, value]);
|
865 | return createElement("div", _extends({
|
866 | role: "presentation",
|
867 | onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
|
868 | onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
|
869 | }, other), children);
|
870 | };
|
871 |
|
872 | var animationDuration = 350;
|
873 | var useStyles$4 = makeStyles(function (theme) {
|
874 | var slideTransition = theme.transitions.create('transform', {
|
875 | duration: animationDuration,
|
876 | easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
|
877 | });
|
878 | return {
|
879 | transitionContainer: {
|
880 | display: 'block',
|
881 | position: 'relative',
|
882 | '& > *': {
|
883 | position: 'absolute',
|
884 | top: 0,
|
885 | right: 0,
|
886 | left: 0
|
887 | }
|
888 | },
|
889 | 'slideEnter-left': {
|
890 | willChange: 'transform',
|
891 | transform: 'translate(100%)'
|
892 | },
|
893 | 'slideEnter-right': {
|
894 | willChange: 'transform',
|
895 | transform: 'translate(-100%)'
|
896 | },
|
897 | slideEnterActive: {
|
898 | transform: 'translate(0%)',
|
899 | transition: slideTransition
|
900 | },
|
901 | slideExit: {
|
902 | transform: 'translate(0%)'
|
903 | },
|
904 | 'slideExitActiveLeft-left': {
|
905 | willChange: 'transform',
|
906 | transform: 'translate(-200%)',
|
907 | transition: slideTransition
|
908 | },
|
909 | 'slideExitActiveLeft-right': {
|
910 | willChange: 'transform',
|
911 | transform: 'translate(200%)',
|
912 | transition: slideTransition
|
913 | }
|
914 | };
|
915 | }, {
|
916 | name: 'MuiPickersSlideTransition'
|
917 | });
|
918 |
|
919 | var SlideTransition = function SlideTransition(_ref) {
|
920 | var children = _ref.children,
|
921 | transKey = _ref.transKey,
|
922 | slideDirection = _ref.slideDirection,
|
923 | _ref$className = _ref.className,
|
924 | className = _ref$className === void 0 ? null : _ref$className;
|
925 | var classes = useStyles$4();
|
926 | var transitionClasses = {
|
927 | exit: classes.slideExit,
|
928 | enterActive: classes.slideEnterActive,
|
929 |
|
930 | enter: classes['slideEnter-' + slideDirection],
|
931 |
|
932 | exitActive: classes['slideExitActiveLeft-' + slideDirection]
|
933 | };
|
934 | return createElement(TransitionGroup, {
|
935 | className: clsx(classes.transitionContainer, className),
|
936 | childFactory: function childFactory(element) {
|
937 | return cloneElement(element, {
|
938 | classNames: transitionClasses
|
939 | });
|
940 | }
|
941 | }, createElement(CSSTransition, {
|
942 | mountOnEnter: true,
|
943 | unmountOnExit: true,
|
944 | key: transKey + slideDirection,
|
945 | timeout: animationDuration,
|
946 | classNames: transitionClasses,
|
947 | children: children
|
948 | }));
|
949 | };
|
950 |
|
951 | var ArrowLeftIcon = function ArrowLeftIcon(props) {
|
952 | return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
|
953 | d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
|
954 | }), React__default.createElement("path", {
|
955 | fill: "none",
|
956 | d: "M0 0h24v24H0V0z"
|
957 | }));
|
958 | };
|
959 |
|
960 | var ArrowRightIcon = function ArrowRightIcon(props) {
|
961 | return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
|
962 | d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
|
963 | }), React__default.createElement("path", {
|
964 | fill: "none",
|
965 | d: "M0 0h24v24H0V0z"
|
966 | }));
|
967 | };
|
968 |
|
969 | var useStyles$5 = makeStyles(function (theme) {
|
970 | return {
|
971 | switchHeader: {
|
972 | display: 'flex',
|
973 | justifyContent: 'space-between',
|
974 | alignItems: 'center',
|
975 | marginTop: theme.spacing(0.5),
|
976 | marginBottom: theme.spacing(1)
|
977 | },
|
978 | transitionContainer: {
|
979 | width: '100%',
|
980 | overflow: 'hidden',
|
981 | height: 23
|
982 | },
|
983 | iconButton: {
|
984 | zIndex: 1,
|
985 | backgroundColor: theme.palette.background.paper
|
986 | },
|
987 | daysHeader: {
|
988 | display: 'flex',
|
989 | justifyContent: 'center',
|
990 | alignItems: 'center',
|
991 | maxHeight: 16
|
992 | },
|
993 | dayLabel: {
|
994 | width: 36,
|
995 | margin: '0 2px',
|
996 | textAlign: 'center',
|
997 | color: theme.palette.text.hint
|
998 | }
|
999 | };
|
1000 | }, {
|
1001 | name: 'MuiPickersCalendarHeader'
|
1002 | });
|
1003 | var CalendarHeader = function CalendarHeader(_ref) {
|
1004 | var currentMonth = _ref.currentMonth,
|
1005 | onMonthChange = _ref.onMonthChange,
|
1006 | leftArrowIcon = _ref.leftArrowIcon,
|
1007 | rightArrowIcon = _ref.rightArrowIcon,
|
1008 | leftArrowButtonProps = _ref.leftArrowButtonProps,
|
1009 | rightArrowButtonProps = _ref.rightArrowButtonProps,
|
1010 | disablePrevMonth = _ref.disablePrevMonth,
|
1011 | disableNextMonth = _ref.disableNextMonth,
|
1012 | slideDirection = _ref.slideDirection;
|
1013 | var utils = useUtils();
|
1014 | var classes = useStyles$5();
|
1015 | var theme = useTheme();
|
1016 | var rtl = theme.direction === 'rtl';
|
1017 |
|
1018 | var selectNextMonth = function selectNextMonth() {
|
1019 | return onMonthChange(utils.getNextMonth(currentMonth), 'left');
|
1020 | };
|
1021 |
|
1022 | var selectPreviousMonth = function selectPreviousMonth() {
|
1023 | return onMonthChange(utils.getPreviousMonth(currentMonth), 'right');
|
1024 | };
|
1025 |
|
1026 | return createElement("div", null, createElement("div", {
|
1027 | className: classes.switchHeader
|
1028 | }, createElement(IconButton, _extends({}, leftArrowButtonProps, {
|
1029 | disabled: disablePrevMonth,
|
1030 | onClick: selectPreviousMonth,
|
1031 | className: classes.iconButton
|
1032 | }), rtl ? rightArrowIcon : leftArrowIcon), createElement(SlideTransition, {
|
1033 | slideDirection: slideDirection,
|
1034 | transKey: currentMonth.toString(),
|
1035 | className: classes.transitionContainer
|
1036 | }, createElement(Typography, {
|
1037 | align: "center",
|
1038 | variant: "body1"
|
1039 | }, utils.getCalendarHeaderText(currentMonth))), createElement(IconButton, _extends({}, rightArrowButtonProps, {
|
1040 | disabled: disableNextMonth,
|
1041 | onClick: selectNextMonth,
|
1042 | className: classes.iconButton
|
1043 | }), rtl ? leftArrowIcon : rightArrowIcon)), createElement("div", {
|
1044 | className: classes.daysHeader
|
1045 | }, utils.getWeekdays().map(function (day, index) {
|
1046 | return createElement(Typography, {
|
1047 | key: index
|
1048 | ,
|
1049 | variant: "caption",
|
1050 | className: classes.dayLabel
|
1051 | }, day);
|
1052 | })));
|
1053 | };
|
1054 | CalendarHeader.displayName = 'CalendarHeader';
|
1055 | process.env.NODE_ENV !== "production" ? CalendarHeader.propTypes = {
|
1056 | leftArrowIcon: node,
|
1057 | rightArrowIcon: node,
|
1058 | disablePrevMonth: bool,
|
1059 | disableNextMonth: bool
|
1060 | } : void 0;
|
1061 | CalendarHeader.defaultProps = {
|
1062 | leftArrowIcon: createElement(ArrowLeftIcon, null),
|
1063 | rightArrowIcon: createElement(ArrowRightIcon, null),
|
1064 | disablePrevMonth: false,
|
1065 | disableNextMonth: false
|
1066 | };
|
1067 |
|
1068 | var DIALOG_WIDTH = 310;
|
1069 | var DIALOG_WIDTH_WIDER = 325;
|
1070 | var VIEW_HEIGHT = 305;
|
1071 |
|
1072 | var useStyles$6 = makeStyles(function (theme) {
|
1073 | return {
|
1074 | staticWrapperRoot: {
|
1075 | overflow: 'hidden',
|
1076 | minWidth: DIALOG_WIDTH,
|
1077 | display: 'flex',
|
1078 | flexDirection: 'column',
|
1079 | backgroundColor: theme.palette.background.paper
|
1080 | }
|
1081 | };
|
1082 | }, {
|
1083 | name: 'MuiPickersStaticWrapper'
|
1084 | });
|
1085 | var StaticWrapper = function StaticWrapper(_ref) {
|
1086 | var children = _ref.children;
|
1087 | var classes = useStyles$6();
|
1088 | return createElement("div", {
|
1089 | className: classes.staticWrapperRoot,
|
1090 | children: children
|
1091 | });
|
1092 | };
|
1093 |
|
1094 | var ModalDialog = function ModalDialog(_ref) {
|
1095 | var children = _ref.children,
|
1096 | classes = _ref.classes,
|
1097 | onAccept = _ref.onAccept,
|
1098 | onDismiss = _ref.onDismiss,
|
1099 | onClear = _ref.onClear,
|
1100 | onSetToday = _ref.onSetToday,
|
1101 | okLabel = _ref.okLabel,
|
1102 | cancelLabel = _ref.cancelLabel,
|
1103 | clearLabel = _ref.clearLabel,
|
1104 | todayLabel = _ref.todayLabel,
|
1105 | clearable = _ref.clearable,
|
1106 | showTodayButton = _ref.showTodayButton,
|
1107 | showTabs = _ref.showTabs,
|
1108 | wider = _ref.wider,
|
1109 | other = _objectWithoutProperties(_ref, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
|
1110 |
|
1111 | return createElement(Dialog, _extends({
|
1112 | role: "dialog",
|
1113 | onClose: onDismiss,
|
1114 | classes: {
|
1115 | paper: clsx(classes.dialogRoot, wider && classes.dialogRootWider)
|
1116 | }
|
1117 | }, other), createElement(DialogContent, {
|
1118 | children: children,
|
1119 | className: classes.dialog
|
1120 | }), createElement(DialogActions, {
|
1121 | classes: {
|
1122 | root: clsx((clearable || showTodayButton) && classes.withAdditionalAction)
|
1123 | }
|
1124 | }, clearable && createElement(Button, {
|
1125 | color: "primary",
|
1126 | onClick: onClear
|
1127 | }, clearLabel), showTodayButton && createElement(Button, {
|
1128 | color: "primary",
|
1129 | onClick: onSetToday
|
1130 | }, todayLabel), cancelLabel && createElement(Button, {
|
1131 | color: "primary",
|
1132 | onClick: onDismiss
|
1133 | }, cancelLabel), okLabel && createElement(Button, {
|
1134 | color: "primary",
|
1135 | onClick: onAccept
|
1136 | }, okLabel)));
|
1137 | };
|
1138 | ModalDialog.displayName = 'ModalDialog';
|
1139 | var styles$1 = createStyles({
|
1140 | dialogRoot: {
|
1141 | minWidth: DIALOG_WIDTH
|
1142 | },
|
1143 | dialogRootWider: {
|
1144 | minWidth: DIALOG_WIDTH_WIDER
|
1145 | },
|
1146 | dialog: {
|
1147 | '&:first-child': {
|
1148 | padding: 0
|
1149 | }
|
1150 | },
|
1151 | withAdditionalAction: {
|
1152 |
|
1153 |
|
1154 | justifyContent: 'flex-start',
|
1155 | '& > *:first-child': {
|
1156 | marginRight: 'auto'
|
1157 | }
|
1158 | }
|
1159 | });
|
1160 | var ModalDialog$1 = withStyles(styles$1, {
|
1161 | name: 'MuiPickersModal'
|
1162 | })(ModalDialog);
|
1163 |
|
1164 | var useIsomorphicEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
|
1165 | function runKeyHandler(e, keyHandlers) {
|
1166 | var handler = keyHandlers[e.key];
|
1167 |
|
1168 | if (handler) {
|
1169 | handler();
|
1170 |
|
1171 | e.preventDefault();
|
1172 | }
|
1173 | }
|
1174 | function useKeyDown(active, keyHandlers) {
|
1175 | var keyHandlersRef = useRef(keyHandlers);
|
1176 | keyHandlersRef.current = keyHandlers;
|
1177 | useIsomorphicEffect(function () {
|
1178 | if (active) {
|
1179 | var handleKeyDown = function handleKeyDown(event) {
|
1180 | runKeyHandler(event, keyHandlersRef.current);
|
1181 | };
|
1182 |
|
1183 | window.addEventListener('keydown', handleKeyDown);
|
1184 | return function () {
|
1185 | window.removeEventListener('keydown', handleKeyDown);
|
1186 | };
|
1187 | }
|
1188 | }, [active]);
|
1189 | }
|
1190 |
|
1191 | var ModalWrapper = function ModalWrapper(_ref) {
|
1192 | var open = _ref.open,
|
1193 | children = _ref.children,
|
1194 | okLabel = _ref.okLabel,
|
1195 | cancelLabel = _ref.cancelLabel,
|
1196 | clearLabel = _ref.clearLabel,
|
1197 | todayLabel = _ref.todayLabel,
|
1198 | showTodayButton = _ref.showTodayButton,
|
1199 | clearable = _ref.clearable,
|
1200 | DialogProps = _ref.DialogProps,
|
1201 | showTabs = _ref.showTabs,
|
1202 | wider = _ref.wider,
|
1203 | InputComponent = _ref.InputComponent,
|
1204 | DateInputProps = _ref.DateInputProps,
|
1205 | onClear = _ref.onClear,
|
1206 | onAccept = _ref.onAccept,
|
1207 | onDismiss = _ref.onDismiss,
|
1208 | onSetToday = _ref.onSetToday,
|
1209 | other = _objectWithoutProperties(_ref, ["open", "children", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "showTodayButton", "clearable", "DialogProps", "showTabs", "wider", "InputComponent", "DateInputProps", "onClear", "onAccept", "onDismiss", "onSetToday"]);
|
1210 |
|
1211 | useKeyDown(open, {
|
1212 | Enter: onAccept
|
1213 | });
|
1214 | return createElement(Fragment, null, createElement(InputComponent, _extends({}, other, DateInputProps)), createElement(ModalDialog$1, _extends({
|
1215 | wider: wider,
|
1216 | showTabs: showTabs,
|
1217 | open: open,
|
1218 | onClear: onClear,
|
1219 | onAccept: onAccept,
|
1220 | onDismiss: onDismiss,
|
1221 | onSetToday: onSetToday,
|
1222 | clearLabel: clearLabel,
|
1223 | todayLabel: todayLabel,
|
1224 | okLabel: okLabel,
|
1225 | cancelLabel: cancelLabel,
|
1226 | clearable: clearable,
|
1227 | showTodayButton: showTodayButton,
|
1228 | children: children
|
1229 | }, DialogProps)));
|
1230 | };
|
1231 | process.env.NODE_ENV !== "production" ? ModalWrapper.propTypes = {
|
1232 | okLabel: node,
|
1233 | cancelLabel: node,
|
1234 | clearLabel: node,
|
1235 | clearable: bool,
|
1236 | todayLabel: node,
|
1237 | showTodayButton: bool,
|
1238 | DialogProps: object
|
1239 | } : void 0;
|
1240 | ModalWrapper.defaultProps = {
|
1241 | okLabel: 'OK',
|
1242 | cancelLabel: 'Cancel',
|
1243 | clearLabel: 'Clear',
|
1244 | todayLabel: 'Today',
|
1245 | clearable: false,
|
1246 | showTodayButton: false
|
1247 | };
|
1248 |
|
1249 | var InlineWrapper = function InlineWrapper(_ref) {
|
1250 | var open = _ref.open,
|
1251 | wider = _ref.wider,
|
1252 | children = _ref.children,
|
1253 | PopoverProps = _ref.PopoverProps,
|
1254 | onClear = _ref.onClear,
|
1255 | onDismiss = _ref.onDismiss,
|
1256 | onSetToday = _ref.onSetToday,
|
1257 | onAccept = _ref.onAccept,
|
1258 | showTabs = _ref.showTabs,
|
1259 | DateInputProps = _ref.DateInputProps,
|
1260 | InputComponent = _ref.InputComponent,
|
1261 | other = _objectWithoutProperties(_ref, ["open", "wider", "children", "PopoverProps", "onClear", "onDismiss", "onSetToday", "onAccept", "showTabs", "DateInputProps", "InputComponent"]);
|
1262 |
|
1263 | var ref = useRef();
|
1264 | useKeyDown(open, {
|
1265 | Enter: onAccept
|
1266 | });
|
1267 | return createElement(Fragment, null, createElement(InputComponent, _extends({}, other, DateInputProps, {
|
1268 | inputRef: ref
|
1269 | })), createElement(Popover, _extends({
|
1270 | open: open,
|
1271 | onClose: onDismiss,
|
1272 | anchorEl: ref.current,
|
1273 | anchorOrigin: {
|
1274 | vertical: 'bottom',
|
1275 | horizontal: 'center'
|
1276 | },
|
1277 | transformOrigin: {
|
1278 | vertical: 'top',
|
1279 | horizontal: 'center'
|
1280 | },
|
1281 | children: children
|
1282 | }, PopoverProps)));
|
1283 | };
|
1284 | process.env.NODE_ENV !== "production" ? InlineWrapper.propTypes = {
|
1285 | onOpen: func,
|
1286 | onClose: func,
|
1287 | PopoverProps: object
|
1288 | } : void 0;
|
1289 |
|
1290 | function getWrapperFromVariant(variant) {
|
1291 | switch (variant) {
|
1292 | case 'inline':
|
1293 | return InlineWrapper;
|
1294 |
|
1295 | case 'static':
|
1296 | return StaticWrapper;
|
1297 |
|
1298 | default:
|
1299 | return ModalWrapper;
|
1300 | }
|
1301 | }
|
1302 | var VariantContext = createContext(null);
|
1303 | var Wrapper = function Wrapper(_ref) {
|
1304 | var variant = _ref.variant,
|
1305 | props = _objectWithoutProperties(_ref, ["variant"]);
|
1306 |
|
1307 | var Component = getWrapperFromVariant(variant);
|
1308 | return createElement(VariantContext.Provider, {
|
1309 | value: variant || 'dialog'
|
1310 | }, createElement(Component, props));
|
1311 | };
|
1312 |
|
1313 | var withUtils = function withUtils() {
|
1314 | return function (Component) {
|
1315 | var WithUtils = function WithUtils(props) {
|
1316 | var utils = useUtils();
|
1317 | return createElement(Component, _extends({
|
1318 | utils: utils
|
1319 | }, props));
|
1320 | };
|
1321 |
|
1322 | WithUtils.displayName = "WithUtils(".concat(Component.displayName || Component.name, ")");
|
1323 | return WithUtils;
|
1324 | };
|
1325 | };
|
1326 |
|
1327 | var KeyDownListener = function KeyDownListener(_ref) {
|
1328 | var onKeyDown = _ref.onKeyDown;
|
1329 | useEffect(function () {
|
1330 | window.addEventListener('keydown', onKeyDown);
|
1331 | return function () {
|
1332 | window.removeEventListener('keydown', onKeyDown);
|
1333 | };
|
1334 | }, [onKeyDown]);
|
1335 | return null;
|
1336 | };
|
1337 |
|
1338 | var Calendar =
|
1339 |
|
1340 | function (_React$Component) {
|
1341 | _inherits(Calendar, _React$Component);
|
1342 |
|
1343 | function Calendar() {
|
1344 | var _getPrototypeOf2;
|
1345 |
|
1346 | var _this;
|
1347 |
|
1348 | _classCallCheck(this, Calendar);
|
1349 |
|
1350 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
1351 | args[_key] = arguments[_key];
|
1352 | }
|
1353 |
|
1354 | _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Calendar)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
1355 | _this.state = {
|
1356 | slideDirection: 'left',
|
1357 | currentMonth: _this.props.utils.startOfMonth(_this.props.date),
|
1358 | loadingQueue: 0
|
1359 | };
|
1360 |
|
1361 | _this.pushToLoadingQueue = function () {
|
1362 | var loadingQueue = _this.state.loadingQueue + 1;
|
1363 |
|
1364 | _this.setState({
|
1365 | loadingQueue: loadingQueue
|
1366 | });
|
1367 | };
|
1368 |
|
1369 | _this.popFromLoadingQueue = function () {
|
1370 | var loadingQueue = _this.state.loadingQueue;
|
1371 | loadingQueue = loadingQueue <= 0 ? 0 : loadingQueue - 1;
|
1372 |
|
1373 | _this.setState({
|
1374 | loadingQueue: loadingQueue
|
1375 | });
|
1376 | };
|
1377 |
|
1378 | _this.handleChangeMonth = function (newMonth, slideDirection) {
|
1379 | _this.setState({
|
1380 | currentMonth: newMonth,
|
1381 | slideDirection: slideDirection
|
1382 | });
|
1383 |
|
1384 | if (_this.props.onMonthChange) {
|
1385 | var returnVal = _this.props.onMonthChange(newMonth);
|
1386 |
|
1387 | if (returnVal) {
|
1388 | _this.pushToLoadingQueue();
|
1389 |
|
1390 | returnVal.then(function () {
|
1391 | _this.popFromLoadingQueue();
|
1392 | });
|
1393 | }
|
1394 | }
|
1395 | };
|
1396 |
|
1397 | _this.validateMinMaxDate = function (day) {
|
1398 | var _this$props = _this.props,
|
1399 | minDate = _this$props.minDate,
|
1400 | maxDate = _this$props.maxDate,
|
1401 | utils = _this$props.utils,
|
1402 | disableFuture = _this$props.disableFuture,
|
1403 | disablePast = _this$props.disablePast;
|
1404 | var now = utils.date();
|
1405 | return Boolean(disableFuture && utils.isAfterDay(day, now) || disablePast && utils.isBeforeDay(day, now) || minDate && utils.isBeforeDay(day, utils.date(minDate)) || maxDate && utils.isAfterDay(day, utils.date(maxDate)));
|
1406 | };
|
1407 |
|
1408 | _this.shouldDisablePrevMonth = function () {
|
1409 | var _this$props2 = _this.props,
|
1410 | utils = _this$props2.utils,
|
1411 | disablePast = _this$props2.disablePast,
|
1412 | minDate = _this$props2.minDate;
|
1413 | var now = utils.date();
|
1414 | var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, utils.date(minDate)) ? now : utils.date(minDate));
|
1415 | return !utils.isBefore(firstEnabledMonth, _this.state.currentMonth);
|
1416 | };
|
1417 |
|
1418 | _this.shouldDisableNextMonth = function () {
|
1419 | var _this$props3 = _this.props,
|
1420 | utils = _this$props3.utils,
|
1421 | disableFuture = _this$props3.disableFuture,
|
1422 | maxDate = _this$props3.maxDate;
|
1423 | var now = utils.date();
|
1424 | var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, utils.date(maxDate)) ? now : utils.date(maxDate));
|
1425 | return !utils.isAfter(lastEnabledMonth, _this.state.currentMonth);
|
1426 | };
|
1427 |
|
1428 | _this.shouldDisableDate = function (day) {
|
1429 | var shouldDisableDate = _this.props.shouldDisableDate;
|
1430 | return _this.validateMinMaxDate(day) || Boolean(shouldDisableDate && shouldDisableDate(day));
|
1431 | };
|
1432 |
|
1433 | _this.handleDaySelect = function (day) {
|
1434 | var isFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
1435 | var _this$props4 = _this.props,
|
1436 | date = _this$props4.date,
|
1437 | utils = _this$props4.utils;
|
1438 |
|
1439 | _this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);
|
1440 | };
|
1441 |
|
1442 | _this.moveToDay = function (day) {
|
1443 | var utils = _this.props.utils;
|
1444 |
|
1445 | if (day && !_this.shouldDisableDate(day)) {
|
1446 | if (utils.getMonth(day) !== utils.getMonth(_this.state.currentMonth)) {
|
1447 | _this.handleChangeMonth(utils.startOfMonth(day), 'left');
|
1448 | }
|
1449 |
|
1450 | _this.handleDaySelect(day, false);
|
1451 | }
|
1452 | };
|
1453 |
|
1454 | _this.handleKeyDown = function (event) {
|
1455 | var _this$props5 = _this.props,
|
1456 | theme = _this$props5.theme,
|
1457 | date = _this$props5.date,
|
1458 | utils = _this$props5.utils;
|
1459 | runKeyHandler(event, {
|
1460 | ArrowUp: function ArrowUp() {
|
1461 | return _this.moveToDay(utils.addDays(date, -7));
|
1462 | },
|
1463 | ArrowDown: function ArrowDown() {
|
1464 | return _this.moveToDay(utils.addDays(date, 7));
|
1465 | },
|
1466 | ArrowLeft: function ArrowLeft() {
|
1467 | return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1));
|
1468 | },
|
1469 | ArrowRight: function ArrowRight() {
|
1470 | return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1));
|
1471 | }
|
1472 | });
|
1473 | };
|
1474 |
|
1475 | _this.renderWeeks = function () {
|
1476 | var _this$props6 = _this.props,
|
1477 | utils = _this$props6.utils,
|
1478 | classes = _this$props6.classes;
|
1479 | var weeks = utils.getWeekArray(_this.state.currentMonth);
|
1480 | return weeks.map(function (week) {
|
1481 | return createElement("div", {
|
1482 | key: "week-".concat(week[0].toString()),
|
1483 | className: classes.week
|
1484 | }, _this.renderDays(week));
|
1485 | });
|
1486 | };
|
1487 |
|
1488 | _this.renderDays = function (week) {
|
1489 | var _this$props7 = _this.props,
|
1490 | date = _this$props7.date,
|
1491 | renderDay = _this$props7.renderDay,
|
1492 | utils = _this$props7.utils;
|
1493 | var now = utils.date();
|
1494 | var selectedDate = utils.startOfDay(date);
|
1495 | var currentMonthNumber = utils.getMonth(_this.state.currentMonth);
|
1496 | return week.map(function (day) {
|
1497 | var disabled = _this.shouldDisableDate(day);
|
1498 |
|
1499 | var isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
|
1500 | var dayComponent = createElement(Day, {
|
1501 | disabled: disabled,
|
1502 | current: utils.isSameDay(day, now),
|
1503 | hidden: !isDayInCurrentMonth,
|
1504 | selected: utils.isSameDay(selectedDate, day)
|
1505 | }, utils.getDayText(day));
|
1506 |
|
1507 | if (renderDay) {
|
1508 | dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);
|
1509 | }
|
1510 |
|
1511 | return createElement(DayWrapper, {
|
1512 | value: day,
|
1513 | key: day.toString(),
|
1514 | disabled: disabled,
|
1515 | dayInCurrentMonth: isDayInCurrentMonth,
|
1516 | onSelect: _this.handleDaySelect
|
1517 | }, dayComponent);
|
1518 | });
|
1519 | };
|
1520 |
|
1521 | return _this;
|
1522 | }
|
1523 |
|
1524 | _createClass(Calendar, [{
|
1525 | key: "componentDidMount",
|
1526 | value: function componentDidMount() {
|
1527 | var _this$props8 = this.props,
|
1528 | date = _this$props8.date,
|
1529 | minDate = _this$props8.minDate,
|
1530 | maxDate = _this$props8.maxDate,
|
1531 | utils = _this$props8.utils,
|
1532 | disablePast = _this$props8.disablePast,
|
1533 | disableFuture = _this$props8.disableFuture;
|
1534 |
|
1535 | if (this.shouldDisableDate(date)) {
|
1536 | var closestEnabledDate = findClosestEnabledDate({
|
1537 | date: date,
|
1538 | utils: utils,
|
1539 | minDate: utils.date(minDate),
|
1540 | maxDate: utils.date(maxDate),
|
1541 | disablePast: Boolean(disablePast),
|
1542 | disableFuture: Boolean(disableFuture),
|
1543 | shouldDisableDate: this.shouldDisableDate
|
1544 | });
|
1545 | this.handleDaySelect(closestEnabledDate, false);
|
1546 | }
|
1547 | }
|
1548 | }, {
|
1549 | key: "render",
|
1550 | value: function render() {
|
1551 | var _this$state = this.state,
|
1552 | currentMonth = _this$state.currentMonth,
|
1553 | slideDirection = _this$state.slideDirection;
|
1554 | var _this$props9 = this.props,
|
1555 | classes = _this$props9.classes,
|
1556 | allowKeyboardControl = _this$props9.allowKeyboardControl,
|
1557 | leftArrowButtonProps = _this$props9.leftArrowButtonProps,
|
1558 | leftArrowIcon = _this$props9.leftArrowIcon,
|
1559 | rightArrowButtonProps = _this$props9.rightArrowButtonProps,
|
1560 | rightArrowIcon = _this$props9.rightArrowIcon,
|
1561 | loadingIndicator = _this$props9.loadingIndicator;
|
1562 | var loadingElement = loadingIndicator ? loadingIndicator : createElement(CircularProgress, null);
|
1563 | return createElement(Fragment, null, allowKeyboardControl && this.context !== 'static' && createElement(KeyDownListener, {
|
1564 | onKeyDown: this.handleKeyDown
|
1565 | }), createElement(CalendarHeader, {
|
1566 | currentMonth: currentMonth,
|
1567 | slideDirection: slideDirection,
|
1568 | onMonthChange: this.handleChangeMonth,
|
1569 | leftArrowIcon: leftArrowIcon,
|
1570 | leftArrowButtonProps: leftArrowButtonProps,
|
1571 | rightArrowIcon: rightArrowIcon,
|
1572 | rightArrowButtonProps: rightArrowButtonProps,
|
1573 | disablePrevMonth: this.shouldDisablePrevMonth(),
|
1574 | disableNextMonth: this.shouldDisableNextMonth()
|
1575 | }), createElement(SlideTransition, {
|
1576 | slideDirection: slideDirection,
|
1577 | transKey: currentMonth.toString(),
|
1578 | className: classes.transitionContainer
|
1579 | }, createElement(Fragment, null, this.state.loadingQueue > 0 && createElement("div", {
|
1580 | className: classes.progressContainer
|
1581 | }, loadingElement) || createElement("div", null, this.renderWeeks()))));
|
1582 | }
|
1583 | }], [{
|
1584 | key: "getDerivedStateFromProps",
|
1585 | value: function getDerivedStateFromProps(nextProps, state) {
|
1586 | var utils = nextProps.utils,
|
1587 | nextDate = nextProps.date;
|
1588 |
|
1589 | if (!utils.isEqual(nextDate, state.lastDate)) {
|
1590 | var nextMonth = utils.getMonth(nextDate);
|
1591 | var lastDate = state.lastDate || nextDate;
|
1592 | var lastMonth = utils.getMonth(lastDate);
|
1593 | return {
|
1594 | lastDate: nextDate,
|
1595 | currentMonth: nextProps.utils.startOfMonth(nextDate),
|
1596 |
|
1597 | slideDirection: nextMonth === lastMonth ? state.slideDirection : utils.isAfterDay(nextDate, lastDate) ? 'left' : 'right'
|
1598 | };
|
1599 | }
|
1600 |
|
1601 | return null;
|
1602 | }
|
1603 | }]);
|
1604 |
|
1605 | return Calendar;
|
1606 | }(Component);
|
1607 | Calendar.contextType = VariantContext;
|
1608 | process.env.NODE_ENV !== "production" ? Calendar.propTypes = {
|
1609 | renderDay: func,
|
1610 | shouldDisableDate: func,
|
1611 | allowKeyboardControl: bool
|
1612 | } : void 0;
|
1613 | Calendar.defaultProps = {
|
1614 | minDate: new Date('1900-01-01'),
|
1615 | maxDate: new Date('2100-01-01'),
|
1616 | disablePast: false,
|
1617 | disableFuture: false,
|
1618 | allowKeyboardControl: true
|
1619 | };
|
1620 | var styles$2 = function styles(theme) {
|
1621 | return {
|
1622 | transitionContainer: {
|
1623 | minHeight: 36 * 6,
|
1624 | marginTop: theme.spacing(1.5)
|
1625 | },
|
1626 | progressContainer: {
|
1627 | width: '100%',
|
1628 | height: '100%',
|
1629 | display: 'flex',
|
1630 | justifyContent: 'center',
|
1631 | alignItems: 'center'
|
1632 | },
|
1633 | week: {
|
1634 | display: 'flex',
|
1635 | justifyContent: 'center'
|
1636 | }
|
1637 | };
|
1638 | };
|
1639 | var Calendar$1 = withStyles(styles$2, {
|
1640 | name: 'MuiPickersCalendar',
|
1641 | withTheme: true
|
1642 | })(withUtils()(Calendar));
|
1643 |
|
1644 | function useViews(views, openTo, onChange) {
|
1645 | var _React$useState = useState(openTo && arrayIncludes(views, openTo) ? openTo : views[0]),
|
1646 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
1647 | openView = _React$useState2[0],
|
1648 | setOpenView = _React$useState2[1];
|
1649 |
|
1650 | var handleChangeAndOpenNext = useCallback(function (date, isFinish) {
|
1651 | var nextViewToOpen = views[views.indexOf(openView) + 1];
|
1652 |
|
1653 | if (isFinish && nextViewToOpen) {
|
1654 |
|
1655 | onChange(date, false);
|
1656 | setOpenView(nextViewToOpen);
|
1657 | return;
|
1658 | }
|
1659 |
|
1660 | onChange(date, Boolean(isFinish));
|
1661 | }, [onChange, openView, views]);
|
1662 | return {
|
1663 | handleChangeAndOpenNext: handleChangeAndOpenNext,
|
1664 | openView: openView,
|
1665 | setOpenView: setOpenView
|
1666 | };
|
1667 | }
|
1668 |
|
1669 | var ClockType;
|
1670 |
|
1671 | (function (ClockType) {
|
1672 | ClockType["HOURS"] = "hours";
|
1673 | ClockType["MINUTES"] = "minutes";
|
1674 | ClockType["SECONDS"] = "seconds";
|
1675 | })(ClockType || (ClockType = {}));
|
1676 |
|
1677 | var ClockType$1 = ClockType;
|
1678 |
|
1679 | var ClockPointer =
|
1680 |
|
1681 | function (_React$Component) {
|
1682 | _inherits(ClockPointer, _React$Component);
|
1683 |
|
1684 | function ClockPointer() {
|
1685 | var _getPrototypeOf2;
|
1686 |
|
1687 | var _this;
|
1688 |
|
1689 | _classCallCheck(this, ClockPointer);
|
1690 |
|
1691 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
1692 | args[_key] = arguments[_key];
|
1693 | }
|
1694 |
|
1695 | _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ClockPointer)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
1696 | _this.state = {
|
1697 | toAnimateTransform: false,
|
1698 | previousType: undefined
|
1699 | };
|
1700 |
|
1701 | _this.getAngleStyle = function () {
|
1702 | var _this$props = _this.props,
|
1703 | value = _this$props.value,
|
1704 | isInner = _this$props.isInner,
|
1705 | type = _this$props.type;
|
1706 | var max = type === ClockType$1.HOURS ? 12 : 60;
|
1707 | var angle = 360 / max * value;
|
1708 |
|
1709 | if (type === ClockType$1.HOURS && value > 12) {
|
1710 | angle -= 360;
|
1711 | }
|
1712 |
|
1713 | return {
|
1714 | height: isInner ? '26%' : '40%',
|
1715 | transform: "rotateZ(".concat(angle, "deg)")
|
1716 | };
|
1717 | };
|
1718 |
|
1719 | return _this;
|
1720 | }
|
1721 |
|
1722 | _createClass(ClockPointer, [{
|
1723 | key: "render",
|
1724 | value: function render() {
|
1725 | var _this$props2 = this.props,
|
1726 | classes = _this$props2.classes,
|
1727 | hasSelected = _this$props2.hasSelected;
|
1728 | return createElement("div", {
|
1729 | style: this.getAngleStyle(),
|
1730 | className: clsx(classes.pointer, this.state.toAnimateTransform && classes.animateTransform)
|
1731 | }, createElement("div", {
|
1732 | className: clsx(classes.thumb, hasSelected && classes.noPoint)
|
1733 | }));
|
1734 | }
|
1735 | }]);
|
1736 |
|
1737 | return ClockPointer;
|
1738 | }(Component);
|
1739 |
|
1740 | ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
|
1741 | if (nextProps.type !== state.previousType) {
|
1742 | return {
|
1743 | toAnimateTransform: true,
|
1744 | previousType: nextProps.type
|
1745 | };
|
1746 | }
|
1747 |
|
1748 | return {
|
1749 | toAnimateTransform: false,
|
1750 | previousType: nextProps.type
|
1751 | };
|
1752 | };
|
1753 |
|
1754 | var styles$3 = function styles(theme) {
|
1755 | return createStyles({
|
1756 | pointer: {
|
1757 | width: 2,
|
1758 | backgroundColor: theme.palette.primary.main,
|
1759 | position: 'absolute',
|
1760 | left: 'calc(50% - 1px)',
|
1761 | bottom: '50%',
|
1762 | transformOrigin: 'center bottom 0px'
|
1763 | },
|
1764 | animateTransform: {
|
1765 | transition: theme.transitions.create(['transform', 'height'])
|
1766 | },
|
1767 | thumb: {
|
1768 | width: 4,
|
1769 | height: 4,
|
1770 | backgroundColor: theme.palette.primary.contrastText,
|
1771 | borderRadius: '100%',
|
1772 | position: 'absolute',
|
1773 | top: -21,
|
1774 | left: -15,
|
1775 | border: "14px solid ".concat(theme.palette.primary.main),
|
1776 | boxSizing: 'content-box'
|
1777 | },
|
1778 | noPoint: {
|
1779 | backgroundColor: theme.palette.primary.main
|
1780 | }
|
1781 | });
|
1782 | };
|
1783 | var ClockPointer$1 = withStyles(styles$3, {
|
1784 | name: 'MuiPickersClockPointer'
|
1785 | })(ClockPointer);
|
1786 |
|
1787 | var center = {
|
1788 | x: 260 / 2,
|
1789 | y: 260 / 2
|
1790 | };
|
1791 | var basePoint = {
|
1792 | x: center.x,
|
1793 | y: 0
|
1794 | };
|
1795 | var cx = basePoint.x - center.x;
|
1796 | var cy = basePoint.y - center.y;
|
1797 |
|
1798 | var rad2deg = function rad2deg(rad) {
|
1799 | return rad * 57.29577951308232;
|
1800 | };
|
1801 |
|
1802 | var getAngleValue = function getAngleValue(step, offsetX, offsetY) {
|
1803 | var x = offsetX - center.x;
|
1804 | var y = offsetY - center.y;
|
1805 | var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
|
1806 | var deg = rad2deg(atan);
|
1807 | deg = Math.round(deg / step) * step;
|
1808 | deg %= 360;
|
1809 | var value = Math.floor(deg / step) || 0;
|
1810 | var delta = Math.pow(x, 2) + Math.pow(y, 2);
|
1811 | var distance = Math.sqrt(delta);
|
1812 | return {
|
1813 | value: value,
|
1814 | distance: distance
|
1815 | };
|
1816 | };
|
1817 |
|
1818 | var getHours = function getHours(offsetX, offsetY, ampm) {
|
1819 | var _getAngleValue = getAngleValue(30, offsetX, offsetY),
|
1820 | value = _getAngleValue.value,
|
1821 | distance = _getAngleValue.distance;
|
1822 |
|
1823 | value = value || 12;
|
1824 |
|
1825 | if (!ampm) {
|
1826 | if (distance < 90) {
|
1827 | value += 12;
|
1828 | value %= 24;
|
1829 | }
|
1830 | } else {
|
1831 | value %= 12;
|
1832 | }
|
1833 |
|
1834 | return value;
|
1835 | };
|
1836 | var getMinutes = function getMinutes(offsetX, offsetY) {
|
1837 | var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
1838 | var angleStep = step * 6;
|
1839 |
|
1840 | var _getAngleValue2 = getAngleValue(angleStep, offsetX, offsetY),
|
1841 | value = _getAngleValue2.value;
|
1842 |
|
1843 | value = value * step % 60;
|
1844 | return value;
|
1845 | };
|
1846 | var getMeridiem = function getMeridiem(date, utils) {
|
1847 | return utils.getHours(date) >= 12 ? 'pm' : 'am';
|
1848 | };
|
1849 | var convertToMeridiem = function convertToMeridiem(time, meridiem, ampm, utils) {
|
1850 | if (ampm) {
|
1851 | var currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';
|
1852 |
|
1853 | if (currentMeridiem !== meridiem) {
|
1854 | var hours = meridiem === 'am' ? utils.getHours(time) - 12 : utils.getHours(time) + 12;
|
1855 | return utils.setHours(time, hours);
|
1856 | }
|
1857 | }
|
1858 |
|
1859 | return time;
|
1860 | };
|
1861 |
|
1862 | var Clock =
|
1863 |
|
1864 | function (_React$Component) {
|
1865 | _inherits(Clock, _React$Component);
|
1866 |
|
1867 | function Clock() {
|
1868 | var _getPrototypeOf2;
|
1869 |
|
1870 | var _this;
|
1871 |
|
1872 | _classCallCheck(this, Clock);
|
1873 |
|
1874 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
1875 | args[_key] = arguments[_key];
|
1876 | }
|
1877 |
|
1878 | _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Clock)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
1879 | _this.isMoving = false;
|
1880 |
|
1881 | _this.handleTouchMove = function (e) {
|
1882 | _this.isMoving = true;
|
1883 |
|
1884 | _this.setTime(e);
|
1885 | };
|
1886 |
|
1887 | _this.handleTouchEnd = function (e) {
|
1888 | if (_this.isMoving) {
|
1889 | _this.setTime(e, true);
|
1890 |
|
1891 | _this.isMoving = false;
|
1892 | }
|
1893 | };
|
1894 |
|
1895 | _this.handleMove = function (e) {
|
1896 | e.preventDefault();
|
1897 | e.stopPropagation();
|
1898 |
|
1899 | var isButtonPressed = typeof e.buttons === 'undefined' ? e.nativeEvent.which === 1 : e.buttons === 1;
|
1900 |
|
1901 | if (isButtonPressed) {
|
1902 | _this.setTime(e.nativeEvent, false);
|
1903 | }
|
1904 | };
|
1905 |
|
1906 | _this.handleMouseUp = function (e) {
|
1907 | if (_this.isMoving) {
|
1908 | _this.isMoving = false;
|
1909 | }
|
1910 |
|
1911 | _this.setTime(e.nativeEvent, true);
|
1912 | };
|
1913 |
|
1914 | _this.hasSelected = function () {
|
1915 | var _this$props = _this.props,
|
1916 | type = _this$props.type,
|
1917 | value = _this$props.value;
|
1918 |
|
1919 | if (type === ClockType$1.HOURS) {
|
1920 | return true;
|
1921 | }
|
1922 |
|
1923 | return value % 5 === 0;
|
1924 | };
|
1925 |
|
1926 | return _this;
|
1927 | }
|
1928 |
|
1929 | _createClass(Clock, [{
|
1930 | key: "setTime",
|
1931 | value: function setTime(e) {
|
1932 | var isFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
1933 | var offsetX = e.offsetX,
|
1934 | offsetY = e.offsetY;
|
1935 |
|
1936 | if (typeof offsetX === 'undefined') {
|
1937 | var rect = e.target.getBoundingClientRect();
|
1938 | offsetX = e.changedTouches[0].clientX - rect.left;
|
1939 | offsetY = e.changedTouches[0].clientY - rect.top;
|
1940 | }
|
1941 |
|
1942 | var value = this.props.type === ClockType$1.SECONDS || this.props.type === ClockType$1.MINUTES ? getMinutes(offsetX, offsetY, this.props.minutesStep) : getHours(offsetX, offsetY, Boolean(this.props.ampm));
|
1943 | this.props.onChange(value, isFinish);
|
1944 | }
|
1945 | }, {
|
1946 | key: "render",
|
1947 | value: function render() {
|
1948 | var _this$props2 = this.props,
|
1949 | classes = _this$props2.classes,
|
1950 | value = _this$props2.value,
|
1951 | children = _this$props2.children,
|
1952 | type = _this$props2.type,
|
1953 | ampm = _this$props2.ampm;
|
1954 | var isPointerInner = !ampm && type === ClockType$1.HOURS && (value < 1 || value > 12);
|
1955 | return createElement("div", {
|
1956 | className: classes.container
|
1957 | }, createElement("div", {
|
1958 | className: classes.clock
|
1959 | }, createElement("div", {
|
1960 | role: "menu",
|
1961 | tabIndex: -1,
|
1962 | className: classes.squareMask,
|
1963 | onTouchMove: this.handleTouchMove,
|
1964 | onTouchEnd: this.handleTouchEnd,
|
1965 | onMouseUp: this.handleMouseUp,
|
1966 | onMouseMove: this.handleMove
|
1967 | }), createElement("div", {
|
1968 | className: classes.pin
|
1969 | }), createElement(ClockPointer$1, {
|
1970 | type: type,
|
1971 | value: value,
|
1972 | isInner: isPointerInner,
|
1973 | hasSelected: this.hasSelected()
|
1974 | }), children));
|
1975 | }
|
1976 | }]);
|
1977 |
|
1978 | return Clock;
|
1979 | }(Component);
|
1980 | process.env.NODE_ENV !== "production" ? Clock.propTypes = {
|
1981 | type: oneOf(Object.keys(ClockType$1).map(function (key) {
|
1982 | return ClockType$1[key];
|
1983 | })).isRequired,
|
1984 | value: number.isRequired,
|
1985 | onChange: func.isRequired,
|
1986 | children: arrayOf(node).isRequired,
|
1987 | ampm: bool,
|
1988 | minutesStep: number,
|
1989 | innerRef: any
|
1990 | } : void 0;
|
1991 | Clock.defaultProps = {
|
1992 | ampm: false,
|
1993 | minutesStep: 1
|
1994 | };
|
1995 | var styles$4 = function styles(theme) {
|
1996 | return createStyles({
|
1997 | container: {
|
1998 | display: 'flex',
|
1999 | justifyContent: 'center',
|
2000 | alignItems: 'flex-end',
|
2001 | margin: "".concat(theme.spacing(2), "px 0 ").concat(theme.spacing(1), "px")
|
2002 | },
|
2003 | clock: {
|
2004 | backgroundColor: 'rgba(0,0,0,.07)',
|
2005 | borderRadius: '50%',
|
2006 | height: 260,
|
2007 | width: 260,
|
2008 | position: 'relative',
|
2009 | pointerEvents: 'none'
|
2010 | },
|
2011 | squareMask: {
|
2012 | width: '100%',
|
2013 | height: '100%',
|
2014 | position: 'absolute',
|
2015 | pointerEvents: 'auto',
|
2016 | outline: 'none',
|
2017 | touchActions: 'none',
|
2018 | userSelect: 'none',
|
2019 | '&:active': {
|
2020 | cursor: 'move'
|
2021 | }
|
2022 | },
|
2023 | pin: {
|
2024 | width: 6,
|
2025 | height: 6,
|
2026 | borderRadius: '50%',
|
2027 | backgroundColor: theme.palette.primary.main,
|
2028 | position: 'absolute',
|
2029 | top: '50%',
|
2030 | left: '50%',
|
2031 | transform: 'translate(-50%, -50%)'
|
2032 | }
|
2033 | });
|
2034 | };
|
2035 | var Clock$1 = withStyles(styles$4, {
|
2036 | name: 'MuiPickersClock'
|
2037 | })(Clock);
|
2038 |
|
2039 | var positions = {
|
2040 | 0: [0, 40],
|
2041 | 1: [55, 19.6],
|
2042 | 2: [94.4, 59.5],
|
2043 | 3: [109, 114],
|
2044 | 4: [94.4, 168.5],
|
2045 | 5: [54.5, 208.4],
|
2046 | 6: [0, 223],
|
2047 | 7: [-54.5, 208.4],
|
2048 | 8: [-94.4, 168.5],
|
2049 | 9: [-109, 114],
|
2050 | 10: [-94.4, 59.5],
|
2051 | 11: [-54.5, 19.6],
|
2052 | 12: [0, 5],
|
2053 | 13: [36.9, 49.9],
|
2054 | 14: [64, 77],
|
2055 | 15: [74, 114],
|
2056 | 16: [64, 151],
|
2057 | 17: [37, 178],
|
2058 | 18: [0, 188],
|
2059 | 19: [-37, 178],
|
2060 | 20: [-64, 151],
|
2061 | 21: [-74, 114],
|
2062 | 22: [-64, 77],
|
2063 | 23: [-37, 50]
|
2064 | };
|
2065 | var useStyles$7 = makeStyles(function (theme) {
|
2066 | var size = theme.spacing(4);
|
2067 | return {
|
2068 | clockNumber: {
|
2069 | width: size,
|
2070 | height: 32,
|
2071 | userSelect: 'none',
|
2072 | position: 'absolute',
|
2073 | left: "calc((100% - ".concat(typeof size === 'number' ? "".concat(size, "px") : size, ") / 2)"),
|
2074 | display: 'inline-flex',
|
2075 | justifyContent: 'center',
|
2076 | alignItems: 'center',
|
2077 | borderRadius: '50%',
|
2078 | color: theme.palette.type === 'light' ? theme.palette.text.primary : theme.palette.text.hint
|
2079 | },
|
2080 | clockNumberSelected: {
|
2081 | color: theme.palette.primary.contrastText
|
2082 | }
|
2083 | };
|
2084 | }, {
|
2085 | name: 'MuiPickersClockNumber'
|
2086 | });
|
2087 | var ClockNumber = function ClockNumber(_ref) {
|
2088 | var selected = _ref.selected,
|
2089 | label = _ref.label,
|
2090 | index = _ref.index,
|
2091 | isInner = _ref.isInner;
|
2092 | var classes = useStyles$7();
|
2093 | var className = clsx(classes.clockNumber, selected && classes.clockNumberSelected);
|
2094 | var transformStyle = useMemo(function () {
|
2095 | var position = positions[index];
|
2096 | return {
|
2097 | transform: "translate(".concat(position[0], "px, ").concat(position[1], "px")
|
2098 | };
|
2099 | }, [index]);
|
2100 | return createElement(Typography, {
|
2101 | component: "span",
|
2102 | className: className,
|
2103 | variant: isInner ? 'body2' : 'body1',
|
2104 | style: transformStyle,
|
2105 | children: label
|
2106 | });
|
2107 | };
|
2108 |
|
2109 | var getHourNumbers = function getHourNumbers(_ref) {
|
2110 | var ampm = _ref.ampm,
|
2111 | utils = _ref.utils,
|
2112 | date = _ref.date;
|
2113 | var currentHours = utils.getHours(date);
|
2114 | var hourNumbers = [];
|
2115 | var startHour = ampm ? 1 : 0;
|
2116 | var endHour = ampm ? 12 : 23;
|
2117 |
|
2118 | var isSelected = function isSelected(hour) {
|
2119 | if (ampm) {
|
2120 | if (hour === 12) {
|
2121 | return currentHours === 12 || currentHours === 0;
|
2122 | }
|
2123 |
|
2124 | return currentHours === hour || currentHours - 12 === hour;
|
2125 | }
|
2126 |
|
2127 | return currentHours === hour;
|
2128 | };
|
2129 |
|
2130 | for (var hour = startHour; hour <= endHour; hour += 1) {
|
2131 | var label = hour.toString();
|
2132 |
|
2133 | if (hour === 0) {
|
2134 | label = '00';
|
2135 | }
|
2136 |
|
2137 | var props = {
|
2138 | index: hour,
|
2139 | label: utils.formatNumber(label),
|
2140 | selected: isSelected(hour),
|
2141 | isInner: !ampm && (hour === 0 || hour > 12)
|
2142 | };
|
2143 | hourNumbers.push(createElement(ClockNumber, _extends({
|
2144 | key: hour
|
2145 | }, props)));
|
2146 | }
|
2147 |
|
2148 | return hourNumbers;
|
2149 | };
|
2150 | var getMinutesNumbers = function getMinutesNumbers(_ref2) {
|
2151 | var value = _ref2.value,
|
2152 | utils = _ref2.utils;
|
2153 | var f = utils.formatNumber;
|
2154 | return [createElement(ClockNumber, {
|
2155 | label: f('00'),
|
2156 | selected: value === 0,
|
2157 | index: 12,
|
2158 | key: 12
|
2159 | }), createElement(ClockNumber, {
|
2160 | label: f('05'),
|
2161 | selected: value === 5,
|
2162 | index: 1,
|
2163 | key: 1
|
2164 | }), createElement(ClockNumber, {
|
2165 | label: f('10'),
|
2166 | selected: value === 10,
|
2167 | index: 2,
|
2168 | key: 2
|
2169 | }), createElement(ClockNumber, {
|
2170 | label: f('15'),
|
2171 | selected: value === 15,
|
2172 | index: 3,
|
2173 | key: 3
|
2174 | }), createElement(ClockNumber, {
|
2175 | label: f('20'),
|
2176 | selected: value === 20,
|
2177 | index: 4,
|
2178 | key: 4
|
2179 | }), createElement(ClockNumber, {
|
2180 | label: f('25'),
|
2181 | selected: value === 25,
|
2182 | index: 5,
|
2183 | key: 5
|
2184 | }), createElement(ClockNumber, {
|
2185 | label: f('30'),
|
2186 | selected: value === 30,
|
2187 | index: 6,
|
2188 | key: 6
|
2189 | }), createElement(ClockNumber, {
|
2190 | label: f('35'),
|
2191 | selected: value === 35,
|
2192 | index: 7,
|
2193 | key: 7
|
2194 | }), createElement(ClockNumber, {
|
2195 | label: f('40'),
|
2196 | selected: value === 40,
|
2197 | index: 8,
|
2198 | key: 8
|
2199 | }), createElement(ClockNumber, {
|
2200 | label: f('45'),
|
2201 | selected: value === 45,
|
2202 | index: 9,
|
2203 | key: 9
|
2204 | }), createElement(ClockNumber, {
|
2205 | label: f('50'),
|
2206 | selected: value === 50,
|
2207 | index: 10,
|
2208 | key: 10
|
2209 | }), createElement(ClockNumber, {
|
2210 | label: f('55'),
|
2211 | selected: value === 55,
|
2212 | index: 11,
|
2213 | key: 11
|
2214 | })];
|
2215 | };
|
2216 |
|
2217 | var ClockView = function ClockView(_ref) {
|
2218 | var type = _ref.type,
|
2219 | onHourChange = _ref.onHourChange,
|
2220 | onMinutesChange = _ref.onMinutesChange,
|
2221 | onSecondsChange = _ref.onSecondsChange,
|
2222 | ampm = _ref.ampm,
|
2223 | date = _ref.date,
|
2224 | minutesStep = _ref.minutesStep;
|
2225 | var utils = useUtils();
|
2226 | var viewProps = useMemo(function () {
|
2227 | switch (type) {
|
2228 | case ClockType$1.HOURS:
|
2229 | return {
|
2230 | value: utils.getHours(date),
|
2231 | children: getHourNumbers({
|
2232 | date: date,
|
2233 | utils: utils,
|
2234 | ampm: Boolean(ampm)
|
2235 | }),
|
2236 | onChange: function onChange(value, isFinish) {
|
2237 | var currentMeridiem = getMeridiem(date, utils);
|
2238 | var updatedTimeWithMeridiem = convertToMeridiem(utils.setHours(date, value), currentMeridiem, Boolean(ampm), utils);
|
2239 | onHourChange(updatedTimeWithMeridiem, isFinish);
|
2240 | }
|
2241 | };
|
2242 |
|
2243 | case ClockType$1.MINUTES:
|
2244 | var minutesValue = utils.getMinutes(date);
|
2245 | return {
|
2246 | value: minutesValue,
|
2247 | children: getMinutesNumbers({
|
2248 | value: minutesValue,
|
2249 | utils: utils
|
2250 | }),
|
2251 | onChange: function onChange(value, isFinish) {
|
2252 | var updatedTime = utils.setMinutes(date, value);
|
2253 | onMinutesChange(updatedTime, isFinish);
|
2254 | }
|
2255 | };
|
2256 |
|
2257 | case ClockType$1.SECONDS:
|
2258 | var secondsValue = utils.getSeconds(date);
|
2259 | return {
|
2260 | value: secondsValue,
|
2261 | children: getMinutesNumbers({
|
2262 | value: secondsValue,
|
2263 | utils: utils
|
2264 | }),
|
2265 | onChange: function onChange(value, isFinish) {
|
2266 | var updatedTime = utils.setSeconds(date, value);
|
2267 | onSecondsChange(updatedTime, isFinish);
|
2268 | }
|
2269 | };
|
2270 |
|
2271 | default:
|
2272 | throw new Error('You must provide the type for TimePickerView');
|
2273 | }
|
2274 | }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
|
2275 | return createElement(Clock$1, _extends({
|
2276 | type: type,
|
2277 | ampm: ampm,
|
2278 | minutesStep: minutesStep
|
2279 | }, viewProps));
|
2280 | };
|
2281 | ClockView.displayName = 'TimePickerView';
|
2282 | process.env.NODE_ENV !== "production" ? ClockView.propTypes = {
|
2283 | date: object.isRequired,
|
2284 | onHourChange: func.isRequired,
|
2285 | onMinutesChange: func.isRequired,
|
2286 | onSecondsChange: func.isRequired,
|
2287 | ampm: bool,
|
2288 | minutesStep: number,
|
2289 | type: oneOf(Object.keys(ClockType$1).map(function (key) {
|
2290 | return ClockType$1[key];
|
2291 | })).isRequired
|
2292 | } : void 0;
|
2293 | ClockView.defaultProps = {
|
2294 | ampm: true,
|
2295 | minutesStep: 1
|
2296 | };
|
2297 | var ClockView$1 = memo(ClockView);
|
2298 |
|
2299 | var useStyles$8 = makeStyles(function (theme) {
|
2300 | return {
|
2301 | root: {
|
2302 | height: 40,
|
2303 | display: 'flex',
|
2304 | alignItems: 'center',
|
2305 | justifyContent: 'center',
|
2306 | cursor: 'pointer',
|
2307 | outline: 'none',
|
2308 | '&:focus': {
|
2309 | color: theme.palette.primary.main,
|
2310 | fontWeight: theme.typography.fontWeightMedium
|
2311 | }
|
2312 | },
|
2313 | yearSelected: {
|
2314 | margin: '10px 0',
|
2315 | fontWeight: theme.typography.fontWeightMedium
|
2316 | },
|
2317 | yearDisabled: {
|
2318 | pointerEvents: 'none',
|
2319 | color: theme.palette.text.hint
|
2320 | }
|
2321 | };
|
2322 | }, {
|
2323 | name: 'MuiPickersYear'
|
2324 | });
|
2325 | var Year = function Year(_ref) {
|
2326 | var onSelect = _ref.onSelect,
|
2327 | forwardedRef = _ref.forwardedRef,
|
2328 | value = _ref.value,
|
2329 | selected = _ref.selected,
|
2330 | disabled = _ref.disabled,
|
2331 | children = _ref.children,
|
2332 | other = _objectWithoutProperties(_ref, ["onSelect", "forwardedRef", "value", "selected", "disabled", "children"]);
|
2333 |
|
2334 | var classes = useStyles$8();
|
2335 | var handleClick = useCallback(function () {
|
2336 | return onSelect(value);
|
2337 | }, [onSelect, value]);
|
2338 | return createElement(Typography, _extends({
|
2339 | role: "button",
|
2340 | component: "div",
|
2341 | tabIndex: disabled ? -1 : 0,
|
2342 | onClick: handleClick,
|
2343 | onKeyPress: handleClick,
|
2344 | color: selected ? 'primary' : undefined,
|
2345 | variant: selected ? 'h5' : 'subtitle1',
|
2346 | children: children,
|
2347 | ref: forwardedRef,
|
2348 | className: clsx(classes.root, selected && classes.yearSelected, disabled && classes.yearDisabled)
|
2349 | }, other));
|
2350 | };
|
2351 | Year.displayName = 'Year';
|
2352 | var Year$1 = forwardRef(function (props, ref) {
|
2353 | return createElement(Year, _extends({}, props, {
|
2354 | forwardedRef: ref
|
2355 | }));
|
2356 | });
|
2357 |
|
2358 | var useStyles$9 = makeStyles({
|
2359 | container: {
|
2360 | height: 300,
|
2361 | overflowY: 'auto'
|
2362 | }
|
2363 | }, {
|
2364 | name: 'MuiPickersYearSelection'
|
2365 | });
|
2366 | var YearSelection = function YearSelection(_ref) {
|
2367 | var date = _ref.date,
|
2368 | onChange = _ref.onChange,
|
2369 | onYearChange = _ref.onYearChange,
|
2370 | minDate = _ref.minDate,
|
2371 | maxDate = _ref.maxDate,
|
2372 | disablePast = _ref.disablePast,
|
2373 | disableFuture = _ref.disableFuture,
|
2374 | animateYearScrolling = _ref.animateYearScrolling;
|
2375 | var utils = useUtils();
|
2376 | var classes = useStyles$9();
|
2377 | var currentVariant = useContext(VariantContext);
|
2378 | var selectedYearRef = useRef(null);
|
2379 | useEffect(function () {
|
2380 | if (selectedYearRef.current && selectedYearRef.current.scrollIntoView) {
|
2381 | try {
|
2382 | selectedYearRef.current.scrollIntoView({
|
2383 | block: currentVariant === 'static' ? 'nearest' : 'center',
|
2384 | behavior: animateYearScrolling ? 'smooth' : 'auto'
|
2385 | });
|
2386 | } catch (e) {
|
2387 |
|
2388 | selectedYearRef.current.scrollIntoView();
|
2389 | }
|
2390 | }
|
2391 | }, []);
|
2392 |
|
2393 | var currentYear = utils.getYear(date);
|
2394 | var onYearSelect = useCallback(function (year) {
|
2395 | var newDate = utils.setYear(date, year);
|
2396 |
|
2397 | if (onYearChange) {
|
2398 | onYearChange(newDate);
|
2399 | }
|
2400 |
|
2401 | onChange(newDate, true);
|
2402 | }, [date, onChange, onYearChange, utils]);
|
2403 | return createElement("div", {
|
2404 | className: classes.container
|
2405 | }, utils.getYearRange(minDate, maxDate).map(function (year) {
|
2406 | var yearNumber = utils.getYear(year);
|
2407 | var selected = yearNumber === currentYear;
|
2408 | return createElement(Year$1, {
|
2409 | key: utils.getYearText(year),
|
2410 | selected: selected,
|
2411 | value: yearNumber,
|
2412 | onSelect: onYearSelect,
|
2413 | ref: selected ? selectedYearRef : undefined,
|
2414 | disabled: Boolean(disablePast && utils.isBeforeYear(year, utils.date()) || disableFuture && utils.isAfterYear(year, utils.date()))
|
2415 | }, utils.getYearText(year));
|
2416 | }));
|
2417 | };
|
2418 |
|
2419 | var useStyles$a = makeStyles(function (theme) {
|
2420 | return {
|
2421 | root: {
|
2422 | flex: '1 0 33.33%',
|
2423 | display: 'flex',
|
2424 | alignItems: 'center',
|
2425 | justifyContent: 'center',
|
2426 | cursor: 'pointer',
|
2427 | outline: 'none',
|
2428 | height: 75,
|
2429 | transition: theme.transitions.create('font-size', {
|
2430 | duration: '100ms'
|
2431 | }),
|
2432 | '&:focus': {
|
2433 | color: theme.palette.primary.main,
|
2434 | fontWeight: theme.typography.fontWeightMedium
|
2435 | }
|
2436 | },
|
2437 | monthSelected: {
|
2438 | color: theme.palette.primary.main,
|
2439 | fontWeight: theme.typography.fontWeightMedium
|
2440 | },
|
2441 | monthDisabled: {
|
2442 | pointerEvents: 'none',
|
2443 | color: theme.palette.text.hint
|
2444 | }
|
2445 | };
|
2446 | }, {
|
2447 | name: 'MuiPickersMonth'
|
2448 | });
|
2449 | var Month = function Month(_ref) {
|
2450 | var selected = _ref.selected,
|
2451 | onSelect = _ref.onSelect,
|
2452 | disabled = _ref.disabled,
|
2453 | value = _ref.value,
|
2454 | children = _ref.children,
|
2455 | other = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "value", "children"]);
|
2456 |
|
2457 | var classes = useStyles$a();
|
2458 | var handleSelection = useCallback(function () {
|
2459 | onSelect(value);
|
2460 | }, [onSelect, value]);
|
2461 | return createElement(Typography, _extends({
|
2462 | role: "button",
|
2463 | component: "div",
|
2464 | className: clsx(classes.root, selected && classes.monthSelected, disabled && classes.monthDisabled),
|
2465 | tabIndex: disabled ? -1 : 0,
|
2466 | onClick: handleSelection,
|
2467 | onKeyPress: handleSelection,
|
2468 | color: selected ? 'primary' : undefined,
|
2469 | variant: selected ? 'h5' : 'subtitle1',
|
2470 | children: children
|
2471 | }, other));
|
2472 | };
|
2473 | Month.displayName = 'Month';
|
2474 |
|
2475 | var useStyles$b = makeStyles({
|
2476 | container: {
|
2477 | width: 310,
|
2478 | display: 'flex',
|
2479 | flexWrap: 'wrap',
|
2480 | alignContent: 'stretch'
|
2481 | }
|
2482 | }, {
|
2483 | name: 'MuiPickersMonthSelection'
|
2484 | });
|
2485 | var MonthSelection = function MonthSelection(_ref) {
|
2486 | var disablePast = _ref.disablePast,
|
2487 | disableFuture = _ref.disableFuture,
|
2488 | minDate = _ref.minDate,
|
2489 | maxDate = _ref.maxDate,
|
2490 | date = _ref.date,
|
2491 | onMonthChange = _ref.onMonthChange,
|
2492 | onChange = _ref.onChange;
|
2493 | var utils = useUtils();
|
2494 | var classes = useStyles$b();
|
2495 | var currentMonth = utils.getMonth(date);
|
2496 |
|
2497 | var shouldDisableMonth = function shouldDisableMonth(month) {
|
2498 | var now = utils.date();
|
2499 | var utilMinDate = utils.date(minDate);
|
2500 | var utilMaxDate = utils.date(maxDate);
|
2501 | var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, utilMinDate) ? now : utilMinDate);
|
2502 | var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, utilMaxDate) ? now : utilMaxDate);
|
2503 | var isBeforeFirstEnabled = utils.isBefore(month, firstEnabledMonth);
|
2504 | var isAfterLastEnabled = utils.isAfter(month, lastEnabledMonth);
|
2505 | return isBeforeFirstEnabled || isAfterLastEnabled;
|
2506 | };
|
2507 |
|
2508 | var onMonthSelect = useCallback(function (month) {
|
2509 | var newDate = utils.setMonth(date, month);
|
2510 | onChange(newDate, true);
|
2511 |
|
2512 | if (onMonthChange) {
|
2513 | onMonthChange(newDate);
|
2514 | }
|
2515 | }, [date, onChange, onMonthChange, utils]);
|
2516 | return createElement("div", {
|
2517 | className: classes.container
|
2518 | }, utils.getMonthArray(date).map(function (month) {
|
2519 | var monthNumber = utils.getMonth(month);
|
2520 | var monthText = utils.format(month, 'MMM');
|
2521 | return createElement(Month, {
|
2522 | key: monthText,
|
2523 | value: monthNumber,
|
2524 | selected: monthNumber === currentMonth,
|
2525 | onSelect: onMonthSelect,
|
2526 | disabled: shouldDisableMonth(month)
|
2527 | }, monthText);
|
2528 | }));
|
2529 | };
|
2530 |
|
2531 | var getOrientation = function getOrientation() {
|
2532 | if (typeof window === 'undefined') {
|
2533 | return 'portrait';
|
2534 | }
|
2535 |
|
2536 | if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
|
2537 | return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
|
2538 | }
|
2539 |
|
2540 |
|
2541 | if (window.orientation) {
|
2542 | return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
|
2543 | }
|
2544 |
|
2545 | return 'portrait';
|
2546 | };
|
2547 |
|
2548 | function useIsLandscape(customOrientation) {
|
2549 | var _React$useState = useState(getOrientation()),
|
2550 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
2551 | orientation = _React$useState2[0],
|
2552 | setOrientation = _React$useState2[1];
|
2553 |
|
2554 | var eventHandler = useCallback(function () {
|
2555 | return setOrientation(getOrientation());
|
2556 | }, []);
|
2557 | useIsomorphicEffect(function () {
|
2558 | window.addEventListener('orientationchange', eventHandler);
|
2559 | return function () {
|
2560 | return window.removeEventListener('orientationchange', eventHandler);
|
2561 | };
|
2562 | }, [eventHandler]);
|
2563 | var orientationToUse = customOrientation || orientation;
|
2564 | return orientationToUse === 'landscape';
|
2565 | }
|
2566 |
|
2567 | function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
2568 |
|
2569 | function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
2570 | var viewsMap = {
|
2571 | year: YearSelection,
|
2572 | month: MonthSelection,
|
2573 | date: Calendar$1,
|
2574 | hours: ClockView,
|
2575 | minutes: ClockView,
|
2576 | seconds: ClockView
|
2577 | };
|
2578 | var useStyles$c = makeStyles({
|
2579 | container: {
|
2580 | display: 'flex',
|
2581 | flexDirection: 'column'
|
2582 | },
|
2583 | containerLandscape: {
|
2584 | flexDirection: 'row'
|
2585 | },
|
2586 | pickerView: {
|
2587 | overflowX: 'hidden',
|
2588 | minHeight: VIEW_HEIGHT,
|
2589 | minWidth: DIALOG_WIDTH,
|
2590 | maxWidth: DIALOG_WIDTH_WIDER,
|
2591 | display: 'flex',
|
2592 | flexDirection: 'column',
|
2593 | justifyContent: 'center'
|
2594 | },
|
2595 | pickerViewLandscape: {
|
2596 | padding: '0 8px'
|
2597 | }
|
2598 | }, {
|
2599 | name: 'MuiPickersBasePicker'
|
2600 | });
|
2601 | var Picker = function Picker(_ref) {
|
2602 | var date = _ref.date,
|
2603 | views = _ref.views,
|
2604 | disableToolbar = _ref.disableToolbar,
|
2605 | onChange = _ref.onChange,
|
2606 | openTo = _ref.openTo,
|
2607 | unparsedMinDate = _ref.minDate,
|
2608 | unparsedMaxDate = _ref.maxDate,
|
2609 | ToolbarComponent = _ref.ToolbarComponent,
|
2610 | orientation = _ref.orientation,
|
2611 | rest = _objectWithoutProperties(_ref, ["date", "views", "disableToolbar", "onChange", "openTo", "minDate", "maxDate", "ToolbarComponent", "orientation"]);
|
2612 |
|
2613 | var utils = useUtils();
|
2614 | var classes = useStyles$c();
|
2615 | var isLandscape = useIsLandscape(orientation);
|
2616 |
|
2617 | var _useViews = useViews(views, openTo, onChange),
|
2618 | openView = _useViews.openView,
|
2619 | setOpenView = _useViews.setOpenView,
|
2620 | handleChangeAndOpenNext = _useViews.handleChangeAndOpenNext;
|
2621 |
|
2622 | var minDate = useMemo(function () {
|
2623 | return utils.date(unparsedMinDate);
|
2624 | }, [unparsedMinDate, utils]);
|
2625 | var maxDate = useMemo(function () {
|
2626 | return utils.date(unparsedMaxDate);
|
2627 | }, [unparsedMaxDate, utils]);
|
2628 | return createElement("div", {
|
2629 | className: clsx(classes.container, isLandscape && classes.containerLandscape)
|
2630 | }, !disableToolbar && createElement(ToolbarComponent, _extends({}, rest, {
|
2631 | views: views,
|
2632 | isLandscape: isLandscape,
|
2633 | date: date,
|
2634 | onChange: onChange,
|
2635 | setOpenView: setOpenView,
|
2636 | openView: openView
|
2637 | })), createElement("div", {
|
2638 | className: clsx(classes.pickerView, isLandscape && classes.pickerViewLandscape)
|
2639 | }, openView === 'year' && createElement(YearSelection, _extends({}, rest, {
|
2640 | date: date,
|
2641 | onChange: handleChangeAndOpenNext,
|
2642 | minDate: minDate,
|
2643 | maxDate: maxDate
|
2644 | })), openView === 'month' && createElement(MonthSelection, _extends({}, rest, {
|
2645 | date: date,
|
2646 | onChange: handleChangeAndOpenNext,
|
2647 | minDate: minDate,
|
2648 | maxDate: maxDate
|
2649 | })), openView === 'date' && createElement(Calendar$1, _extends({}, rest, {
|
2650 | date: date,
|
2651 | onChange: handleChangeAndOpenNext,
|
2652 | minDate: minDate,
|
2653 | maxDate: maxDate
|
2654 | })), (openView === 'hours' || openView === 'minutes' || openView === 'seconds') && createElement(ClockView, _extends({}, rest, {
|
2655 | date: date,
|
2656 | type: openView,
|
2657 | onHourChange: handleChangeAndOpenNext,
|
2658 | onMinutesChange: handleChangeAndOpenNext,
|
2659 | onSecondsChange: handleChangeAndOpenNext
|
2660 | }))));
|
2661 | };
|
2662 | Picker.defaultProps = _objectSpread$4({}, datePickerDefaultProps, {
|
2663 | views: Object.keys(viewsMap)
|
2664 | });
|
2665 |
|
2666 | function makePickerWithState(_ref) {
|
2667 | var Input = _ref.Input,
|
2668 | useState = _ref.useState,
|
2669 | useOptions = _ref.useOptions,
|
2670 | getCustomProps = _ref.getCustomProps,
|
2671 | DefaultToolbarComponent = _ref.DefaultToolbarComponent;
|
2672 |
|
2673 | function PickerWithState(props) {
|
2674 | var allowKeyboardControl = props.allowKeyboardControl,
|
2675 | ampm = props.ampm,
|
2676 | animateYearScrolling = props.animateYearScrolling,
|
2677 | autoOk = props.autoOk,
|
2678 | dateRangeIcon = props.dateRangeIcon,
|
2679 | disableFuture = props.disableFuture,
|
2680 | disablePast = props.disablePast,
|
2681 | disableToolbar = props.disableToolbar,
|
2682 | emptyLabel = props.emptyLabel,
|
2683 | format = props.format,
|
2684 | forwardedRef = props.forwardedRef,
|
2685 | hideTabs = props.hideTabs,
|
2686 | initialFocusedDate = props.initialFocusedDate,
|
2687 | invalidDateMessage = props.invalidDateMessage,
|
2688 | invalidLabel = props.invalidLabel,
|
2689 | labelFunc = props.labelFunc,
|
2690 | leftArrowButtonProps = props.leftArrowButtonProps,
|
2691 | leftArrowIcon = props.leftArrowIcon,
|
2692 | loadingIndicator = props.loadingIndicator,
|
2693 | maxDate = props.maxDate,
|
2694 | maxDateMessage = props.maxDateMessage,
|
2695 | minDate = props.minDate,
|
2696 | minDateMessage = props.minDateMessage,
|
2697 | minutesStep = props.minutesStep,
|
2698 | onAccept = props.onAccept,
|
2699 | onChange = props.onChange,
|
2700 | onClose = props.onClose,
|
2701 | onMonthChange = props.onMonthChange,
|
2702 | onOpen = props.onOpen,
|
2703 | onYearChange = props.onYearChange,
|
2704 | openTo = props.openTo,
|
2705 | orientation = props.orientation,
|
2706 | renderDay = props.renderDay,
|
2707 | rightArrowButtonProps = props.rightArrowButtonProps,
|
2708 | rightArrowIcon = props.rightArrowIcon,
|
2709 | shouldDisableDate = props.shouldDisableDate,
|
2710 | strictCompareDates = props.strictCompareDates,
|
2711 | timeIcon = props.timeIcon,
|
2712 | _props$ToolbarCompone = props.ToolbarComponent,
|
2713 | ToolbarComponent = _props$ToolbarCompone === void 0 ? DefaultToolbarComponent : _props$ToolbarCompone,
|
2714 | value = props.value,
|
2715 | variant = props.variant,
|
2716 | views = props.views,
|
2717 | other = _objectWithoutProperties(props, ["allowKeyboardControl", "ampm", "animateYearScrolling", "autoOk", "dateRangeIcon", "disableFuture", "disablePast", "disableToolbar", "emptyLabel", "format", "forwardedRef", "hideTabs", "initialFocusedDate", "invalidDateMessage", "invalidLabel", "labelFunc", "leftArrowButtonProps", "leftArrowIcon", "loadingIndicator", "maxDate", "maxDateMessage", "minDate", "minDateMessage", "minutesStep", "onAccept", "onChange", "onClose", "onMonthChange", "onOpen", "onYearChange", "openTo", "orientation", "renderDay", "rightArrowButtonProps", "rightArrowIcon", "shouldDisableDate", "strictCompareDates", "timeIcon", "ToolbarComponent", "value", "variant", "views"]);
|
2718 |
|
2719 | var injectedProps = getCustomProps ? getCustomProps(props) : {};
|
2720 | var options = useOptions(props);
|
2721 |
|
2722 | var _useState = useState(props, options),
|
2723 | pickerProps = _useState.pickerProps,
|
2724 | inputProps = _useState.inputProps,
|
2725 | wrapperProps = _useState.wrapperProps;
|
2726 |
|
2727 | return createElement(Wrapper, _extends({
|
2728 | variant: variant,
|
2729 | InputComponent: Input,
|
2730 | DateInputProps: inputProps
|
2731 | }, injectedProps, wrapperProps, other), createElement(Picker, _extends({}, pickerProps, {
|
2732 | allowKeyboardControl: allowKeyboardControl,
|
2733 | ampm: ampm,
|
2734 | animateYearScrolling: animateYearScrolling,
|
2735 | dateRangeIcon: dateRangeIcon,
|
2736 | disableFuture: disableFuture,
|
2737 | disablePast: disablePast,
|
2738 | disableToolbar: disableToolbar,
|
2739 | hideTabs: hideTabs,
|
2740 | leftArrowButtonProps: leftArrowButtonProps,
|
2741 | leftArrowIcon: leftArrowIcon,
|
2742 | loadingIndicator: loadingIndicator,
|
2743 | maxDate: maxDate,
|
2744 | minDate: minDate,
|
2745 | minutesStep: minutesStep,
|
2746 | onMonthChange: onMonthChange,
|
2747 | onYearChange: onYearChange,
|
2748 | openTo: openTo,
|
2749 | orientation: orientation,
|
2750 | renderDay: renderDay,
|
2751 | rightArrowButtonProps: rightArrowButtonProps,
|
2752 | rightArrowIcon: rightArrowIcon,
|
2753 | shouldDisableDate: shouldDisableDate,
|
2754 | strictCompareDates: strictCompareDates,
|
2755 | timeIcon: timeIcon,
|
2756 | ToolbarComponent: ToolbarComponent,
|
2757 | views: views
|
2758 | })));
|
2759 | }
|
2760 |
|
2761 | return PickerWithState;
|
2762 | }
|
2763 |
|
2764 | function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
2765 |
|
2766 | function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
2767 |
|
2768 | var defaultProps = _objectSpread$5({}, datePickerDefaultProps, {
|
2769 | openTo: 'date',
|
2770 | views: ['year', 'date']
|
2771 | });
|
2772 |
|
2773 | function useOptions(props) {
|
2774 | var utils = useUtils();
|
2775 | return {
|
2776 | getDefaultFormat: function getDefaultFormat() {
|
2777 | return getFormatByViews(props.views, utils);
|
2778 | }
|
2779 | };
|
2780 | }
|
2781 |
|
2782 | var DatePicker = makePickerWithState({
|
2783 | useOptions: useOptions,
|
2784 | Input: PureDateInput,
|
2785 | useState: usePickerState,
|
2786 | DefaultToolbarComponent: DatePickerToolbar
|
2787 | });
|
2788 | var KeyboardDatePicker = makePickerWithState({
|
2789 | useOptions: useOptions,
|
2790 | Input: KeyboardDateInput,
|
2791 | useState: useKeyboardPickerState,
|
2792 | DefaultToolbarComponent: DatePickerToolbar
|
2793 | });
|
2794 | DatePicker.defaultProps = defaultProps;
|
2795 | KeyboardDatePicker.defaultProps = defaultProps;
|
2796 |
|
2797 | var useStyles$d = makeStyles({
|
2798 | toolbarLandscape: {
|
2799 | flexWrap: 'wrap'
|
2800 | },
|
2801 | toolbarAmpmLeftPadding: {
|
2802 | paddingLeft: 50
|
2803 | },
|
2804 | separator: {
|
2805 | margin: '0 4px 0 2px',
|
2806 | cursor: 'default'
|
2807 | },
|
2808 | hourMinuteLabel: {
|
2809 | display: 'flex',
|
2810 | justifyContent: 'flex-end',
|
2811 | alignItems: 'flex-end'
|
2812 | },
|
2813 | hourMinuteLabelAmpmLandscape: {
|
2814 | marginTop: 'auto'
|
2815 | },
|
2816 | hourMinuteLabelReverse: {
|
2817 | flexDirection: 'row-reverse'
|
2818 | },
|
2819 | ampmSelection: {
|
2820 | marginLeft: 20,
|
2821 | marginRight: -20,
|
2822 | display: 'flex',
|
2823 | flexDirection: 'column'
|
2824 | },
|
2825 | ampmLandscape: {
|
2826 | margin: '4px 0 auto',
|
2827 | flexDirection: 'row',
|
2828 | justifyContent: 'space-around',
|
2829 | flexBasis: '100%'
|
2830 | },
|
2831 | ampmSelectionWithSeconds: {
|
2832 | marginLeft: 15,
|
2833 | marginRight: 10
|
2834 | },
|
2835 | ampmLabel: {
|
2836 | fontSize: 18
|
2837 | }
|
2838 | }, {
|
2839 | name: 'MuiPickersTimePickerToolbar'
|
2840 | });
|
2841 | function useMeridiemMode(date, ampm, onChange) {
|
2842 | var utils = useUtils();
|
2843 | var meridiemMode = getMeridiem(date, utils);
|
2844 | var handleMeridiemChange = useCallback(function (mode) {
|
2845 | var timeWithMeridiem = convertToMeridiem(date, mode, Boolean(ampm), utils);
|
2846 | onChange(timeWithMeridiem, false);
|
2847 | }, [ampm, date, onChange, utils]);
|
2848 | return {
|
2849 | meridiemMode: meridiemMode,
|
2850 | handleMeridiemChange: handleMeridiemChange
|
2851 | };
|
2852 | }
|
2853 | var TimePickerToolbar = function TimePickerToolbar(_ref) {
|
2854 | var date = _ref.date,
|
2855 | views = _ref.views,
|
2856 | ampm = _ref.ampm,
|
2857 | openView = _ref.openView,
|
2858 | onChange = _ref.onChange,
|
2859 | isLandscape = _ref.isLandscape,
|
2860 | setOpenView = _ref.setOpenView;
|
2861 | var utils = useUtils();
|
2862 | var theme = useTheme();
|
2863 | var classes = useStyles$d();
|
2864 |
|
2865 | var _useMeridiemMode = useMeridiemMode(date, ampm, onChange),
|
2866 | meridiemMode = _useMeridiemMode.meridiemMode,
|
2867 | handleMeridiemChange = _useMeridiemMode.handleMeridiemChange;
|
2868 |
|
2869 | var clockTypographyVariant = isLandscape ? 'h3' : 'h2';
|
2870 | return createElement(PickerToolbar, {
|
2871 | isLandscape: isLandscape,
|
2872 | className: clsx(isLandscape ? classes.toolbarLandscape : ampm && classes.toolbarAmpmLeftPadding)
|
2873 | }, createElement("div", {
|
2874 | className: clsx(classes.hourMinuteLabel, ampm && isLandscape && classes.hourMinuteLabelAmpmLandscape, {
|
2875 | rtl: classes.hourMinuteLabelReverse
|
2876 | }[theme.direction])
|
2877 | }, arrayIncludes(views, 'hours') && createElement(ToolbarButton$1, {
|
2878 | variant: clockTypographyVariant,
|
2879 | onClick: function onClick() {
|
2880 | return setOpenView(ClockType$1.HOURS);
|
2881 | },
|
2882 | selected: openView === ClockType$1.HOURS,
|
2883 | label: utils.getHourText(date, Boolean(ampm))
|
2884 | }), arrayIncludes(views, ['hours', 'minutes']) && createElement(ToolbarText, {
|
2885 | label: ":",
|
2886 | variant: clockTypographyVariant,
|
2887 | selected: false,
|
2888 | className: classes.separator
|
2889 | }), arrayIncludes(views, 'minutes') && createElement(ToolbarButton$1, {
|
2890 | variant: clockTypographyVariant,
|
2891 | onClick: function onClick() {
|
2892 | return setOpenView(ClockType$1.MINUTES);
|
2893 | },
|
2894 | selected: openView === ClockType$1.MINUTES,
|
2895 | label: utils.getMinuteText(date)
|
2896 | }), arrayIncludes(views, ['minutes', 'seconds']) && createElement(ToolbarText, {
|
2897 | variant: "h2",
|
2898 | label: ":",
|
2899 | selected: false,
|
2900 | className: classes.separator
|
2901 | }), arrayIncludes(views, 'seconds') && createElement(ToolbarButton$1, {
|
2902 | variant: "h2",
|
2903 | onClick: function onClick() {
|
2904 | return setOpenView(ClockType$1.SECONDS);
|
2905 | },
|
2906 | selected: openView === ClockType$1.SECONDS,
|
2907 | label: utils.getSecondText(date)
|
2908 | })), ampm && createElement("div", {
|
2909 | className: clsx(classes.ampmSelection, isLandscape && classes.ampmLandscape, arrayIncludes(views, 'seconds') && classes.ampmSelectionWithSeconds)
|
2910 | }, createElement(ToolbarButton$1, {
|
2911 | disableRipple: true,
|
2912 | variant: "subtitle1",
|
2913 | selected: meridiemMode === 'am',
|
2914 | typographyClassName: classes.ampmLabel,
|
2915 | label: utils.getMeridiemText('am'),
|
2916 | onClick: function onClick() {
|
2917 | return handleMeridiemChange('am');
|
2918 | }
|
2919 | }), createElement(ToolbarButton$1, {
|
2920 | disableRipple: true,
|
2921 | variant: "subtitle1",
|
2922 | selected: meridiemMode === 'pm',
|
2923 | typographyClassName: classes.ampmLabel,
|
2924 | label: utils.getMeridiemText('pm'),
|
2925 | onClick: function onClick() {
|
2926 | return handleMeridiemChange('pm');
|
2927 | }
|
2928 | })));
|
2929 | };
|
2930 |
|
2931 | function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
2932 |
|
2933 | function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
2934 |
|
2935 | var defaultProps$1 = _objectSpread$6({}, timePickerDefaultProps, {
|
2936 | openTo: 'hours',
|
2937 | views: ['hours', 'minutes']
|
2938 | });
|
2939 |
|
2940 | function useOptions$1(props) {
|
2941 | var utils = useUtils();
|
2942 | return {
|
2943 | getDefaultFormat: function getDefaultFormat() {
|
2944 | return pick12hOr24hFormat(props.format, props.ampm, {
|
2945 | '12h': utils.time12hFormat,
|
2946 | '24h': utils.time24hFormat
|
2947 | });
|
2948 | }
|
2949 | };
|
2950 | }
|
2951 |
|
2952 | var TimePicker = makePickerWithState({
|
2953 | useOptions: useOptions$1,
|
2954 | Input: PureDateInput,
|
2955 | useState: usePickerState,
|
2956 | DefaultToolbarComponent: TimePickerToolbar
|
2957 | });
|
2958 | var KeyboardTimePicker = makePickerWithState({
|
2959 | useOptions: useOptions$1,
|
2960 | Input: KeyboardDateInput,
|
2961 | useState: useKeyboardPickerState,
|
2962 | DefaultToolbarComponent: TimePickerToolbar,
|
2963 | getCustomProps: function getCustomProps(props) {
|
2964 | return {
|
2965 | refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
|
2966 | };
|
2967 | }
|
2968 | });
|
2969 | TimePicker.defaultProps = defaultProps$1;
|
2970 | KeyboardTimePicker.defaultProps = defaultProps$1;
|
2971 |
|
2972 | var TimeIcon = function TimeIcon(props) {
|
2973 | return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
|
2974 | d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
2975 | }), React__default.createElement("path", {
|
2976 | fill: "none",
|
2977 | d: "M0 0h24v24H0z"
|
2978 | }), React__default.createElement("path", {
|
2979 | d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
|
2980 | }));
|
2981 | };
|
2982 |
|
2983 | var DateRangeIcon = function DateRangeIcon(props) {
|
2984 | return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
|
2985 | d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
|
2986 | }), React__default.createElement("path", {
|
2987 | fill: "none",
|
2988 | d: "M0 0h24v24H0z"
|
2989 | }));
|
2990 | };
|
2991 |
|
2992 | var viewToTabIndex = function viewToTabIndex(openView) {
|
2993 | if (openView === 'date' || openView === 'year') {
|
2994 | return 'date';
|
2995 | }
|
2996 |
|
2997 | return 'time';
|
2998 | };
|
2999 |
|
3000 | var tabIndexToView = function tabIndexToView(tab) {
|
3001 | if (tab === 'date') {
|
3002 | return 'date';
|
3003 | }
|
3004 |
|
3005 | return 'hours';
|
3006 | };
|
3007 |
|
3008 | var useStyles$e = makeStyles(function (theme) {
|
3009 |
|
3010 | var tabsBackground = theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"];
|
3011 | return {
|
3012 | tabs: {
|
3013 | color: theme.palette.getContrastText(tabsBackground),
|
3014 | backgroundColor: tabsBackground
|
3015 | }
|
3016 | };
|
3017 | }, {
|
3018 | name: 'MuiPickerDTTabs'
|
3019 | });
|
3020 | var DateTimePickerTabs = function DateTimePickerTabs(_ref) {
|
3021 | var view = _ref.view,
|
3022 | onChange = _ref.onChange,
|
3023 | dateRangeIcon = _ref.dateRangeIcon,
|
3024 | timeIcon = _ref.timeIcon;
|
3025 | var classes = useStyles$e();
|
3026 | var theme = useTheme();
|
3027 | var indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';
|
3028 |
|
3029 | var handleChange = function handleChange(e, value) {
|
3030 | if (value !== viewToTabIndex(view)) {
|
3031 | onChange(tabIndexToView(value));
|
3032 | }
|
3033 | };
|
3034 |
|
3035 | return createElement(Paper, null, createElement(Tabs, {
|
3036 | variant: "fullWidth",
|
3037 | value: viewToTabIndex(view),
|
3038 | onChange: handleChange,
|
3039 | className: classes.tabs,
|
3040 | indicatorColor: indicatorColor
|
3041 | }, createElement(Tab, {
|
3042 | value: "date",
|
3043 | icon: createElement(Fragment, null, dateRangeIcon)
|
3044 | }), createElement(Tab, {
|
3045 | value: "time",
|
3046 | icon: createElement(Fragment, null, timeIcon)
|
3047 | })));
|
3048 | };
|
3049 | DateTimePickerTabs.defaultProps = {
|
3050 | dateRangeIcon: createElement(DateRangeIcon, null),
|
3051 | timeIcon: createElement(TimeIcon, null)
|
3052 | };
|
3053 |
|
3054 | var useStyles$f = makeStyles(function (_) {
|
3055 | return {
|
3056 | toolbar: {
|
3057 | paddingLeft: 16,
|
3058 | paddingRight: 16,
|
3059 | justifyContent: 'space-around'
|
3060 | },
|
3061 | separator: {
|
3062 | margin: '0 4px 0 2px',
|
3063 | cursor: 'default'
|
3064 | }
|
3065 | };
|
3066 | }, {
|
3067 | name: 'MuiPickerDTToolbar'
|
3068 | });
|
3069 | var DateTimePickerToolbar = function DateTimePickerToolbar(_ref) {
|
3070 | var date = _ref.date,
|
3071 | openView = _ref.openView,
|
3072 | setOpenView = _ref.setOpenView,
|
3073 | ampm = _ref.ampm,
|
3074 | hideTabs = _ref.hideTabs,
|
3075 | dateRangeIcon = _ref.dateRangeIcon,
|
3076 | timeIcon = _ref.timeIcon,
|
3077 | onChange = _ref.onChange;
|
3078 | var utils = useUtils();
|
3079 | var classes = useStyles$f();
|
3080 | var showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
|
3081 |
|
3082 | var _useMeridiemMode = useMeridiemMode(date, ampm, onChange),
|
3083 | meridiemMode = _useMeridiemMode.meridiemMode,
|
3084 | handleMeridiemChange = _useMeridiemMode.handleMeridiemChange;
|
3085 |
|
3086 | var theme = useTheme();
|
3087 | var rtl = theme.direction === 'rtl';
|
3088 | return createElement(Fragment, null, createElement(PickerToolbar, {
|
3089 | isLandscape: false,
|
3090 | className: classes.toolbar
|
3091 | }, createElement(Grid, {
|
3092 | container: true,
|
3093 | justify: "center",
|
3094 | wrap: "nowrap"
|
3095 | }, createElement(Grid, {
|
3096 | item: true,
|
3097 | container: true,
|
3098 | xs: 5,
|
3099 | justify: "flex-start",
|
3100 | direction: "column"
|
3101 | }, createElement("div", null, createElement(ToolbarButton$1, {
|
3102 | variant: "subtitle1",
|
3103 | onClick: function onClick() {
|
3104 | return setOpenView('year');
|
3105 | },
|
3106 | selected: openView === 'year',
|
3107 | label: utils.getYearText(date)
|
3108 | })), createElement("div", null, createElement(ToolbarButton$1, {
|
3109 | variant: "h4",
|
3110 | onClick: function onClick() {
|
3111 | return setOpenView('date');
|
3112 | },
|
3113 | selected: openView === 'date',
|
3114 | label: utils.getDateTimePickerHeaderText(date)
|
3115 | }))), createElement(Grid, {
|
3116 | item: true,
|
3117 | container: true,
|
3118 | xs: 6,
|
3119 | justify: "center",
|
3120 | alignItems: "flex-end",
|
3121 | direction: rtl ? 'row-reverse' : 'row'
|
3122 | }, createElement(ToolbarButton$1, {
|
3123 | variant: "h3",
|
3124 | onClick: function onClick() {
|
3125 | return setOpenView('hours');
|
3126 | },
|
3127 | selected: openView === 'hours',
|
3128 | label: utils.getHourText(date, ampm)
|
3129 | }), createElement(ToolbarText, {
|
3130 | variant: "h3",
|
3131 | label: ":",
|
3132 | className: classes.separator
|
3133 | }), createElement(ToolbarButton$1, {
|
3134 | variant: "h3",
|
3135 | onClick: function onClick() {
|
3136 | return setOpenView('minutes');
|
3137 | },
|
3138 | selected: openView === 'minutes',
|
3139 | label: utils.getMinuteText(date)
|
3140 | })), ampm && createElement(Grid, {
|
3141 | item: true,
|
3142 | container: true,
|
3143 | xs: 1,
|
3144 | direction: "column",
|
3145 | justify: "flex-end"
|
3146 | }, createElement(ToolbarButton$1, {
|
3147 | variant: "subtitle1",
|
3148 | selected: meridiemMode === 'am',
|
3149 | label: utils.getMeridiemText('am'),
|
3150 | onClick: function onClick() {
|
3151 | return handleMeridiemChange('am');
|
3152 | }
|
3153 | }), createElement(ToolbarButton$1, {
|
3154 | variant: "subtitle1",
|
3155 | selected: meridiemMode === 'pm',
|
3156 | label: utils.getMeridiemText('pm'),
|
3157 | onClick: function onClick() {
|
3158 | return handleMeridiemChange('pm');
|
3159 | }
|
3160 | })))), showTabs && createElement(DateTimePickerTabs, {
|
3161 | dateRangeIcon: dateRangeIcon,
|
3162 | timeIcon: timeIcon,
|
3163 | view: openView,
|
3164 | onChange: setOpenView
|
3165 | }));
|
3166 | };
|
3167 |
|
3168 | function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
3169 |
|
3170 | function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
3171 |
|
3172 | var defaultProps$2 = _objectSpread$7({}, dateTimePickerDefaultProps, {
|
3173 | wider: true,
|
3174 | orientation: 'portrait',
|
3175 | openTo: 'date',
|
3176 | views: ['year', 'date', 'hours', 'minutes']
|
3177 | });
|
3178 |
|
3179 | function useOptions$2(props) {
|
3180 | var utils = useUtils();
|
3181 |
|
3182 | if (props.orientation !== 'portrait') {
|
3183 | throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
|
3184 | }
|
3185 |
|
3186 | return {
|
3187 | getDefaultFormat: function getDefaultFormat() {
|
3188 | return pick12hOr24hFormat(props.format, props.ampm, {
|
3189 | '12h': utils.dateTime12hFormat,
|
3190 | '24h': utils.dateTime24hFormat
|
3191 | });
|
3192 | }
|
3193 | };
|
3194 | }
|
3195 |
|
3196 | var DateTimePicker = makePickerWithState({
|
3197 | useOptions: useOptions$2,
|
3198 | Input: PureDateInput,
|
3199 | useState: usePickerState,
|
3200 | DefaultToolbarComponent: DateTimePickerToolbar
|
3201 | });
|
3202 | var KeyboardDateTimePicker = makePickerWithState({
|
3203 | useOptions: useOptions$2,
|
3204 | Input: KeyboardDateInput,
|
3205 | useState: useKeyboardPickerState,
|
3206 | DefaultToolbarComponent: DateTimePickerToolbar,
|
3207 | getCustomProps: function getCustomProps(props) {
|
3208 | return {
|
3209 | refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
|
3210 | };
|
3211 | }
|
3212 | });
|
3213 | DateTimePicker.defaultProps = defaultProps$2;
|
3214 | KeyboardDateTimePicker.defaultProps = defaultProps$2;
|
3215 |
|
3216 | function useStaticState(_ref) {
|
3217 | var value = _ref.value,
|
3218 | _ref$autoOk = _ref.autoOk,
|
3219 | autoOk = _ref$autoOk === void 0 ? true : _ref$autoOk,
|
3220 | onChange = _ref.onChange,
|
3221 | defaultFormat = _ref.defaultFormat;
|
3222 |
|
3223 | var _usePickerState = usePickerState({
|
3224 | value: value,
|
3225 | onChange: onChange,
|
3226 | autoOk: autoOk
|
3227 | }, {
|
3228 |
|
3229 | getDefaultFormat: function getDefaultFormat() {
|
3230 | return defaultFormat || 'MM/dd/yyyy';
|
3231 | }
|
3232 | }),
|
3233 | pickerProps = _usePickerState.pickerProps,
|
3234 | wrapperProps = _usePickerState.wrapperProps,
|
3235 | inputProps = _usePickerState.inputProps;
|
3236 |
|
3237 | return {
|
3238 | pickerProps: pickerProps,
|
3239 | wrapperProps: wrapperProps,
|
3240 | inputProps: inputProps
|
3241 | };
|
3242 | }
|
3243 |
|
3244 | export { Calendar$1 as Calendar, Clock$1 as Clock, ClockView, DatePicker, DateTimePicker, Day, KeyboardDatePicker, KeyboardDateTimePicker, KeyboardTimePicker, MuiPickersContext, MuiPickersUtilsProvider, Picker, TimePicker, ClockView$1 as TimePickerView, makePickerWithState, useKeyboardPickerState, usePickerState, useStaticState, useUtils, validate };
|
3245 |
|