UNPKG

zent

Version:

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

91 lines (90 loc) 4.69 kB
import { __assign, __rest } from "tslib"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { useCallback, useContext, useMemo, useState } from 'react'; import { parse } from 'date-fns'; import Pop from '../../../pop'; import Button from '../../../button'; import TimePicker from '../../TimePicker'; import PanelFooter from '../../components/PanelFooter'; import PickerContext from '../../context/PickerContext'; import { formatDate } from '../../utils/index'; import useConfirmStatus from '../../hooks/useConfirmStatus'; var footerPrefixCls = 'zent-datepicker-panel-footer'; var today = new Date(); var DatePickerFooter = function (_a) { var footerText = _a.footerText, showTime = _a.showTime, disabledTime = _a.disabledTime, showTimeOption = _a.showTimeOption, selected = _a.selected, onSelected = _a.onSelected, disabledPanelDate = _a.disabledPanelDate; var _b = useState(false), timePickerIsOpen = _b[0], setTimePickerIsOpen = _b[1]; var _c = useContext(PickerContext), i18n = _c.i18n, autoComplete = _c.autoComplete; var _d = (showTimeOption || {}).format, format = _d === void 0 ? '' : _d; var confirmStatus = useConfirmStatus({ selected: formatDate(format, selected), disabledTimeOption: (selected && (disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(selected))) || {}, format: format, }); var isDisabledCurrent = useConfirmStatus({ selected: formatDate(format, today), disabledTimeOption: (disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(today)) || {}, format: format, }); var isDisableConfirm = useMemo(function () { return selected && disabledPanelDate(selected); }, [selected, disabledPanelDate]); var isDisabledToday = useMemo(function () { return disabledPanelDate(today); }, [disabledPanelDate]); var onClickCurrent = useCallback(function () { if (isDisabledCurrent || isDisabledToday) return; onSelected(new Date()); }, [isDisabledToday, isDisabledCurrent, onSelected]); var confirmHandler = useCallback(function () { selected && onSelected(selected); }, [selected, onSelected]); var confirmBtn = useMemo(function () { return (_jsx(Button, __assign({ type: "primary", disabled: confirmStatus || isDisableConfirm || !selected || timePickerIsOpen, onClick: confirmHandler, className: footerPrefixCls + "-btn" }, { children: i18n.confirm }), void 0)); }, [ i18n, confirmStatus, selected, isDisableConfirm, confirmHandler, timePickerIsOpen, ]); var renderToday = useMemo(function () { return (_jsxs("div", __assign({ "data-zv": '10.0.17' }, { children: [_jsx(Button, __assign({ disabled: isDisabledCurrent || isDisabledToday, onClick: onClickCurrent, type: "text" }, { children: footerText }), void 0), !!showTime && (confirmStatus || isDisableConfirm ? (_jsx(Pop, __assign({ content: confirmStatus ? i18n.timeErrorPop : i18n.dateErrorPop, trigger: "hover" }, { children: confirmBtn }), void 0)) : (confirmBtn))] }), void 0)); }, [ i18n, showTime, footerText, confirmStatus, isDisableConfirm, isDisabledToday, isDisabledCurrent, confirmBtn, onClickCurrent, ]); var onTimeChange = useCallback(function (val) { if (!val) return; var timeVal = parse(val, format, selected || new Date()); onSelected(timeVal, false); }, [selected, format, onSelected]); var onTimeOpen = useCallback(function () { setTimePickerIsOpen(true); }, []); var onTimeClose = useCallback(function () { setTimePickerIsOpen(false); }, []); var timeInput = useMemo(function () { var _a = showTimeOption || {}, defaultTime = _a.defaultTime, restOption = __rest(_a, ["defaultTime"]); var defaultTimeString = typeof defaultTime === 'function' ? defaultTime(selected) : defaultTime; return showTime ? (_jsx(TimePicker, __assign({}, restOption, { defaultTime: defaultTimeString, width: 94, selectedDate: selected, value: formatDate(format, selected), hiddenIcon: true, onChange: onTimeChange, onOpen: onTimeOpen, onClose: onTimeClose, disabledTime: disabledTime, autoComplete: autoComplete }), void 0)) : null; }, [ autoComplete, selected, showTime, showTimeOption, format, disabledTime, onTimeChange, onTimeOpen, onTimeClose, ]); return _jsx(PanelFooter, { leftNode: timeInput, rightNode: renderToday }, void 0); }; export default DatePickerFooter;