@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
87 lines • 2.52 kB
JavaScript
import React, { useState } from 'react';
import MonthYearPickers from '../../month-year-pickers/MonthYearPickers';
import DayWrapper from './day-wrapper/DayWrapper';
import { StyledMonth, StyledMonthHead } from './Month.styles';
import WeekdayWrapper from './weekday-wrapper/WeekdayWrapper';
const minSwipeDistance = 50;
const Month = ({
month,
year,
locale,
highlightedDates,
selectedDate,
onSelect,
categories,
height,
minDate,
maxDate,
customThumbColors,
shouldShowHighlightsInMonthOverlay,
type,
hoveringDay,
setHoveringDay,
disabledDates,
setCurrentDate,
displayIndex,
showMonthYearPickers,
handleLeftArrowClick,
handleRightArrowClick,
currentDateBackgroundColor
}) => {
const [touchStart, setTouchStart] = useState();
const [touchEnd, setTouchEnd] = useState();
const onTouchStart = e => {
setTouchEnd(undefined);
setTouchStart(e.targetTouches[0]?.clientX);
};
const onTouchMove = e => {
setTouchEnd(e.targetTouches[0]?.clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
if (distance < -minSwipeDistance) {
handleLeftArrowClick();
}
if (distance > minSwipeDistance) {
handleRightArrowClick();
}
};
return /*#__PURE__*/React.createElement(StyledMonth, {
$height: height,
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd
}, /*#__PURE__*/React.createElement(StyledMonthHead, null, /*#__PURE__*/React.createElement(MonthYearPickers, {
month: month,
year: year,
locale: locale,
minDate: minDate,
maxDate: maxDate,
setCurrentDate: setCurrentDate,
displayIndex: displayIndex,
showMonthYearPickers: showMonthYearPickers
})), /*#__PURE__*/React.createElement(WeekdayWrapper, {
locale: locale
}), /*#__PURE__*/React.createElement(DayWrapper, {
key: `day-wrapper-${month}`,
categories: categories,
selectedDate: selectedDate,
customThumbColors: customThumbColors,
month: month,
year: year,
onSelect: onSelect,
shouldShowHighlightsInMonthOverlay: shouldShowHighlightsInMonthOverlay,
highlightedDates: highlightedDates,
minDate: minDate,
maxDate: maxDate,
type: type,
hoveringDay: hoveringDay,
setHoveringDay: setHoveringDay,
disabledDates: disabledDates,
currentDateBackgroundColor: currentDateBackgroundColor
}));
};
Month.displayName = 'Month';
export default Month;
//# sourceMappingURL=Month.js.map