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 */
|
||||
defaultOpenValue?: Ref<any>;
|
||||
|
||||
/** Double click state for RangePicker */
|
||||
isDoubleClickRef?: Ref<boolean>;
|
||||
};
|
||||
|
||||
const PanelContextKey: InjectionKey<PanelContextProps> = Symbol('PanelContextProps');
|
||||
|
|
|
|||
|
|
@ -263,6 +263,8 @@ function RangerPicker<DateType>() {
|
|||
const needConfirmButton = computed(
|
||||
() => (props.picker === 'date' && !!props.showTime) || props.picker === 'time',
|
||||
);
|
||||
|
||||
const isDoubleClickRef = ref(false);
|
||||
const presets = computed(() => props.presets);
|
||||
const ranges = computed(() => props.ranges);
|
||||
const presetList = usePresets(presets, ranges);
|
||||
|
|
@ -970,10 +972,30 @@ function RangerPicker<DateType>() {
|
|||
|
||||
const onContextSelect = (date: DateType, type: 'key' | 'mouse' | 'submit') => {
|
||||
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(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
|
||||
if (mergedActivePickerIndex.value === 0) {
|
||||
onStartLeave();
|
||||
|
|
@ -993,6 +1015,7 @@ function RangerPicker<DateType>() {
|
|||
hideRanges: computed(() => true),
|
||||
onSelect: onContextSelect,
|
||||
open: mergedOpen,
|
||||
isDoubleClickRef,
|
||||
});
|
||||
|
||||
return () => {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
|
|||
titleCell,
|
||||
headerCells,
|
||||
} = useMergeProps(_props);
|
||||
const { onDateMouseenter, onDateMouseleave, mode } = useInjectPanel();
|
||||
const { onDateMouseenter, onDateMouseleave, mode, isDoubleClickRef } = useInjectPanel();
|
||||
|
||||
const cellPrefixCls = `${prefixCls}-cell`;
|
||||
|
||||
|
|
@ -99,6 +99,14 @@ function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
|
|||
onSelect(currentDate);
|
||||
}
|
||||
}}
|
||||
onDblclick={e => {
|
||||
e.stopPropagation();
|
||||
if (!disabled && isDoubleClickRef) {
|
||||
// 设置双击状态
|
||||
isDoubleClickRef.value = true;
|
||||
onSelect(currentDate);
|
||||
}
|
||||
}}
|
||||
onMouseenter={() => {
|
||||
if (!disabled && onDateMouseenter) {
|
||||
onDateMouseenter(currentDate);
|
||||
|
|
|
|||
Loading…
Reference in New Issue