@shinyongjun/react-datepicker
Version:
DatePicker component in React App.
58 lines • 6.01 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 DatePickerMonth from './datePicker/Month';
import DatePickerYear from './datePicker/Year';
import DatePickerInput from './input/DatePickerInput';
import TimePickerHeader from './timePicker/Header';
import TimePickerSelector from './timePicker/Selector';
var NEW_DATE = new Date();
function DatePicker(_a) {
var _b = _a.value, value = _b === void 0 ? null : _b, _c = _a.useClearButton, useClearButton = _c === void 0 ? false : _c, _d = _a.showsMultipleCalendar, showsMultipleCalendar = _d === void 0 ? false : _d, _e = _a.valueFormat, valueFormat = _e === void 0 ? '' : _e, _f = _a.labelFormat, labelFormat = _f === void 0 ? 'YYYY / MM' : _f, _g = _a.weekdayLabels, weekdayLabels = _g === void 0 ? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] : _g, _h = _a.withPortal, withPortal = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, _l = _a.timePicker, timePicker = _l === void 0 ? false : _l, _m = _a.timeStep, timeStep = _m === void 0 ? { hour: 1, minute: 1, second: 1 } : _m, _o = _a.holidays, holidays = _o === void 0 ? [] : _o, minDate = _a.minDate, maxDate = _a.maxDate, onChange = _a.onChange, _p = _a.closeOnDateSelect, closeOnDateSelect = _p === void 0 ? false : _p;
var initialValueFormat = timePicker ? 'YYYY-MM-DD hh:mm:ss' : 'YYYY-MM-DD';
var comValueFormat = valueFormat ? valueFormat : initialValueFormat;
var _q = useState({
hour: value !== null ? value === null || value === void 0 ? void 0 : value.getHours() : 0,
minute: value !== null ? value === null || value === void 0 ? void 0 : value.getMinutes() : 0,
second: value !== null ? value === null || value === void 0 ? void 0 : value.getSeconds() : 0,
}), timeValue = _q[0], setTimeValue = _q[1];
var _r = useState(formatDate(value || NEW_DATE, 'YYYY-MM-DD')), viewDate = _r[0], setViewDate = _r[1];
var _s = useState('month'), viewType = _s[0], setViewType = _s[1];
var _t = useState(false), isVisible = _t[0], setIsVisible = _t[1];
var monthPage = useMemo(function () { return setMonthPage(viewDate); }, [viewDate]);
var inputRef = useRef(null);
var containerRef = useRef(null);
var _u = useState(0), containerHeight = _u[0], setContainerHeight = _u[1];
var handleChange = function (date, source) {
if (source === void 0) { source = 'date'; }
onChange === null || onChange === void 0 ? void 0 : onChange(date);
if (source === 'date' && closeOnDateSelect) {
setIsVisible(false); // ✅ 날짜 선택일 때만 닫기
}
};
useEffect(function () {
var _a;
setContainerHeight(((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0);
}, [isVisible, viewDate]);
useEffect(function () {
setTimeValue({
hour: value !== null ? value === null || value === void 0 ? void 0 : value.getHours() : 0,
minute: value !== null ? value === null || value === void 0 ? void 0 : value.getMinutes() : 0,
second: value !== null ? value === null || value === void 0 ? void 0 : value.getSeconds() : 0,
});
setViewDate(formatDate(value || NEW_DATE, 'YYYY-MM-DD'));
}, [value]);
return (_jsxs("div", { className: "".concat(NAME_SPACE, "__wrapper ").concat(className), children: [_jsx(DatePickerInput, { value: value, onChange: function (d) { return handleChange(d, 'input'); }, 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, { viewDate: viewDate, viewType: viewType, labelFormat: labelFormat, showsMultipleCalendar: showsMultipleCalendar, setViewType: setViewType, setViewDate: setViewDate }), _jsxs("div", { className: "".concat(NAME_SPACE, "__datepicker"), children: [viewType === 'month' &&
[true, showsMultipleCalendar].map(function (isShow, index) { return (_jsx(Fragment, { children: isShow && (_jsx(DatePickerMonth, { value: value, onChange: function (d) { return handleChange(d, 'date'); }, valueFormat: comValueFormat, monthPage: monthPage + index, weekdayLabels: weekdayLabels, timeValue: timeValue, holidays: holidays, minDate: minDate, maxDate: maxDate })) }, index)); }), viewType === 'year' && (_jsx(DatePickerYear, { value: value, viewDate: viewDate, setViewDate: setViewDate, setViewType: setViewType })), viewType === 'decade' && (_jsx(DatePickerDecade, { value: value, viewDate: viewDate, setViewDate: setViewDate, setViewType: setViewType })), viewType === 'century' && (_jsx(DatePickerCentury, { value: value, viewDate: viewDate, setViewDate: setViewDate, setViewType: setViewType }))] })] }), timePicker && (_jsxs("div", { className: "".concat(NAME_SPACE, "__timepicker-container"), style: {
height: containerHeight,
}, children: [_jsx(TimePickerHeader, { timeValue: timeValue, timePicker: timePicker }), _jsx(TimePickerSelector, { value: value, timeValue: timeValue, timePicker: timePicker, timeStep: timeStep, onChange: function (d) { return handleChange(d, 'time'); } })] }))] })] }));
}
export default DatePicker;
//# sourceMappingURL=DatePicker.js.map