1 | import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
2 | import { useState, useCallback, forwardRef, createElement, useContext, useRef, useEffect, useMemo } from 'react';
|
3 | import { oneOfType, object, string, number, instanceOf, oneOf } from 'prop-types';
|
4 | import { u as useUtils } from './useUtils-cfb96ac9.js';
|
5 | import clsx from 'clsx';
|
6 | import _extends from '@babel/runtime/helpers/esm/extends';
|
7 | import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
8 | import Typography from '@material-ui/core/Typography';
|
9 | import { makeStyles } from '@material-ui/core/styles';
|
10 | import { a as arrayIncludes, V as VariantContext, u as useIsomorphicEffect, b as VIEW_HEIGHT, D as DIALOG_WIDTH, c as DIALOG_WIDTH_WIDER } from './Wrapper-241966d7.js';
|
11 | import { a as Calendar } from './Calendar-11ae61f6.js';
|
12 | import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
|
13 | import { ClockView } from './ClockView.js';
|
14 |
|
15 | 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; }
|
16 |
|
17 | 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; }
|
18 | var date = oneOfType([object, string, number, instanceOf(Date)]);
|
19 | var datePickerView = oneOf(['year', 'month', 'day']);
|
20 |
|
21 |
|
22 | var timePickerDefaultProps = {
|
23 | ampm: true,
|
24 | invalidDateMessage: 'Invalid Time Format'
|
25 | };
|
26 | var datePickerDefaultProps = {
|
27 | minDate: new Date('1900-01-01'),
|
28 | maxDate: new Date('2100-01-01'),
|
29 | invalidDateMessage: 'Invalid Date Format',
|
30 | minDateMessage: 'Date should not be before minimal date',
|
31 | maxDateMessage: 'Date should not be after maximal date',
|
32 | allowKeyboardControl: true
|
33 | };
|
34 | var dateTimePickerDefaultProps = _objectSpread({}, timePickerDefaultProps, {}, datePickerDefaultProps, {
|
35 | showTabs: true
|
36 | });
|
37 |
|
38 | function useViews(views, openTo, onChange) {
|
39 | var _React$useState = useState(openTo && arrayIncludes(views, openTo) ? openTo : views[0]),
|
40 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
41 | openView = _React$useState2[0],
|
42 | setOpenView = _React$useState2[1];
|
43 |
|
44 | var handleChangeAndOpenNext = useCallback(function (date, isFinish) {
|
45 | var nextViewToOpen = views[views.indexOf(openView) + 1];
|
46 |
|
47 | if (isFinish && nextViewToOpen) {
|
48 |
|
49 | onChange(date, false);
|
50 | setOpenView(nextViewToOpen);
|
51 | return;
|
52 | }
|
53 |
|
54 | onChange(date, Boolean(isFinish));
|
55 | }, [onChange, openView, views]);
|
56 | return {
|
57 | handleChangeAndOpenNext: handleChangeAndOpenNext,
|
58 | openView: openView,
|
59 | setOpenView: setOpenView
|
60 | };
|
61 | }
|
62 |
|
63 | var useStyles = makeStyles(function (theme) {
|
64 | return {
|
65 | root: {
|
66 | height: 40,
|
67 | display: 'flex',
|
68 | alignItems: 'center',
|
69 | justifyContent: 'center',
|
70 | cursor: 'pointer',
|
71 | outline: 'none',
|
72 | '&:focus': {
|
73 | color: theme.palette.primary.main,
|
74 | fontWeight: theme.typography.fontWeightMedium
|
75 | }
|
76 | },
|
77 | yearSelected: {
|
78 | margin: '10px 0',
|
79 | fontWeight: theme.typography.fontWeightMedium
|
80 | },
|
81 | yearDisabled: {
|
82 | pointerEvents: 'none',
|
83 | color: theme.palette.text.hint
|
84 | }
|
85 | };
|
86 | }, {
|
87 | name: 'MuiPickersYear'
|
88 | });
|
89 | var Year = function Year(_ref) {
|
90 | var onSelect = _ref.onSelect,
|
91 | forwardedRef = _ref.forwardedRef,
|
92 | value = _ref.value,
|
93 | selected = _ref.selected,
|
94 | disabled = _ref.disabled,
|
95 | children = _ref.children,
|
96 | other = _objectWithoutProperties(_ref, ["onSelect", "forwardedRef", "value", "selected", "disabled", "children"]);
|
97 |
|
98 | var classes = useStyles();
|
99 | var handleClick = useCallback(function () {
|
100 | return onSelect(value);
|
101 | }, [onSelect, value]);
|
102 | return createElement(Typography, _extends({
|
103 | role: "button",
|
104 | component: "div",
|
105 | tabIndex: disabled ? -1 : 0,
|
106 | onClick: handleClick,
|
107 | onKeyPress: handleClick,
|
108 | color: selected ? 'primary' : undefined,
|
109 | variant: selected ? 'h5' : 'subtitle1',
|
110 | children: children,
|
111 | ref: forwardedRef,
|
112 | className: clsx(classes.root, selected && classes.yearSelected, disabled && classes.yearDisabled)
|
113 | }, other));
|
114 | };
|
115 | Year.displayName = 'Year';
|
116 | var Year$1 = forwardRef(function (props, ref) {
|
117 | return createElement(Year, _extends({}, props, {
|
118 | forwardedRef: ref
|
119 | }));
|
120 | });
|
121 |
|
122 | var useStyles$1 = makeStyles({
|
123 | container: {
|
124 | height: 300,
|
125 | overflowY: 'auto'
|
126 | }
|
127 | }, {
|
128 | name: 'MuiPickersYearSelection'
|
129 | });
|
130 | var YearSelection = function YearSelection(_ref) {
|
131 | var date = _ref.date,
|
132 | onChange = _ref.onChange,
|
133 | onYearChange = _ref.onYearChange,
|
134 | minDate = _ref.minDate,
|
135 | maxDate = _ref.maxDate,
|
136 | disablePast = _ref.disablePast,
|
137 | disableFuture = _ref.disableFuture,
|
138 | animateYearScrolling = _ref.animateYearScrolling;
|
139 | var utils = useUtils();
|
140 | var classes = useStyles$1();
|
141 | var currentVariant = useContext(VariantContext);
|
142 | var selectedYearRef = useRef(null);
|
143 | useEffect(function () {
|
144 | if (selectedYearRef.current && selectedYearRef.current.scrollIntoView) {
|
145 | try {
|
146 | selectedYearRef.current.scrollIntoView({
|
147 | block: currentVariant === 'static' ? 'nearest' : 'center',
|
148 | behavior: animateYearScrolling ? 'smooth' : 'auto'
|
149 | });
|
150 | } catch (e) {
|
151 |
|
152 | selectedYearRef.current.scrollIntoView();
|
153 | }
|
154 | }
|
155 | }, []);
|
156 |
|
157 | var currentYear = utils.getYear(date);
|
158 | var onYearSelect = useCallback(function (year) {
|
159 | var newDate = utils.setYear(date, year);
|
160 |
|
161 | if (onYearChange) {
|
162 | onYearChange(newDate);
|
163 | }
|
164 |
|
165 | onChange(newDate, true);
|
166 | }, [date, onChange, onYearChange, utils]);
|
167 | return createElement("div", {
|
168 | className: classes.container
|
169 | }, utils.getYearRange(minDate, maxDate).map(function (year) {
|
170 | var yearNumber = utils.getYear(year);
|
171 | var selected = yearNumber === currentYear;
|
172 | return createElement(Year$1, {
|
173 | key: utils.getYearText(year),
|
174 | selected: selected,
|
175 | value: yearNumber,
|
176 | onSelect: onYearSelect,
|
177 | ref: selected ? selectedYearRef : undefined,
|
178 | disabled: Boolean(disablePast && utils.isBeforeYear(year, utils.date()) || disableFuture && utils.isAfterYear(year, utils.date()))
|
179 | }, utils.getYearText(year));
|
180 | }));
|
181 | };
|
182 |
|
183 | var useStyles$2 = makeStyles(function (theme) {
|
184 | return {
|
185 | root: {
|
186 | flex: '1 0 33.33%',
|
187 | display: 'flex',
|
188 | alignItems: 'center',
|
189 | justifyContent: 'center',
|
190 | cursor: 'pointer',
|
191 | outline: 'none',
|
192 | height: 75,
|
193 | transition: theme.transitions.create('font-size', {
|
194 | duration: '100ms'
|
195 | }),
|
196 | '&:focus': {
|
197 | color: theme.palette.primary.main,
|
198 | fontWeight: theme.typography.fontWeightMedium
|
199 | }
|
200 | },
|
201 | monthSelected: {
|
202 | color: theme.palette.primary.main,
|
203 | fontWeight: theme.typography.fontWeightMedium
|
204 | },
|
205 | monthDisabled: {
|
206 | pointerEvents: 'none',
|
207 | color: theme.palette.text.hint
|
208 | }
|
209 | };
|
210 | }, {
|
211 | name: 'MuiPickersMonth'
|
212 | });
|
213 | var Month = function Month(_ref) {
|
214 | var selected = _ref.selected,
|
215 | onSelect = _ref.onSelect,
|
216 | disabled = _ref.disabled,
|
217 | value = _ref.value,
|
218 | children = _ref.children,
|
219 | other = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "value", "children"]);
|
220 |
|
221 | var classes = useStyles$2();
|
222 | var handleSelection = useCallback(function () {
|
223 | onSelect(value);
|
224 | }, [onSelect, value]);
|
225 | return createElement(Typography, _extends({
|
226 | role: "button",
|
227 | component: "div",
|
228 | className: clsx(classes.root, selected && classes.monthSelected, disabled && classes.monthDisabled),
|
229 | tabIndex: disabled ? -1 : 0,
|
230 | onClick: handleSelection,
|
231 | onKeyPress: handleSelection,
|
232 | color: selected ? 'primary' : undefined,
|
233 | variant: selected ? 'h5' : 'subtitle1',
|
234 | children: children
|
235 | }, other));
|
236 | };
|
237 | Month.displayName = 'Month';
|
238 |
|
239 | var useStyles$3 = makeStyles({
|
240 | container: {
|
241 | width: 310,
|
242 | display: 'flex',
|
243 | flexWrap: 'wrap',
|
244 | alignContent: 'stretch'
|
245 | }
|
246 | }, {
|
247 | name: 'MuiPickersMonthSelection'
|
248 | });
|
249 | var MonthSelection = function MonthSelection(_ref) {
|
250 | var disablePast = _ref.disablePast,
|
251 | disableFuture = _ref.disableFuture,
|
252 | minDate = _ref.minDate,
|
253 | maxDate = _ref.maxDate,
|
254 | date = _ref.date,
|
255 | onMonthChange = _ref.onMonthChange,
|
256 | onChange = _ref.onChange;
|
257 | var utils = useUtils();
|
258 | var classes = useStyles$3();
|
259 | var currentMonth = utils.getMonth(date);
|
260 |
|
261 | var shouldDisableMonth = function shouldDisableMonth(month) {
|
262 | var now = utils.date();
|
263 | var utilMinDate = utils.date(minDate);
|
264 | var utilMaxDate = utils.date(maxDate);
|
265 | var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, utilMinDate) ? now : utilMinDate);
|
266 | var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, utilMaxDate) ? now : utilMaxDate);
|
267 | var isBeforeFirstEnabled = utils.isBefore(month, firstEnabledMonth);
|
268 | var isAfterLastEnabled = utils.isAfter(month, lastEnabledMonth);
|
269 | return isBeforeFirstEnabled || isAfterLastEnabled;
|
270 | };
|
271 |
|
272 | var onMonthSelect = useCallback(function (month) {
|
273 | var newDate = utils.setMonth(date, month);
|
274 | onChange(newDate, true);
|
275 |
|
276 | if (onMonthChange) {
|
277 | onMonthChange(newDate);
|
278 | }
|
279 | }, [date, onChange, onMonthChange, utils]);
|
280 | return createElement("div", {
|
281 | className: classes.container
|
282 | }, utils.getMonthArray(date).map(function (month) {
|
283 | var monthNumber = utils.getMonth(month);
|
284 | var monthText = utils.format(month, 'MMM');
|
285 | return createElement(Month, {
|
286 | key: monthText,
|
287 | value: monthNumber,
|
288 | selected: monthNumber === currentMonth,
|
289 | onSelect: onMonthSelect,
|
290 | disabled: shouldDisableMonth(month)
|
291 | }, monthText);
|
292 | }));
|
293 | };
|
294 |
|
295 | var getOrientation = function getOrientation() {
|
296 | if (typeof window === 'undefined') {
|
297 | return 'portrait';
|
298 | }
|
299 |
|
300 | if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
|
301 | return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
|
302 | }
|
303 |
|
304 |
|
305 | if (window.orientation) {
|
306 | return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
|
307 | }
|
308 |
|
309 | return 'portrait';
|
310 | };
|
311 |
|
312 | function useIsLandscape(customOrientation) {
|
313 | var _React$useState = useState(getOrientation()),
|
314 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
315 | orientation = _React$useState2[0],
|
316 | setOrientation = _React$useState2[1];
|
317 |
|
318 | var eventHandler = useCallback(function () {
|
319 | return setOrientation(getOrientation());
|
320 | }, []);
|
321 | useIsomorphicEffect(function () {
|
322 | window.addEventListener('orientationchange', eventHandler);
|
323 | return function () {
|
324 | return window.removeEventListener('orientationchange', eventHandler);
|
325 | };
|
326 | }, [eventHandler]);
|
327 | var orientationToUse = customOrientation || orientation;
|
328 | return orientationToUse === 'landscape';
|
329 | }
|
330 |
|
331 | 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; }
|
332 |
|
333 | 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; }
|
334 | var viewsMap = {
|
335 | year: YearSelection,
|
336 | month: MonthSelection,
|
337 | date: Calendar,
|
338 | hours: ClockView,
|
339 | minutes: ClockView,
|
340 | seconds: ClockView
|
341 | };
|
342 | var useStyles$4 = makeStyles({
|
343 | container: {
|
344 | display: 'flex',
|
345 | flexDirection: 'column'
|
346 | },
|
347 | containerLandscape: {
|
348 | flexDirection: 'row'
|
349 | },
|
350 | pickerView: {
|
351 | overflowX: 'hidden',
|
352 | minHeight: VIEW_HEIGHT,
|
353 | minWidth: DIALOG_WIDTH,
|
354 | maxWidth: DIALOG_WIDTH_WIDER,
|
355 | display: 'flex',
|
356 | flexDirection: 'column',
|
357 | justifyContent: 'center'
|
358 | },
|
359 | pickerViewLandscape: {
|
360 | padding: '0 8px'
|
361 | }
|
362 | }, {
|
363 | name: 'MuiPickersBasePicker'
|
364 | });
|
365 | var Picker = function Picker(_ref) {
|
366 | var date = _ref.date,
|
367 | views = _ref.views,
|
368 | disableToolbar = _ref.disableToolbar,
|
369 | onChange = _ref.onChange,
|
370 | openTo = _ref.openTo,
|
371 | unparsedMinDate = _ref.minDate,
|
372 | unparsedMaxDate = _ref.maxDate,
|
373 | ToolbarComponent = _ref.ToolbarComponent,
|
374 | orientation = _ref.orientation,
|
375 | rest = _objectWithoutProperties(_ref, ["date", "views", "disableToolbar", "onChange", "openTo", "minDate", "maxDate", "ToolbarComponent", "orientation"]);
|
376 |
|
377 | var utils = useUtils();
|
378 | var classes = useStyles$4();
|
379 | var isLandscape = useIsLandscape(orientation);
|
380 |
|
381 | var _useViews = useViews(views, openTo, onChange),
|
382 | openView = _useViews.openView,
|
383 | setOpenView = _useViews.setOpenView,
|
384 | handleChangeAndOpenNext = _useViews.handleChangeAndOpenNext;
|
385 |
|
386 | var minDate = useMemo(function () {
|
387 | return utils.date(unparsedMinDate);
|
388 | }, [unparsedMinDate, utils]);
|
389 | var maxDate = useMemo(function () {
|
390 | return utils.date(unparsedMaxDate);
|
391 | }, [unparsedMaxDate, utils]);
|
392 | return createElement("div", {
|
393 | className: clsx(classes.container, isLandscape && classes.containerLandscape)
|
394 | }, !disableToolbar && createElement(ToolbarComponent, _extends({}, rest, {
|
395 | views: views,
|
396 | isLandscape: isLandscape,
|
397 | date: date,
|
398 | onChange: onChange,
|
399 | setOpenView: setOpenView,
|
400 | openView: openView
|
401 | })), createElement("div", {
|
402 | className: clsx(classes.pickerView, isLandscape && classes.pickerViewLandscape)
|
403 | }, openView === 'year' && createElement(YearSelection, _extends({}, rest, {
|
404 | date: date,
|
405 | onChange: handleChangeAndOpenNext,
|
406 | minDate: minDate,
|
407 | maxDate: maxDate
|
408 | })), openView === 'month' && createElement(MonthSelection, _extends({}, rest, {
|
409 | date: date,
|
410 | onChange: handleChangeAndOpenNext,
|
411 | minDate: minDate,
|
412 | maxDate: maxDate
|
413 | })), openView === 'date' && createElement(Calendar, _extends({}, rest, {
|
414 | date: date,
|
415 | onChange: handleChangeAndOpenNext,
|
416 | minDate: minDate,
|
417 | maxDate: maxDate
|
418 | })), (openView === 'hours' || openView === 'minutes' || openView === 'seconds') && createElement(ClockView, _extends({}, rest, {
|
419 | date: date,
|
420 | type: openView,
|
421 | onHourChange: handleChangeAndOpenNext,
|
422 | onMinutesChange: handleChangeAndOpenNext,
|
423 | onSecondsChange: handleChangeAndOpenNext
|
424 | }))));
|
425 | };
|
426 | Picker.defaultProps = _objectSpread$1({}, datePickerDefaultProps, {
|
427 | views: Object.keys(viewsMap)
|
428 | });
|
429 |
|
430 | export { Picker as P, dateTimePickerDefaultProps as a, datePickerDefaultProps as d, timePickerDefaultProps as t };
|
431 |
|