@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
150 lines • 4.33 kB
JavaScript
import React, { useEffect, useMemo, useState } from 'react';
import { getMonthAndYear, getNewDate } from '../../../utils/calendar';
import Month from './month/Month';
import { StyledMonthWrapper, StyledMotionWrapper } from './MonthWrapper.styles';
const MonthWrapper = _ref => {
let {
locale,
currentDate,
highlightedDates,
selectedDate,
onSelect,
categories,
direction,
onAnimationFinished,
shouldRenderTwo,
width,
customThumbColors,
isDisabled,
minDate,
maxDate,
shouldShowHighlightsInMonthOverlay,
type,
disabledDates,
setCurrentDate,
showMonthYearPickers
} = _ref;
const [content, setContent] = useState();
const [hoveringDay, setHoveringDay] = useState(null);
const monthHeight = useMemo(() => width / (shouldRenderTwo ? 2 : 1), [width, shouldRenderTwo]);
useEffect(() => {
setContent(() => {
// Initial render of months
const items = [];
for (let i = -1; i < 3; i++) {
const date = getNewDate(i, currentDate);
const {
month,
year
} = getMonthAndYear(date);
items.push(/*#__PURE__*/React.createElement(Month, {
height: monthHeight,
key: `${month}-${year}`,
month: month,
year: year,
locale: locale,
onSelect: onSelect,
highlightedDates: highlightedDates,
shouldShowHighlightsInMonthOverlay: shouldShowHighlightsInMonthOverlay,
categories: categories,
selectedDate: selectedDate,
minDate: minDate,
maxDate: maxDate,
type: type,
customThumbColors: customThumbColors,
hoveringDay: hoveringDay,
setHoveringDay: setHoveringDay,
disabledDates: disabledDates,
setCurrentDate: setCurrentDate,
displayIndex: i,
showMonthYearPickers: showMonthYearPickers
}));
}
return items;
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [monthHeight]);
useEffect(() => {
// Doesn't update props until animation is completed
if (direction) return;
setContent(prevState => (prevState ?? []).map((element, index) => {
const date = getNewDate(index - 1, currentDate);
const {
month,
year
} = getMonthAndYear(date);
return {
...element,
props: {
...element.props,
categories,
disabledDates,
displayIndex: index - 1,
highlightedDates,
hoveringDay,
locale,
onSelect,
shouldShowHighlightsInMonthOverlay,
maxDate,
minDate,
month,
customThumbColors,
selectedDate,
setCurrentDate,
setHoveringDay,
showMonthYearPickers,
type,
year
}
};
}));
}, [customThumbColors, categories, currentDate, direction, disabledDates, highlightedDates, hoveringDay, locale, onAnimationFinished, onSelect, maxDate, minDate, selectedDate, setCurrentDate, setHoveringDay, showMonthYearPickers, type, shouldShowHighlightsInMonthOverlay]);
const animate = useMemo(() => {
if (shouldRenderTwo) {
switch (true) {
case direction === 'left':
return {
x: '0%'
};
case direction === 'right':
return {
x: '-100%'
};
default:
return {
x: '-50%'
};
}
} else {
switch (true) {
case direction === 'left':
return {
x: '0%'
};
case direction === 'right':
return {
x: '-200%'
};
default:
return {
x: '-100%'
};
}
}
}, [direction, shouldRenderTwo]);
return /*#__PURE__*/React.createElement(StyledMonthWrapper, {
$height: monthHeight,
$width: width
}, /*#__PURE__*/React.createElement(StyledMotionWrapper, {
animate: animate,
$isDisabled: isDisabled,
transition: {
type: 'tween',
duration: !direction ? 0 : 0.2
},
onAnimationComplete: onAnimationFinished
}, content));
};
MonthWrapper.displayName = 'MonthWrapper';
export default MonthWrapper;
//# sourceMappingURL=MonthWrapper.js.map