@krowdy-ui/views
Version:
React components that implement Google's Material Design.
386 lines (364 loc) • 12 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import clsx from 'clsx';
import DayJsUtils from '@date-io/dayjs';
import esLocale from 'dayjs/locale/es';
import dayjs from 'dayjs';
import PropTypes from 'prop-types';
import { MuiPickersUtilsProvider, DatePicker } from '@ghondar/pickers';
import { Button, FormControlLabel, IconButton, Menu, MenuItem, Popover, TextField, Typography } from '@krowdy-ui/core';
import { makeStyles } from '@krowdy-ui/styles';
import { ArrowDropDown as ArrowDropDownIcon, Event as EventIcon } from '@material-ui/icons';
var getCorrectMomentDate = function getCorrectMomentDate(date) {
if (date) {
var dateJs = new Date(date);
return dateJs.toString() === 'Invalid Date' ? dayjs(Number(date)) : dayjs(date);
}
return dayjs();
};
var format = 'DD/MM/YYYY';
var formatInternal = 'MM/DD/YYYY';
var correctDate = function correctDate(date, formatCustom) {
return getCorrectMomentDate(date).format(formatCustom || format);
};
var _ref2 = /*#__PURE__*/React.createElement(ArrowDropDownIcon, null);
var _ref6 = /*#__PURE__*/React.createElement(Typography, {
variant: "h6"
}, "Programar publicaci\xF3n");
var _ref7 = /*#__PURE__*/React.createElement(Typography, {
color: "secondary"
}, "Desde :");
var _ref8 = /*#__PURE__*/React.createElement(Typography, {
color: "secondary"
}, "Hasta :");
var JobRangePickers = function JobRangePickers(_ref) {
var _ref$onSchedule = _ref.onSchedule,
onSchedule = _ref$onSchedule === void 0 ? function () {} : _ref$onSchedule,
_ref$IconToOpen = _ref.IconToOpen,
IconToOpen = _ref$IconToOpen === void 0 ? _ref2 : _ref$IconToOpen,
_ref$onPublishSchedul = _ref.onPublishSchedule,
onPublishSchedule = _ref$onPublishSchedul === void 0 ? function () {} : _ref$onPublishSchedul,
_ref$initialRange = _ref.initialRange,
initialRange = _ref$initialRange === void 0 ? {
maxDate: null,
minDate: null
} : _ref$initialRange,
_ref$onCancelSchedule = _ref.onCancelSchedule,
onCancelSchedule = _ref$onCancelSchedule === void 0 ? function () {} : _ref$onCancelSchedule,
showInput = _ref.showInput,
maxDate = _ref.maxDate;
var classes = useStyles();
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
anchorElRangePicker = _useState2[0],
setAnchorElRangePicker = _useState2[1];
var _useState3 = useState(initialRange || {
maxDate: null,
minDate: null
}),
_useState4 = _slicedToArray(_useState3, 2),
rangeDateValue = _useState4[0],
setRangeValue = _useState4[1];
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
openMenu = _useState6[0],
setOpenMenu = _useState6[1];
var _handleChangeDate = function _handleChangeDate(date) {
setRangeValue(function (prev) {
var parseDate = correctDate(date, formatInternal);
if (parseDate === correctDate(prev.minDate, formatInternal)) return {
maxDate: null,
minDate: null
};else if (new Date(parseDate) < new Date(prev.minDate)) return {
maxDate: null,
minDate: parseDate
};else return prev.minDate ? {
maxDate: parseDate,
minDate: prev.minDate
} : {
maxDate: null,
minDate: parseDate
};
});
};
var _handleToggleRangePicker = function _handleToggleRangePicker(_ref3) {
var currentTarget = _ref3.currentTarget;
setAnchorElRangePicker(function (prev) {
return prev ? null : currentTarget;
});
};
var _handleSchedule = function _handleSchedule() {
onSchedule(rangeDateValue);
setAnchorElRangePicker(null);
};
var _handlePublishSchedule = function _handlePublishSchedule() {
onPublishSchedule(rangeDateValue);
setOpenMenu(null);
setAnchorElRangePicker(null);
};
var _handleCancelSchedule = function _handleCancelSchedule() {
setRangeValue(initialRange);
onCancelSchedule();
setOpenMenu(null);
setAnchorElRangePicker(null);
};
var _handleOpenMenu = function _handleOpenMenu(_ref4) {
var currentTarget = _ref4.currentTarget;
setOpenMenu(function (prev) {
return prev ? null : currentTarget;
});
};
var renderDay = function renderDay(day, _, dayInCurrentMonth) {
var _ref5 = rangeDateValue || {},
minDate = _ref5.minDate,
maxDate = _ref5.maxDate;
var isBackground = new Date(minDate) < new Date(day) && new Date(maxDate) > new Date(day);
var beforeToday = dayjs(day).diff(new Date(), 'day') < 0;
var isBackgroundLeft = !(new Date(minDate) < new Date(day) || new Date(minDate) > new Date(day));
var isBackgroundRight = !(new Date(maxDate) > new Date(day) || new Date(maxDate) < new Date(day));
return /*#__PURE__*/React.createElement("button", {
className: clsx(classes.sizePickers, classes.buttonHidden, beforeToday && classes.disabled, isBackground && classes.dayBackground, maxDate && isBackgroundLeft && classes.selectedRadiusLeft, isBackgroundRight && classes.selectedRadiusRight),
disabled: beforeToday
}, /*#__PURE__*/React.createElement("span", {
className: clsx(classes.buttonHidden, (isBackgroundLeft || isBackgroundRight) && classes.selectedDate, !dayInCurrentMonth && classes.isAnotherMonth, beforeToday && classes.disabled)
}, new Date(day).getDate()));
};
return /*#__PURE__*/React.createElement(React.Fragment, null, showInput ? /*#__PURE__*/React.createElement(TextField, {
InputProps: {
endAdornment: /*#__PURE__*/React.createElement(EventIcon, {
className: classes.adorment,
color: "inherit",
fontSize: "small"
})
},
inputProps: {
className: classes.inputClass
},
label: "Aviso programado",
onClick: _handleToggleRangePicker,
value: "".concat(correctDate(rangeDateValue.minDate), " - ").concat(correctDate(rangeDateValue.maxDate))
}) : null, /*#__PURE__*/React.createElement(IconButton, {
onClick: _handleToggleRangePicker,
size: "small",
square: true
}, IconToOpen), /*#__PURE__*/React.createElement(MuiPickersUtilsProvider, {
locale: esLocale,
utils: DayJsUtils
}, /*#__PURE__*/React.createElement(Popover, {
anchorEl: anchorElRangePicker,
anchorOrigin: {
horizontal: 'center',
vertical: 'bottom'
},
classes: {
paper: classes.rangeDateContainer
},
onClose: _handleToggleRangePicker,
open: Boolean(anchorElRangePicker),
transformOrigin: {
horizontal: 'center',
vertical: 'top'
}
}, /*#__PURE__*/React.createElement(DatePicker, {
disableToolbar: true,
format: format,
maxDate: maxDate,
onChange: _handleChangeDate,
openTo: "date",
orientation: "landscape",
renderDay: renderDay,
value: correctDate(rangeDateValue.minDate, formatInternal),
variant: "static"
}), /*#__PURE__*/React.createElement("div", {
className: classes.detailContainer
}, /*#__PURE__*/React.createElement("div", {
className: classes.inputsContainer
}, _ref6, /*#__PURE__*/React.createElement(FormControlLabel, {
classes: {
label: classes.label,
labelPlacementStart: classes.labelPlacement
},
control: /*#__PURE__*/React.createElement(TextField, {
InputProps: {
classes: {
input: classes.textField
}
},
value: rangeDateValue.minDate ? correctDate(rangeDateValue.minDate) : '',
variant: "outlined"
}),
label: _ref7,
labelPlacement: "start"
}), /*#__PURE__*/React.createElement(FormControlLabel, {
classes: {
label: classes.label,
labelPlacementStart: classes.labelPlacement
},
control: /*#__PURE__*/React.createElement(TextField, {
InputProps: {
classes: {
input: classes.textField
}
},
value: rangeDateValue.maxDate ? correctDate(rangeDateValue.maxDate) : '',
variant: "outlined"
}),
label: _ref8,
labelPlacement: "start"
})), /*#__PURE__*/React.createElement("div", {
className: classes.actionsContainer
}, /*#__PURE__*/React.createElement(Button, {
className: classes.scheduleButton,
color: "primary",
onClick: _handleSchedule,
variant: "contained"
}, "Programar"), /*#__PURE__*/React.createElement(Button, {
className: classes.selectButton,
color: "primary",
onClick: _handleOpenMenu,
variant: "contained"
}, /*#__PURE__*/React.createElement(ArrowDropDownIcon, {
className: classes.arrowIcon
})), /*#__PURE__*/React.createElement(Menu, {
anchorEl: openMenu,
anchorOrigin: {
horizontal: 'center',
vertical: 'bottom'
},
onClose: _handleOpenMenu,
open: Boolean(openMenu),
transformOrigin: {
horizontal: 'center',
vertical: 'top'
}
}, /*#__PURE__*/React.createElement(MenuItem, {
ListItemClasses: {
button: classes.listItem
},
onClick: _handlePublishSchedule
}, "Publicar ahora"), /*#__PURE__*/React.createElement(MenuItem, {
ListItemClasses: {
button: classes.listItem
},
onClick: _handleCancelSchedule
}, "Cancelar programaci\xF3n")))))));
};
var useStyles = makeStyles(function (theme) {
return {
actionsContainer: {
display: 'flex',
width: '100%'
},
adorment: {
margin: theme.spacing(0, 1.5, 0, 2)
},
arrowIcon: {
color: 'white'
},
buttonHidden: {
background: 'none',
border: 'hidden',
outline: 'inherit'
},
dayBackground: {
background: theme.palette.primary[50],
borderRadius: 0
},
detailContainer: {
background: theme.palette.secondary[10],
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
padding: theme.spacing(1.5)
},
disabled: {
color: theme.palette.grey[500],
cursor: 'not-allowed !important',
pointerEvents: 'inherit !important'
},
inputClass: {
fontSize: 14,
minWidth: 160
},
inputsContainer: {
display: 'flex',
flexDirection: 'column'
},
isAnotherMonth: {
color: theme.palette.grey[500]
},
label: {
marginRight: theme.spacing(1)
},
labelPlacement: {
margin: theme.spacing(1, 0)
},
listItem: {
'&:hover': {
backgroundColor: theme.palette.primary[10]
}
},
rangeDateContainer: {
display: 'flex'
},
scheduleButton: {
borderRadius: theme.spacing(.5, 0, 0, .5),
width: '100%'
},
selectButton: {
borderRadius: theme.spacing(0, .5, .5, 0),
marginLeft: theme.spacing(.25),
minWidth: 20,
padding: theme.spacing(.75)
},
selectedDate: {
alignItems: 'center',
background: theme.palette.primary.main,
borderRadius: '50%',
color: 'white',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: theme.spacing(2.5),
width: '100%',
zIndex: 1
},
selectedRadiusLeft: {
background: theme.palette.primary[50],
borderRadius: '50% 0 0 50%'
},
selectedRadiusRight: {
background: theme.palette.primary[50],
borderRadius: '0 50% 50% 0'
},
sizePickers: {
alignItems: 'center',
cursor: 'pointer',
display: 'flex',
height: 28,
justifyContent: 'center',
margin: theme.spacing(.25, 0),
width: 40
},
textField: {
background: 'white',
color: theme.palette.grey[600],
padding: theme.spacing(1),
width: 120
}
};
}, {
name: 'JobRangePickers'
});
process.env.NODE_ENV !== "production" ? JobRangePickers.propTypes = {
IconToOpen: PropTypes.node,
initialRange: PropTypes.shape({
maxDate: PropTypes.any,
minDate: PropTypes.any
}),
onCancelSchedule: PropTypes.func,
onPublishSchedule: PropTypes.func,
onSchedule: PropTypes.func,
showInput: PropTypes.bool
} : void 0;
export default React.memo(JobRangePickers);