@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
57 lines • 2.72 kB
JavaScript
import React, { useMemo, useRef } from 'react';
import Category from './category/Category';
import { StyledCurrentDay, StyledDay, StyledDayCategoryWrapper, StyledDayNumber } from './Day.styles';
import { isSameDay } from '../../../../../../utils/date';
const Day = ({
date,
highlightedDates,
categories,
isSameMonth,
isSelected,
onClick,
isDisabled,
isIntervalStart,
isIntervalEnd,
customThumbColors,
isWithinIntervalSelection,
shouldShowHighlightsInMonthOverlay,
setHoveringDay,
currentDateBackgroundColor
}) => {
const dayRef = useRef(null);
const isCurrentDay = useMemo(() => isSameDay(date, new Date()), [date]);
const styles = useMemo(() => {
if (!highlightedDates || !shouldShowHighlightsInMonthOverlay && !isSameMonth) {
return undefined;
}
return highlightedDates.find(highlightedDate => highlightedDate.dates.some(highlighted => isSameDay(highlighted, date)))?.style;
}, [date, highlightedDates, isSameMonth, shouldShowHighlightsInMonthOverlay]);
const categoryElements = useMemo(() => {
if (!categories || !shouldShowHighlightsInMonthOverlay && !isSameMonth) return [];
return categories.flatMap(category => category.dates.filter(day => isSameDay(day, date)).map(day => /*#__PURE__*/React.createElement(Category, {
key: day.getTime() * Math.random(),
color: category.color
})));
}, [categories, date, isSameMonth, shouldShowHighlightsInMonthOverlay]);
return /*#__PURE__*/React.createElement(StyledDay, {
ref: dayRef,
onClick: () => onClick(date, isSameMonth && !isDisabled),
$isSameMonth: isSameMonth,
$isDisabled: isDisabled,
$backgroundColor: styles?.backgroundColor,
$textColor: styles?.textColor,
onMouseEnter: () => setHoveringDay(date),
onMouseLeave: () => setHoveringDay(null)
}, isCurrentDay && currentDateBackgroundColor ? /*#__PURE__*/React.createElement(StyledCurrentDay, {
$backgroundColor: currentDateBackgroundColor
}) : null, /*#__PURE__*/React.createElement(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.createElement(StyledDayCategoryWrapper, null, categoryElements));
};
Day.displayName = 'Day';
export default Day;
//# sourceMappingURL=Day.js.map