diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index fec2ffa93..b695359a2 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -137,15 +137,18 @@ type RangeShowTimeObject = Omit, 'defaultVal defaultValue?: DateType[]; }; -export type RangePickerBaseProps = {} & RangePickerSharedProps & OmitPickerProps>; +export type RangePickerBaseProps = {} & RangePickerSharedProps & + OmitPickerProps>; export type RangePickerDateProps = { showTime?: boolean | RangeShowTimeObject; -} & RangePickerSharedProps & OmitPickerProps>; +} & RangePickerSharedProps & + OmitPickerProps>; export type RangePickerTimeProps = { order?: boolean; -} & RangePickerSharedProps & OmitPickerProps>; +} & RangePickerSharedProps & + OmitPickerProps>; export type RangePickerProps = | RangePickerBaseProps @@ -239,9 +242,8 @@ function InnerRangePicker(props: RangePickerProps) { }); // Operation ref - const operationRef: React.MutableRefObject = useRef< - ContextOperationRefProps - >(null); + const operationRef: React.MutableRefObject = + useRef(null); const mergedDisabled = React.useMemo<[boolean, boolean]>(() => { if (Array.isArray(disabled)) { @@ -255,7 +257,7 @@ function InnerRangePicker(props: RangePickerProps) { const [mergedValue, setInnerValue] = useMergedState>(null, { value, defaultValue, - postState: values => + postState: (values) => picker === 'time' && !order ? values : reorderValues(values, generateConfig), }); @@ -270,7 +272,7 @@ function InnerRangePicker(props: RangePickerProps) { // ========================= Select Values ========================= const [selectedValue, setSelectedValue] = useMergedState(mergedValue, { - postState: values => { + postState: (values) => { let postValues = values; if (mergedDisabled[0] && mergedDisabled[1]) { @@ -322,8 +324,8 @@ function InnerRangePicker(props: RangePickerProps) { const [mergedOpen, triggerInnerOpen] = useMergedState(false, { value: open, defaultValue: defaultOpen, - postState: postOpen => (mergedDisabled[mergedActivePickerIndex] ? false : postOpen), - onChange: newOpen => { + postState: (postOpen) => (mergedDisabled[mergedActivePickerIndex] ? false : postOpen), + onChange: (newOpen) => { if (onOpenChange) { onOpenChange(newOpen); } @@ -533,12 +535,12 @@ function InnerRangePicker(props: RangePickerProps) { const [startText, triggerStartTextChange, resetStartText] = useTextValueMapping({ valueTexts: startValueTexts, - onTextChange: newText => onTextChange(newText, 0), + onTextChange: (newText) => onTextChange(newText, 0), }); const [endText, triggerEndTextChange, resetEndText] = useTextValueMapping({ valueTexts: endValueTexts, - onTextChange: newText => onTextChange(newText, 1), + onTextChange: (newText) => onTextChange(newText, 1), }); const [rangeHoverValue, setRangeHoverValue] = useState>(null); @@ -583,7 +585,12 @@ function InnerRangePicker(props: RangePickerProps) { onBlur, isClickOutside: (target: EventTarget | null) => !elementsContains( - [panelDivRef.current, startInputDivRef.current, endInputDivRef.current], + [ + panelDivRef.current, + startInputDivRef.current, + endInputDivRef.current, + containerRef.current, + ], target as HTMLElement, ), onFocus: (e: React.FocusEvent) => { @@ -731,7 +738,7 @@ function InnerRangePicker(props: RangePickerProps) { // ============================ Ranges ============================= const rangeLabels = Object.keys(ranges || {}); - const rangeList = rangeLabels.map(label => { + const rangeList = rangeLabels.map((label) => { const range = ranges![label]; const newValues = typeof range === 'function' ? range() : range; @@ -766,10 +773,8 @@ function InnerRangePicker(props: RangePickerProps) { panelHoverRangedValue = hoverRangedValue; } - let panelShowTime: - | boolean - | SharedTimeProps - | undefined = showTime as SharedTimeProps; + let panelShowTime: boolean | SharedTimeProps | undefined = + showTime as SharedTimeProps; if (showTime && typeof showTime === 'object' && showTime.defaultValue) { const timeDefaultValues: DateType[] = showTime.defaultValue!; panelShowTime = { @@ -805,7 +810,7 @@ function InnerRangePicker(props: RangePickerProps) { style={undefined} direction={direction} disabledDate={mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate} - disabledTime={date => { + disabledTime={(date) => { if (disabledTime) { return disabledTime(date, mergedActivePickerIndex === 0 ? 'start' : 'end'); } @@ -903,13 +908,13 @@ function InnerRangePicker(props: RangePickerProps) { const showDoublePanel = currentMode === picker; const leftPanel = renderPanel(showDoublePanel ? 'left' : false, { pickerValue: viewDate, - onPickerValueChange: newViewDate => { + onPickerValueChange: (newViewDate) => { setViewDate(newViewDate, mergedActivePickerIndex); }, }); const rightPanel = renderPanel('right', { pickerValue: nextViewDate, - onPickerValueChange: newViewDate => { + onPickerValueChange: (newViewDate) => { setViewDate( getClosingViewDate(newViewDate, picker, generateConfig, -1), mergedActivePickerIndex, @@ -957,7 +962,7 @@ function InnerRangePicker(props: RangePickerProps) { className={`${prefixCls}-panel-container`} style={{ marginLeft: panelLeft }} ref={panelDivRef} - onMouseDown={e => { + onMouseDown={(e) => { e.preventDefault(); }} > @@ -991,11 +996,11 @@ function InnerRangePicker(props: RangePickerProps) { ) { clearNode = ( { + onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }} - onMouseUp={e => { + onMouseUp={(e) => { e.preventDefault(); e.stopPropagation(); let values = mergedValue; @@ -1101,7 +1106,7 @@ function InnerRangePicker(props: RangePickerProps) { disabled={mergedDisabled[0]} readOnly={inputReadOnly || typeof formatList[0] === 'function' || !startTyping} value={startHoverValue || startText} - onChange={e => { + onChange={(e) => { triggerStartTextChange(e.target.value); }} autoFocus={autoFocus} @@ -1126,7 +1131,7 @@ function InnerRangePicker(props: RangePickerProps) { disabled={mergedDisabled[1]} readOnly={inputReadOnly || typeof formatList[0] === 'function' || !endTyping} value={endHoverValue || endText} - onChange={e => { + onChange={(e) => { triggerEndTextChange(e.target.value); }} placeholder={getValue(placeholder, 1) || ''}