UNPKG

zent

Version:

一套前端设计语言和基于React的实现

71 lines (70 loc) 5.19 kB
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;