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