@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
243 lines (242 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _core = require("@chayns-components/core");
var _react = _interopRequireWildcard(require("react"));
var _openingTimes = require("../../types/openingTimes");
var _HintText = _interopRequireDefault(require("./hint-text/HintText"));
var _OpeningInputs = _interopRequireDefault(require("./opening-inputs/OpeningInputs"));
var _OpeningTimes = require("./OpeningTimes.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const OpeningTimes = ({
closedText = 'closed',
currentDayId,
editMode = false,
hintText,
hintTextPosition = _openingTimes.HintTextPosition.Bottom,
openingTimes,
weekdays,
onChange,
onTimeAdd,
onTimeRemove
}) => {
const [newOpeningTimes, setNewOpeningTimes] = (0, _react.useState)();
const [invalidOpeningTimes, setInvalidOpeningTimes] = (0, _react.useState)([]);
const [isPopupOpen, setIsPopupOpen] = (0, _react.useState)(false);
const ref = (0, _react.useRef)(null);
const popupRef = (0, _react.useRef)(null);
(0, _react.useEffect)(() => {
setNewOpeningTimes(openingTimes);
}, [openingTimes]);
const validateTime = (0, _react.useCallback)((newTime, dayId) => {
var _newOpeningTimes$find;
if (newTime.start === newTime.end || newTime.start >= newTime.end) {
return false;
}
const dayTimes = (newOpeningTimes === null || newOpeningTimes === void 0 || (_newOpeningTimes$find = newOpeningTimes.find(day => day.id === dayId)) === null || _newOpeningTimes$find === void 0 ? void 0 : _newOpeningTimes$find.times) || [];
return dayTimes.every(time => time.id === newTime.id || newTime.end <= time.start || newTime.start >= time.end);
}, [newOpeningTimes]);
const handleCheckBoxChange = (0, _react.useCallback)(id => {
setNewOpeningTimes(prevOpeningTimes => {
const updatedOpeningTimes = (prevOpeningTimes ?? []).map(openingTime => {
if (openingTime.id === id) {
return {
...openingTime,
isDisabled: !openingTime.isDisabled
};
}
return openingTime;
});
if (typeof onChange === 'function') {
onChange({
enabledDays: updatedOpeningTimes.filter(item => !item.isDisabled).map(item => item.id)
});
}
return updatedOpeningTimes;
});
}, [onChange]);
const handleChange = (0, _react.useCallback)((newTime, id) => {
const isValid = validateTime(newTime, id);
setNewOpeningTimes(prevOpeningTimes => {
const updatedOpeningTimes = (prevOpeningTimes ?? []).map(openingTime => {
if (openingTime.id === id) {
const newTimes = openingTime.times.map(time => {
if (time.id === newTime.id) {
return newTime;
}
return time;
});
return {
...openingTime,
times: newTimes
};
}
return openingTime;
});
const changedOpeningTime = updatedOpeningTimes.find(updatedOpeningTime => updatedOpeningTime.id === id);
if (typeof onChange === 'function') {
onChange({
isValid,
dayId: changedOpeningTime === null || changedOpeningTime === void 0 ? void 0 : changedOpeningTime.id,
time: newTime
});
}
return updatedOpeningTimes;
});
}, [onChange, validateTime]);
const handleAdd = (0, _react.useCallback)((time, id) => {
const isValid = validateTime(time, id);
if (typeof onTimeAdd === 'function') {
onTimeAdd({
time,
dayId: id,
isValid
});
}
setNewOpeningTimes(prevOpeningTimes => (prevOpeningTimes ?? []).map(openingTime => {
if (openingTime.id === id) {
return {
...openingTime,
times: [...openingTime.times, time]
};
}
return openingTime;
}));
}, [onTimeAdd, validateTime]);
const handleUpdateInvalidIds = (0, _react.useCallback)((openingTimeId, invalidTimeIds) => {
setInvalidOpeningTimes(prevState => {
const updatedInvalidOpeningTimes = prevState.map(invalidOpeningTime => {
if (invalidOpeningTime.openingTimeId === openingTimeId) {
return {
openingTimeId,
invalidTimeIds
};
}
return invalidOpeningTime;
});
if (!updatedInvalidOpeningTimes.some(({
openingTimeId: updatedInvalidOpeningId
}) => updatedInvalidOpeningId === openingTimeId) && invalidTimeIds.length > 0) {
updatedInvalidOpeningTimes.push({
openingTimeId,
invalidTimeIds
});
}
return updatedInvalidOpeningTimes.filter(updatedInvalidOpeningTime => updatedInvalidOpeningTime.invalidTimeIds.length !== 0);
});
}, []);
const handleRemove = (0, _react.useCallback)(id => {
setNewOpeningTimes(prevOpeningTimes => (prevOpeningTimes ?? []).map(openingTime => {
const newTimes = openingTime.times.filter(time => time.id !== id);
return {
...openingTime,
times: newTimes
};
}));
if (typeof onTimeRemove === 'function') {
onTimeRemove(id);
}
}, [onTimeRemove]);
const content = (0, _react.useMemo)(() => {
const items = [];
if (!newOpeningTimes) {
return items;
}
newOpeningTimes.forEach(({
times,
id,
weekdayId,
isDisabled
}) => {
var _weekdays$find;
const weekday = (_weekdays$find = weekdays.find(weekDay => weekDay.id === weekdayId)) === null || _weekdays$find === void 0 ? void 0 : _weekdays$find.name;
if (!weekday) {
return;
}
items.push(/*#__PURE__*/_react.default.createElement(_OpeningTimes.StyledOpeningTimesWrapper, {
key: `openingTimes__${id}`
}, editMode ? /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
isChecked: !isDisabled,
onChange: () => handleCheckBoxChange(id)
}, weekday) : /*#__PURE__*/_react.default.createElement(_OpeningTimes.StyledOpeningTimesWeekDay, null, weekday), /*#__PURE__*/_react.default.createElement(_OpeningInputs.default, {
closedText: closedText,
currentDayId: currentDayId,
id: id,
times: times,
isDisabled: isDisabled,
onInvalid: handleUpdateInvalidIds,
onChange: newTime => handleChange(newTime, id),
onRemove: handleRemove,
onAdd: handleAdd,
editMode: editMode
})));
});
return items;
}, [closedText, currentDayId, editMode, handleAdd, handleChange, handleCheckBoxChange, handleRemove, handleUpdateInvalidIds, newOpeningTimes, weekdays]);
const size = (0, _core.useElementSize)(ref);
const hidePopup = (0, _react.useCallback)(() => {
var _popupRef$current;
setIsPopupOpen(false);
(_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.hide();
}, []);
const showPopup = (0, _react.useCallback)(() => {
var _popupRef$current2;
setIsPopupOpen(true);
(_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 || _popupRef$current2.show();
}, []);
const displayedContent = (0, _react.useMemo)(() => {
var _weekdays$find2;
if (!currentDayId || editMode) {
return content;
}
const singleDay = newOpeningTimes === null || newOpeningTimes === void 0 ? void 0 : newOpeningTimes.find(({
id
}) => id === currentDayId);
if (!singleDay) {
return content;
}
const {
id,
times,
weekdayId
} = singleDay;
const weekday = (_weekdays$find2 = weekdays.find(weekDay => weekDay.id === weekdayId)) === null || _weekdays$find2 === void 0 ? void 0 : _weekdays$find2.name;
return /*#__PURE__*/_react.default.createElement(_OpeningTimes.StyledOpeningTimesWrapper, {
key: `currentDay__${currentDayId}`,
style: size && {
width: size.width
},
onMouseEnter: showPopup,
onMouseLeave: hidePopup,
onClick: () => isPopupOpen ? hidePopup() : showPopup()
}, /*#__PURE__*/_react.default.createElement(_core.Popup, {
onShow: () => setIsPopupOpen(true),
onHide: () => setIsPopupOpen(false),
ref: popupRef,
content: /*#__PURE__*/_react.default.createElement(_OpeningTimes.StyledOpeningTimesTooltipContent, {
key: "opening-time-tooltip"
}, content)
}, /*#__PURE__*/_react.default.createElement(_OpeningTimes.StyledOpeningTimesWeekDay, null, weekday)), /*#__PURE__*/_react.default.createElement(_OpeningInputs.default, {
closedText: closedText,
currentDayId: currentDayId,
onInvalid: handleUpdateInvalidIds,
id: id,
times: times,
editMode: editMode
}));
}, [currentDayId, editMode, newOpeningTimes, weekdays, size, showPopup, hidePopup, content, closedText, handleUpdateInvalidIds, isPopupOpen]);
const shouldShowHint = (0, _react.useMemo)(() => invalidOpeningTimes.length > 0, [invalidOpeningTimes.length]);
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_OpeningTimes.StyledOpeningTimes, {
ref: ref
}, shouldShowHint && hintText && hintTextPosition === _openingTimes.HintTextPosition.Top && /*#__PURE__*/_react.default.createElement(_HintText.default, {
text: hintText
}), displayedContent, shouldShowHint && hintText && hintTextPosition === _openingTimes.HintTextPosition.Bottom && /*#__PURE__*/_react.default.createElement(_HintText.default, {
text: hintText
})), [displayedContent, hintText, hintTextPosition, shouldShowHint]);
};
OpeningTimes.displayName = 'OpeningTimes';
var _default = exports.default = OpeningTimes;
//# sourceMappingURL=OpeningTimes.js.map