zent
Version:
一套前端设计语言和基于React的实现
71 lines (70 loc) • 5.19 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo, useState } from 'react';
import { setYear, setMonth, addMonths, addYears } from 'date-fns';
import PanelHeader, { Title } from '../../components/PanelHeader';
import PanelSubHeader from './PanelSubHeader';
import DatePickerBody from './DateBody';
import DatePickerFooter from './DateFooter';
import MonthPanel from '../month-panel';
import YearPanel from '../year-panel';
import PickerContext from '../../context/PickerContext';
import { useShowTimeOption } from '../../hooks/useShowTimeOption';
import usePanelDate from '../../hooks/usePanelDate';
import { useEventCallbackRef } from '../../../utils/hooks/useEventCallbackRef';
import { Lunar } from 'pure-lunar-typescript';
var DatePickerPanel = function (props) {
var defaultPanelDate = props.defaultPanelDate, _a = props.hideFooter, hideFooter = _a === void 0 ? false : _a, onSelected = props.onSelected, showTime = props.showTime, _b = props.footerText, footerText = _b === void 0 ? '' : _b, combinedLeft = props.combinedLeft, combinedRight = props.combinedRight, onPanelDateChange = props.onPanelDateChange, resetBodyProps = __rest(props, ["defaultPanelDate", "hideFooter", "onSelected", "showTime", "footerText", "combinedLeft", "combinedRight", "onPanelDateChange"]);
var i18n = useContext(PickerContext).i18n;
var _c = useState(false), showYear = _c[0], setShowYear = _c[1];
var _d = useState(false), showMonth = _d[0], setShowMonth = _d[1];
var _e = usePanelDate(defaultPanelDate), panelDate = _e.panelDate, setPanelDate = _e.setPanelDate;
var showTimeOption = useShowTimeOption(showTime);
var onPanelDateChangeRef = useEventCallbackRef(onPanelDateChange);
var showLunarDate = resetBodyProps.showLunarDate;
var monthLabel = useMemo(function () {
var solarMonth = panelDate.getMonth();
var solarMonthLabel = i18n.panel.monthNames[solarMonth];
if (!showLunarDate) {
return solarMonthLabel;
}
var d = Lunar.fromDate(new Date(panelDate.getFullYear(), solarMonth));
var lunar = d.getMonthInChinese();
return solarMonthLabel + "\uFF08" + lunar + "\u6708\uFF09";
}, [showLunarDate, i18n.panel.monthNames, panelDate]);
var titleNode = useMemo(function () { return (_jsxs(_Fragment, { children: [_jsx(Title, { text: panelDate.getFullYear(), unit: i18n.panel.year, onClick: function () { return setShowYear(true); } }, void 0), _jsx(Title, { text: monthLabel, onClick: function () { return setShowMonth(true); } }, void 0)] }, void 0)); }, [panelDate, i18n.panel.year, monthLabel]);
var modifyPanelDate = useCallback(function (currentDate) {
var _a;
setPanelDate(currentDate);
(_a = onPanelDateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPanelDateChangeRef, currentDate);
}, [setPanelDate, onPanelDateChangeRef]);
var onPrev = useCallback(function () {
modifyPanelDate(addMonths(panelDate, -1));
}, [panelDate, modifyPanelDate]);
var onNext = useCallback(function () {
modifyPanelDate(addMonths(panelDate, 1));
}, [panelDate, modifyPanelDate]);
var onSuperPrev = useCallback(function () {
modifyPanelDate(addYears(panelDate, -1));
}, [panelDate, modifyPanelDate]);
var onSuperNext = useCallback(function () {
modifyPanelDate(addYears(panelDate, 1));
}, [panelDate, modifyPanelDate]);
var DatePanel = (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { showSuper: true, titleNode: titleNode, combinedLeft: combinedLeft, combinedRight: combinedRight, onPrev: onPrev, onNext: onNext, onSuperPrev: onSuperPrev, onSuperNext: onSuperNext }, void 0), _jsx(PanelSubHeader, { names: i18n.panel.dayNames }, void 0), _jsx(DatePickerBody, __assign({}, resetBodyProps, { showTime: showTime, showTimeOption: showTimeOption, onSelected: function (val) {
onSelected(val, !showTime);
}, defaultPanelDate: panelDate }), void 0)] }, void 0));
var onClickYear = useCallback(function (val) {
modifyPanelDate(setYear(panelDate, val.getFullYear()));
setShowYear(false);
}, [panelDate, modifyPanelDate]);
var YearPanelNode = (_jsx(YearPanel, __assign({}, props, { onSelected: onClickYear, defaultPanelDate: panelDate }), void 0));
var onClickMonth = useCallback(function (val) {
var month = val.getMonth();
var year = val.getFullYear();
modifyPanelDate(setYear(setMonth(panelDate, month), year));
setShowMonth(false);
}, [panelDate, modifyPanelDate]);
var MonthPanelNode = (_jsx(MonthPanel, __assign({}, props, { defaultPanelDate: panelDate, onSelected: onClickMonth }), void 0));
return (_jsxs(_Fragment, { children: [!showYear && !showMonth && DatePanel, showYear && YearPanelNode, showMonth && MonthPanelNode, !hideFooter && (_jsx(DatePickerFooter, __assign({}, props, { showTimeOption: showTimeOption, footerText: footerText || (showTime ? i18n.current.time : i18n.current.date) }), void 0))] }, void 0));
};
export default DatePickerPanel;