react-appointment-picker
Version:
A React component to pick appointments.
375 lines (358 loc) • 18.3 kB
JavaScript
function ___$insertStyle(css) {
if (!css) {
return;
}
if (typeof window === 'undefined') {
return;
}
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
import React, { useState, useRef } from 'react';
___$insertStyle(".blank {\n height: 2rem;\n width: 7rem;\n}\n\n.loader {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n background: rgba(240, 240, 240, 0.9);\n z-index: \"2\";\n justify-content: center;\n align-items: center;\n}\n\n.appointment-content {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.appointment-picker {\n display: flex;\n flex-direction: row;\n text-align: center;\n justify-content: center;\n align-items: center;\n width: max-content;\n}\n.appointment-picker > *:not(:last-child) {\n margin-right: 0.2rem;\n}\n.appointment-picker__col {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n}\n.appointment-picker__col > *:not(:last-child) {\n margin-bottom: 0.2rem;\n}\n.appointment-picker__col__name {\n font-weight: normal;\n height: 2rem;\n width: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n color: #9E9E9E;\n}\n.appointment-picker__col--enabled:hover {\n background-color: #F5F5F5;\n}\n.appointment-picker__col--selected {\n background-color: #F5F5F5;\n}\n.appointment-picker__col--enabled:hover > .appointment-picker__col__number {\n font-weight: 600;\n}\n.appointment-picker__col--selected > .appointment-picker__col__number {\n font-weight: 600;\n}\n\n.appointment {\n background-color: #4FC3F7;\n width: 7rem;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.4rem;\n}\n.appointment__time {\n font-size: 1rem;\n}\n.appointment--enabled {\n cursor: pointer;\n}\n.appointment--enabled:hover {\n background-color: #03A9F4;\n}\n.appointment--selected {\n cursor: pointer;\n background-color: #4CAF50;\n}\n.appointment--reserved {\n cursor: not-allowed;\n background-color: #E0E0E0;\n}");
/*! *****************************************************************************
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);
};
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var DayNumber = function (_a) {
var visible = _a.visible, dayNumber = _a.dayNumber;
return visible ? (React.createElement("div", { className: 'appointment-picker__col__name' }, dayNumber)) : null;
};
var Day = function (_a) {
var visible = _a.visible, dayNumber = _a.dayNumber, isSelected = _a.isSelected, children = _a.children;
var className = 'appointment-picker__col' +
(isSelected
? ' appointment-picker__col--selected'
: ' appointment-picker__col--enabled');
return (React.createElement("div", { className: className },
React.createElement(DayNumber, { dayNumber: dayNumber, visible: visible }),
children));
};
var Appointment = function (_a) {
var _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, isReserved = _a.isReserved, isEnabled = _a.isEnabled, periods = _a.periods, time = _a.time, selectAppointment = _a.selectAppointment;
var handleClick = function () {
!isReserved && selectAppointment();
};
var className = 'appointment' +
(isSelected ? ' appointment--selected' : '') +
(!isSelected && isEnabled && !isReserved ? ' appointment--enabled' : '') +
(isReserved ? ' appointment--reserved' : '');
var style = {
height: "calc(2rem*" + (periods || 1) + " + 0.2rem*(" + (periods || 1) + " - 1))"
};
return (React.createElement("div", { style: style, className: className, onClick: handleClick },
React.createElement("span", { className: 'appointment__time' }, time)));
};
var Blank = function () {
return React.createElement("div", { className: 'blank' });
};
var getAlreadySelectedAppointments = function (_a) {
var maxReservableAppointments = _a.maxReservableAppointments, days = _a.days, alpha = _a.alpha, selectedByDefault = _a.selectedByDefault, initialDay = _a.initialDay, unitTime = _a.unitTime, local = _a.local;
var selectedAppointments = new Map();
var size = 0;
if (selectedByDefault) {
days.forEach(function (day, index) {
var actualDay = new Date(initialDay.getTime() + 60 * 60 * 24 * 1000 * index);
var dayNumber = alpha
? actualDay.toLocaleDateString(local, { weekday: 'long' })
: actualDay.toLocaleDateString(local);
var key = 0;
day.forEach(function (appointment, _) {
if (appointment === null) {
key = key + 1;
}
else if (appointment.isSelected) {
var time = new Date(actualDay.getTime() + unitTime * key).toLocaleTimeString(local);
var appointmentAlreadySelected = includeAppointment(selectedAppointments, dayNumber, appointment.number);
if (size < maxReservableAppointments && !appointmentAlreadySelected) {
addAppointment(selectedAppointments, dayNumber, appointment.number, time, appointment.id);
size = size + 1;
}
}
});
});
}
return { selectedAppointments: selectedAppointments, size: size };
};
var includeAppointment = function (selectedAppointments, day, number) {
var currentDay = selectedAppointments.get(day);
if (currentDay) {
return !!currentDay.get(number);
}
return false;
};
var addAppointment = function (selectedAppointments, day, number, time, id) {
var currentDay = selectedAppointments.get(day);
if (currentDay) {
var currentAppointment = currentDay.get(number);
if (!currentAppointment) {
currentDay.set(number, {
id: id,
time: time
});
}
}
else {
selectedAppointments.set(day, new Map([
[
number,
{
id: id,
time: time
}
]
]));
}
};
var AppointmentPicker = function (_a) {
var e_1, _b, e_2, _c;
var alpha = _a.alpha, selectedByDefault = _a.selectedByDefault, continuous = _a.continuous, loading = _a.loading, _d = _a.addAppointmentCallback, addAppointmentCallback = _d === void 0 ? function (_a) {
var _b = _a.addedAppointment, day = _b.day, number = _b.number, time = _b.time, id = _b.id, addCb = _a.addCb;
console.log("Added appointment " + number + ", day " + day + ", time " + time + ", id " + id);
addCb(day, number, time, id);
} : _d, _e = _a.removeAppointmentCallback, removeAppointmentCallback = _e === void 0 ? function (_a, removeCb) {
var day = _a.day, number = _a.number, time = _a.time, id = _a.id;
console.log("Removed appointment " + number + ", day " + day + ", time " + time + ", id " + id);
removeCb(day, number);
} : _e, days = _a.days, _f = _a.maxReservableAppointments, maxReservableAppointments = _f === void 0 ? 0 : _f, _g = _a.initialDay, initialDay = _g === void 0 ? new Date() : _g, _h = _a.unitTime, unitTime = _h === void 0 ? 15 * 60 * 1000 : _h, visible = _a.visible, _j = _a.local, local = _j === void 0 ? 'en-US' : _j;
var _k = getAlreadySelectedAppointments({
maxReservableAppointments: maxReservableAppointments,
days: days,
alpha: alpha,
selectedByDefault: selectedByDefault,
initialDay: initialDay,
unitTime: unitTime,
local: local
}), alreadySelectedAppointments = _k.selectedAppointments, actualSize = _k.size;
var actualDayPeriods = days.map(function (day) {
var periods = 0;
day.forEach(function (obj) {
periods = obj
? obj.periods
? periods + obj.periods
: periods + 1
: periods + 1;
});
return periods;
});
var _l = __read(useState(alreadySelectedAppointments), 2), selectedAppointments = _l[0], setSelectedAppointments = _l[1];
var size = useRef(actualSize);
var _m = __read(useState(actualSize), 2), setSize = _m[1];
var _o = __read(useState(actualDayPeriods), 1), dayPeriods = _o[0];
var _p = __read(useState(Math.max.apply(null, dayPeriods)), 1), dayLength = _p[0];
if (maxReservableAppointments < size.current) {
var sum = 0;
var newSelectedAppointments = new Map();
try {
for (var _q = __values(selectedAppointments.keys()), _r = _q.next(); !_r.done; _r = _q.next()) {
var currentDay = _r.value;
var day = selectedAppointments.get(currentDay);
var lengthByDay = day ? day.size : 0;
if (sum + lengthByDay < maxReservableAppointments) {
newSelectedAppointments.set(currentDay, day);
}
else {
var dif = maxReservableAppointments - sum;
var i = 0;
if (day) {
try {
for (var _s = (e_2 = void 0, __values(day.keys())), _t = _s.next(); !_t.done; _t = _s.next()) {
var currentNumber = _t.value;
if (i < dif)
day["delete"](currentNumber);
i++;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_t && !_t.done && (_c = _s["return"])) _c.call(_s);
}
finally { if (e_2) throw e_2.error; }
}
}
newSelectedAppointments.set(currentDay, day);
setSelectedAppointments(newSelectedAppointments);
setSize(maxReservableAppointments);
}
sum = sum + lengthByDay;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_r && !_r.done && (_b = _q["return"])) _b.call(_q);
}
finally { if (e_1) throw e_1.error; }
}
}
var deleteAppointment = function (day, number) {
var currentDay = selectedAppointments.get(day);
if (currentDay) {
currentDay["delete"](number);
if (!(currentDay.size > 0)) {
selectedAppointments["delete"](day);
}
}
};
var acceptSelection = function (day, number, time, id) {
if (size.current < maxReservableAppointments) {
addAppointment(selectedAppointments, day, number, time, id);
size.current = size.current + 1;
setSize(function (currentSize) { return currentSize + 1; });
}
};
var acceptDeselection = function (day, number) {
deleteAppointment(day, number);
size.current = size.current - 1;
setSize(function (currentSize) { return currentSize - 1; });
};
var selectAppointment = function (day, number, time, id) {
var appointmentAlreadySelected = includeAppointment(selectedAppointments, day, number);
if (size.current < maxReservableAppointments) {
if (!appointmentAlreadySelected) {
addAppointmentCallback({
addedAppointment: { day: day, number: number, time: time, id: id },
addCb: acceptSelection
});
}
else {
removeAppointmentCallback({ day: day, number: number, time: time, id: id }, acceptDeselection);
}
}
else {
var currentDay = selectedAppointments.get(day);
if (currentDay && appointmentAlreadySelected) {
removeAppointmentCallback({ day: day, number: number, time: time, id: id }, acceptDeselection);
}
else if (continuous) {
var auxDay = selectedAppointments.keys().next().value;
var auxDayInstance = selectedAppointments.get(auxDay);
var auxNumber = auxDayInstance.keys().next().value;
var auxNumberInstance = auxDayInstance.get(auxNumber);
addAppointmentCallback({
addedAppointment: { day: day, number: number, time: time, id: id },
addCb: acceptSelection,
removedAppointment: {
day: auxDay,
number: auxNumber,
time: auxNumberInstance.time,
id: auxNumberInstance.id
},
removeCb: acceptDeselection
});
}
}
};
var renderDays = function () {
return days.map(function (day, index) {
var actualDay = new Date(initialDay.getTime() + 60 * 60 * 24 * 1000 * index);
/* const options = {
weekday: 'long'
year: 'numeric',
month: 'long',
day: 'numeric'
} */
var dayNumber = alpha
? actualDay.toLocaleDateString(local, { weekday: 'long' })
: actualDay.toLocaleDateString(local);
var isSelected = !!selectedAppointments.get(dayNumber);
var props = {
visible: visible,
dayNumber: dayNumber,
isSelected: isSelected,
selectedAppointment: null,
appointments: day,
selectAppointment: selectAppointment
};
return (React.createElement(Day, __assign({ key: index }, props), renderAppointments(day, dayNumber, isSelected, dayPeriods[index], actualDay)));
});
};
var renderAppointments = function (appointments, dayNumber, isDaySelected, periods, actualDay) {
var blanks = new Array(dayLength - periods > 0 ? dayLength - periods : 0).fill(0);
var key = 0;
var day = appointments.map(function (appointment) {
if (appointment === null) {
key = key + 1;
return React.createElement(Blank, { key: key });
}
var time = new Date(actualDay.getTime() + unitTime * key).toLocaleTimeString(local);
var isSelected = isDaySelected &&
includeAppointment(selectedAppointments, dayNumber, appointment.number);
var props = {
isSelected: isSelected,
isReserved: appointment.isReserved,
isEnabled: size.current < maxReservableAppointments || continuous,
selectAppointment: function () {
selectAppointment(dayNumber, appointment.number, time, appointment.id);
},
appointmentNumber: time,
periods: appointment.periods ? appointment.periods : 1,
time: time
};
key =
key +
(appointment ? (appointment.periods ? appointment.periods : 1) : 1);
return React.createElement(Appointment, __assign({ key: key }, props));
});
if (blanks.length > 0) {
blanks.forEach(function (_, index) {
day.push(React.createElement(Blank, { key: (key + index + 1) * 2 }));
});
}
return day;
};
return (React.createElement("div", { className: 'appointment-content' },
React.createElement("div", { className: loading ? 'loader' : undefined }),
React.createElement("div", { className: 'appointment-picker' }, renderDays())));
};
export { AppointmentPicker };
//# sourceMappingURL=index.es.js.map