@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
104 lines • 9.06 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import { NAME_SPACE } from '../constants/core';
import { formatDate } from '../utils/datetime';
import { setMonthPage } from '../utils/page';
import Layer from './common/Layer';
import ControllerContainer from './controller/Container';
import DatePickerCentury from './datePicker/Century';
import DatePickerDecade from './datePicker/Decade';
import DatePickerYear from './datePicker/Year';
import RangePickerInput from './input/RangePickerInput';
import RangePickerMonth from './rangePicker/Month';
import TimePickerHeader from './timePicker/Header';
import TimePickerSelector from './timePicker/Selector';
var NEW_DATE = new Date();
export default function RangePicker(_a) {
var _b = _a.startValue, startValue = _b === void 0 ? null : _b, _c = _a.endValue, endValue = _c === void 0 ? null : _c, _d = _a.useClearButton, useClearButton = _d === void 0 ? false : _d, _e = _a.showsMultipleCalendar, showsMultipleCalendar = _e === void 0 ? false : _e, _f = _a.valueFormat, valueFormat = _f === void 0 ? '' : _f, _g = _a.labelFormat, labelFormat = _g === void 0 ? 'YYYY / MM' : _g, _h = _a.weekdayLabels, weekdayLabels = _h === void 0 ? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] : _h, _j = _a.withPortal, withPortal = _j === void 0 ? false : _j, _k = _a.className, className = _k === void 0 ? '' : _k, _l = _a.disabled, disabled = _l === void 0 ? false : _l, _m = _a.timePicker, timePicker = _m === void 0 ? false : _m, _o = _a.timeStep, timeStep = _o === void 0 ? { hour: 1, minute: 1, second: 1 } : _o, _p = _a.holidays, holidays = _p === void 0 ? [] : _p, onChangeStart = _a.onChangeStart, onChangeEnd = _a.onChangeEnd;
var initialValueFormat = timePicker ? 'YYYY-MM-DD hh:mm:ss' : 'YYYY-MM-DD';
var comValueFormat = valueFormat ? valueFormat : initialValueFormat;
var prevStartValue = useRef(startValue);
var prevEndValue = useRef(endValue);
var _q = useState({
hour: startValue ? startValue === null || startValue === void 0 ? void 0 : startValue.getHours() : 0,
minute: startValue ? startValue === null || startValue === void 0 ? void 0 : startValue.getMinutes() : 0,
second: startValue ? startValue === null || startValue === void 0 ? void 0 : startValue.getSeconds() : 0,
}), timeStartValue = _q[0], setTimeStartValue = _q[1];
var _r = useState({
hour: endValue ? endValue === null || endValue === void 0 ? void 0 : endValue.getHours() : 0,
minute: endValue ? endValue === null || endValue === void 0 ? void 0 : endValue.getMinutes() : 0,
second: endValue ? endValue === null || endValue === void 0 ? void 0 : endValue.getSeconds() : 0,
}), timeEndValue = _r[0], setTimeEndValue = _r[1];
var _s = useState(formatDate(startValue || NEW_DATE, 'YYYY-MM-DD')), viewStartDate = _s[0], setViewStartDate = _s[1];
var _t = useState(formatDate(endValue || NEW_DATE, 'YYYY-MM-DD')), viewEndDate = _t[0], setViewEndDate = _t[1];
var _u = useState('month'), viewType = _u[0], setViewType = _u[1];
var _v = useState(false), isVisible = _v[0], setIsVisible = _v[1];
var startMonthPage = useMemo(function () { return setMonthPage(viewStartDate); }, [viewStartDate]);
var endMonthPage = useMemo(function () { return setMonthPage(viewEndDate); }, [viewEndDate]);
var inputRef = useRef(null);
var containerRef = useRef(null);
var _w = useState(0), containerHeight = _w[0], setContainerHeight = _w[1];
// const changeTimeout = useRef<NodeJS.Timeout>();
useEffect(function () {
var _a;
setContainerHeight(((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0);
}, [isVisible, viewStartDate, viewEndDate]);
// Value가 외부에서 변경됨을 감지
useEffect(function () {
setTimeStartValue({
hour: startValue ? startValue === null || startValue === void 0 ? void 0 : startValue.getHours() : 0,
minute: startValue ? startValue === null || startValue === void 0 ? void 0 : startValue.getMinutes() : 0,
second: startValue ? startValue === null || startValue === void 0 ? void 0 : startValue.getSeconds() : 0,
});
setTimeEndValue({
hour: endValue ? endValue === null || endValue === void 0 ? void 0 : endValue.getHours() : 0,
minute: endValue ? endValue === null || endValue === void 0 ? void 0 : endValue.getMinutes() : 0,
second: endValue ? endValue === null || endValue === void 0 ? void 0 : endValue.getSeconds() : 0,
});
setViewStartDate(formatDate(startValue || endValue || NEW_DATE, 'YYYY-MM-DD'));
setViewEndDate(formatDate(endValue || startValue || NEW_DATE, 'YYYY-MM-DD'));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startValue, endValue]);
// start, end value변화를 감지
useEffect(function () {
// start만 있을 때
if (startValue && endValue === null) {
if (onChangeEnd) {
onChangeEnd(startValue);
}
}
// end만 있을 때
if (endValue && startValue === null) {
if (onChangeStart) {
onChangeStart(endValue);
}
}
// start, end 값이 둘 다 있을 때
if (startValue && endValue) {
// start가 end 보다 클 때
if (startValue > endValue) {
if (prevStartValue.current !== startValue) {
if (onChangeEnd) {
onChangeEnd(startValue);
}
}
else {
if (onChangeStart) {
onChangeStart(endValue);
}
}
}
}
prevStartValue.current = startValue;
prevEndValue.current = endValue;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startValue, endValue]);
return (_jsxs("div", { className: "".concat(NAME_SPACE, "__wrapper ").concat(className), children: [_jsx(RangePickerInput, { startValue: startValue, endValue: endValue, onChangeStart: onChangeStart, onChangeEnd: onChangeEnd, valueFormat: comValueFormat, useClearButton: useClearButton, disabled: disabled, inputRef: inputRef, isVisible: isVisible, setIsVisible: setIsVisible }), _jsxs(Layer, { inputRef: inputRef, isVisible: isVisible, setIsVisible: setIsVisible, withPortal: withPortal, children: [_jsxs("div", { className: "".concat(NAME_SPACE, "__datepicker-container"), ref: containerRef, children: [_jsx(ControllerContainer, { viewType: viewType, labelFormat: labelFormat, showsMultipleCalendar: showsMultipleCalendar, setViewType: setViewType, viewDate: isVisible === 'start' ? viewStartDate : viewEndDate, setViewDate: isVisible === 'start' ? setViewStartDate : setViewEndDate }), _jsxs("div", { className: "".concat(NAME_SPACE, "__datepicker"), children: [viewType === 'month' &&
[true, showsMultipleCalendar].map(function (isShow, index) { return (_jsx(Fragment, { children: isShow && (_jsx(RangePickerMonth, { type: isVisible, value: isVisible === 'start' ? startValue : endValue, pairValue: isVisible === 'end' ? startValue : endValue, onChange: isVisible === 'start' ? onChangeStart : onChangeEnd, monthPage: (isVisible === 'start'
? startMonthPage
: endMonthPage) + index, timeValue: isVisible === 'start' ? timeStartValue : timeEndValue, weekdayLabels: weekdayLabels, holidays: holidays })) }, index)); }), viewType === 'year' && (_jsx(DatePickerYear, { value: startValue, setViewType: setViewType, viewDate: isVisible === 'start' ? viewStartDate : viewEndDate, setViewDate: isVisible === 'start' ? setViewStartDate : setViewEndDate })), viewType === 'decade' && (_jsx(DatePickerDecade, { value: startValue, setViewType: setViewType, viewDate: isVisible === 'start' ? viewStartDate : viewEndDate, setViewDate: isVisible === 'start' ? setViewStartDate : setViewEndDate })), viewType === 'century' && (_jsx(DatePickerCentury, { value: startValue, setViewType: setViewType, viewDate: isVisible === 'start' ? viewStartDate : viewEndDate, setViewDate: isVisible === 'start' ? setViewStartDate : setViewEndDate }))] })] }), timePicker && (_jsxs("div", { className: "".concat(NAME_SPACE, "__timepicker-container"), style: {
height: containerHeight,
}, children: [_jsx(TimePickerHeader, { timeValue: isVisible === 'start' ? timeStartValue : timeEndValue, timePicker: timePicker }), _jsx(TimePickerSelector, { value: isVisible === 'start' ? startValue : endValue, timeValue: isVisible === 'start' ? timeStartValue : timeEndValue, onChange: isVisible === 'start' ? onChangeStart : onChangeEnd, timePicker: timePicker, timeStep: timeStep })] }))] })] }));
}
//# sourceMappingURL=RangePicker.js.map