@material-ui/pickers
Version:
React components, that implements material design pickers for material-ui v4
1,505 lines (1,351 loc) • 105 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import React__default, { createContext, useMemo, createElement, useContext, useState, useCallback, useEffect, useDebugValue, useRef, cloneElement, useLayoutEffect, Fragment, Component, memo, forwardRef } from 'react';
import { func, oneOfType, object, string, element, arrayOf, bool, any, number, instanceOf, oneOf, node } from 'prop-types';
import clsx from 'clsx';
import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import Typography from '@material-ui/core/Typography';
import { makeStyles, fade, withStyles, createStyles, useTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Toolbar from '@material-ui/core/Toolbar';
import TextField from '@material-ui/core/TextField';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import { Rifm } from 'rifm';
import SvgIcon from '@material-ui/core/SvgIcon';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import CircularProgress from '@material-ui/core/CircularProgress';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import Dialog from '@material-ui/core/Dialog';
import Popover from '@material-ui/core/Popover';
import Grid from '@material-ui/core/Grid';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import Paper from '@material-ui/core/Paper';
var MuiPickersContext = createContext(null);
var MuiPickersUtilsProvider = function MuiPickersUtilsProvider(_ref) {
var Utils = _ref.utils,
children = _ref.children,
locale = _ref.locale,
libInstance = _ref.libInstance;
var utils = useMemo(function () {
return new Utils({
locale: locale,
instance: libInstance
});
}, [Utils, libInstance, locale]);
return createElement(MuiPickersContext.Provider, {
value: utils,
children: children
});
};
process.env.NODE_ENV !== "production" ? MuiPickersUtilsProvider.propTypes = {
utils: func.isRequired,
locale: oneOfType([object, string]),
children: oneOfType([element.isRequired, arrayOf(element.isRequired)]).isRequired
} : void 0;
var checkUtils = function checkUtils(utils) {
if (!utils) {
// tslint:disable-next-line
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.');
}
};
function useUtils() {
var utils = useContext(MuiPickersContext);
checkUtils(utils);
return utils;
}
var useStyles = makeStyles(function (theme) {
var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background["default"]);
return {
toolbarTxt: {
color: fade(textColor, 0.54)
},
toolbarBtnSelected: {
color: textColor
}
};
}, {
name: 'MuiPickersToolbarText'
});
var ToolbarText = function ToolbarText(_ref) {
var selected = _ref.selected,
label = _ref.label,
_ref$className = _ref.className,
className = _ref$className === void 0 ? null : _ref$className,
other = _objectWithoutProperties(_ref, ["selected", "label", "className"]);
var classes = useStyles();
return createElement(Typography, _extends({
children: label,
className: clsx(classes.toolbarTxt, className, selected && classes.toolbarBtnSelected)
}, other));
};
var ToolbarButton = function ToolbarButton(_ref) {
var classes = _ref.classes,
_ref$className = _ref.className,
className = _ref$className === void 0 ? null : _ref$className,
label = _ref.label,
selected = _ref.selected,
variant = _ref.variant,
align = _ref.align,
typographyClassName = _ref.typographyClassName,
other = _objectWithoutProperties(_ref, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
return createElement(Button, _extends({
variant: "text",
className: clsx(classes.toolbarBtn, className)
}, other), createElement(ToolbarText, {
align: align,
className: typographyClassName,
variant: variant,
label: label,
selected: selected
}));
};
process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
selected: bool.isRequired,
label: string.isRequired,
classes: any.isRequired,
className: string,
innerRef: any
} : void 0;
ToolbarButton.defaultProps = {
className: ''
};
var styles = createStyles({
toolbarBtn: {
padding: 0,
minWidth: '16px',
textTransform: 'none'
}
});
var ToolbarButton$1 = withStyles(styles, {
name: 'MuiPickersToolbarButton'
})(ToolbarButton);
var useStyles$1 = makeStyles(function (theme) {
return {
toolbar: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: 100,
backgroundColor: theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"]
},
toolbarLandscape: {
height: 'auto',
maxWidth: 150,
padding: 8,
justifyContent: 'flex-start'
}
};
}, {
name: 'MuiPickersToolbar'
});
var PickerToolbar = function PickerToolbar(_ref) {
var children = _ref.children,
isLandscape = _ref.isLandscape,
_ref$className = _ref.className,
className = _ref$className === void 0 ? null : _ref$className,
other = _objectWithoutProperties(_ref, ["children", "isLandscape", "className"]);
var classes = useStyles$1();
return createElement(Toolbar, _extends({
className: clsx(classes.toolbar, className, isLandscape && classes.toolbarLandscape)
}, other), children);
};
/** Use it instead of .includes method for IE support */
function arrayIncludes(array, itemOrItems) {
if (Array.isArray(itemOrItems)) {
return itemOrItems.every(function (item) {
return array.indexOf(item) !== -1;
});
}
return array.indexOf(itemOrItems) !== -1;
}
var findClosestEnabledDate = function findClosestEnabledDate(_ref) {
var date = _ref.date,
utils = _ref.utils,
minDate = _ref.minDate,
maxDate = _ref.maxDate,
disableFuture = _ref.disableFuture,
disablePast = _ref.disablePast,
shouldDisableDate = _ref.shouldDisableDate;
var today = utils.startOfDay(utils.date());
if (disablePast && utils.isBefore(minDate, today)) {
minDate = today;
}
if (disableFuture && utils.isAfter(maxDate, today)) {
maxDate = today;
}
var forward = date;
var backward = date;
if (utils.isBefore(date, minDate)) {
forward = utils.date(minDate);
backward = null;
}
if (utils.isAfter(date, maxDate)) {
if (backward) {
backward = utils.date(maxDate);
}
forward = null;
}
while (forward || backward) {
if (forward && utils.isAfter(forward, maxDate)) {
forward = null;
}
if (backward && utils.isBefore(backward, minDate)) {
backward = null;
}
if (forward) {
if (!shouldDisableDate(forward)) {
return forward;
}
forward = utils.addDays(forward, 1);
}
if (backward) {
if (!shouldDisableDate(backward)) {
return backward;
}
backward = utils.addDays(backward, -1);
}
} // fallback to today if no enabled days
return utils.date();
};
var isYearOnlyView = function isYearOnlyView(views) {
return views.length === 1 && views[0] === 'year';
};
var isYearAndMonthViews = function isYearAndMonthViews(views) {
return views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');
};
var getFormatByViews = function getFormatByViews(views, utils) {
if (isYearOnlyView(views)) {
return utils.yearFormat;
}
if (isYearAndMonthViews(views)) {
return utils.yearMonthFormat;
}
return utils.dateFormat;
};
var useStyles$2 = makeStyles({
toolbar: {
flexDirection: 'column',
alignItems: 'flex-start'
},
toolbarLandscape: {
padding: 16
},
dateLandscape: {
marginRight: 16
}
}, {
name: 'MuiPickersDatePickerRoot'
});
var DatePickerToolbar = function DatePickerToolbar(_ref) {
var date = _ref.date,
views = _ref.views,
setOpenView = _ref.setOpenView,
isLandscape = _ref.isLandscape,
openView = _ref.openView;
var utils = useUtils();
var classes = useStyles$2();
var isYearOnly = useMemo(function () {
return isYearOnlyView(views);
}, [views]);
var isYearAndMonth = useMemo(function () {
return isYearAndMonthViews(views);
}, [views]);
return createElement(PickerToolbar, {
isLandscape: isLandscape,
className: clsx(!isYearOnly && classes.toolbar, isLandscape && classes.toolbarLandscape)
}, createElement(ToolbarButton$1, {
variant: isYearOnly ? 'h3' : 'subtitle1',
onClick: function onClick() {
return setOpenView('year');
},
selected: openView === 'year',
label: utils.getYearText(date)
}), !isYearOnly && !isYearAndMonth && createElement(ToolbarButton$1, {
variant: "h4",
selected: openView === 'date',
onClick: function onClick() {
return setOpenView('date');
},
align: isLandscape ? 'left' : 'center',
label: utils.getDatePickerHeaderText(date),
className: clsx(isLandscape && classes.dateLandscape)
}), isYearAndMonth && createElement(ToolbarButton$1, {
variant: "h4",
onClick: function onClick() {
return setOpenView('month');
},
selected: openView === 'month',
label: utils.getMonthText(date)
}));
};
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; }
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; }
var PureDateInput = function PureDateInput(_ref) {
var inputValue = _ref.inputValue,
inputVariant = _ref.inputVariant,
validationError = _ref.validationError,
InputProps = _ref.InputProps,
onOpen = _ref.openPicker,
_ref$TextFieldCompone = _ref.TextFieldComponent,
TextFieldComponent = _ref$TextFieldCompone === void 0 ? TextField : _ref$TextFieldCompone,
other = _objectWithoutProperties(_ref, ["inputValue", "inputVariant", "validationError", "InputProps", "openPicker", "TextFieldComponent"]);
var PureDateInputProps = useMemo(function () {
return _objectSpread({}, InputProps, {
readOnly: true
});
}, [InputProps]);
return createElement(TextFieldComponent, _extends({
error: Boolean(validationError),
helperText: validationError
}, other, {
// do not overridable
onClick: onOpen,
value: inputValue,
variant: inputVariant,
InputProps: PureDateInputProps,
onKeyDown: function onKeyDown(e) {
// space
if (e.keyCode === 32) {
e.stopPropagation();
onOpen();
}
}
}));
};
PureDateInput.displayName = 'PureDateInput';
var KeyboardIcon = function KeyboardIcon(props) {
return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
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"
}), React__default.createElement("path", {
fill: "none",
d: "M0 0h24v24H0z"
}));
};
var getDisplayDate = function getDisplayDate(value, format, utils, isEmpty, _ref) {
var invalidLabel = _ref.invalidLabel,
emptyLabel = _ref.emptyLabel,
labelFunc = _ref.labelFunc;
var date = utils.date(value);
if (labelFunc) {
return labelFunc(isEmpty ? null : date, invalidLabel);
}
if (isEmpty) {
return emptyLabel || '';
}
return utils.isValid(date) ? utils.format(date, format) : invalidLabel;
};
var getComparisonMaxDate = function getComparisonMaxDate(utils, strictCompareDates, date) {
if (strictCompareDates) {
return date;
}
return utils.endOfDay(date);
};
var getComparisonMinDate = function getComparisonMinDate(utils, strictCompareDates, date) {
if (strictCompareDates) {
return date;
}
return utils.startOfDay(date);
};
var validate = function validate(value, utils, _ref2) {
var maxDate = _ref2.maxDate,
minDate = _ref2.minDate,
disablePast = _ref2.disablePast,
disableFuture = _ref2.disableFuture,
maxDateMessage = _ref2.maxDateMessage,
minDateMessage = _ref2.minDateMessage,
invalidDateMessage = _ref2.invalidDateMessage,
strictCompareDates = _ref2.strictCompareDates;
var parsedValue = utils.date(value); // if null - do not show error
if (value === null) {
return '';
}
if (!utils.isValid(value)) {
return invalidDateMessage;
}
if (maxDate && utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date(maxDate)))) {
return maxDateMessage;
}
if (disableFuture && utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date()))) {
return maxDateMessage;
}
if (minDate && utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date(minDate)))) {
return minDateMessage;
}
if (disablePast && utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date()))) {
return minDateMessage;
}
return '';
};
function pick12hOr24hFormat(userFormat) {
var ampm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var formats = arguments.length > 2 ? arguments[2] : undefined;
if (userFormat) {
return userFormat;
}
return ampm ? formats['12h'] : formats['24h'];
}
function makeMaskFromFormat(format, numberMaskChar) {
return format.replace(/[a-z]/gi, numberMaskChar);
}
var maskedDateFormatter = function maskedDateFormatter(mask, numberMaskChar, refuse) {
return function (value) {
var result = '';
var parsed = value.replace(refuse, '');
if (parsed === '') {
return parsed;
}
var i = 0;
var n = 0;
while (i < mask.length) {
var maskChar = mask[i];
if (maskChar === numberMaskChar && n < parsed.length) {
var parsedChar = parsed[n];
result += parsedChar;
n += 1;
} else {
result += maskChar;
}
i += 1;
}
return result;
};
};
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; }
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; }
var KeyboardDateInput = function KeyboardDateInput(_ref) {
var inputValue = _ref.inputValue,
inputVariant = _ref.inputVariant,
validationError = _ref.validationError,
KeyboardButtonProps = _ref.KeyboardButtonProps,
InputAdornmentProps = _ref.InputAdornmentProps,
onOpen = _ref.openPicker,
onChange = _ref.onChange,
InputProps = _ref.InputProps,
mask = _ref.mask,
_ref$maskChar = _ref.maskChar,
maskChar = _ref$maskChar === void 0 ? '_' : _ref$maskChar,
_ref$refuse = _ref.refuse,
refuse = _ref$refuse === void 0 ? /[^\d]+/gi : _ref$refuse,
format = _ref.format,
keyboardIcon = _ref.keyboardIcon,
disabled = _ref.disabled,
rifmFormatter = _ref.rifmFormatter,
_ref$TextFieldCompone = _ref.TextFieldComponent,
TextFieldComponent = _ref$TextFieldCompone === void 0 ? TextField : _ref$TextFieldCompone,
other = _objectWithoutProperties(_ref, ["inputValue", "inputVariant", "validationError", "KeyboardButtonProps", "InputAdornmentProps", "openPicker", "onChange", "InputProps", "mask", "maskChar", "refuse", "format", "keyboardIcon", "disabled", "rifmFormatter", "TextFieldComponent"]);
var inputMask = mask || makeMaskFromFormat(format, maskChar); // prettier-ignore
var formatter = useMemo(function () {
return maskedDateFormatter(inputMask, maskChar, refuse);
}, [inputMask, maskChar, refuse]);
var position = InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
var handleChange = function handleChange(text) {
var finalString = text === '' || text === inputMask ? null : text;
onChange(finalString);
};
return createElement(Rifm, {
key: inputMask,
value: inputValue,
onChange: handleChange,
refuse: refuse,
format: rifmFormatter || formatter
}, function (_ref2) {
var onChange = _ref2.onChange,
value = _ref2.value;
return createElement(TextFieldComponent, _extends({
disabled: disabled,
error: Boolean(validationError),
helperText: validationError
}, other, {
value: value,
onChange: onChange,
variant: inputVariant,
InputProps: _objectSpread$1({}, InputProps, _defineProperty({}, "".concat(position, "Adornment"), createElement(InputAdornment, _extends({
position: position
}, InputAdornmentProps), createElement(IconButton, _extends({
disabled: disabled
}, KeyboardButtonProps, {
onClick: onOpen
}), keyboardIcon))))
}));
});
};
KeyboardDateInput.defaultProps = {
keyboardIcon: createElement(KeyboardIcon, null)
};
function useOpenState(_ref) {
var open = _ref.open,
onOpen = _ref.onOpen,
onClose = _ref.onClose;
var setIsOpenState = null;
if (open === undefined || open === null) {
// The component is uncontrolled, so we need to give it its own state.
var _useState = useState(false);
var _useState2 = _slicedToArray(_useState, 2);
open = _useState2[0];
setIsOpenState = _useState2[1];
} // prettier-ignore
var setIsOpen = useCallback(function (newIsOpen) {
setIsOpenState && setIsOpenState(newIsOpen);
return newIsOpen ? onOpen && onOpen() : onClose && onClose();
}, [onOpen, onClose, setIsOpenState]);
return {
isOpen: open,
setIsOpen: setIsOpen
};
}
var useValueToDate = function useValueToDate(utils, _ref) {
var value = _ref.value,
initialFocusedDate = _ref.initialFocusedDate;
var nowRef = useRef(utils.date());
var date = utils.date(value || initialFocusedDate || nowRef.current);
return date && utils.isValid(date) ? date : nowRef.current;
};
function useDateValues(props, options) {
var utils = useUtils();
var date = useValueToDate(utils, props);
var format = props.format || options.getDefaultFormat();
return {
date: date,
format: format
};
}
function usePickerState(props, options) {
var autoOk = props.autoOk,
disabled = props.disabled,
readOnly = props.readOnly,
onAccept = props.onAccept,
_onChange = props.onChange,
onError = props.onError,
value = props.value,
variant = props.variant;
var utils = useUtils();
var _useOpenState = useOpenState(props),
isOpen = _useOpenState.isOpen,
setIsOpen = _useOpenState.setIsOpen;
var _useDateValues = useDateValues(props, options),
date = _useDateValues.date,
format = _useDateValues.format;
var _useState = useState(date),
_useState2 = _slicedToArray(_useState, 2),
pickerDate = _useState2[0],
setPickerDate = _useState2[1];
useEffect(function () {
// if value was changed in closed state - treat it as accepted
if (!isOpen && !utils.isEqual(pickerDate, date)) {
setPickerDate(date);
}
}, [date, isOpen, pickerDate, utils]);
var acceptDate = useCallback(function (acceptedDate) {
_onChange(acceptedDate);
if (onAccept) {
onAccept(acceptedDate);
}
setIsOpen(false);
}, [onAccept, _onChange, setIsOpen]);
var wrapperProps = useMemo(function () {
return {
format: format,
open: isOpen,
onClear: function onClear() {
return acceptDate(null);
},
onAccept: function onAccept() {
return acceptDate(pickerDate);
},
onSetToday: function onSetToday() {
return setPickerDate(utils.date());
},
onDismiss: function onDismiss() {
setIsOpen(false);
}
};
}, [acceptDate, format, isOpen, pickerDate, setIsOpen, utils]);
var pickerProps = useMemo(function () {
return {
date: pickerDate,
onChange: function onChange(newDate) {
var isFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
setPickerDate(newDate);
if (isFinish && autoOk) {
acceptDate(newDate);
return;
} // simulate autoOk, but do not close the modal
if (variant === 'inline' || variant === 'static') {
_onChange(newDate);
onAccept && onAccept(newDate);
}
}
};
}, [acceptDate, autoOk, onAccept, _onChange, pickerDate, variant]);
var validationError = validate(value, utils, props);
useEffect(function () {
if (onError) {
onError(validationError, value);
}
}, [onError, validationError, value]);
var inputValue = getDisplayDate(date, format, utils, value === null, props);
var inputProps = useMemo(function () {
return {
inputValue: inputValue,
validationError: validationError,
openPicker: function openPicker() {
return !readOnly && !disabled && setIsOpen(true);
}
};
}, [disabled, inputValue, readOnly, setIsOpen, validationError]);
var pickerState = {
pickerProps: pickerProps,
inputProps: inputProps,
wrapperProps: wrapperProps
};
useDebugValue(pickerState);
return pickerState;
}
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; }
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; }
var date = oneOfType([object, string, number, instanceOf(Date)]);
var datePickerView = oneOf(['year', 'month', 'day']);
/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
var timePickerDefaultProps = {
ampm: true,
invalidDateMessage: 'Invalid Time Format'
};
var datePickerDefaultProps = {
minDate: new Date('1900-01-01'),
maxDate: new Date('2100-01-01'),
invalidDateMessage: 'Invalid Date Format',
minDateMessage: 'Date should not be before minimal date',
maxDateMessage: 'Date should not be after maximal date',
allowKeyboardControl: true
};
var dateTimePickerDefaultProps = _objectSpread$2({}, timePickerDefaultProps, {}, datePickerDefaultProps, {
showTabs: true
});
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; }
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; }
function parseInputString(value, utils, format) {
try {
return utils.parse(value, format);
} catch (_unused) {
return null;
}
}
function useKeyboardPickerState(props, options) {
var _props$format = props.format,
format = _props$format === void 0 ? options.getDefaultFormat() : _props$format,
inputValue = props.inputValue,
_onChange = props.onChange,
value = props.value;
var utils = useUtils();
var displayDate = getDisplayDate(value, format, utils, value === null, props);
var _useState = useState(displayDate),
_useState2 = _slicedToArray(_useState, 2),
innerInputValue = _useState2[0],
setInnerInputValue = _useState2[1];
var dateValue = inputValue ? parseInputString(inputValue, utils, format) : value;
useEffect(function () {
if (value === null || utils.isValid(value)) {
setInnerInputValue(displayDate);
}
}, [displayDate, setInnerInputValue, utils, value]);
var handleKeyboardChange = useCallback(function (date) {
_onChange(date, date === null ? null : utils.format(date, format));
}, [format, _onChange, utils]);
var _usePickerState = usePickerState( // Extend props interface
_objectSpread$3({}, props, {
value: dateValue,
onChange: handleKeyboardChange
}), options),
innerInputProps = _usePickerState.inputProps,
wrapperProps = _usePickerState.wrapperProps,
pickerProps = _usePickerState.pickerProps;
var inputProps = useMemo(function () {
return _objectSpread$3({}, innerInputProps, {
// reuse validation and open/close logic
format: wrapperProps.format,
inputValue: inputValue || innerInputValue,
onChange: function onChange(value) {
setInnerInputValue(value || '');
var date = value === null ? null : utils.parse(value, wrapperProps.format);
_onChange(date, value);
}
});
}, [innerInputProps, innerInputValue, inputValue, _onChange, utils, wrapperProps.format]);
return {
inputProps: inputProps,
wrapperProps: wrapperProps,
pickerProps: pickerProps
};
}
var useStyles$3 = makeStyles(function (theme) {
return {
day: {
width: 36,
height: 36,
fontSize: theme.typography.caption.fontSize,
margin: '0 2px',
color: theme.palette.text.primary,
fontWeight: theme.typography.fontWeightMedium,
padding: 0
},
hidden: {
opacity: 0,
pointerEvents: 'none'
},
current: {
color: theme.palette.primary.main,
fontWeight: 600
},
daySelected: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
'&:hover': {
backgroundColor: theme.palette.primary.main
}
},
dayDisabled: {
pointerEvents: 'none',
color: theme.palette.text.hint
}
};
}, {
name: 'MuiPickersDay'
});
var Day = function Day(_ref) {
var children = _ref.children,
disabled = _ref.disabled,
hidden = _ref.hidden,
current = _ref.current,
selected = _ref.selected,
other = _objectWithoutProperties(_ref, ["children", "disabled", "hidden", "current", "selected"]);
var classes = useStyles$3();
var className = clsx(classes.day, hidden && classes.hidden, current && classes.current, selected && classes.daySelected, disabled && classes.dayDisabled);
return createElement(IconButton, _extends({
className: className,
tabIndex: hidden || disabled ? -1 : 0
}, other), createElement(Typography, {
variant: "body2",
color: "inherit"
}, children));
};
Day.displayName = 'Day';
process.env.NODE_ENV !== "production" ? Day.propTypes = {
current: bool,
disabled: bool,
hidden: bool,
selected: bool
} : void 0;
Day.defaultProps = {
disabled: false,
hidden: false,
current: false,
selected: false
};
var DayWrapper = function DayWrapper(_ref) {
var children = _ref.children,
value = _ref.value,
disabled = _ref.disabled,
onSelect = _ref.onSelect,
dayInCurrentMonth = _ref.dayInCurrentMonth,
other = _objectWithoutProperties(_ref, ["children", "value", "disabled", "onSelect", "dayInCurrentMonth"]);
var handleClick = useCallback(function () {
return onSelect(value);
}, [onSelect, value]);
return createElement("div", _extends({
role: "presentation",
onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
}, other), children);
};
var animationDuration = 350;
var useStyles$4 = makeStyles(function (theme) {
var slideTransition = theme.transitions.create('transform', {
duration: animationDuration,
easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
});
return {
transitionContainer: {
display: 'block',
position: 'relative',
'& > *': {
position: 'absolute',
top: 0,
right: 0,
left: 0
}
},
'slideEnter-left': {
willChange: 'transform',
transform: 'translate(100%)'
},
'slideEnter-right': {
willChange: 'transform',
transform: 'translate(-100%)'
},
slideEnterActive: {
transform: 'translate(0%)',
transition: slideTransition
},
slideExit: {
transform: 'translate(0%)'
},
'slideExitActiveLeft-left': {
willChange: 'transform',
transform: 'translate(-200%)',
transition: slideTransition
},
'slideExitActiveLeft-right': {
willChange: 'transform',
transform: 'translate(200%)',
transition: slideTransition
}
};
}, {
name: 'MuiPickersSlideTransition'
});
var SlideTransition = function SlideTransition(_ref) {
var children = _ref.children,
transKey = _ref.transKey,
slideDirection = _ref.slideDirection,
_ref$className = _ref.className,
className = _ref$className === void 0 ? null : _ref$className;
var classes = useStyles$4();
var transitionClasses = {
exit: classes.slideExit,
enterActive: classes.slideEnterActive,
// @ts-ignore
enter: classes['slideEnter-' + slideDirection],
// @ts-ignore
exitActive: classes['slideExitActiveLeft-' + slideDirection]
};
return createElement(TransitionGroup, {
className: clsx(classes.transitionContainer, className),
childFactory: function childFactory(element) {
return cloneElement(element, {
classNames: transitionClasses
});
}
}, createElement(CSSTransition, {
mountOnEnter: true,
unmountOnExit: true,
key: transKey + slideDirection,
timeout: animationDuration,
classNames: transitionClasses,
children: children
}));
};
var ArrowLeftIcon = function ArrowLeftIcon(props) {
return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
}), React__default.createElement("path", {
fill: "none",
d: "M0 0h24v24H0V0z"
}));
};
var ArrowRightIcon = function ArrowRightIcon(props) {
return React__default.createElement(SvgIcon, props, React__default.createElement("path", {
d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
}), React__default.createElement("path", {
fill: "none",
d: "M0 0h24v24H0V0z"
}));
};
var useStyles$5 = makeStyles(function (theme) {
return {
switchHeader: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: theme.spacing(0.5),
marginBottom: theme.spacing(1)
},
transitionContainer: {
width: '100%',
overflow: 'hidden',
height: 23
},
iconButton: {
zIndex: 1,
backgroundColor: theme.palette.background.paper
},
daysHeader: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
maxHeight: 16
},
dayLabel: {
width: 36,
margin: '0 2px',
textAlign: 'center',
color: theme.palette.text.hint
}
};
}, {
name: 'MuiPickersCalendarHeader'
});
var CalendarHeader = function CalendarHeader(_ref) {
var currentMonth = _ref.currentMonth,
onMonthChange = _ref.onMonthChange,
leftArrowIcon = _ref.leftArrowIcon,
rightArrowIcon = _ref.rightArrowIcon,
leftArrowButtonProps = _ref.leftArrowButtonProps,
rightArrowButtonProps = _ref.rightArrowButtonProps,
disablePrevMonth = _ref.disablePrevMonth,
disableNextMonth = _ref.disableNextMonth,
slideDirection = _ref.slideDirection;
var utils = useUtils();
var classes = useStyles$5();
var theme = useTheme();
var rtl = theme.direction === 'rtl';
var selectNextMonth = function selectNextMonth() {
return onMonthChange(utils.getNextMonth(currentMonth), 'left');
};
var selectPreviousMonth = function selectPreviousMonth() {
return onMonthChange(utils.getPreviousMonth(currentMonth), 'right');
};
return createElement("div", null, createElement("div", {
className: classes.switchHeader
}, createElement(IconButton, _extends({}, leftArrowButtonProps, {
disabled: disablePrevMonth,
onClick: selectPreviousMonth,
className: classes.iconButton
}), rtl ? rightArrowIcon : leftArrowIcon), createElement(SlideTransition, {
slideDirection: slideDirection,
transKey: currentMonth.toString(),
className: classes.transitionContainer
}, createElement(Typography, {
align: "center",
variant: "body1"
}, utils.getCalendarHeaderText(currentMonth))), createElement(IconButton, _extends({}, rightArrowButtonProps, {
disabled: disableNextMonth,
onClick: selectNextMonth,
className: classes.iconButton
}), rtl ? leftArrowIcon : rightArrowIcon)), createElement("div", {
className: classes.daysHeader
}, utils.getWeekdays().map(function (day, index) {
return createElement(Typography, {
key: index // eslint-disable-line react/no-array-index-key
,
variant: "caption",
className: classes.dayLabel
}, day);
})));
};
CalendarHeader.displayName = 'CalendarHeader';
process.env.NODE_ENV !== "production" ? CalendarHeader.propTypes = {
leftArrowIcon: node,
rightArrowIcon: node,
disablePrevMonth: bool,
disableNextMonth: bool
} : void 0;
CalendarHeader.defaultProps = {
leftArrowIcon: createElement(ArrowLeftIcon, null),
rightArrowIcon: createElement(ArrowRightIcon, null),
disablePrevMonth: false,
disableNextMonth: false
};
var DIALOG_WIDTH = 310;
var DIALOG_WIDTH_WIDER = 325;
var VIEW_HEIGHT = 305;
var useStyles$6 = makeStyles(function (theme) {
return {
staticWrapperRoot: {
overflow: 'hidden',
minWidth: DIALOG_WIDTH,
display: 'flex',
flexDirection: 'column',
backgroundColor: theme.palette.background.paper
}
};
}, {
name: 'MuiPickersStaticWrapper'
});
var StaticWrapper = function StaticWrapper(_ref) {
var children = _ref.children;
var classes = useStyles$6();
return createElement("div", {
className: classes.staticWrapperRoot,
children: children
});
};
var ModalDialog = function ModalDialog(_ref) {
var children = _ref.children,
classes = _ref.classes,
onAccept = _ref.onAccept,
onDismiss = _ref.onDismiss,
onClear = _ref.onClear,
onSetToday = _ref.onSetToday,
okLabel = _ref.okLabel,
cancelLabel = _ref.cancelLabel,
clearLabel = _ref.clearLabel,
todayLabel = _ref.todayLabel,
clearable = _ref.clearable,
showTodayButton = _ref.showTodayButton,
showTabs = _ref.showTabs,
wider = _ref.wider,
other = _objectWithoutProperties(_ref, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
return createElement(Dialog, _extends({
role: "dialog",
onClose: onDismiss,
classes: {
paper: clsx(classes.dialogRoot, wider && classes.dialogRootWider)
}
}, other), createElement(DialogContent, {
children: children,
className: classes.dialog
}), createElement(DialogActions, {
classes: {
root: clsx((clearable || showTodayButton) && classes.withAdditionalAction)
}
}, clearable && createElement(Button, {
color: "primary",
onClick: onClear
}, clearLabel), showTodayButton && createElement(Button, {
color: "primary",
onClick: onSetToday
}, todayLabel), cancelLabel && createElement(Button, {
color: "primary",
onClick: onDismiss
}, cancelLabel), okLabel && createElement(Button, {
color: "primary",
onClick: onAccept
}, okLabel)));
};
ModalDialog.displayName = 'ModalDialog';
var styles$1 = createStyles({
dialogRoot: {
minWidth: DIALOG_WIDTH
},
dialogRootWider: {
minWidth: DIALOG_WIDTH_WIDER
},
dialog: {
'&:first-child': {
padding: 0
}
},
withAdditionalAction: {
// set justifyContent to default value to fix IE11 layout bug
// see https://github.com/dmtrKovalenko/material-ui-pickers/pull/267
justifyContent: 'flex-start',
'& > *:first-child': {
marginRight: 'auto'
}
}
});
var ModalDialog$1 = withStyles(styles$1, {
name: 'MuiPickersModal'
})(ModalDialog);
var useIsomorphicEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
function runKeyHandler(e, keyHandlers) {
var handler = keyHandlers[e.key];
if (handler) {
handler(); // if event was handled prevent other side effects (e.g. page scroll)
e.preventDefault();
}
}
function useKeyDown(active, keyHandlers) {
var keyHandlersRef = useRef(keyHandlers);
keyHandlersRef.current = keyHandlers;
useIsomorphicEffect(function () {
if (active) {
var handleKeyDown = function handleKeyDown(event) {
runKeyHandler(event, keyHandlersRef.current);
};
window.addEventListener('keydown', handleKeyDown);
return function () {
window.removeEventListener('keydown', handleKeyDown);
};
}
}, [active]);
}
var ModalWrapper = function ModalWrapper(_ref) {
var open = _ref.open,
children = _ref.children,
okLabel = _ref.okLabel,
cancelLabel = _ref.cancelLabel,
clearLabel = _ref.clearLabel,
todayLabel = _ref.todayLabel,
showTodayButton = _ref.showTodayButton,
clearable = _ref.clearable,
DialogProps = _ref.DialogProps,
showTabs = _ref.showTabs,
wider = _ref.wider,
InputComponent = _ref.InputComponent,
DateInputProps = _ref.DateInputProps,
onClear = _ref.onClear,
onAccept = _ref.onAccept,
onDismiss = _ref.onDismiss,
onSetToday = _ref.onSetToday,
other = _objectWithoutProperties(_ref, ["open", "children", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "showTodayButton", "clearable", "DialogProps", "showTabs", "wider", "InputComponent", "DateInputProps", "onClear", "onAccept", "onDismiss", "onSetToday"]);
useKeyDown(open, {
Enter: onAccept
});
return createElement(Fragment, null, createElement(InputComponent, _extends({}, other, DateInputProps)), createElement(ModalDialog$1, _extends({
wider: wider,
showTabs: showTabs,
open: open,
onClear: onClear,
onAccept: onAccept,
onDismiss: onDismiss,
onSetToday: onSetToday,
clearLabel: clearLabel,
todayLabel: todayLabel,
okLabel: okLabel,
cancelLabel: cancelLabel,
clearable: clearable,
showTodayButton: showTodayButton,
children: children
}, DialogProps)));
};
process.env.NODE_ENV !== "production" ? ModalWrapper.propTypes = {
okLabel: node,
cancelLabel: node,
clearLabel: node,
clearable: bool,
todayLabel: node,
showTodayButton: bool,
DialogProps: object
} : void 0;
ModalWrapper.defaultProps = {
okLabel: 'OK',
cancelLabel: 'Cancel',
clearLabel: 'Clear',
todayLabel: 'Today',
clearable: false,
showTodayButton: false
};
var InlineWrapper = function InlineWrapper(_ref) {
var open = _ref.open,
wider = _ref.wider,
children = _ref.children,
PopoverProps = _ref.PopoverProps,
onClear = _ref.onClear,
onDismiss = _ref.onDismiss,
onSetToday = _ref.onSetToday,
onAccept = _ref.onAccept,
showTabs = _ref.showTabs,
DateInputProps = _ref.DateInputProps,
InputComponent = _ref.InputComponent,
other = _objectWithoutProperties(_ref, ["open", "wider", "children", "PopoverProps", "onClear", "onDismiss", "onSetToday", "onAccept", "showTabs", "DateInputProps", "InputComponent"]);
var ref = useRef();
useKeyDown(open, {
Enter: onAccept
});
return createElement(Fragment, null, createElement(InputComponent, _extends({}, other, DateInputProps, {
inputRef: ref
})), createElement(Popover, _extends({
open: open,
onClose: onDismiss,
anchorEl: ref.current,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'center'
},
transformOrigin: {
vertical: 'top',
horizontal: 'center'
},
children: children
}, PopoverProps)));
};
process.env.NODE_ENV !== "production" ? InlineWrapper.propTypes = {
onOpen: func,
onClose: func,
PopoverProps: object
} : void 0;
function getWrapperFromVariant(variant) {
switch (variant) {
case 'inline':
return InlineWrapper;
case 'static':
return StaticWrapper;
default:
return ModalWrapper;
}
}
var VariantContext = createContext(null);
var Wrapper = function Wrapper(_ref) {
var variant = _ref.variant,
props = _objectWithoutProperties(_ref, ["variant"]);
var Component = getWrapperFromVariant(variant);
return createElement(VariantContext.Provider, {
value: variant || 'dialog'
}, createElement(Component, props));
};
var withUtils = function withUtils() {
return function (Component) {
var WithUtils = function WithUtils(props) {
var utils = useUtils();
return createElement(Component, _extends({
utils: utils
}, props));
};
WithUtils.displayName = "WithUtils(".concat(Component.displayName || Component.name, ")");
return WithUtils;
};
};
var KeyDownListener = function KeyDownListener(_ref) {
var onKeyDown = _ref.onKeyDown;
useEffect(function () {
window.addEventListener('keydown', onKeyDown);
return function () {
window.removeEventListener('keydown', onKeyDown);
};
}, [onKeyDown]);
return null;
};
var Calendar =
/*#__PURE__*/
function (_React$Component) {
_inherits(Calendar, _React$Component);
function Calendar() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, Calendar);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Calendar)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.state = {
slideDirection: 'left',
currentMonth: _this.props.utils.startOfMonth(_this.props.date),
loadingQueue: 0
};
_this.pushToLoadingQueue = function () {
var loadingQueue = _this.state.loadingQueue + 1;
_this.setState({
loadingQueue: loadingQueue
});
};
_this.popFromLoadingQueue = function () {
var loadingQueue = _this.state.loadingQueue;
loadingQueue = loadingQueue <= 0 ? 0 : loadingQueue - 1;
_this.setState({
loadingQueue: loadingQueue
});
};
_this.handleChangeMonth = function (newMonth, slideDirection) {
_this.setState({
currentMonth: newMonth,
slideDirection: slideDirection
});
if (_this.props.onMonthChange) {
var returnVal = _this.props.onMonthChange(newMonth);
if (returnVal) {
_this.pushToLoadingQueue();
returnVal.then(function () {
_this.popFromLoadingQueue();
});
}
}
};
_this.validateMinMaxDate = function (day) {
var _this$props = _this.props,
minDate = _this$props.minDate,
maxDate = _this$props.maxDate,
utils = _this$props.utils,
disableFuture = _this$props.disableFuture,
disablePast = _this$props.disablePast;
var now = utils.date();
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)));
};
_this.shouldDisablePrevMonth = function () {
var _this$props2 = _this.props,
utils = _this$props2.utils,
disablePast = _this$props2.disablePast,
minDate = _this$props2.minDate;
var now = utils.date();
var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, utils.date(minDate)) ? now : utils.date(minDate));
return !utils.isBefore(firstEnabledMonth, _this.state.currentMonth);
};
_this.shouldDisableNextMonth = function () {
var _this$props3 = _this.props,
utils = _this$props3.utils,
disableFuture = _this$props3.disableFuture,
maxDate = _this$props3.maxDate;
var now = utils.date();
var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, utils.date(maxDate)) ? now : utils.date(maxDate));
return !utils.isAfter(lastEnabledMonth, _this.state.currentMonth);
};
_this.shouldDisableDate = function (day) {
var shouldDisableDate = _this.props.shouldDisableDate;
return _this.validateMinMaxDate(day) || Boolean(shouldDisableDate && shouldDisableDate(day));
};
_this.handleDaySelect = function (day) {
var isFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var _this$props4 = _this.props,
date = _this$props4.date,
utils = _this$props4.utils;
_this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);
};
_this.moveToDay = function (day) {
var utils = _this.props.utils;
if (day && !_this.shouldDisableDate(day)) {
if (utils.getMonth(day) !== utils.getMonth(_this.state.currentMonth)) {
_this.handleChangeMonth(utils.startOfMonth(day), 'left');
}
_this.handleDaySelect(day, false);
}
};
_this.handleKeyDown = function (event) {
var _this$props5 = _this.props,
theme = _this$props5.theme,
date = _this$props5.date,
utils = _this$props5.utils;
runKeyHandler(event, {
ArrowUp: function ArrowUp() {
return _this.moveToDay(utils.addDays(date, -7));
},
ArrowDown: function ArrowDown() {
return _this.moveToDay(utils.addDays(date, 7));
},
ArrowLeft: function ArrowLeft() {
return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1));
},
ArrowRight: function ArrowRight() {
return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1));
}
});
};
_this.renderWeeks = function () {
var _this$props6 = _this.props,
utils = _this$props6.utils,
classes = _this$props6.classes;
var weeks = utils.getWeekArray(_this.state.currentMonth);
return weeks.map(function (week) {
return createElement("div", {
key: "week-".concat(week[0].toString()),
className: classes.week
}, _this.renderDays(week));
});
};
_this.renderDays = function (week) {
var _this$props7 = _this.props,
date = _this$props7.date,
renderDay = _this$props7.renderDay,
utils = _this$props7.utils;
var now = utils.date();
var selectedDate = utils.startOfDay(date);
var currentMonthNumber = utils.getMonth(_this.state.currentMonth);
return week.map(function (day) {
var disabled = _this.shouldDisableDate(day);
var isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
var dayComponent = createElement(Day, {
disabled: disabled,
current: utils.isSameDay(day, now),
hidden: !isDayInCurrentMonth,
selected: utils.isSameDay(selectedDate, day)
}, utils.getDayTe