zent
Version:
一套前端设计语言和基于React的实现
93 lines (92 loc) • 5.64 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useContext, useMemo, useRef, useState } from 'react';
import { CombinedInputTrigger } from './PickerTrigger';
import PickerPopover from './PickerPopover';
import PanelContext from '../context/PanelContext';
import PickerContext from '../context/PickerContext';
import useCombinedDisabledDate from '../hooks/useCombinedDisabledDate';
import useRangeMergedProps from '../hooks/useRangeMergedProps';
import useHoverRange from '../hooks/useHoverRange';
import useSinglePopoverVisible from '../hooks/useSinglePopoverVisible';
import useNormalizeDisabledDate from '../hooks/useNormalizeDisabledDate';
import { getRangeValuesWithValueType } from '../utils/getValueInRangePicker';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import pick from '../../utils/pick';
import { triggerCommonProps } from '../constants';
import { RangeTypeMap, } from '../types';
var START = RangeTypeMap.START, END = RangeTypeMap.END;
var PanelContextProvider = PanelContext.Provider;
export var CombinedPicker = function (_a) {
var value = _a.value, onChange = _a.onChange, onOpen = _a.onOpen, onClose = _a.onClose, dateSpan = _a.dateSpan, disabledDateProps = _a.disabledDate, disabled = _a.disabled, restProps = __rest(_a, ["value", "onChange", "onOpen", "onClose", "dateSpan", "disabledDate", "disabled"]);
var restPropsRef = useRef(restProps);
restPropsRef.current = restProps;
var _b = restPropsRef.current, defaultDate = _b.defaultDate, format = _b.format, className = _b.className, openPanel = _b.openPanel, generateDate = _b.generateDate, PanelComponent = _b.PanelComponent;
var getInputRangeText = useContext(PickerContext).getInputRangeText;
var onChangeRef = useEventCallbackRef(onChange);
var _c = useRangeMergedProps({
value: value,
format: format,
defaultDate: defaultDate,
addMonthNum: 1,
}), selected = _c.selected, parseValue = _c.parseValue, setSelected = _c.setSelected, defaultPanelDate = _c.defaultPanelDate;
var _d = useSinglePopoverVisible(parseValue, setSelected, onOpen, onClose, disabled, openPanel), panelVisible = _d.panelVisible, setPanelVisible = _d.setPanelVisible, onVisibleChange = _d.onVisibleChange;
var disabledDate = useNormalizeDisabledDate(format, disabledDateProps);
var disabledCombinedDate = useCombinedDisabledDate(selected, disabledDate, generateDate, dateSpan);
var _e = useState(), hoverDate = _e[0], setHoverDate = _e[1];
var hoverRangeDate = useHoverRange(selected, hoverDate);
var rangeDate = useMemo(function () {
var startRangeDate = selected[0], endRangeDate = selected[1];
return startRangeDate && endRangeDate
? [startRangeDate, endRangeDate]
: null;
}, [selected]);
var onSelected = useCallback(function (val, finish) {
var _a;
if (finish === void 0) { finish = false; }
setSelected(val);
if (finish) {
var _b = restPropsRef.current, valueType = _b.valueType, format_1 = _b.format, openPanel_1 = _b.openPanel;
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, getRangeValuesWithValueType(valueType, format_1, val));
setPanelVisible(openPanel_1 !== null && openPanel_1 !== void 0 ? openPanel_1 : false);
}
}, [onChangeRef, restPropsRef, setPanelVisible, setSelected]);
var onClearInput = useCallback(function (evt) {
var _a;
evt.stopPropagation();
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, [null, null]);
}, [onChangeRef]);
var text = useMemo(function () { return getInputRangeText === null || getInputRangeText === void 0 ? void 0 : getInputRangeText(selected); }, [selected, getInputRangeText]);
var trigger = useMemo(function () {
var triggerProps = pick(restPropsRef.current, triggerCommonProps);
return (_jsx("div", __assign({ "data-zv": '10.0.17' }, { children: _jsx(CombinedInputTrigger, __assign({}, triggerProps, { disabled: disabled, selected: selected, value: value, text: text, panelVisible: panelVisible, onClearInput: onClearInput }), void 0) }), void 0));
}, [
selected,
text,
value,
panelVisible,
restPropsRef,
disabled,
onClearInput,
]);
var content = useMemo(function () {
return (_jsx("div", __assign({ className: "zent-datepicker-combined-panel", "data-zv": '10.0.17' }, { children: _jsx(PanelComponent, __assign({}, restPropsRef.current, { selected: selected, defaultPanelDate: defaultPanelDate, onSelected: onSelected, disabledStartDate: disabledCombinedDate(START), disabledEndDate: disabledCombinedDate(END), hoverDate: hoverDate, hoverRangeDate: hoverRangeDate, rangeDate: rangeDate }), void 0) }), void 0));
}, [
selected,
hoverDate,
rangeDate,
hoverRangeDate,
defaultPanelDate,
restPropsRef,
disabledCombinedDate,
onSelected,
PanelComponent,
]);
return (_jsx("div", __assign({ className: cx('zent-datepicker', className), "data-zv": '10.0.17' }, { children: _jsx(PanelContextProvider, __assign({ value: { onHover: setHoverDate } }, { children: _jsx(PickerPopover, { panelVisible: panelVisible, onVisibleChange: onVisibleChange, trigger: trigger, content: content }, void 0) }), void 0) }), void 0));
};
CombinedPicker.defaultProps = {
disabled: false,
canClear: true,
};
export default CombinedPicker;