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