zent
Version:
一套前端设计语言和基于React的实现
77 lines (76 loc) • 5.33 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useMemo, useRef, useState } from 'react';
import PickerPopover from './PickerPopover';
import { CombinedInputTrigger } from './PickerTrigger';
import PanelContext from '../context/PanelContext';
import useTimeValue, { parseSelectedToRangeDate } from '../hooks/useTimeValue';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import pick from '../../utils/pick';
import useRangeDisabledTime from '../hooks/useRangeDisabledTime';
import { startOfToday } from 'date-fns';
import { triggerCommonProps, timePanelProps, defaultTimePickerProps, emptyTimeRange, } from '../constants';
import useSinglePopoverVisible from '../hooks/useSinglePopoverVisible';
var prefixCls = 'zent-datepicker-combined';
var PanelContextProvider = PanelContext.Provider;
var CombinedTimePicker = function (_a) {
var onChange = _a.onChange, disabledTime = _a.disabledTime, onOpen = _a.onOpen, onClose = _a.onClose, value = _a.value, ContentComponent = _a.ContentComponent, defaultTime = _a.defaultTime, selectedDate = _a.selectedDate, disabled = _a.disabled, restProps = __rest(_a, ["onChange", "disabledTime", "onOpen", "onClose", "value", "ContentComponent", "defaultTime", "selectedDate", "disabled"]);
var restPropsRef = useRef(restProps);
restPropsRef.current = restProps;
var _b = restPropsRef.current, format = _b.format, className = _b.className, openPanel = _b.openPanel;
var onChangeRef = useEventCallbackRef(onChange);
var _c = useTimeValue(emptyTimeRange, value), selected = _c.selected, setSelected = _c.setSelected;
var _d = useState(true), visibleChange = _d[0], setVisibleChange = _d[1];
var _e = useSinglePopoverVisible(value !== null && value !== void 0 ? value : emptyTimeRange, setSelected, onOpen, onClose, disabled, openPanel), panelVisible = _e.panelVisible, setPanelVisible = _e.setPanelVisible, onVisibleChange = _e.onVisibleChange;
var onSelected = useCallback(function (val, finished) {
var _a;
if (finished === void 0) { finished = false; }
setVisibleChange(false);
setSelected(val);
if (finished) {
setPanelVisible(!finished);
setVisibleChange(true);
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, val);
}
}, [onChangeRef, setSelected, setPanelVisible]);
var onClearInput = useCallback(function (evt) {
var _a;
evt.stopPropagation();
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, emptyTimeRange);
}, [onChangeRef]);
var selectedDates = parseSelectedToRangeDate(selected, format, new Date());
var _f = useRangeDisabledTime({
selected: selectedDates,
disabledTime: disabledTime,
}), disabledStartTimes = _f.disabledStartTimes, disabledConfirm = _f.disabledConfirm, disabledEndTimes = _f.disabledEndTimes;
var disabledTimeOptionStart = useMemo(function () { var _a; return disabledStartTimes === null || disabledStartTimes === void 0 ? void 0 : disabledStartTimes((_a = selectedDates[0]) !== null && _a !== void 0 ? _a : startOfToday()); }, [disabledStartTimes, selectedDates]);
var disabledTimeOptionEnd = useMemo(function () { var _a; return disabledEndTimes === null || disabledEndTimes === void 0 ? void 0 : disabledEndTimes((_a = selectedDates[1]) !== null && _a !== void 0 ? _a : startOfToday()); }, [disabledEndTimes, selectedDates]);
var trigger = useMemo(function () {
var triggerProps = pick(restPropsRef.current, triggerCommonProps);
return (_jsx("div", __assign({ "data-zv": '10.0.17' }, { children: _jsx(CombinedInputTrigger, __assign({}, triggerProps, { value: value, disabled: disabled, selected: selectedDates, onClearInput: onClearInput, panelVisible: panelVisible, text: selected, icon: "clock-o" }), void 0) }), void 0));
}, [
value,
selected,
selectedDates,
panelVisible,
restPropsRef,
disabled,
onClearInput,
]);
var content = useMemo(function () {
var commonPanelProps = pick(restPropsRef.current, timePanelProps);
return (_jsx("div", __assign({ className: cx(prefixCls + "-panel", prefixCls + "-time-panel"), "data-zv": '10.0.17' }, { children: _jsx(ContentComponent, __assign({}, commonPanelProps, { defaultTime: defaultTime, disabledTimeOptionStart: disabledTimeOptionStart, disabledTimeOptionEnd: disabledTimeOptionEnd, selected: selected, onSelected: onSelected }), void 0) }), void 0));
}, [
selected,
defaultTime,
restPropsRef,
onSelected,
disabledTimeOptionStart,
disabledTimeOptionEnd,
ContentComponent,
]);
return (_jsx("div", __assign({ className: cx('zent-datepicker', className), "data-zv": '10.0.17' }, { children: _jsx(PanelContextProvider, __assign({ value: { visibleChange: visibleChange, confirmStatus: disabledConfirm } }, { children: _jsx(PickerPopover, { panelVisible: panelVisible, onVisibleChange: onVisibleChange, trigger: trigger, content: content }, void 0) }), void 0) }), void 0));
};
CombinedTimePicker.defaultProps = defaultTimePickerProps;
export default CombinedTimePicker;