zent
Version:
一套前端设计语言和基于React的实现
24 lines (23 loc) • 1.86 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useState } from 'react';
import { addYears, setYear } from 'date-fns';
import PanelHeader, { Title } from '../../components/PanelHeader';
import MonthPanelBody from './MonthBody';
import YearPanel from '../year-panel';
import PickerContext from '../../context/PickerContext';
import usePanelDate from '../../hooks/usePanelDate';
var MonthPickerPanel = function (props) {
var defaultPanelDate = props.defaultPanelDate, selected = props.selected, onSelected = props.onSelected, disabledPanelDate = props.disabledPanelDate;
var i18n = useContext(PickerContext).i18n;
var _a = usePanelDate(defaultPanelDate), panelDate = _a.panelDate, setPanelDate = _a.setPanelDate;
var _b = useState(false), showYear = _b[0], setShowYear = _b[1];
var MonthPanelNode = (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { titleNode: _jsx(Title, { text: panelDate.getFullYear(), unit: i18n.panel.year, onClick: function () { return setShowYear(true); } }, void 0), onPrev: function () { return setPanelDate(addYears(panelDate, -1)); }, onNext: function () { return setPanelDate(addYears(panelDate, 1)); } }, void 0), _jsx(MonthPanelBody, { disabledPanelDate: disabledPanelDate, defaultPanelDate: panelDate, selected: selected, onSelected: onSelected }, void 0)] }, void 0));
var onClickYear = useCallback(function (val) {
setPanelDate(setYear(panelDate, val.getFullYear()));
setShowYear(false);
}, [panelDate, setPanelDate]);
var YearPanelNode = (_jsx(YearPanel, __assign({}, props, { onSelected: onClickYear, defaultPanelDate: panelDate }), void 0));
return _jsx(_Fragment, { children: !showYear ? MonthPanelNode : YearPanelNode }, void 0);
};
export default MonthPickerPanel;