zent
Version:
一套前端设计语言和基于React的实现
82 lines (81 loc) • 5.51 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from 'react';
import cx from 'classnames';
import { parse, addMonths, endOfDay, startOfDay } from 'date-fns';
import DatePanel from '../date-panel/index';
import RangePickerFooter from './RangeFooter';
import { useShowTimeRangeOption } from '../../hooks/useShowTimeOption';
import useRangeDisabledTime from '../../hooks/useRangeDisabledTime';
var prefixCls = 'zent-datepicker-combined-panel';
var CombinedDateRangePanel = function (_a) {
var onSelected = _a.onSelected, selected = _a.selected, disabledStartDate = _a.disabledStartDate, disabledEndDate = _a.disabledEndDate, defaultPanelDate = _a.defaultPanelDate, showTime = _a.showTime, disabledTime = _a.disabledTime, rightClassName = _a.rightClassName, leftClassName = _a.leftClassName, footerClassName = _a.footerClassName, _b = _a.hideConfirm, hideConfirm = _b === void 0 ? false : _b, restProps = __rest(_a, ["onSelected", "selected", "disabledStartDate", "disabledEndDate", "defaultPanelDate", "showTime", "disabledTime", "rightClassName", "leftClassName", "footerClassName", "hideConfirm"]);
var start = selected[0], end = selected[1];
var _c = useShowTimeRangeOption(showTime), startShowTime = _c[0], endShowTime = _c[1];
var _d = useState(defaultPanelDate[0]), startPanelDate = _d[0], setStartPanelDate = _d[1];
useEffect(function () { return setStartPanelDate(defaultPanelDate[0]); }, []);
var _e = useRangeDisabledTime({
selected: selected,
disabledTime: disabledTime,
}), disabledStartTimes = _e.disabledStartTimes, disabledConfirm = _e.disabledConfirm, disabledEndTimes = _e.disabledEndTimes;
var onChangeStartOrEnd = useCallback(function (val) {
var _a = startShowTime || {}, defaultTimeStart = _a.defaultTime, formatStart = _a.format;
var _b = endShowTime || {}, defaultTimeEnd = _b.defaultTime, formatEnd = _b.format;
var selectedTemp;
var defaultStartTime = function (date) {
return typeof defaultTimeStart === 'function'
? defaultTimeStart(date)
: defaultTimeStart;
};
var defaultEndTime = function (date) {
return typeof defaultTimeEnd === 'function'
? defaultTimeEnd(date)
: defaultTimeEnd;
};
if (start && !end) {
selectedTemp = [
startShowTime ? start : startOfDay(start),
endShowTime
? parse(defaultEndTime(val), formatEnd, val)
: endOfDay(val),
];
onSelected(selectedTemp, !showTime);
}
else {
selectedTemp = [
startShowTime
? parse(defaultStartTime(val), formatStart, val)
: startOfDay(val),
null,
];
onSelected(selectedTemp);
}
}, [start, end, showTime, startShowTime, endShowTime, onSelected]);
var disabledFooterStartTimes = useCallback(disabledStartTimes, [
disabledStartTimes,
]);
var disabledFooterEndTimes = useCallback(disabledEndTimes, [
disabledEndTimes,
]);
var onStartPanelDateChange = useCallback(function (val) {
setStartPanelDate(val);
}, []);
var onEndPanelDateChange = useCallback(function (val) {
var start = addMonths(val, -1);
setStartPanelDate(start);
}, []);
var FooterNode = useMemo(function () {
return startShowTime ? (_jsx("div", __assign({ className: cx(prefixCls + "-footer", footerClassName), "data-zv": '10.0.17' }, { children: _jsx(RangePickerFooter, { format: startShowTime === null || startShowTime === void 0 ? void 0 : startShowTime.format, selected: selected, onSelected: onSelected, disabledStartTimes: disabledFooterStartTimes, disabledConfirm: disabledConfirm, disabledEndTimes: disabledFooterEndTimes, hideConfirm: hideConfirm }, void 0) }), void 0)) : null;
}, [
startShowTime,
footerClassName,
selected,
onSelected,
disabledFooterStartTimes,
disabledConfirm,
disabledFooterEndTimes,
hideConfirm,
]);
return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: prefixCls + "-body", "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ className: cx(prefixCls + "-body-item", leftClassName), "data-zv": '10.0.17' }, { children: _jsx(DatePanel, __assign({}, restProps, { combinedLeft: true, hideFooter: true, disableRangeOverView: true, selected: start, disabledTime: disabledStartTimes, popText: start && !end ? '请选择结束日期' : '', defaultPanelDate: startPanelDate, onSelected: onChangeStartOrEnd, disabledPanelDate: disabledStartDate, onPanelDateChange: onStartPanelDateChange }), void 0) }), void 0), _jsx("div", __assign({ className: cx(prefixCls + "-body-item", prefixCls + "-body-item_left12", rightClassName), "data-zv": '10.0.17' }, { children: _jsx(DatePanel, __assign({}, restProps, { combinedRight: true, hideFooter: true, disableRangeOverView: true, selected: end || start, disabledTime: disabledEndTimes, defaultPanelDate: addMonths(startPanelDate, 1), onSelected: onChangeStartOrEnd, disabledPanelDate: disabledEndDate, onPanelDateChange: onEndPanelDateChange }), void 0) }), void 0)] }), void 0), FooterNode] }, void 0));
};
export default CombinedDateRangePanel;