@krowdy-ui/views
Version:
React components that implement Google's Material Design.
414 lines (374 loc) • 14.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _dayjs = _interopRequireDefault(require("@date-io/dayjs"));
var _es = _interopRequireDefault(require("dayjs/locale/es"));
var _dayjs2 = _interopRequireDefault(require("dayjs"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _pickers = require("@ghondar/pickers");
var _core = require("@krowdy-ui/core");
var _styles = require("@krowdy-ui/styles");
var _icons = require("@material-ui/icons");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var getCorrectMomentDate = function getCorrectMomentDate(date) {
if (date) {
var dateJs = new Date(date);
return dateJs.toString() === 'Invalid Date' ? (0, _dayjs2["default"])(Number(date)) : (0, _dayjs2["default"])(date);
}
return (0, _dayjs2["default"])();
};
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["default"].createElement(_icons.ArrowDropDown, null);
var _ref6 = /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6"
}, "Programar publicaci\xF3n");
var _ref7 = /*#__PURE__*/_react["default"].createElement(_core.Typography, {
color: "secondary"
}, "Desde :");
var _ref8 = /*#__PURE__*/_react["default"].createElement(_core.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 = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
anchorElRangePicker = _useState2[0],
setAnchorElRangePicker = _useState2[1];
var _useState3 = (0, _react.useState)(initialRange || {
maxDate: null,
minDate: null
}),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
rangeDateValue = _useState4[0],
setRangeValue = _useState4[1];
var _useState5 = (0, _react.useState)(null),
_useState6 = (0, _slicedToArray2["default"])(_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 = (0, _dayjs2["default"])(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["default"].createElement("button", {
className: (0, _clsx["default"])(classes.sizePickers, classes.buttonHidden, beforeToday && classes.disabled, isBackground && classes.dayBackground, maxDate && isBackgroundLeft && classes.selectedRadiusLeft, isBackgroundRight && classes.selectedRadiusRight),
disabled: beforeToday
}, /*#__PURE__*/_react["default"].createElement("span", {
className: (0, _clsx["default"])(classes.buttonHidden, (isBackgroundLeft || isBackgroundRight) && classes.selectedDate, !dayInCurrentMonth && classes.isAnotherMonth, beforeToday && classes.disabled)
}, new Date(day).getDate()));
};
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showInput ? /*#__PURE__*/_react["default"].createElement(_core.TextField, {
InputProps: {
endAdornment: /*#__PURE__*/_react["default"].createElement(_icons.Event, {
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["default"].createElement(_core.IconButton, {
onClick: _handleToggleRangePicker,
size: "small",
square: true
}, IconToOpen), /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
locale: _es["default"],
utils: _dayjs["default"]
}, /*#__PURE__*/_react["default"].createElement(_core.Popover, {
anchorEl: anchorElRangePicker,
anchorOrigin: {
horizontal: 'center',
vertical: 'bottom'
},
classes: {
paper: classes.rangeDateContainer
},
onClose: _handleToggleRangePicker,
open: Boolean(anchorElRangePicker),
transformOrigin: {
horizontal: 'center',
vertical: 'top'
}
}, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
disableToolbar: true,
format: format,
maxDate: maxDate,
onChange: _handleChangeDate,
openTo: "date",
orientation: "landscape",
renderDay: renderDay,
value: correctDate(rangeDateValue.minDate, formatInternal),
variant: "static"
}), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.detailContainer
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classes.inputsContainer
}, _ref6, /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
classes: {
label: classes.label,
labelPlacementStart: classes.labelPlacement
},
control: /*#__PURE__*/_react["default"].createElement(_core.TextField, {
InputProps: {
classes: {
input: classes.textField
}
},
value: rangeDateValue.minDate ? correctDate(rangeDateValue.minDate) : '',
variant: "outlined"
}),
label: _ref7,
labelPlacement: "start"
}), /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
classes: {
label: classes.label,
labelPlacementStart: classes.labelPlacement
},
control: /*#__PURE__*/_react["default"].createElement(_core.TextField, {
InputProps: {
classes: {
input: classes.textField
}
},
value: rangeDateValue.maxDate ? correctDate(rangeDateValue.maxDate) : '',
variant: "outlined"
}),
label: _ref8,
labelPlacement: "start"
})), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.actionsContainer
}, /*#__PURE__*/_react["default"].createElement(_core.Button, {
className: classes.scheduleButton,
color: "primary",
onClick: _handleSchedule,
variant: "contained"
}, "Programar"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
className: classes.selectButton,
color: "primary",
onClick: _handleOpenMenu,
variant: "contained"
}, /*#__PURE__*/_react["default"].createElement(_icons.ArrowDropDown, {
className: classes.arrowIcon
})), /*#__PURE__*/_react["default"].createElement(_core.Menu, {
anchorEl: openMenu,
anchorOrigin: {
horizontal: 'center',
vertical: 'bottom'
},
onClose: _handleOpenMenu,
open: Boolean(openMenu),
transformOrigin: {
horizontal: 'center',
vertical: 'top'
}
}, /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
ListItemClasses: {
button: classes.listItem
},
onClick: _handlePublishSchedule
}, "Publicar ahora"), /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
ListItemClasses: {
button: classes.listItem
},
onClick: _handleCancelSchedule
}, "Cancelar programaci\xF3n")))))));
};
var useStyles = (0, _styles.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["default"].node,
initialRange: _propTypes["default"].shape({
maxDate: _propTypes["default"].any,
minDate: _propTypes["default"].any
}),
onCancelSchedule: _propTypes["default"].func,
onPublishSchedule: _propTypes["default"].func,
onSchedule: _propTypes["default"].func,
showInput: _propTypes["default"].bool
} : void 0;
var _default = _react["default"].memo(JobRangePickers);
exports["default"] = _default;