@shinyongjun/react-datepicker/dist/cjs/components/DatePicker.js

DatePicker component in React App.

"use strict";
'use client';
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var core_1 = require("../constants/core");
var datetime_1 = require("../utils/datetime");
var page_1 = require("../utils/page");
var Layer_1 = __importDefault(require("./common/Layer"));
var Container_1 = __importDefault(require("./controller/Container"));
var Century_1 = __importDefault(require("./datePicker/Century"));
var Decade_1 = __importDefault(require("./datePicker/Decade"));
var Month_1 = __importDefault(require("./datePicker/Month"));
var Year_1 = __importDefault(require("./datePicker/Year"));
var DatePickerInput_1 = __importDefault(require("./input/DatePickerInput"));
var Header_1 = __importDefault(require("./timePicker/Header"));
var Selector_1 = __importDefault(require("./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 = (0, react_1.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 = (0, react_1.useState)((0, datetime_1.formatDate)(value || NEW_DATE, 'YYYY-MM-DD')), viewDate = _r[0], setViewDate = _r[1];
    var _s = (0, react_1.useState)('month'), viewType = _s[0], setViewType = _s[1];
    var _t = (0, react_1.useState)(false), isVisible = _t[0], setIsVisible = _t[1];
    var monthPage = (0, react_1.useMemo)(function () { return (0, page_1.setMonthPage)(viewDate); }, [viewDate]);
    var inputRef = (0, react_1.useRef)(null);
    var containerRef = (0, react_1.useRef)(null);
    var _u = (0, react_1.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); // ✅ 날짜 선택일 때만 닫기
        }
    };
    (0, react_1.useEffect)(function () {
        var _a;
        setContainerHeight(((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0);
    }, [isVisible, viewDate]);
    (0, react_1.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((0, datetime_1.formatDate)(value || NEW_DATE, 'YYYY-MM-DD'));
    }, [value]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: "".concat(core_1.NAME_SPACE, "__wrapper ").concat(className), children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.default, { value: value, onChange: function (d) { return handleChange(d, 'input'); }, valueFormat: comValueFormat, useClearButton: useClearButton, disabled: disabled, inputRef: inputRef, isVisible: isVisible, setIsVisible: setIsVisible }), (0, jsx_runtime_1.jsxs)(Layer_1.default, { inputRef: inputRef, isVisible: isVisible, setIsVisible: setIsVisible, withPortal: withPortal, children: [(0, jsx_runtime_1.jsxs)("div", { className: "".concat(core_1.NAME_SPACE, "__datepicker-container"), ref: containerRef, children: [(0, jsx_runtime_1.jsx)(Container_1.default, { viewDate: viewDate, viewType: viewType, labelFormat: labelFormat, showsMultipleCalendar: showsMultipleCalendar, setViewType: setViewType, setViewDate: setViewDate }), (0, jsx_runtime_1.jsxs)("div", { className: "".concat(core_1.NAME_SPACE, "__datepicker"), children: [viewType === 'month' &&
                                        [true, showsMultipleCalendar].map(function (isShow, index) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isShow && ((0, jsx_runtime_1.jsx)(Month_1.default, { 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' && ((0, jsx_runtime_1.jsx)(Year_1.default, { value: value, viewDate: viewDate, setViewDate: setViewDate, setViewType: setViewType })), viewType === 'decade' && ((0, jsx_runtime_1.jsx)(Decade_1.default, { value: value, viewDate: viewDate, setViewDate: setViewDate, setViewType: setViewType })), viewType === 'century' && ((0, jsx_runtime_1.jsx)(Century_1.default, { value: value, viewDate: viewDate, setViewDate: setViewDate, setViewType: setViewType }))] })] }), timePicker && ((0, jsx_runtime_1.jsxs)("div", { className: "".concat(core_1.NAME_SPACE, "__timepicker-container"), style: {
                            height: containerHeight,
                        }, children: [(0, jsx_runtime_1.jsx)(Header_1.default, { timeValue: timeValue, timePicker: timePicker }), (0, jsx_runtime_1.jsx)(Selector_1.default, { value: value, timeValue: timeValue, timePicker: timePicker, timeStep: timeStep, onChange: function (d) { return handleChange(d, 'time'); } })] }))] })] }));
}
exports.default = DatePicker;
//# sourceMappingURL=DatePicker.js.map