@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
128 lines (127 loc) • 5.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _calendar = require("../../../../../types/calendar");
var _calendar2 = require("../../../../../utils/calendar");
var _Day = _interopRequireDefault(require("./day/Day"));
var _DayWrapper = require("./DayWrapper.styles");
var _date = require("../../../../../utils/date");
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 DayWrapper = ({
month,
year,
highlightedDates,
onSelect,
selectedDate,
categories,
minDate,
maxDate,
customThumbColors,
type,
hoveringDay,
shouldShowHighlightsInMonthOverlay,
setHoveringDay,
disabledDates
}) => {
const dayOfCurrentMonth = (0, _react.useMemo)(() => new Date(year, month - 1, 13), [month, year]);
const days = (0, _react.useMemo)(() => {
const dateArray = [];
const currentDate = (0, _date.startOfMonth)(dayOfCurrentMonth);
const startDay = (0, _date.startOfWeek)(currentDate);
for (let i = 0; i < 42; i++) {
const newDate = (0, _date.addDays)(startDay, i);
dateArray.push(newDate);
}
return dateArray;
}, [dayOfCurrentMonth]);
const handleDayClick = (0, _react.useCallback)((date, shouldFireEvent) => {
if (shouldFireEvent) {
onSelect(date);
}
}, [onSelect]);
const dayElements = (0, _react.useMemo)(() => {
const items = [];
const {
start,
end
} = selectedDate || {};
const firstDisabledDateAfterStart = (0, _calendar2.findNextDate)(start, disabledDates);
days.forEach(day => {
let isSelected = false;
let isIntervalStart = false;
let isIntervalEnd = false;
let isWithinIntervalSelection = false;
const showHoverEffect = false;
let isDisabled =
// Disables dates, that are not between minDate and maxDate.
!(0, _date.isWithinInterval)(day, {
start: minDate,
end: maxDate
}) ||
// Disables
disabledDates.some(disabledDate => (0, _date.isSameDay)(disabledDate, day));
if (type === _calendar.CalendarType.Single && selectedDate instanceof Date) {
isSelected = (0, _date.isSameDay)(selectedDate, day);
} else if (type === _calendar.CalendarType.Multiple && Array.isArray(selectedDate)) {
isSelected = selectedDate.some(date => (0, _date.isSameDay)(date, day));
} else if (type === _calendar.CalendarType.Interval && start) {
isIntervalStart = (0, _date.isSameDay)(start, day);
if (end) {
isIntervalEnd = (0, _date.isSameDay)(end, day);
isWithinIntervalSelection = (0, _date.isWithinInterval)(day, {
start,
end
});
} else if (firstDisabledDateAfterStart && !isDisabled && (0, _date.isAfter)(day, firstDisabledDateAfterStart)) {
// Ensures, that the interval end can't be set in a way, that the interval includes disabled dates.
isDisabled = true;
}
}
if (type === _calendar.CalendarType.Interval && hoveringDay && !isIntervalStart && !isIntervalEnd && !isWithinIntervalSelection) {
if (!start) {
isIntervalStart = (0, _date.isSameDay)(day, hoveringDay);
} else if (start && !end) {
if (start > day) {
isIntervalStart = (0, _date.isSameDay)(day, hoveringDay);
} else {
isWithinIntervalSelection = (0, _date.isWithinInterval)(day, {
start,
end: hoveringDay
});
isIntervalEnd = (0, _date.isSameDay)(hoveringDay, day);
}
} else if (start && end && (0, _date.isSameDay)(hoveringDay, day)) {
isIntervalStart = !(0, _date.isWithinInterval)(day, {
start,
end
});
}
}
items.push(/*#__PURE__*/_react.default.createElement(_Day.default, {
key: `single-day-${day.toDateString()}`,
categories: categories,
date: day,
isSelected: isSelected,
customThumbColors: customThumbColors,
isIntervalStart: isIntervalStart,
isIntervalEnd: isIntervalEnd,
isWithinIntervalSelection: isWithinIntervalSelection,
isDisabled: isDisabled,
shouldShowHighlightsInMonthOverlay: shouldShowHighlightsInMonthOverlay,
isSameMonth: (0, _date.isSameMonth)(day, dayOfCurrentMonth),
onClick: handleDayClick,
highlightedDates: highlightedDates,
setHoveringDay: setHoveringDay
}));
});
return items;
}, [selectedDate, disabledDates, days, minDate, maxDate, type, hoveringDay, categories, customThumbColors, shouldShowHighlightsInMonthOverlay, dayOfCurrentMonth, handleDayClick, highlightedDates, setHoveringDay]);
return /*#__PURE__*/_react.default.createElement(_DayWrapper.StyledDayWrapper, null, dayElements);
};
DayWrapper.displayName = 'DayWrapper';
var _default = exports.default = DayWrapper;
//# sourceMappingURL=DayWrapper.js.map