zent
Version:
一套前端设计语言和基于React的实现
64 lines (63 loc) • 4.33 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo } from 'react';
import cx from 'classnames';
import { parse, isSameDay } from 'date-fns';
import TimePicker from '../../TimePicker';
import Button from '../../../button';
import Pop from '../../../pop';
import PickerContext from '../../context/PickerContext';
import { formatDate } from '../../utils/index';
import useConfirmStatus from '../../hooks/useConfirmStatus';
import { DATE_FORMAT } from '../../constants';
var prefixCls = 'zent-datepicker-combined-panel-footer';
export var CombinedDateRangeFooter = function (_a) {
var _b, _c;
var selected = _a.selected, disabledStartTimes = _a.disabledStartTimes, disabledConfirm = _a.disabledConfirm, disabledEndTimes = _a.disabledEndTimes, onSelected = _a.onSelected, format = _a.format, _d = _a.hideConfirm, hideConfirm = _d === void 0 ? false : _d;
var _e = useContext(PickerContext), i18n = _e.i18n, autoComplete = _e.autoComplete;
var start = selected[0], end = selected[1];
var startTimeStatus = useConfirmStatus({
selected: formatDate(format, start),
disabledTimeOption: (start && (disabledStartTimes === null || disabledStartTimes === void 0 ? void 0 : disabledStartTimes(start))) || {},
format: format,
});
var endTimeStatus = useConfirmStatus({
selected: formatDate(format, end),
disabledTimeOption: (end && (disabledEndTimes === null || disabledEndTimes === void 0 ? void 0 : disabledEndTimes(end))) || {},
format: format,
});
var disabledStatus = useMemo(function () { return disabledConfirm || endTimeStatus || startTimeStatus; }, [disabledConfirm, endTimeStatus, startTimeStatus]);
var onStartTimeChange = useCallback(function (val) {
var timeVal = selected[0] && parse(val, format, selected[0]);
onSelected([timeVal, selected[1]]);
}, [selected, format, onSelected]);
var onEndTimeChange = useCallback(function (val) {
var timeVal = selected[1] && parse(val, format, selected[1]);
onSelected([selected[0], timeVal]);
}, [selected, format, onSelected]);
var confirmHandler = useCallback(function () {
onSelected(selected, true);
}, [selected, onSelected]);
var confirmBtn = useMemo(function () { return (_jsx(Button, __assign({ type: "primary", onClick: confirmHandler, disabled: disabledStatus, className: prefixCls + "-confirm" }, { children: i18n.confirm }), void 0)); }, [i18n, disabledStatus, confirmHandler]);
var confirmContent = useMemo(function () {
if (hideConfirm) {
return null;
}
if (disabledStatus) {
return (_jsx(Pop, __assign({ content: start && end && isSameDay(start, end)
? i18n.timeErrorPop
: i18n.dateErrorPop, trigger: "hover" }, { children: confirmBtn }), void 0));
}
return confirmBtn;
}, [
confirmBtn,
disabledStatus,
end,
hideConfirm,
i18n.dateErrorPop,
i18n.timeErrorPop,
start,
]);
return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: cx(prefixCls + "-item", (_b = {}, _b[prefixCls + "-null"] = !start, _b)), "data-zv": '10.0.17' }, { children: start ? formatDate(DATE_FORMAT, start) : i18n.start }), void 0), _jsx(TimePicker, { width: 94, className: prefixCls + "-item", disabled: !start, value: formatDate(format, start), hiddenIcon: true, format: format, onChange: onStartTimeChange, selectedDate: start, disabledTime: disabledStartTimes, autoComplete: autoComplete }, void 0), _jsx("div", __assign({ className: prefixCls + "-seperator", "data-zv": '10.0.17' }, { children: i18n.to }), void 0), _jsx("div", __assign({ className: cx(prefixCls + "-item", (_c = {}, _c[prefixCls + "-null"] = !end, _c)), "data-zv": '10.0.17' }, { children: end ? formatDate(DATE_FORMAT, end) : i18n.end }), void 0), _jsx(TimePicker, { width: 94, disabled: !end, className: prefixCls + "-item", value: formatDate(format, end), hiddenIcon: true, format: format, onChange: onEndTimeChange, selectedDate: end, disabledTime: disabledEndTimes, autoComplete: autoComplete }, void 0), confirmContent] }, void 0));
};
export default CombinedDateRangeFooter;