zent
Version:
一套前端设计语言和基于React的实现
52 lines (51 loc) • 5.08 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useContext, useMemo, useRef } from 'react';
import PickerContext from '../context/PickerContext';
import useRangeMergedProps from '../hooks/useRangeMergedProps';
import useRangeDisabledDate from '../hooks/useRangeDisabledDate';
import { useShowTimeRangeOption } from '../hooks/useShowTimeOption';
import useNormalizeDisabledDate from '../hooks/useNormalizeDisabledDate';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import { RangeTypeMap, } from '../types';
import useRangeDisabledTime from '../hooks/useRangeDisabledTime';
import { endOfDay, startOfDay } from 'date-fns';
var START = RangeTypeMap.START, END = RangeTypeMap.END;
var RangePicker = function (_a) {
var placeholder = _a.placeholder, value = _a.value, disabledDateProps = _a.disabledDate, className = _a.className, defaultDate = _a.defaultDate, valueType = _a.valueType, onChange = _a.onChange, onClose = _a.onClose, onOpen = _a.onOpen, disabledTime = _a.disabledTime, generateDate = _a.generateDate, PickerComponent = _a.PickerComponent, showTime = _a.showTime, seperator = _a.seperator, name = _a.name, dateSpan = _a.dateSpan, disabled = _a.disabled, canClear = _a.canClear, restProps = __rest(_a, ["placeholder", "value", "disabledDate", "className", "defaultDate", "valueType", "onChange", "onClose", "onOpen", "disabledTime", "generateDate", "PickerComponent", "showTime", "seperator", "name", "dateSpan", "disabled", "canClear"]);
var disabledArr = useMemo(function () { return (Array.isArray(disabled) ? disabled : [disabled, disabled]); }, [disabled]);
var canClearArr = useMemo(function () { return (Array.isArray(canClear) ? canClear : [canClear, canClear]); }, [canClear]);
var restPropsRef = useRef(restProps);
restPropsRef.current = restProps;
var format = restPropsRef.current.format;
var getCallbackRangeValue = useContext(PickerContext).getCallbackRangeValue;
var onChangeRef = useEventCallbackRef(onChange);
var _b = useRangeMergedProps({
value: value,
format: format,
defaultDate: defaultDate,
}), selected = _b.selected, setSelected = _b.setSelected, defaultPanelDate = _b.defaultPanelDate;
var start = selected[0], end = selected[1];
var _c = useShowTimeRangeOption(showTime), startShowTime = _c[0], endShowTime = _c[1];
var disabledDate = useNormalizeDisabledDate(format, disabledDateProps);
var _d = useRangeDisabledDate(selected, disabledDate, generateDate, dateSpan), disabledStartDate = _d[0], disabledEndDate = _d[1];
var onChangeStartOrEnd = useCallback(function (type) { return function (val) {
var _a;
var dates = type === START ? [val, end] : [start, val];
if (!showTime) {
dates = [
dates[0] ? startOfDay(dates[0]) : dates[0],
dates[1] ? endOfDay(dates[1]) : dates[1],
];
}
setSelected(dates);
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, (getCallbackRangeValue === null || getCallbackRangeValue === void 0 ? void 0 : getCallbackRangeValue(dates)) || null);
}; }, [start, end, showTime, onChangeRef, getCallbackRangeValue, setSelected]);
var _e = useRangeDisabledTime({
selected: selected,
disabledTime: disabledTime,
}), disabledStartTimes = _e.disabledStartTimes, disabledEndTimes = _e.disabledEndTimes;
return (_jsx(_Fragment, { children: _jsxs("div", __assign({ className: cx('zent-datepicker', className), "data-zv": '10.0.17' }, { children: [_jsx(PickerComponent, __assign({}, restPropsRef.current, { disabled: disabledArr[0], canClear: canClearArr[0], defaultDate: defaultPanelDate[0], showTime: startShowTime, valueType: "date", value: start, disabledTime: disabledStartTimes, onChange: onChangeStartOrEnd(START), onOpen: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(START); }, onClose: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(START); }, disabledDate: disabledStartDate, 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.17' }, { children: seperator }), void 0), _jsx(PickerComponent, __assign({}, restPropsRef.current, { disabled: disabledArr[1], canClear: canClearArr[1], defaultDate: defaultPanelDate[1], showTime: endShowTime, valueType: "date", value: end, disabledTime: disabledEndTimes, onChange: onChangeStartOrEnd(END), onOpen: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(END); }, onClose: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(END); }, disabledDate: disabledEndDate, name: name === null || name === void 0 ? void 0 : name[1], placeholder: placeholder[1] }), void 0)] }), void 0) }, void 0));
};
export default RangePicker;