ts-react-scheduler
Version:
Scheduler component based on TypeScript and ReactJS
934 lines (910 loc) • 102 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var noop = require('lodash/noop');
var classnames = require('classnames');
var dateFns = require('date-fns');
var Typography = require('@material-ui/core/Typography');
var uuid = require('uuid');
var Button = require('@material-ui/core/Button');
var ButtonGroup = require('@material-ui/core/ButtonGroup');
var filter = require('lodash/filter');
var sortBy = require('lodash/sortBy');
var moment = require('moment');
var IconButton = require('@material-ui/core/IconButton');
var NavIconLeft = require('@material-ui/icons/ChevronLeft');
var NavIconRight = require('@material-ui/icons/ChevronRight');
var Tooltip = require('@material-ui/core/Tooltip');
var map = require('lodash/map');
var isEmpty = require('lodash/isEmpty');
var Alert = require('@material-ui/lab/Alert');
var Dialog = require('@material-ui/core/Dialog');
var Card = require('@material-ui/core/Card');
var CardContent = require('@material-ui/core/CardContent');
var TextField = require('@material-ui/core/TextField');
var Accordion = require('@material-ui/core/Accordion');
var AccordionSummary = require('@material-ui/core/AccordionSummary');
var AccordionDetails = require('@material-ui/core/AccordionDetails');
var ExpandMoreIcon = require('@material-ui/icons/ExpandMore');
var FormGroup = require('@material-ui/core/FormGroup');
var FormControl = require('@material-ui/core/FormControl');
var FormControlLabel = require('@material-ui/core/FormControlLabel');
var Checkbox = require('@material-ui/core/Checkbox');
var reactColor = require('react-color');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var uuid__default = /*#__PURE__*/_interopDefaultLegacy(uuid);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
var filter__default = /*#__PURE__*/_interopDefaultLegacy(filter);
var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
var NavIconLeft__default = /*#__PURE__*/_interopDefaultLegacy(NavIconLeft);
var NavIconRight__default = /*#__PURE__*/_interopDefaultLegacy(NavIconRight);
var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
var CardContent__default = /*#__PURE__*/_interopDefaultLegacy(CardContent);
var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
var Accordion__default = /*#__PURE__*/_interopDefaultLegacy(Accordion);
var AccordionSummary__default = /*#__PURE__*/_interopDefaultLegacy(AccordionSummary);
var AccordionDetails__default = /*#__PURE__*/_interopDefaultLegacy(AccordionDetails);
var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
var FormGroup__default = /*#__PURE__*/_interopDefaultLegacy(FormGroup);
var FormControl__default = /*#__PURE__*/_interopDefaultLegacy(FormControl);
var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
var EventItem = /** @class */ (function () {
function EventItem(id, title, description, color, startYear, startMonth, startDay, startHour, startMinute, endYear, endMonth, endDay, endHour, endMinute, untilYear, untilMonth, untilDay, isLongLastingDayItem, isLongLastingWeekItem, isLongLastingMonthItem, isLongLastingYearItem) {
this.id = id;
this.title = title;
this.description = description;
this.color = color;
this.startYear = startYear;
this.startMonth = startMonth;
this.startDay = startDay;
this.startHour = startHour;
this.startMinute = startMinute;
this.endYear = endYear;
this.endMonth = endMonth;
this.endDay = endDay;
this.endHour = endHour;
this.endMinute = endMinute;
this.untilYear = untilYear;
this.untilMonth = untilMonth;
this.untilDay = untilDay;
this.isLongLastingDayItem = isLongLastingDayItem;
this.isLongLastingWeekItem = isLongLastingWeekItem;
this.isLongLastingMonthItem = isLongLastingMonthItem;
this.isLongLastingYearItem = isLongLastingYearItem;
}
return EventItem;
}());
var SchedulerContext = React__default['default'].createContext({
contentHeight: 0,
dateMode: '',
dayNameSun: '',
dayNameMon: '',
dayNameTue: '',
dayNameWed: '',
dayNameThu: '',
dayNameFri: '',
dayNameSat: '',
events: [],
eventDialogTitleCreate: '',
eventDialogTitleUpdate: '',
eventDialogState: {
isOpen: false,
mode: 'update',
eventId: '',
event: new EventItem('', '', '', '', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false, false, false, false),
},
headerDateFormat: '',
headerTitle: '',
id: '',
labelDialogBtnCancel: '',
labelDialogBtnCreate: '',
labelDialogBtnDelete: '',
labelDialogBtnUpdate: '',
labelDialogColor: '',
labelDialogDescription: '',
labelDialogEnd: '',
labelDialogLongLasting: '',
labelDialogStart: '',
labelDialogTitle: '',
labelDialogUntil: '',
labelDialogUntilDaily: '',
labelDialogUntilWeekly: '',
labelDialogUntilMonthly: '',
labelDialogUntilYearly: '',
labelHeaderBtnDay: '',
labelHeaderBtnMonth: '',
labelHeaderBtnToday: '',
labelHeaderBtnWeek: '',
labelHeaderBtnYear: '',
monthNameJan: '',
monthNameFeb: '',
monthNameMar: '',
monthNameApr: '',
monthNameMay: '',
monthNameJun: '',
monthNameJul: '',
monthNameAug: '',
monthNameSep: '',
monthNameOct: '',
monthNameNov: '',
monthNameDec: '',
noDataText: '',
readOnly: false,
onClickBtnDay: noop__default['default'],
onClickBtnMonth: noop__default['default'],
onClickBtnNext: noop__default['default'],
onClickBtnPrev: noop__default['default'],
onClickBtnToday: noop__default['default'],
onClickBtnWeek: noop__default['default'],
onClickBtnYear: noop__default['default'],
onCloseEventDialog: noop__default['default'],
onCreateEvent: noop__default['default'],
onDeleteEvent: noop__default['default'],
onOpenEventDialog: noop__default['default'],
onUpdateEvent: noop__default['default'],
selectedYear: 0,
selectedMonth: 0,
selectedDay: 0,
setEventDialogState: noop__default['default'],
setStateDateMode: noop__default['default'],
setStateEvents: noop__default['default'],
setStateSelectedDay: noop__default['default'],
setStateSelectedMonth: noop__default['default'],
setStateSelectedYear: noop__default['default'],
showHeader: true,
showHeaderAction: true,
showHeaderBtnGroup: true,
showHeaderBtnGroupDay: true,
showHeaderBtnGroupMonth: true,
showHeaderBtnGroupWeek: true,
showHeaderBtnGroupYear: true,
showHeaderDate: true,
showHeaderLongLasting: true,
showHeaderNavGroup: true,
showHeaderTitle: true,
showNoDataAlert: true,
tooltipHeaderBtnNext: '',
tooltipHeaderBtnPrev: '',
});
var HeaderTitle = function () {
var _a = React.useContext(SchedulerContext), headerTitle = _a.headerTitle, showHeaderTitle = _a.showHeaderTitle;
var inlineStyle = {
display: showHeaderTitle ? 'flex' : /* istanbul ignore next */ 'none',
};
return (React__default['default'].createElement("div", { className: "header-title-component", style: inlineStyle },
React__default['default'].createElement(Typography__default['default'], { variant: "body1" }, headerTitle)));
};
/* eslint-disable require-jsdoc */
function getLongScaledEventsForDay(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy__default['default'](filter__default['default'](events, function (event) {
var startDate = new Date(event.startYear, event.startMonth, event.startDay);
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return event.isLongLastingDayItem && selectedDate < untilDate && startDate <= selectedDate;
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getLongScaledEventsForWeek(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy__default['default'](filter__default['default'](events, function (event) {
var startDate = new Date(event.startYear, event.startMonth, event.startDay);
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return event.isLongLastingWeekItem && selectedDate < untilDate && dateFns.getWeek(selectedDate) === dateFns.getWeek(startDate);
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getLongScaledEventsForMonth(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy__default['default'](filter__default['default'](events, function (event) {
var startDate = new Date(event.startYear, event.startMonth, event.startDay);
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return (event.isLongLastingMonthItem &&
selectedDate < untilDate &&
startDate <= selectedDate &&
event.startMonth <= selectedMonth);
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getLongScaledEventsForYear(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy__default['default'](filter__default['default'](events, function (event) {
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return event.isLongLastingYearItem && selectedDate < untilDate && event.startYear <= selectedYear;
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForDay(selectedYear, selectedMonth, selectedDay, events) {
return sortBy__default['default'](filter__default['default'](events, function (event) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
var eventStartDate = new Date(event.startYear, event.startMonth, event.startDay);
return dateFns.isEqual(selectedDate, eventStartDate);
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForWeek(selectedYear, selectedMonth, selectedDay, events) {
var currentWeek = dateFns.getWeek(new Date(selectedYear, selectedMonth, selectedDay));
return sortBy__default['default'](filter__default['default'](events, function (event) { return dateFns.getWeek(new Date(event.startYear, event.startMonth, event.startDay)) === currentWeek; }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForMonth(selectedYear, selectedMonth, events) {
return sortBy__default['default'](filter__default['default'](events, function (event) { return event.startYear === selectedYear && event.startMonth === selectedMonth; }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForYear(selectedYear, events) {
return sortBy__default['default'](filter__default['default'](events, function (event) { return event.startYear === selectedYear; }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventById(eventId, events) {
return filter__default['default'](events, function (event) { return event.id === eventId; })[0];
}
function getEventsForDayName(events, dayName) {
switch (dayName) {
case 'sunday':
return sortBy__default['default'](filter__default['default'](events, function (event) {
return dateFns.isSunday(new Date(event.startYear, event.startMonth, event.startDay));
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'monday':
return sortBy__default['default'](filter__default['default'](events, function (event) { return dateFns.isMonday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'tuesday':
return sortBy__default['default'](filter__default['default'](events, function (event) { return dateFns.isTuesday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'wednesday':
return sortBy__default['default'](filter__default['default'](events, function (event) { return dateFns.isWednesday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'thursday':
return sortBy__default['default'](filter__default['default'](events, function (event) { return dateFns.isThursday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'friday':
return sortBy__default['default'](filter__default['default'](events, function (event) { return dateFns.isFriday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'saturday':
return sortBy__default['default'](filter__default['default'](events, function (event) { return dateFns.isSaturday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
default:
return [];
}
}
function getEventsForSlot(eventsForDay, start, end) {
return sortBy__default['default'](filter__default['default'](eventsForDay, function (event) {
return start <= event.startHour && event.startHour < end;
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
var HeaderActionBtnGroup = function () {
var _a = React.useContext(SchedulerContext), dateMode = _a.dateMode, events = _a.events, id = _a.id, labelHeaderBtnDay = _a.labelHeaderBtnDay, labelHeaderBtnMonth = _a.labelHeaderBtnMonth, labelHeaderBtnWeek = _a.labelHeaderBtnWeek, labelHeaderBtnYear = _a.labelHeaderBtnYear, onClickBtnDay = _a.onClickBtnDay, onClickBtnWeek = _a.onClickBtnWeek, onClickBtnMonth = _a.onClickBtnMonth, onClickBtnYear = _a.onClickBtnYear, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, setStateDateMode = _a.setStateDateMode, showHeaderBtnGroup = _a.showHeaderBtnGroup, showHeaderBtnGroupDay = _a.showHeaderBtnGroupDay, showHeaderBtnGroupMonth = _a.showHeaderBtnGroupMonth, showHeaderBtnGroupWeek = _a.showHeaderBtnGroupWeek, showHeaderBtnGroupYear = _a.showHeaderBtnGroupYear;
var inlineStyle = {
display: showHeaderBtnGroup ? 'flex' : /* istanbul ignore next */ 'none',
};
var handleClickBtnDay = function () {
var eventsForDay = getEventsForDay(selectedYear, selectedMonth, selectedDay, events);
setStateDateMode('day');
onClickBtnDay({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForDay: eventsForDay,
});
};
var handleClickBtnMonth = function () {
var eventsForWeek = getEventsForWeek(selectedYear, selectedMonth, selectedDay, events);
setStateDateMode('month');
onClickBtnWeek({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForWeek: eventsForWeek,
week: dateFns.getWeek(new Date(selectedYear, selectedMonth, selectedDay)),
});
};
var handleClickBtnWeek = function () {
setStateDateMode('week');
onClickBtnMonth({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForMonth: getEventsForMonth(selectedYear, selectedMonth, events),
});
};
var handleClickBtnYear = function () {
setStateDateMode('year');
onClickBtnYear({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForYear: getEventsForYear(selectedYear, events),
});
};
var renderBtnGroupItems = function () {
var buttons = [];
/* istanbul ignore else */
if (showHeaderBtnGroupDay) {
buttons.push(React__default['default'].createElement(Button__default['default'], { key: "btn-group-item-" + uuid__default['default'].v4(), className: "header-btn-day", id: id + "_headerBtnDay", size: "small", variant: dateMode === 'day' ? 'contained' : /* istanbul ignore next */ 'outlined', onClick: handleClickBtnDay }, labelHeaderBtnDay));
}
/* istanbul ignore else */
if (showHeaderBtnGroupWeek) {
buttons.push(React__default['default'].createElement(Button__default['default'], { key: "btn-group-item-" + uuid__default['default'].v4(), className: "header-btn-week", id: id + "_headerBtnWeek", size: "small", variant: dateMode === 'week' ? /* istanbul ignore next */ 'contained' : 'outlined', onClick: handleClickBtnWeek }, labelHeaderBtnWeek));
}
/* istanbul ignore else */
if (showHeaderBtnGroupMonth) {
buttons.push(React__default['default'].createElement(Button__default['default'], { key: "btn-group-item-" + uuid__default['default'].v4(), className: "header-btn-month", id: id + "_headerBtnMonth", size: "small", variant: dateMode === 'month' ? /* istanbul ignore next */ 'contained' : 'outlined', onClick: handleClickBtnMonth }, labelHeaderBtnMonth));
}
/* istanbul ignore else */
if (showHeaderBtnGroupYear) {
buttons.push(React__default['default'].createElement(Button__default['default'], { key: "btn-group-item-" + uuid__default['default'].v4(), className: "header-btn-year", id: id + "_headerBtnYear", size: "small", variant: dateMode === 'year' ? /* istanbul ignore next */ 'contained' : 'outlined', onClick: handleClickBtnYear }, labelHeaderBtnYear));
}
return buttons;
};
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-header-action-btn-group-component", style: inlineStyle },
React__default['default'].createElement(ButtonGroup__default['default'], { color: "primary", "aria-label": "outlined primary button group" }, renderBtnGroupItems())));
};
/* eslint-disable require-jsdoc */
function formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat) {
return moment__default['default'](new Date(selectedYear, selectedMonth, selectedDay)).format(headerDateFormat);
}
function mapMonthNames(selectedMonth, monthNameJan, monthNameFeb, monthNameMar, monthNameApr, monthNameMay, monthNameJun, monthNameJul, monthNameAug, monthNameSep, monthNameOct, monthNameNov, monthNameDec) {
var monthName = '';
/* istanbul ignore next */
switch (selectedMonth) {
case 0:
monthName = monthNameJan;
break;
case 1:
monthName = monthNameFeb;
break;
case 2:
monthName = monthNameMar;
break;
case 3:
monthName = monthNameApr;
break;
case 4:
monthName = monthNameMay;
break;
case 5:
monthName = monthNameJun;
break;
case 6:
monthName = monthNameJul;
break;
case 7:
monthName = monthNameAug;
break;
case 8:
monthName = monthNameSep;
break;
case 9:
monthName = monthNameOct;
break;
case 10:
monthName = monthNameNov;
break;
case 11:
monthName = monthNameDec;
break;
}
return monthName;
}
function mapDayNames(selectedDate, dayNameSun, dayNameMon, dayNameTue, dayNameWed, dayNameThu, dayNameFri, dayNameSat) {
var dayName = dayNameSun;
if (dateFns.isSunday(selectedDate)) {
dayName = dayNameSun;
}
else if (dateFns.isMonday(selectedDate)) {
dayName = dayNameMon;
}
else if (dateFns.isTuesday(selectedDate)) {
dayName = dayNameTue;
}
else if (dateFns.isWednesday(selectedDate)) {
dayName = dayNameWed;
}
else if (dateFns.isThursday(selectedDate)) {
dayName = dayNameThu;
}
else if (dateFns.isFriday(selectedDate)) {
dayName = dayNameFri;
}
else if (dateFns.isSaturday(selectedDate)) {
dayName = dayNameSat;
}
else {
dayName = '';
}
return dayName;
}
function mapEventDialogDateTimeInput(input) {
return {
year: Number(input.substring(0, 4)),
month: Number(input.substring(5, 7)) - 1,
day: Number(input.substring(8, 10)),
hour: Number(input.substring(11, 13)),
minute: Number(input.substring(14, 16)),
};
}
function mapEventDialogDateInput(input) {
return {
year: Number(input.substring(0, 4)),
month: Number(input.substring(5, 7)) - 1,
day: Number(input.substring(8, 10)),
};
}
var HeaderActionDate = function () {
var _a = React.useContext(SchedulerContext), dateMode = _a.dateMode, headerDateFormat = _a.headerDateFormat, labelHeaderBtnWeek = _a.labelHeaderBtnWeek, monthNameJan = _a.monthNameJan, monthNameFeb = _a.monthNameFeb, monthNameMar = _a.monthNameMar, monthNameApr = _a.monthNameApr, monthNameMay = _a.monthNameMay, monthNameJun = _a.monthNameJun, monthNameJul = _a.monthNameJul, monthNameAug = _a.monthNameAug, monthNameSep = _a.monthNameSep, monthNameOct = _a.monthNameOct, monthNameNov = _a.monthNameNov, monthNameDec = _a.monthNameDec, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, showHeaderDate = _a.showHeaderDate;
var inlineStyle = {
display: showHeaderDate ? 'flex' : /* istanbul ignore next */ 'none',
};
var renderDate = function () {
var dateToRender = '';
var currentWeek = dateFns.getWeek(new Date(selectedYear, selectedMonth, selectedDay));
/* istanbul ignore next */
switch (dateMode) {
case 'day':
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat);
break;
case 'week':
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat) + ", " + labelHeaderBtnWeek + " " + currentWeek;
break;
case 'month':
var monthName = mapMonthNames(selectedMonth, monthNameJan, monthNameFeb, monthNameMar, monthNameApr, monthNameMay, monthNameJun, monthNameJul, monthNameAug, monthNameSep, monthNameOct, monthNameNov, monthNameDec);
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat) + ", " + monthName;
break;
case 'year':
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, 'YYYY');
break;
default:
dateToRender = '';
}
return dateToRender;
};
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-header-action-date-component", style: inlineStyle },
React__default['default'].createElement(Typography__default['default'], { variant: "body1" },
" ",
renderDate())));
};
var HeaderActionNavGroup = function () {
var _a = React.useContext(SchedulerContext), dateMode = _a.dateMode, id = _a.id, labelHeaderBtnToday = _a.labelHeaderBtnToday, onClickBtnNext = _a.onClickBtnNext, onClickBtnPrev = _a.onClickBtnPrev, onClickBtnToday = _a.onClickBtnToday, setStateSelectedDay = _a.setStateSelectedDay, setStateSelectedMonth = _a.setStateSelectedMonth, setStateSelectedYear = _a.setStateSelectedYear, showHeaderNavGroup = _a.showHeaderNavGroup, tooltipHeaderBtnNext = _a.tooltipHeaderBtnNext, tooltipHeaderBtnPrev = _a.tooltipHeaderBtnPrev;
var _b = React.useContext(SchedulerContext), selectedYear = _b.selectedYear, selectedMonth = _b.selectedMonth, selectedDay = _b.selectedDay;
var inlineStyle = {
display: showHeaderNavGroup ? 'flex' : /* istanbul ignore next */ 'none',
};
var currentWeek = dateFns.getWeek(new Date(selectedYear, selectedMonth, selectedDay));
var disableNavButtonLeft = dateMode === 'week' && /* istanbul ignore next */ currentWeek === 1;
var disableNavButtonRight = dateMode === 'week' && /* istanbul ignore next */ currentWeek === 52;
var daysInMonth = dateFns.getDaysInMonth(new Date(selectedYear, selectedMonth));
/* istanbul ignore next */
var getDateOfWeek = function (week, year) {
var calculatedDate = new Date(year, 0, 0 + (week - 1) * 7);
currentWeek = week;
return {
year: dateFns.getYear(calculatedDate),
month: dateFns.getMonth(calculatedDate),
day: dateFns.getDate(calculatedDate),
};
};
var handleNavLeft = function () {
/* istanbul ignore next */
switch (dateMode) {
case 'day':
if (selectedDay === 1) {
setStateSelectedMonth((selectedMonth -= 1));
setStateSelectedDay(daysInMonth);
if (selectedMonth < 0) {
setStateSelectedMonth(11);
setStateSelectedYear((selectedYear -= 1));
}
}
else {
setStateSelectedDay((selectedDay -= 1));
}
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'week':
var date = new Date(selectedYear, selectedMonth, selectedDay);
if (currentWeek !== 1) {
setStateSelectedYear(selectedYear);
setStateSelectedMonth(getDateOfWeek(dateFns.getWeek(date) - 1, selectedYear).month);
setStateSelectedDay(getDateOfWeek(dateFns.getWeek(date) - 1, selectedYear).day);
}
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'month':
if (selectedMonth === 0) {
setStateSelectedYear((selectedYear -= 1));
setStateSelectedMonth(11);
}
else {
setStateSelectedMonth((selectedMonth -= 1));
}
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'year':
setStateSelectedYear((selectedYear -= 1));
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
}
};
var handleNavRight = function () {
/* istanbul ignore next */
switch (dateMode) {
case 'day':
if (selectedDay === daysInMonth) {
setStateSelectedDay(1);
if (selectedMonth !== 11) {
setStateSelectedMonth((selectedMonth += 1));
}
else {
setStateSelectedMonth(0);
setStateSelectedYear((selectedYear += 1));
}
}
else {
setStateSelectedDay((selectedDay += 1));
}
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'week':
var date = new Date(selectedYear, selectedMonth, selectedDay);
if (currentWeek !== 52) {
setStateSelectedYear(selectedYear);
setStateSelectedMonth(getDateOfWeek(dateFns.getWeek(date) + 1, selectedYear).month);
setStateSelectedDay(getDateOfWeek(dateFns.getWeek(date) + 1, selectedYear).day);
}
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'month':
if (selectedMonth === 11) {
setStateSelectedYear((selectedYear += 1));
setStateSelectedMonth(0);
}
else {
setStateSelectedMonth((selectedMonth += 1));
}
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'year':
setStateSelectedYear((selectedYear += 1));
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
}
};
var handleDateNow = function () {
setStateSelectedYear(dateFns.getYear(Date.now()));
setStateSelectedMonth(dateFns.getMonth(Date.now()));
setStateSelectedDay(dateFns.getDate(Date.now()));
onClickBtnToday({
selectedYear: dateFns.getYear(Date.now()),
selectedMonth: dateFns.getMonth(Date.now()),
selectedDay: dateFns.getDate(Date.now()),
});
};
/* istanbul ignore if */
if (disableNavButtonLeft) {
setStateSelectedDay(1);
setStateSelectedMonth(0);
}
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-header-action-nav-group-component", style: inlineStyle },
React__default['default'].createElement(Tooltip__default['default'], { title: tooltipHeaderBtnPrev },
React__default['default'].createElement("span", null,
React__default['default'].createElement(IconButton__default['default'], { className: "header-action-nav-left", id: id + "_headerActionNavLeft", size: "small", onClick: handleNavLeft, disabled: disableNavButtonLeft },
React__default['default'].createElement(NavIconLeft__default['default'], { fontSize: "small" })))),
React__default['default'].createElement(Button__default['default'], { className: "header-action-nav-today", id: id + "_headerActionNavToday", size: "small", color: "primary", onClick: handleDateNow }, labelHeaderBtnToday),
React__default['default'].createElement(Tooltip__default['default'], { title: tooltipHeaderBtnNext },
React__default['default'].createElement("span", null,
React__default['default'].createElement(IconButton__default['default'], { className: "header-action-nav-right", id: id + "_headerActionNavRight", size: "small", onClick: handleNavRight, disabled: disableNavButtonRight },
React__default['default'].createElement(NavIconRight__default['default'], { fontSize: "small" }))))));
};
var HeaderAction = function () {
var showHeaderAction = React.useContext(SchedulerContext).showHeaderAction;
var inlineStyle = {
display: showHeaderAction ? 'flex' : /* istanbul ignore next */ 'none',
};
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-header-action-component", style: inlineStyle },
React__default['default'].createElement(HeaderActionBtnGroup, null),
React__default['default'].createElement(HeaderActionDate, null),
React__default['default'].createElement(HeaderActionNavGroup, null)));
};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var HeaderLongLasting = function () {
var _a = React.useContext(SchedulerContext), dateMode = _a.dateMode, events = _a.events, noDataText = _a.noDataText, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, setEventDialogState = _a.setEventDialogState, showHeaderLongLasting = _a.showHeaderLongLasting, showNoDataAlert = _a.showNoDataAlert;
var filteredEvents = [];
/* istanbul ignore next */
switch (dateMode) {
case 'day':
filteredEvents = getLongScaledEventsForDay(events, selectedYear, selectedMonth, selectedDay);
break;
case 'week':
filteredEvents = getLongScaledEventsForWeek(events, selectedYear, selectedMonth, selectedDay);
break;
case 'month':
filteredEvents = getLongScaledEventsForMonth(events, selectedYear, selectedMonth, selectedDay);
break;
case 'year':
filteredEvents = getLongScaledEventsForYear(events, selectedYear, selectedMonth, selectedDay);
break;
}
/* istanbul ignore next */
var openDialog = function (e) {
var eventId = e.target.closest('.long-scaled-item').getAttribute('data-attribute-event-id');
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: getEventById(eventId, events) })); });
};
var renderEvents = function () {
return map__default['default'](filteredEvents, function (event, index) {
var inlineStyleEvent = {
backgroundColor: event.color,
};
return (React__default['default'].createElement("div", { key: "long-scaled-item-" + index, className: "long-scaled-item", style: inlineStyleEvent, "data-attribute-event-id": event.id, onClick: openDialog },
React__default['default'].createElement(Typography__default['default'], { variant: "caption" },
moment__default['default'](new Date(event.startYear, event.startMonth, event.startDay, event.startHour, event.startMinute)).format('HH:mm'),
' ',
": ",
event.title)));
});
};
var inlineStyeAlert = {
display: isEmpty__default['default'](filteredEvents) && showNoDataAlert ? 'flex' : 'none',
};
var inlineStyle = {
display: showHeaderLongLasting ? 'flex' : /* istanbul ignore next */ 'none',
};
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-header-long-lasting-component", style: inlineStyle },
React__default['default'].createElement("div", { className: "header-long-lasting-items" },
React__default['default'].createElement(Alert__default['default'], { severity: "info", style: inlineStyeAlert }, noDataText),
renderEvents())));
};
var Header = function () {
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-header-component" },
React__default['default'].createElement("div", { className: "header-title-wrapper" },
React__default['default'].createElement(HeaderTitle, null)),
React__default['default'].createElement("div", { className: "header-actions-wrapper" },
React__default['default'].createElement(HeaderAction, null)),
React__default['default'].createElement("div", { className: "header-long-lasting-wrapper" },
React__default['default'].createElement(HeaderLongLasting, null))));
};
var APP_CONST = {
colors: [
'#f44336',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#2196f3',
'#03a9f4',
'#00bcd4',
'#009688',
'#4caf50',
'#8bc34a',
'#cddc39',
'#ff9800',
'#ff5722',
'#795548',
'#607d8b',
],
fiveMinutesAsPixels: (44 * 5) / 60,
selectedDay: 1,
selectedMonth: 0,
selectedYear: 2020,
totalNumberOfDayItems: 42,
totalNumberOfYearItems: 42,
yearLeftOffset: 17,
yearRightOffset: 24,
};
function createEmptyEvent(selectedYear, selectedMonth, delectedDay, from, to) {
return new EventItem(uuid__default['default'].v4(), '', '', APP_CONST.colors[0], selectedYear, selectedMonth, delectedDay, from, 0, selectedYear, selectedMonth, delectedDay, to, 0, selectedYear, selectedMonth, delectedDay, false, false, false, false);
}
var ContentDay = function () {
var _a = React.useContext(SchedulerContext), events = _a.events, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, setEventDialogState = _a.setEventDialogState;
var renderSlotItems = function (start, end) {
var filteredEventsForSlot = getEventsForSlot(events, start, end);
var itemsToRender = map__default['default'](filteredEventsForSlot, function (item, index) {
var topOffset = (item.startMinute / 5) * APP_CONST.fiveMinutesAsPixels;
var startDate = moment__default['default']([item.startYear, item.startMonth, item.startDay, item.startHour, item.startMinute]);
var endDate = moment__default['default']([item.endYear, item.endMonth, item.endDay, item.endHour, item.endMinute]);
var timeDiff = endDate.diff(startDate, 'minutes');
var durationHeight = (timeDiff / 5) * APP_CONST.fiveMinutesAsPixels;
var inlineStyle = {
top: topOffset,
backgroundColor: item.color,
width: "calc(100% / " + filteredEventsForSlot.length + ")",
height: durationHeight,
};
/* istanbul ignore next */
var openDialog = function (e) {
e.stopPropagation();
var eventId = e.target.closest('.event-item').getAttribute('data-attribute-event-id');
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: getEventById(eventId, events) })); });
};
return (React__default['default'].createElement("div", { key: "slot-event-" + index, className: "event-item", style: inlineStyle, "data-attribute-event-id": item.id, onClick: openDialog },
React__default['default'].createElement("div", { className: "content" },
React__default['default'].createElement(Typography__default['default'], { variant: "caption" }, moment__default['default'](new Date(item.startYear, item.startMonth, item.startDay, item.startHour, item.startMinute)).format('HH:mm') + " : " + item.title))));
});
return itemsToRender;
};
var renderTimeSlots = function () {
var timeSlotItems = [];
var openDialogModeCreate = function (e) {
e.stopPropagation();
var from = Number(e.target.closest('.time-slot').getAttribute('data-attribute-from'));
var to = Number(e.target.closest('.time-slot').getAttribute('data-attribute-to'));
var eventId = uuid__default['default'].v4();
/* istanbul ignore next */
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: createEmptyEvent(selectedYear, selectedMonth, selectedDay, from, to), mode: 'create' })); });
};
for (var timeSlot = 0; timeSlot < 24; timeSlot += 1) {
timeSlotItems.push(React__default['default'].createElement("div", { key: "time-slot-" + uuid__default['default'].v4(), className: "time-slot", "data-attribute-from": timeSlot, "data-attribute-to": timeSlot + 1, onDoubleClick: openDialogModeCreate },
React__default['default'].createElement(Typography__default['default'], { variant: "caption" }, timeSlot < 10 ? "0" + timeSlot + ":00" : timeSlot + ":00")));
}
return timeSlotItems;
};
var renderEventSlots = function () {
var eventSlotItems = [];
var openDialogModeCreate = function (e) {
e.stopPropagation();
var from = Number(e.target.closest('.event-slot').getAttribute('data-attribute-from'));
var to = Number(e.target.closest('.event-slot').getAttribute('data-attribute-to'));
var eventId = uuid__default['default'].v4();
/* istanbul ignore next */
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: createEmptyEvent(selectedYear, selectedMonth, selectedDay, from, to), mode: 'create' })); });
};
for (var eventSlot = 0; eventSlot < 24; eventSlot += 1) {
eventSlotItems.push(React__default['default'].createElement("div", { key: "event-slot-" + uuid__default['default'].v4(), className: "event-slot", "data-attribute-from": eventSlot, "data-attribute-to": eventSlot + 1, onDoubleClick: openDialogModeCreate }, renderSlotItems(eventSlot, eventSlot + 1)));
}
return eventSlotItems;
};
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-content-day-component" },
React__default['default'].createElement("div", { className: "time-column" }, renderTimeSlots()),
React__default['default'].createElement("div", { id: "eventColumn", className: "event-column" }, renderEventSlots())));
};
var ContentWeek = function () {
var _a = React.useContext(SchedulerContext), events = _a.events, selectedDay = _a.selectedDay, selectedMonth = _a.selectedMonth, selectedYear = _a.selectedYear;
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
var renderTimeSlots = function () {
var timeSlotItems = [];
for (var timeSlot = 0; timeSlot < 24; timeSlot += 1) {
timeSlotItems.push(React__default['default'].createElement("div", { key: "time-slot-" + uuid__default['default'].v4(), className: "time-slot" },
React__default['default'].createElement(Typography__default['default'], { variant: "caption" }, timeSlot < 10 ? "0" + timeSlot + ":00" : timeSlot + ":00")));
}
return timeSlotItems;
};
var renderSlotItems = function (start, end, dayIndex) {
var eventsForSlot = [];
/* istanbul ignore next */
switch (dayIndex) {
case 0:
eventsForSlot = getEventsForDayName(events, 'sunday');
break;
case 1:
eventsForSlot = getEventsForDayName(events, 'monday');
break;
case 2:
eventsForSlot = getEventsForDayName(events, 'tuesday');
break;
case 3:
eventsForSlot = getEventsForDayName(events, 'wednesday');
break;
case 4:
eventsForSlot = getEventsForDayName(events, 'thursday');
break;
case 5:
eventsForSlot = getEventsForDayName(events, 'friday');
break;
case 6:
eventsForSlot = getEventsForDayName(events, 'saturday');
break;
}
var eventsForDay = eventsForSlot;
var filteredEventsForSlot = getEventsForSlot(eventsForDay, start, end);
/* istanbul ignore next */
var itemsToRender = map__default['default'](filteredEventsForSlot, function (item, index) {
var inlineStyle = {
backgroundColor: item.color,
};
return (React__default['default'].createElement("div", { className: "event-item", key: "slot-event-" + index, style: inlineStyle, "data-attribute-event-id": item.id },
React__default['default'].createElement("div", { className: "content" },
React__default['default'].createElement(Typography__default['default'], { variant: "caption" }, moment__default['default'](new Date(item.startYear, item.startMonth, item.startDay, item.startHour, item.startMinute)).format('HH:mm') + " : " + item.title))));
});
return itemsToRender;
};
var renderEventSlots = function () {
var eventSlotItems = [];
var dayIndex = -1;
/* istanbul ignore next */
if (dateFns.isSunday(selectedDate)) {
dayIndex = 0;
}
else if (dateFns.isMonday(selectedDate)) {
dayIndex = 1;
}
else if (dateFns.isTuesday(selectedDate)) {
dayIndex = 2;
}
else if (dateFns.isWednesday(selectedDate)) {
dayIndex = 3;
}
else if (dateFns.isThursday(selectedDate)) {
dayIndex = 4;
}
else if (dateFns.isFriday(selectedDate)) {
dayIndex = 5;
}
else if (dateFns.isSaturday(selectedDate)) {
dayIndex = 6;
}
else {
dayIndex = -1;
}
for (var eventSlot = 0; eventSlot < 24; eventSlot += 1) {
var contentRow = [];
for (var column = 0; column < 7; column += 1) {
var classNameWeekColumn = classnames__default['default']('event-slot-item', {
active: dayIndex === column,
});
contentRow.push(React__default['default'].createElement("div", { key: "week-column-" + eventSlot + "-" + column, "data-attribute-from": eventSlot, "data-attribute-to": eventSlot + 1, className: classNameWeekColumn }, renderSlotItems(eventSlot, eventSlot + 1, column)));
}
eventSlotItems.push(React__default['default'].createElement("div", { key: "event-slot-" + uuid__default['default'].v4(), className: "event-slot" }, contentRow));
}
return eventSlotItems;
};
return (React__default['default'].createElement("div", { className: "ts-react-scheduler-content-week-component" },
React__default['default'].createElement("div", { className: "time-column" }, renderTimeSlots()),
React__default['default'].createElement("div", { className: "event-column" }, renderEventSlots())));
};
var ContentMonth = function () {
var _a = React.useContext(SchedulerContext), events = _a.events, selectedDay = _a.selectedDay, selectedMonth = _a.selectedMonth, selectedYear = _a.selectedYear, setStateDateMode = _a.setStateDateMode, setStateSelectedDay = _a.setStateSelectedDay;
var renderGrid = function () {
var content = [];
var daysInMonth = [];
var shiftedDaysIndex = [];
var firstDayInCurrentMonth = new Date(selectedYear, selectedMonth, 1);
var firs