feat: allow range picker switch with doubleClick

pull/8366/head
KurumiRin 2025-09-16 14:01:23 +04:00
parent 723bb47a42
commit 53c4256f10
3 changed files with 36 additions and 2 deletions

View File

@ -23,6 +23,9 @@ export type PanelContextProps = {
/** Only used for TimePicker and this is a deprecated prop */ /** Only used for TimePicker and this is a deprecated prop */
defaultOpenValue?: Ref<any>; defaultOpenValue?: Ref<any>;
/** Double click state for RangePicker */
isDoubleClickRef?: Ref<boolean>;
}; };
const PanelContextKey: InjectionKey<PanelContextProps> = Symbol('PanelContextProps'); const PanelContextKey: InjectionKey<PanelContextProps> = Symbol('PanelContextProps');

View File

@ -263,6 +263,8 @@ function RangerPicker<DateType>() {
const needConfirmButton = computed( const needConfirmButton = computed(
() => (props.picker === 'date' && !!props.showTime) || props.picker === 'time', () => (props.picker === 'date' && !!props.showTime) || props.picker === 'time',
); );
const isDoubleClickRef = ref(false);
const presets = computed(() => props.presets); const presets = computed(() => props.presets);
const ranges = computed(() => props.ranges); const ranges = computed(() => props.ranges);
const presetList = usePresets(presets, ranges); const presetList = usePresets(presets, ranges);
@ -970,10 +972,30 @@ function RangerPicker<DateType>() {
const onContextSelect = (date: DateType, type: 'key' | 'mouse' | 'submit') => { const onContextSelect = (date: DateType, type: 'key' | 'mouse' | 'submit') => {
const values = updateValues(selectedValue.value, date, mergedActivePickerIndex.value); const values = updateValues(selectedValue.value, date, mergedActivePickerIndex.value);
const currentIndex = mergedActivePickerIndex.value;
const isDoubleClick = isDoubleClickRef.value;
const shouldSwitch = type === 'mouse' && needConfirmButton.value && isDoubleClick;
if (type === 'submit' || (type !== 'key' && !needConfirmButton.value)) { // Reset double click state
isDoubleClickRef.value = false;
if (type === 'submit' || (type !== 'key' && !needConfirmButton.value) || shouldSwitch) {
// triggerChange will also update selected values // triggerChange will also update selected values
triggerChange(values, mergedActivePickerIndex.value); triggerChange(values, mergedActivePickerIndex.value);
// If double click, switch to next input
// But check if both inputs are complete, if so don't switch to avoid animation before popup closes
if (shouldSwitch) {
const startValue = getValue(values, 0);
const endValue = getValue(values, 1);
const bothValuesComplete = startValue && endValue;
if (!bothValuesComplete) {
const nextIndex = ((currentIndex + 1) % 2) as 0 | 1;
setMergedActivePickerIndex(nextIndex);
}
}
// clear hover value style // clear hover value style
if (mergedActivePickerIndex.value === 0) { if (mergedActivePickerIndex.value === 0) {
onStartLeave(); onStartLeave();
@ -993,6 +1015,7 @@ function RangerPicker<DateType>() {
hideRanges: computed(() => true), hideRanges: computed(() => true),
onSelect: onContextSelect, onSelect: onContextSelect,
open: mergedOpen, open: mergedOpen,
isDoubleClickRef,
}); });
return () => { return () => {

View File

@ -49,7 +49,7 @@ function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
titleCell, titleCell,
headerCells, headerCells,
} = useMergeProps(_props); } = useMergeProps(_props);
const { onDateMouseenter, onDateMouseleave, mode } = useInjectPanel(); const { onDateMouseenter, onDateMouseleave, mode, isDoubleClickRef } = useInjectPanel();
const cellPrefixCls = `${prefixCls}-cell`; const cellPrefixCls = `${prefixCls}-cell`;
@ -99,6 +99,14 @@ function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
onSelect(currentDate); onSelect(currentDate);
} }
}} }}
onDblclick={e => {
e.stopPropagation();
if (!disabled && isDoubleClickRef) {
//
isDoubleClickRef.value = true;
onSelect(currentDate);
}
}}
onMouseenter={() => { onMouseenter={() => {
if (!disabled && onDateMouseenter) { if (!disabled && onDateMouseenter) {
onDateMouseenter(currentDate); onDateMouseenter(currentDate);