feat: allow range picker switch with doubleClick
parent
723bb47a42
commit
53c4256f10
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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 () => {
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue