zent
Version:
一套前端设计语言和基于React的实现
38 lines (37 loc) • 4.2 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useRef } from 'react';
import cx from 'classnames';
import { startOfToday } from 'date-fns';
import PanelContext from '../context/PanelContext';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import useRangeDisabledTime from '../hooks/useRangeDisabledTime';
import useTimeValue, { parseSelectedToRangeDate } from '../hooks/useTimeValue';
import { RangeTypeMap, } from '../types';
import { emptyTimeRange } from '../constants';
var START = RangeTypeMap.START, END = RangeTypeMap.END;
var PanelContextProvider = PanelContext.Provider;
var TimeRangePickerBase = function (_a) {
var value = _a.value, onChange = _a.onChange, disabledTime = _a.disabledTime, onClose = _a.onClose, onOpen = _a.onOpen, defaultTime = _a.defaultTime, placeholder = _a.placeholder, PickerComponent = _a.PickerComponent, className = _a.className, seperator = _a.seperator, name = _a.name, restProps = __rest(_a, ["value", "onChange", "disabledTime", "onClose", "onOpen", "defaultTime", "placeholder", "PickerComponent", "className", "seperator", "name"]);
var restPropsRef = useRef(restProps);
restPropsRef.current = restProps;
var format = restPropsRef.current.format;
var onChangeRef = useEventCallbackRef(onChange);
var _b = useTimeValue(emptyTimeRange, value), selected = _b.selected, setSelected = _b.setSelected;
var start = selected[0], end = selected[1];
var onChangeStartOrEnd = useCallback(function (type) { return function (val) {
var _a;
var times = type === START ? [val, end] : [start, val];
setSelected(times);
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, times);
}; }, [start, end, onChangeRef, setSelected]);
var selectedDates = parseSelectedToRangeDate(selected, format, new Date());
var _c = useRangeDisabledTime({
selected: selectedDates,
disabledTime: disabledTime,
}), disabledStartTimes = _c.disabledStartTimes, disabledConfirm = _c.disabledConfirm, disabledEndTimes = _c.disabledEndTimes;
var disabledStart = useCallback(function () { var _a; return disabledStartTimes === null || disabledStartTimes === void 0 ? void 0 : disabledStartTimes((_a = selectedDates[0]) !== null && _a !== void 0 ? _a : startOfToday()); }, [disabledStartTimes, selectedDates]);
var disabledEnd = useCallback(function () { var _a; return disabledEndTimes === null || disabledEndTimes === void 0 ? void 0 : disabledEndTimes((_a = selectedDates[1]) !== null && _a !== void 0 ? _a : startOfToday()); }, [disabledEndTimes, selectedDates]);
return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: cx('zent-datepicker', className), "data-zv": '10.0.18' }, { children: _jsxs(PanelContextProvider, __assign({ value: { confirmStatus: disabledConfirm } }, { children: [_jsx(PickerComponent, __assign({}, restPropsRef.current, { value: start, onChange: onChangeStartOrEnd(START), defaultTime: defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime[0], disabledTime: disabledStart, onOpen: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(START); }, onClose: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(START); }, name: name === null || name === void 0 ? void 0 : name[0], placeholder: placeholder[0] }), void 0), _jsx("span", __assign({ className: "zent-datepicker-seperator", "data-zv": '10.0.18' }, { children: seperator }), void 0), _jsx(PickerComponent, __assign({}, restPropsRef.current, { value: end, onChange: onChangeStartOrEnd(END), defaultTime: defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime[1], disabledTime: disabledEnd, onOpen: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(END); }, onClose: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(END); }, name: name === null || name === void 0 ? void 0 : name[1], placeholder: placeholder[1] }), void 0)] }), void 0) }), void 0) }, void 0));
};
export default TimeRangePickerBase;