zent
Version:
一套前端设计语言和基于React的实现
91 lines (90 loc) • 4.69 kB
JavaScript
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;