@e-group/material-lab
Version:
EGroup Team Lab - Incubator for EGroup Team experimental React components.
391 lines (318 loc) • 11.4 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _dateFns = require("date-fns");
var _core = require("@material-ui/core");
var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
var _utils = require("./utils");
var _RangeMenu = _interopRequireDefault(require("./RangeMenu"));
var _Menu = _interopRequireDefault(require("./Menu"));
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(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
const styles = theme => (0, _core.createStyles)({
root: {
[theme.breakpoints.down('xs')]: {
minWidth: '100vw',
minHeight: '100vh',
overflow: 'auto',
transform: 'none !important'
}
},
paper: {
display: 'flex',
[theme.breakpoints.down('xs')]: {
width: '100%',
minHeight: '100vh'
}
},
close: {
position: 'absolute',
right: 5,
top: 5
}
});
/**
* DateRange picker behavior is inspire by ant design.
* https://ant.design/components/date-picker/
*/
const DateRangePicker = props => {
const classes = props.classes,
initialStartDate = props.initialStartDate,
initialEndDate = props.initialEndDate,
minDateProp = props.minDate,
maxDateProp = props.maxDate,
onChange = props.onChange,
onDayClickProp = props.onDayClick,
onCloseClick = props.onCloseClick,
showTime = props.showTime;
const startEl = (0, _react.useRef)(null);
const endEl = (0, _react.useRef)(null);
const _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
const _useState3 = (0, _react.useState)(initialStartDate),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
startDate = _useState4[0],
setStartDate = _useState4[1];
const _useState5 = (0, _react.useState)(initialEndDate),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
endDate = _useState6[0],
setEndDate = _useState6[1];
const _useState7 = (0, _react.useState)(''),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
startTime = _useState8[0],
setStartTime = _useState8[1];
const _useState9 = (0, _react.useState)(''),
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
endTime = _useState10[0],
setEndTime = _useState10[1];
const _useState11 = (0, _react.useState)(),
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
hoverDay = _useState12[0],
setHoverDay = _useState12[1];
const _useState13 = (0, _react.useState)(),
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
focused = _useState14[0],
setFocused = _useState14[1];
const _useState15 = (0, _react.useState)({
start: false,
end: false
}),
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
touched = _useState16[0],
setTouched = _useState16[1];
const minDate = (0, _utils.getValidDate)(minDateProp, (0, _dateFns.addYears)(new Date(), -10));
const maxDate = (0, _utils.getValidDate)(maxDateProp, (0, _dateFns.addYears)(new Date(), 10));
(0, _react.useEffect)(() => {
const getValidDateTime = (date, time = '00:00') => {
if (!date) return undefined;
return (0, _utils.getValidDate)("".concat((0, _dateFns.format)(date, 'yyyy-MM-dd'), " ").concat(time), new Date());
};
if (onChange) {
onChange([getValidDateTime(startDate, startTime), getValidDateTime(endDate, endTime)], focused);
} // eslint-disable-next-line react-hooks/exhaustive-deps
}, [endDate, endTime, focused, startDate, startTime]);
const getStartDateTimeValue = () => {
if (!startDate) return '';
if (showTime) {
return "".concat((0, _dateFns.format)(startDate, 'yyyy-MM-dd'), " ").concat(startTime || '00:00');
}
return (0, _dateFns.format)(startDate, 'yyyy-MM-dd');
};
const getEndDateTimeValue = () => {
if (!endDate) return '';
if (showTime) {
return "".concat((0, _dateFns.format)(endDate, 'yyyy-MM-dd'), " ").concat(endTime || '00:00');
}
return (0, _dateFns.format)(endDate, 'yyyy-MM-dd');
};
const handlePopupOpen = () => {
setOpen(true);
};
const handlePopupClose = () => {
if (onCloseClick) {
onCloseClick();
}
setOpen(false);
setTouched({
start: false,
end: false
});
};
const focusStartDate = () => {
setFocused('start');
const current = startEl.current;
if (current) {
current.focus();
}
};
const focusEndDate = () => {
setFocused('end');
const current = endEl.current;
if (current) {
current.focus();
}
};
const handleStartClick = () => {
focusStartDate();
handlePopupOpen();
};
const handleEndClick = () => {
focusEndDate();
handlePopupOpen();
};
const getDateRangeWhenSetStartDate = day => {
const nextStartDate = day;
let nextEndDate = endDate;
if (day && endDate && (0, _dateFns.isAfter)(day, endDate)) {
nextEndDate = undefined;
}
return [nextStartDate, nextEndDate];
};
const getDateRangeWhenSetEndDate = day => {
let nextStartDate = startDate;
const nextEndDate = day;
if (day && startDate && (0, _dateFns.isBefore)(day, startDate)) {
nextStartDate = undefined;
}
return [nextStartDate, nextEndDate];
}; // This behavior refer from ant design range picker.
const handleSetDateNextAction = (startDate, endDate) => {
if (focused === 'start') {
setTouched(val => _objectSpread(_objectSpread({}, val), {}, {
start: true
}));
if (!endDate) {
focusEndDate();
} else {
handlePopupClose();
}
}
if (focused === 'end') {
setTouched(val => _objectSpread(_objectSpread({}, val), {}, {
end: true
}));
if (!startDate) {
focusStartDate();
} else {
handlePopupClose();
}
}
};
const handleTimeClick = time => {
if (focused === 'start') {
setStartTime(time);
}
if (focused === 'end') {
setEndTime(time);
}
};
const handleMenuConfirmClick = () => {
if (focused === 'start') {
handleSetDateNextAction(startDate, endDate);
}
if (focused === 'end') {
handleSetDateNextAction(startDate, endDate);
}
};
const handleMenuDayClick = day => {
if (onDayClickProp) {
onDayClickProp(day);
}
if (focused === 'start') {
const dateRange = getDateRangeWhenSetStartDate(day);
setStartDate(dateRange[0]);
setEndDate(dateRange[1]);
setStartTime((0, _dateFns.format)(new Date(), 'HH:mm'));
if (startTime) {
handleSetDateNextAction(dateRange[0], dateRange[1]);
}
}
if (focused === 'end') {
const dateRange = getDateRangeWhenSetEndDate(day);
setStartDate(dateRange[0]);
setEndDate(dateRange[1]);
setEndTime((0, _dateFns.format)(new Date(), 'HH:mm'));
if (endTime) {
handleSetDateNextAction(dateRange[0], dateRange[1]);
}
}
};
const handleRangeMenuDayClick = day => {
if (onDayClickProp) {
onDayClickProp(day);
}
if (focused === 'start') {
const dateRange = getDateRangeWhenSetStartDate(day);
setStartDate(dateRange[0]);
setEndDate(dateRange[1]);
handleSetDateNextAction(dateRange[0], dateRange[1]);
}
if (focused === 'end') {
const dateRange = getDateRangeWhenSetEndDate(day);
setStartDate(dateRange[0]);
setEndDate(dateRange[1]);
handleSetDateNextAction(dateRange[0], dateRange[1]);
}
};
const handleDayHover = date => {
if (showTime) {
if (startDate && !startTime) {
return;
}
if (endDate && !endTime) {
return;
}
}
if (!hoverDay || !(0, _dateFns.isSameDay)(date, hoverDay)) {
setHoverDay(date);
}
};
return /*#__PURE__*/_react.default.createElement(_core.ClickAwayListener, {
onClickAway: handlePopupClose
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.TextField, {
inputRef: startEl,
label: "startDate",
value: getStartDateTimeValue(),
onClick: handleStartClick
}), /*#__PURE__*/_react.default.createElement(_core.TextField, {
inputRef: endEl,
label: "endDate",
value: getEndDateTimeValue(),
onClick: handleEndClick
}), /*#__PURE__*/_react.default.createElement(_core.Popper, {
open: open,
transition: true,
anchorEl: startEl.current,
className: classes.root
}, ({
TransitionProps
}) => /*#__PURE__*/_react.default.createElement(_core.Fade, (0, _extends2.default)({}, TransitionProps, {
timeout: 350
}), /*#__PURE__*/_react.default.createElement(_core.Paper, {
className: classes.paper,
elevation: 6
}, /*#__PURE__*/_react.default.createElement(_core.Hidden, {
smUp: true
}, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
className: classes.close,
onClick: handlePopupClose
}, /*#__PURE__*/_react.default.createElement(_Close.default, null))), showTime ? /*#__PURE__*/_react.default.createElement(_Menu.default, {
startDate: startDate,
endDate: endDate,
minDate: minDate,
maxDate: maxDate,
hoverDay: hoverDay,
touched: touched,
focused: focused,
onDayClick: handleMenuDayClick,
onDayHover: handleDayHover,
onTimeClick: handleTimeClick,
onConfirmClick: handleMenuConfirmClick,
startTime: startTime,
endTime: endTime
}) : /*#__PURE__*/_react.default.createElement(_RangeMenu.default, {
startDate: startDate,
endDate: endDate,
minDate: minDate,
maxDate: maxDate,
hoverDay: hoverDay,
touched: touched,
focused: focused,
onDayClick: handleRangeMenuDayClick,
onDayHover: handleDayHover
}))))));
};
var _default = (0, _core.withStyles)(styles, {
name: 'EgDateRangePicker'
})(DateRangePicker);
exports.default = _default;