zent
Version:
一套前端设计语言和基于React的实现
89 lines (88 loc) • 5.51 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 PickerPopover from './PickerPopover';
import { SingleInputTrigger } from './PickerTrigger';
import PickerContext from '../context/PickerContext';
import PanelContext from '../context/PanelContext';
import useMergedProps from '../hooks/useMergedProps';
import useNormalizeDisabledDate from '../hooks/useNormalizeDisabledDate';
import useSinglePopoverVisible from '../hooks/useSinglePopoverVisible';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
import pick from '../../utils/pick';
import { triggerCommonProps, INPUT_WIDTH } from '../constants';
var PanelContextProvider = PanelContext.Provider;
export function SinglePicker(_a) {
var value = _a.value, onChange = _a.onChange, onOpen = _a.onOpen, onClose = _a.onClose, disabledDate = _a.disabledDate, restProps = __rest(_a, ["value", "onChange", "onOpen", "onClose", "disabledDate"]);
var restPropsRef = useRef(restProps);
restPropsRef.current = restProps;
var _b = restPropsRef.current, defaultDate = _b.defaultDate, format = _b.format, name = _b.name, width = _b.width, placeholder = _b.placeholder, className = _b.className, valueType = _b.valueType, disabled = _b.disabled, canClear = _b.canClear, openPanel = _b.openPanel, PanelComponent = _b.PanelComponent, restPanelProps = __rest(_b, ["defaultDate", "format", "name", "width", "placeholder", "className", "valueType", "disabled", "canClear", "openPanel", "PanelComponent"]);
var _c = restPanelProps, showLunarDate = _c.showLunarDate, lunarValueFormatter = _c.lunarValueFormatter;
var _d = useContext(PickerContext), getSelectedValue = _d.getSelectedValue, getCallbackValue = _d.getCallbackValue, getInputText = _d.getInputText;
var onChangeRef = useEventCallbackRef(onChange);
var _e = useMergedProps({
value: value,
format: format,
defaultDate: defaultDate,
}), selected = _e.selected, parseValue = _e.parseValue, setSelected = _e.setSelected, defaultPanelDate = _e.defaultPanelDate;
var _f = useSinglePopoverVisible(parseValue, setSelected, onOpen, onClose, disabled, openPanel), panelVisible = _f.panelVisible, setPanelVisible = _f.setPanelVisible, onVisibleChange = _f.onVisibleChange;
var disabledPanelDate = useNormalizeDisabledDate(format, disabledDate);
var _g = useState(), hoverDate = _g[0], setHoverDate = _g[1];
var onSelected = useCallback(function (val, finish) {
var _a;
if (finish === void 0) { finish = true; }
setSelected((getSelectedValue === null || getSelectedValue === void 0 ? void 0 : getSelectedValue(val)) || null);
if (finish) {
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, (getCallbackValue === null || getCallbackValue === void 0 ? void 0 : getCallbackValue(val)) || null);
setPanelVisible(openPanel !== null && openPanel !== void 0 ? openPanel : false);
}
}, [
getSelectedValue,
getCallbackValue,
onChangeRef,
openPanel,
setSelected,
setPanelVisible,
]);
var onClearInput = useCallback(function (evt) {
var _a;
evt.stopPropagation();
(_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, null);
}, [onChangeRef]);
var text = useMemo(function () {
if (!selected)
return '';
if (showLunarDate &&
lunarValueFormatter &&
typeof lunarValueFormatter === 'function') {
return lunarValueFormatter(selected);
}
return getInputText === null || getInputText === void 0 ? void 0 : getInputText(selected);
}, [selected, showLunarDate, getInputText, lunarValueFormatter]);
var trigger = useMemo(function () {
var triggerProps = pick(restPropsRef.current, triggerCommonProps);
return (_jsx("div", __assign({ "data-zv": '10.0.17' }, { children: _jsx(SingleInputTrigger, __assign({}, triggerProps, { value: value, disabled: disabled, text: text, panelVisible: panelVisible, onClearInput: onClearInput }), void 0) }), void 0));
}, [text, value, panelVisible, restPropsRef, disabled, onClearInput]);
var content = useMemo(function () {
var _a;
return (_jsx("div", __assign({ className: cx('zent-datepicker-panel', (_a = {},
_a['zent-datepicker-panel_lunar'] = !!showLunarDate,
_a)), "data-zv": '10.0.17' }, { children: _jsx(PanelComponent, __assign({}, restPanelProps, { selected: selected, hoverDate: hoverDate, defaultPanelDate: defaultPanelDate, onSelected: onSelected, disabledPanelDate: disabledPanelDate }), void 0) }), void 0));
}, [
showLunarDate,
PanelComponent,
restPanelProps,
selected,
hoverDate,
defaultPanelDate,
onSelected,
disabledPanelDate,
]);
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));
}
SinglePicker.defaultProps = {
canClear: true,
width: INPUT_WIDTH,
};
export default SinglePicker;