@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
62 lines (61 loc) • 3.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Category = _interopRequireDefault(require("./category/Category"));
var _Day = require("./Day.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 Day = ({
date,
highlightedDates,
categories,
isSameMonth,
isSelected,
onClick,
isDisabled,
isIntervalStart,
isIntervalEnd,
customThumbColors,
isWithinIntervalSelection,
shouldShowHighlightsInMonthOverlay,
setHoveringDay
}) => {
const dayRef = (0, _react.useRef)(null);
const styles = (0, _react.useMemo)(() => {
var _highlightedDates$fin;
if (!highlightedDates || !shouldShowHighlightsInMonthOverlay && !isSameMonth) {
return undefined;
}
return (_highlightedDates$fin = highlightedDates.find(highlightedDate => highlightedDate.dates.some(highlighted => (0, _date.isSameDay)(highlighted, date)))) === null || _highlightedDates$fin === void 0 ? void 0 : _highlightedDates$fin.style;
}, [date, highlightedDates, isSameMonth, shouldShowHighlightsInMonthOverlay]);
const categoryElements = (0, _react.useMemo)(() => {
if (!categories || !shouldShowHighlightsInMonthOverlay && !isSameMonth) return [];
return categories.flatMap(category => category.dates.filter(day => (0, _date.isSameDay)(day, date)).map(day => /*#__PURE__*/_react.default.createElement(_Category.default, {
key: day.getTime() * Math.random(),
color: category.color
})));
}, [categories, date, isSameMonth, shouldShowHighlightsInMonthOverlay]);
return /*#__PURE__*/_react.default.createElement(_Day.StyledDay, {
ref: dayRef,
onClick: () => onClick(date, isSameMonth && !isDisabled),
$isSameMonth: isSameMonth,
$isDisabled: isDisabled,
$backgroundColor: styles === null || styles === void 0 ? void 0 : styles.backgroundColor,
$textColor: styles === null || styles === void 0 ? void 0 : styles.textColor,
onMouseEnter: () => setHoveringDay(date),
onMouseLeave: () => setHoveringDay(null)
}, /*#__PURE__*/_react.default.createElement(_Day.StyledDayNumber, {
$customThumbColors: customThumbColors,
$isSelected: shouldShowHighlightsInMonthOverlay ? isSelected : isSelected && isSameMonth,
$isIntervalStart: shouldShowHighlightsInMonthOverlay ? isIntervalStart : isIntervalStart && isSameMonth,
$isIntervalEnd: shouldShowHighlightsInMonthOverlay ? isIntervalEnd : isIntervalEnd && isSameMonth,
$isWithinIntervalSelection: shouldShowHighlightsInMonthOverlay ? isWithinIntervalSelection : isWithinIntervalSelection && isSameMonth
}, date.getDate()), categoryElements && /*#__PURE__*/_react.default.createElement(_Day.StyledDayCategoryWrapper, null, categoryElements));
};
Day.displayName = 'Day';
var _default = exports.default = Day;
//# sourceMappingURL=Day.js.map