@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
157 lines (156 loc) • 5.27 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _calendar = require("../../../utils/calendar");
var _Month = _interopRequireDefault(require("./month/Month"));
var _MonthWrapper = require("./MonthWrapper.styles");
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 MonthWrapper = ({
locale,
currentDate,
highlightedDates,
selectedDate,
onSelect,
categories,
direction,
onAnimationFinished,
shouldRenderTwo,
width,
customThumbColors,
isDisabled,
minDate,
maxDate,
shouldShowHighlightsInMonthOverlay,
type,
disabledDates,
setCurrentDate,
showMonthYearPickers
}) => {
const [content, setContent] = (0, _react.useState)();
const [hoveringDay, setHoveringDay] = (0, _react.useState)(null);
const monthHeight = (0, _react.useMemo)(() => width / (shouldRenderTwo ? 2 : 1), [width, shouldRenderTwo]);
(0, _react.useEffect)(() => {
setContent(() => {
// Initial render of months
const items = [];
for (let i = -1; i < 3; i++) {
const date = (0, _calendar.getNewDate)(i, currentDate);
const {
month,
year
} = (0, _calendar.getMonthAndYear)(date);
items.push(/*#__PURE__*/_react.default.createElement(_Month.default, {
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]);
(0, _react.useEffect)(() => {
// Doesn't update props until animation is completed
if (direction) return;
setContent(prevState => (prevState ?? []).map((element, index) => {
const date = (0, _calendar.getNewDate)(index - 1, currentDate);
const {
month,
year
} = (0, _calendar.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 = (0, _react.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.default.createElement(_MonthWrapper.StyledMonthWrapper, {
$height: monthHeight,
$width: width
}, /*#__PURE__*/_react.default.createElement(_MonthWrapper.StyledMotionWrapper, {
animate: animate,
$isDisabled: isDisabled,
transition: {
type: 'tween',
duration: !direction ? 0 : 0.2
},
onAnimationComplete: onAnimationFinished
}, content));
};
MonthWrapper.displayName = 'MonthWrapper';
var _default = exports.default = MonthWrapper;
//# sourceMappingURL=MonthWrapper.js.map