github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: date

pull/4499/head
tangjinzhou 2021-07-20 21:46:14 +08:00
parent 571369bb66
commit 8b7197d173
16 changed files with 119 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/vc-picker/PanelContext.tsx
View File

@ -3,7 +3,7 @@ import { inject, provide } from 'vue';
import type { OnSelect, PanelMode } from './interface'; import type { OnSelect, PanelMode } from './interface';
export type ContextOperationRefProps = { export type ContextOperationRefProps = {
onKeyDown?: (e: KeyboardEvent) => boolean; onKeydown?: (e: KeyboardEvent) => boolean;
onClose?: () => void; onClose?: () => void;
}; };
@ -14,8 +14,8 @@ export type PanelContextProps = {
panelRef?: Ref<HTMLDivElement>; panelRef?: Ref<HTMLDivElement>;
hidePrevBtn?: Ref<boolean>; hidePrevBtn?: Ref<boolean>;
hideNextBtn?: Ref<boolean>; hideNextBtn?: Ref<boolean>;
onDateMouseEnter?: (date: any) => void; onDateMouseenter?: (date: any) => void;
onDateMouseLeave?: (date: any) => void; onDateMouseleave?: (date: any) => void;
onSelect?: OnSelect<any>; onSelect?: OnSelect<any>;
hideRanges?: Ref<boolean>; hideRanges?: Ref<boolean>;
open?: Ref<boolean>; open?: Ref<boolean>;

66
components/vc-picker/Picker.tsx
View File

@ -76,13 +76,13 @@ export type PickerSharedProps<DateType> = {
onOpenChange?: (open: boolean) => void; onOpenChange?: (open: boolean) => void;
onFocus?: FocusEventHandler; onFocus?: FocusEventHandler;
onBlur?: FocusEventHandler; onBlur?: FocusEventHandler;
onMouseDown?: MouseEventHandler; onMousedown?: MouseEventHandler;
onMouseUp?: MouseEventHandler; onMouseup?: MouseEventHandler;
onMouseEnter?: MouseEventHandler; onMouseenter?: MouseEventHandler;
onMouseLeave?: MouseEventHandler; onMouseleave?: MouseEventHandler;
onClick?: MouseEventHandler; onClick?: MouseEventHandler;
onContextMenu?: MouseEventHandler; onContextmenu?: MouseEventHandler;
onKeyDown?: (event: KeyboardEvent, preventDefault: () => void) => void; onKeydown?: (event: KeyboardEvent, preventDefault: () => void) => void;
// WAI-ARIA // WAI-ARIA
role?: string; role?: string;
@ -163,13 +163,13 @@ function Picker<DateType>() {
'onOpenChange', 'onOpenChange',
'onFocus', 'onFocus',
'onBlur', 'onBlur',
'onMouseDown', 'onMousedown',
'onMouseUp', 'onMouseup',
'onMouseEnter', 'onMouseenter',
'onMouseLeave', 'onMouseleave',
'onContextMenu', 'onContextmenu',
'onClick', 'onClick',
'onKeyDown', 'onKeydown',
'onSelect', 'onSelect',
'direction', 'direction',
'autocomplete', 'autocomplete',
@ -273,10 +273,10 @@ function Picker<DateType>() {
triggerInnerOpen(newOpen); triggerInnerOpen(newOpen);
}; };
const forwardKeyDown = (e: KeyboardEvent) => { const forwardKeydown = (e: KeyboardEvent) => {
if (mergedOpen && operationRef.value && operationRef.value.onKeyDown) { if (mergedOpen && operationRef.value && operationRef.value.onKeydown) {
// Let popup panel handle keyboard // Let popup panel handle keyboard
return operationRef.value.onKeyDown(e); return operationRef.value.onKeydown(e);
} }
/* istanbul ignore next */ /* istanbul ignore next */
@ -284,15 +284,15 @@ function Picker<DateType>() {
{ {
warning( warning(
false, false,
'Picker not correct forward KeyDown operation. Please help to fire issue about this.', 'Picker not correct forward Keydown operation. Please help to fire issue about this.',
); );
return false; return false;
} }
}; };
const onInternalMouseUp: MouseEventHandler = (...args) => { const onInternalMouseup: MouseEventHandler = (...args) => {
if (props.onMouseUp) { if (props.onMouseup) {
props.onMouseUp(...args); props.onMouseup(...args);
} }
if (inputRef.value) { if (inputRef.value) {
@ -307,7 +307,7 @@ function Picker<DateType>() {
open: mergedOpen, open: mergedOpen,
value: text, value: text,
triggerOpen, triggerOpen,
forwardKeyDown, forwardKeydown,
isClickOutside: target => isClickOutside: target =>
!elementsContains([panelDivRef.value, inputDivRef.value], target as HTMLElement), !elementsContains([panelDivRef.value, inputDivRef.value], target as HTMLElement),
onSubmit: () => { onSubmit: () => {
@ -325,8 +325,8 @@ function Picker<DateType>() {
setSelectedValue(mergedValue.value); setSelectedValue(mergedValue.value);
resetText(); resetText();
}, },
onKeyDown: (e, preventDefault) => { onKeydown: (e, preventDefault) => {
props.onKeyDown?.(e, preventDefault); props.onKeydown?.(e, preventDefault);
}, },
onFocus: (e: FocusEvent) => { onFocus: (e: FocusEvent) => {
props.onFocus?.(e); props.onFocus?.(e);
@ -387,8 +387,8 @@ function Picker<DateType>() {
onSelect: onContextSelect, onSelect: onContextSelect,
open: mergedOpen, open: mergedOpen,
defaultOpenValue: toRef(props, 'defaultOpenValue'), defaultOpenValue: toRef(props, 'defaultOpenValue'),
onDateMouseEnter: onEnter, onDateMouseenter: onEnter,
onDateMouseLeave: onLeave, onDateMouseleave: onLeave,
}); });
expose({ expose({
@ -426,10 +426,10 @@ function Picker<DateType>() {
placeholder, placeholder,
getPopupContainer, getPopupContainer,
panelRender, panelRender,
onMouseDown, onMousedown,
onMouseEnter, onMouseenter,
onMouseLeave, onMouseleave,
onContextMenu, onContextmenu,
onClick, onClick,
onSelect, onSelect,
direction, direction,
@ -542,11 +542,11 @@ function Picker<DateType>() {
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
})} })}
style={attrs.style} style={attrs.style}
onMousedown={onMouseDown} onMousedown={onMousedown}
onMouseup={onInternalMouseUp} onMouseup={onInternalMouseup}
onMouseenter={onMouseEnter} onMouseenter={onMouseenter}
onMouseleave={onMouseLeave} onMouseleave={onMouseleave}
onContextmenu={onContextMenu} onContextmenu={onContextmenu}
onClick={onClick} onClick={onClick}
> >
<div <div

18
components/vc-picker/PickerPanel.tsx
View File

@ -72,7 +72,7 @@ export type PickerPanelSharedProps<DateType> = {
onSelect?: (value: DateType) => void; onSelect?: (value: DateType) => void;
onChange?: (value: DateType) => void; onChange?: (value: DateType) => void;
onPanelChange?: OnPanelChange<DateType>; onPanelChange?: OnPanelChange<DateType>;
onMouseDown?: (e: MouseEvent) => void; onMousedown?: (e: MouseEvent) => void;
onOk?: (date: DateType) => void; onOk?: (date: DateType) => void;
direction?: 'ltr' | 'rtl'; direction?: 'ltr' | 'rtl';
@ -142,7 +142,7 @@ function PickerPanel<DateType>() {
'onSelect', 'onSelect',
'onChange', 'onChange',
'onPanelChange', 'onPanelChange',
'onMouseDown', 'onMousedown',
'onPickerValueChange', 'onPickerValueChange',
'onOk', 'onOk',
'components', 'components',
@ -309,8 +309,8 @@ function PickerPanel<DateType>() {
}; };
// ========================= Interactive ========================== // ========================= Interactive ==========================
const onInternalKeyDown = (e: KeyboardEvent) => { const onInternalKeydown = (e: KeyboardEvent) => {
if (panelRef.value && panelRef.value.onKeyDown) { if (panelRef.value && panelRef.value.onKeydown) {
if ( if (
[ [
KeyCode.LEFT, KeyCode.LEFT,
@ -324,7 +324,7 @@ function PickerPanel<DateType>() {
) { ) {
e.preventDefault(); e.preventDefault();
} }
return panelRef.value.onKeyDown(e); return panelRef.value.onKeydown(e);
} }
/* istanbul ignore next */ /* istanbul ignore next */
@ -399,13 +399,13 @@ function PickerPanel<DateType>() {
showTime, showTime,
showToday, showToday,
renderExtraFooter, renderExtraFooter,
onMouseDown, onMousedown,
onOk, onOk,
components, components,
} = props; } = props;
if (operationRef && panelPosition.value !== 'right') { if (operationRef && panelPosition.value !== 'right') {
operationRef.value = { operationRef.value = {
onKeyDown: onInternalKeyDown, onKeydown: onInternalKeydown,
onClose: () => { onClose: () => {
if (panelRef.value && panelRef.value.onClose) { if (panelRef.value && panelRef.value.onClose) {
panelRef.value.onClose(); panelRef.value.onClose();
@ -580,9 +580,9 @@ function PickerPanel<DateType>() {
tabindex={tabindex} tabindex={tabindex}
class={classNames(classString.value, attrs.class)} class={classNames(classString.value, attrs.class)}
style={attrs.style} style={attrs.style}
onKeydown={onInternalKeyDown} onKeydown={onInternalKeydown}
onBlur={onInternalBlur} onBlur={onInternalBlur}
onMousedown={onMouseDown} onMousedown={onMousedown}
ref={panelDivRef} ref={panelDivRef}
> >
{panelNode} {panelNode}

54
components/vc-picker/RangePicker.tsx
View File

@ -105,8 +105,8 @@ export type RangePickerSharedProps<DateType> = {
onPanelChange?: (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => void; onPanelChange?: (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => void;
onFocus?: FocusEventHandler; onFocus?: FocusEventHandler;
onBlur?: FocusEventHandler; onBlur?: FocusEventHandler;
onMouseEnter?: MouseEventHandler; onMouseenter?: MouseEventHandler;
onMouseLeave?: MouseEventHandler; onMouseleave?: MouseEventHandler;
onOk?: (dates: RangeValue<DateType>) => void; onOk?: (dates: RangeValue<DateType>) => void;
direction?: 'ltr' | 'rtl'; direction?: 'ltr' | 'rtl';
autocomplete?: string; autocomplete?: string;
@ -168,6 +168,8 @@ type MergedRangePickerProps<DateType> = {
} & OmitType<DateType>; } & OmitType<DateType>;
function RangerPicker<DateType>() { function RangerPicker<DateType>() {
return defineComponent<MergedRangePickerProps<DateType>>({ return defineComponent<MergedRangePickerProps<DateType>>({
name: 'RangerPicker',
inheritAttrs: false,
props: [ props: [
'prefixCls', 'prefixCls',
'id', 'id',
@ -210,10 +212,10 @@ function RangerPicker<DateType>() {
'onCalendarChange', 'onCalendarChange',
'onFocus', 'onFocus',
'onBlur', 'onBlur',
'onMouseEnter', 'onMouseenter',
'onMouseLeave', 'onMouseleave',
'onOk', 'onOk',
'onKeyDown', 'onKeydown',
'components', 'components',
'order', 'order',
'direction', 'direction',
@ -502,10 +504,10 @@ function RangerPicker<DateType>() {
} }
} }
const forwardKeyDown = (e: KeyboardEvent) => { const forwardKeydown = (e: KeyboardEvent) => {
if (mergedOpen && operationRef.value && operationRef.value.onKeyDown) { if (mergedOpen && operationRef.value && operationRef.value.onKeydown) {
// Let popup panel handle keyboard // Let popup panel handle keyboard
return operationRef.value.onKeyDown(e); return operationRef.value.onKeydown(e);
} }
/* istanbul ignore next */ /* istanbul ignore next */
@ -513,7 +515,7 @@ function RangerPicker<DateType>() {
{ {
warning( warning(
false, false,
'Picker not correct forward KeyDown operation. Please help to fire issue about this.', 'Picker not correct forward Keydown operation. Please help to fire issue about this.',
); );
return false; return false;
} }
@ -573,7 +575,7 @@ function RangerPicker<DateType>() {
const [endHoverValue, onEndEnter, onEndLeave] = useHoverValue(endText, sharedTextHooksProps); const [endHoverValue, onEndEnter, onEndLeave] = useHoverValue(endText, sharedTextHooksProps);
const onDateMouseEnter = (date: DateType) => { const onDateMouseenter = (date: DateType) => {
setHoverRangedValue(updateValues(selectedValue.value, date, mergedActivePickerIndex.value)); setHoverRangedValue(updateValues(selectedValue.value, date, mergedActivePickerIndex.value));
if (mergedActivePickerIndex.value === 0) { if (mergedActivePickerIndex.value === 0) {
onStartEnter(date); onStartEnter(date);
@ -582,7 +584,7 @@ function RangerPicker<DateType>() {
} }
}; };
const onDateMouseLeave = () => { const onDateMouseleave = () => {
setHoverRangedValue(updateValues(selectedValue.value, null, mergedActivePickerIndex.value)); setHoverRangedValue(updateValues(selectedValue.value, null, mergedActivePickerIndex.value));
if (mergedActivePickerIndex.value === 0) { if (mergedActivePickerIndex.value === 0) {
onStartLeave(); onStartLeave();
@ -593,7 +595,7 @@ function RangerPicker<DateType>() {
// ============================= Input ============================= // ============================= Input =============================
const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({ const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({
forwardKeyDown, forwardKeydown,
onBlur: (e: FocusEvent) => { onBlur: (e: FocusEvent) => {
props.onBlur?.(e); props.onBlur?.(e);
}, },
@ -625,8 +627,8 @@ function RangerPicker<DateType>() {
blurToCancel: needConfirmButton, blurToCancel: needConfirmButton,
open: startOpen, open: startOpen,
value: startText, value: startText,
onKeyDown: (e, preventDefault) => { onKeydown: (e, preventDefault) => {
props.onKeyDown?.(e, preventDefault); props.onKeydown?.(e, preventDefault);
}, },
}); });
@ -635,8 +637,8 @@ function RangerPicker<DateType>() {
blurToCancel: needConfirmButton, blurToCancel: needConfirmButton,
open: endOpen, open: endOpen,
value: endText, value: endText,
onKeyDown: (e, preventDefault) => { onKeydown: (e, preventDefault) => {
props.onKeyDown?.(e, preventDefault); props.onKeydown?.(e, preventDefault);
}, },
}); });
@ -657,7 +659,7 @@ function RangerPicker<DateType>() {
} }
}; };
const onPickerMouseDown = (e: MouseEvent) => { const onPickerMousedown = (e: MouseEvent) => {
// shouldn't affect input elements if picker is active // shouldn't affect input elements if picker is active
if ( if (
mergedOpen.value && mergedOpen.value &&
@ -759,10 +761,10 @@ function RangerPicker<DateType>() {
triggerChange(newValues, null); triggerChange(newValues, null);
triggerOpen(false, mergedActivePickerIndex.value); triggerOpen(false, mergedActivePickerIndex.value);
}, },
onMouseEnter: () => { onMouseenter: () => {
setRangeHoverValue(newValues); setRangeHoverValue(newValues);
}, },
onMouseLeave: () => { onMouseleave: () => {
setRangeHoverValue(null); setRangeHoverValue(null);
}, },
}; };
@ -897,8 +899,8 @@ function RangerPicker<DateType>() {
useProvidePanel({ useProvidePanel({
operationRef, operationRef,
hideHeader: computed(() => props.picker === 'time'), hideHeader: computed(() => props.picker === 'time'),
onDateMouseEnter, onDateMouseenter,
onDateMouseLeave, onDateMouseleave,
hideRanges: computed(() => true), hideRanges: computed(() => true),
onSelect: onContextSelect, onSelect: onContextSelect,
open: mergedOpen, open: mergedOpen,
@ -927,8 +929,8 @@ function RangerPicker<DateType>() {
clearIcon, clearIcon,
inputReadOnly, inputReadOnly,
renderExtraFooter, renderExtraFooter,
onMouseEnter, onMouseenter,
onMouseLeave, onMouseleave,
onOk, onOk,
components, components,
direction, direction,
@ -1145,9 +1147,9 @@ function RangerPicker<DateType>() {
})} })}
style={attrs.style} style={attrs.style}
onClick={onPickerClick} onClick={onPickerClick}
onMouseenter={onMouseEnter} onMouseenter={onMouseenter}
onMouseleave={onMouseLeave} onMouseleave={onMouseleave}
onMousedown={onPickerMouseDown} onMousedown={onPickerMousedown}
{...getDataOrAriaProps(props)} {...getDataOrAriaProps(props)}
> >
<div <div

26
components/vc-picker/hooks/usePickerInput.ts
View File

@ -6,15 +6,15 @@ import { ref } from 'vue';
import { computed } from 'vue'; import { computed } from 'vue';
import type { FocusEventHandler } from '../../_util/EventInterface'; import type { FocusEventHandler } from '../../_util/EventInterface';
import KeyCode from '../../_util/KeyCode'; import KeyCode from '../../_util/KeyCode';
import { addGlobalMouseDownEvent, getTargetFromEvent } from '../utils/uiUtil'; import { addGlobalMousedownEvent, getTargetFromEvent } from '../utils/uiUtil';
export default function usePickerInput({ export default function usePickerInput({
open, open,
value, value,
isClickOutside, isClickOutside,
triggerOpen, triggerOpen,
forwardKeyDown, forwardKeydown,
onKeyDown, onKeydown,
blurToCancel, blurToCancel,
onSubmit, onSubmit,
onCancel, onCancel,
@ -25,8 +25,8 @@ export default function usePickerInput({
value: Ref<string>; value: Ref<string>;
isClickOutside: (clickElement: EventTarget | null) => boolean; isClickOutside: (clickElement: EventTarget | null) => boolean;
triggerOpen: (open: boolean) => void; triggerOpen: (open: boolean) => void;
forwardKeyDown: (e: KeyboardEvent) => boolean; forwardKeydown: (e: KeyboardEvent) => boolean;
onKeyDown: (e: KeyboardEvent, preventDefault: () => void) => void; onKeydown: (e: KeyboardEvent, preventDefault: () => void) => void;
blurToCancel?: ComputedRef<boolean>; blurToCancel?: ComputedRef<boolean>;
onSubmit: () => void | boolean; onSubmit: () => void | boolean;
onCancel: () => void; onCancel: () => void;
@ -56,7 +56,7 @@ export default function usePickerInput({
preventDefaultRef.value = true; preventDefaultRef.value = true;
}; };
onKeyDown(e, preventDefault); onKeydown(e, preventDefault);
if (preventDefaultRef.value) return; if (preventDefaultRef.value) return;
@ -77,7 +77,7 @@ export default function usePickerInput({
typing.value = false; typing.value = false;
e.preventDefault(); e.preventDefault();
} else if (!typing.value && open.value) { } else if (!typing.value && open.value) {
if (!forwardKeyDown(e) && e.shiftKey) { if (!forwardKeydown(e) && e.shiftKey) {
typing.value = true; typing.value = true;
e.preventDefault(); e.preventDefault();
} }
@ -96,7 +96,7 @@ export default function usePickerInput({
triggerOpen(true); triggerOpen(true);
} else if (!typing.value) { } else if (!typing.value) {
// Let popup panel handle keyboard // Let popup panel handle keyboard
forwardKeyDown(e); forwardKeydown(e);
} }
}, },
@ -149,13 +149,13 @@ export default function usePickerInput({
watch(value, () => { watch(value, () => {
valueChangedRef.value = true; valueChangedRef.value = true;
}); });
const globalMouseDownEvent = ref(); const globalMousedownEvent = ref();
// Global click handler // Global click handler
watchEffect( watchEffect(
() => () =>
globalMouseDownEvent.value && globalMousedownEvent.value &&
globalMouseDownEvent.value()( globalMousedownEvent.value()(
(globalMouseDownEvent.value = addGlobalMouseDownEvent((e: MouseEvent) => { (globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
const target = getTargetFromEvent(e); const target = getTargetFromEvent(e);
if (open) { if (open) {
@ -176,7 +176,7 @@ export default function usePickerInput({
), ),
); );
onBeforeUnmount(() => { onBeforeUnmount(() => {
globalMouseDownEvent.value && globalMouseDownEvent.value(); globalMousedownEvent.value && globalMousedownEvent.value();
}); });
return [inputProps, { focused, typing }]; return [inputProps, { focused, typing }];

6
components/vc-picker/interface.ts
View File

@ -46,7 +46,7 @@ export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year'
export type PickerMode = Exclude<PanelMode, 'datetime' | 'decade'>; export type PickerMode = Exclude<PanelMode, 'datetime' | 'decade'>;
export type PanelRefProps = { export type PanelRefProps = {
onKeyDown?: (e: KeyboardEvent) => boolean; onKeydown?: (e: KeyboardEvent) => boolean;
onBlur?: (e: FocusEvent) => void; onBlur?: (e: FocusEvent) => void;
onClose?: () => void; onClose?: () => void;
}; };
@ -103,8 +103,8 @@ export type Components = {
export type RangeList = { export type RangeList = {
label: string; label: string;
onClick: () => void; onClick: () => void;
onMouseEnter: () => void; onMouseenter: () => void;
onMouseLeave: () => void; onMouseleave: () => void;
}[]; }[];
export type CustomFormat<DateType> = (value: DateType) => string; export type CustomFormat<DateType> = (value: DateType) => string;

6
components/vc-picker/panels/DatePanel/index.tsx
View File

@ -4,7 +4,7 @@ import DateHeader from './DateHeader';
import type { PanelSharedProps } from '../../interface'; import type { PanelSharedProps } from '../../interface';
import { WEEK_DAY_COUNT } from '../../utils/dateUtil'; import { WEEK_DAY_COUNT } from '../../utils/dateUtil';
import type { KeyboardConfig } from '../../utils/uiUtil'; import type { KeyboardConfig } from '../../utils/uiUtil';
import { createKeyDownHandler } from '../../utils/uiUtil'; import { createKeydownHandler } from '../../utils/uiUtil';
import classNames from '../../../_util/classNames'; import classNames from '../../../_util/classNames';
import useMergeProps from '../../hooks/useMergeProps'; import useMergeProps from '../../hooks/useMergeProps';
@ -38,8 +38,8 @@ function DatePanel<DateType>(_props: DatePanelProps<DateType>) {
const panelPrefixCls = `${prefixCls}-${panelName}-panel`; const panelPrefixCls = `${prefixCls}-${panelName}-panel`;
// ======================= Keyboard ======================= // ======================= Keyboard =======================
operationRef.value = { operationRef.value = {
onKeyDown: (event: KeyboardEvent) => onKeydown: (event: KeyboardEvent) =>
createKeyDownHandler(event, { createKeydownHandler(event, {
onLeftRight: diff => { onLeftRight: diff => {
onSelect(generateConfig.addDate(value || viewDate, diff), 'key'); onSelect(generateConfig.addDate(value || viewDate, diff), 'key');
}, },

6
components/vc-picker/panels/DatetimePanel/index.tsx
View File

@ -54,7 +54,7 @@ function DatetimePanel<DateType>(_props: DatetimePanelProps<DateType>) {
}; };
operationRef.value = { operationRef.value = {
onKeyDown: (event: KeyboardEvent) => { onKeydown: (event: KeyboardEvent) => {
// Switch active panel // Switch active panel
if (event.which === KeyCode.TAB) { if (event.which === KeyCode.TAB) {
const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1); const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1);
@ -71,8 +71,8 @@ function DatetimePanel<DateType>(_props: DatetimePanelProps<DateType>) {
if (activePanel.value) { if (activePanel.value) {
const ref = activePanel.value === 'date' ? dateOperationRef : timeOperationRef; const ref = activePanel.value === 'date' ? dateOperationRef : timeOperationRef;
if (ref.value && ref.value.onKeyDown) { if (ref.value && ref.value.onKeydown) {
ref.value.onKeyDown(event); ref.value.onKeydown(event);
} }
return true; return true;

6
components/vc-picker/panels/DecadePanel/index.tsx
View File

@ -1,7 +1,7 @@
import DecadeHeader from './DecadeHeader'; import DecadeHeader from './DecadeHeader';
import DecadeBody, { DECADE_COL_COUNT } from './DecadeBody'; import DecadeBody, { DECADE_COL_COUNT } from './DecadeBody';
import type { PanelSharedProps } from '../../interface'; import type { PanelSharedProps } from '../../interface';
import { createKeyDownHandler } from '../../utils/uiUtil'; import { createKeydownHandler } from '../../utils/uiUtil';
import useMergeProps from '../../hooks/useMergeProps'; import useMergeProps from '../../hooks/useMergeProps';
export type DecadePanelProps<DateType> = PanelSharedProps<DateType>; export type DecadePanelProps<DateType> = PanelSharedProps<DateType>;
@ -25,8 +25,8 @@ function DecadePanel<DateType>(_props: DecadePanelProps<DateType>) {
// ======================= Keyboard ======================= // ======================= Keyboard =======================
operationRef.value = { operationRef.value = {
onKeyDown: (event: KeyboardEvent) => onKeydown: (event: KeyboardEvent) =>
createKeyDownHandler(event, { createKeydownHandler(event, {
onLeftRight: diff => { onLeftRight: diff => {
onSelect(generateConfig.addYear(viewDate, diff * DECADE_UNIT_DIFF), 'key'); onSelect(generateConfig.addYear(viewDate, diff * DECADE_UNIT_DIFF), 'key');
}, },

6
components/vc-picker/panels/MonthPanel/index.tsx
View File

@ -2,7 +2,7 @@ import MonthHeader from './MonthHeader';
import type { MonthCellRender } from './MonthBody'; import type { MonthCellRender } from './MonthBody';
import MonthBody, { MONTH_COL_COUNT } from './MonthBody'; import MonthBody, { MONTH_COL_COUNT } from './MonthBody';
import type { PanelSharedProps } from '../../interface'; import type { PanelSharedProps } from '../../interface';
import { createKeyDownHandler } from '../../utils/uiUtil'; import { createKeydownHandler } from '../../utils/uiUtil';
import useMergeProps from '../../hooks/useMergeProps'; import useMergeProps from '../../hooks/useMergeProps';
export type MonthPanelProps<DateType> = { export type MonthPanelProps<DateType> = {
@ -26,8 +26,8 @@ function MonthPanel<DateType>(_props: MonthPanelProps<DateType>) {
// ======================= Keyboard ======================= // ======================= Keyboard =======================
operationRef.value = { operationRef.value = {
onKeyDown: (event: KeyboardEvent) => onKeydown: (event: KeyboardEvent) =>
createKeyDownHandler(event, { createKeydownHandler(event, {
onLeftRight: diff => { onLeftRight: diff => {
onSelect(generateConfig.addMonth(value || viewDate, diff), 'key'); onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
}, },

10
components/vc-picker/panels/PanelBody.tsx
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 } = useInjectPanel();
const cellPrefixCls = `${prefixCls}-cell`; const cellPrefixCls = `${prefixCls}-cell`;
@ -99,13 +99,13 @@ function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
} }
}} }}
onMouseenter={() => { onMouseenter={() => {
if (!disabled && onDateMouseEnter) { if (!disabled && onDateMouseenter) {
onDateMouseEnter(currentDate); onDateMouseenter(currentDate);
} }
}} }}
onMouseleave={() => { onMouseleave={() => {
if (!disabled && onDateMouseLeave) { if (!disabled && onDateMouseleave) {
onDateMouseLeave(currentDate); onDateMouseleave(currentDate);
} }
}} }}
> >

6
components/vc-picker/panels/QuarterPanel/index.tsx
View File

@ -1,7 +1,7 @@
import QuarterHeader from './QuarterHeader'; import QuarterHeader from './QuarterHeader';
import QuarterBody from './QuarterBody'; import QuarterBody from './QuarterBody';
import type { PanelSharedProps } from '../../interface'; import type { PanelSharedProps } from '../../interface';
import { createKeyDownHandler } from '../../utils/uiUtil'; import { createKeydownHandler } from '../../utils/uiUtil';
import useMergeProps from '../../hooks/useMergeProps'; import useMergeProps from '../../hooks/useMergeProps';
export type QuarterPanelProps<DateType> = {} & PanelSharedProps<DateType>; export type QuarterPanelProps<DateType> = {} & PanelSharedProps<DateType>;
@ -23,8 +23,8 @@ function QuarterPanel<DateType>(_props: QuarterPanelProps<DateType>) {
// ======================= Keyboard ======================= // ======================= Keyboard =======================
operationRef.value = { operationRef.value = {
onKeyDown: (event: KeyboardEvent) => onKeydown: (event: KeyboardEvent) =>
createKeyDownHandler(event, { createKeydownHandler(event, {
onLeftRight: diff => { onLeftRight: diff => {
onSelect(generateConfig.addMonth(value || viewDate, diff * 3), 'key'); onSelect(generateConfig.addMonth(value || viewDate, diff * 3), 'key');
}, },

6
components/vc-picker/panels/TimePanel/index.tsx
View File

@ -2,7 +2,7 @@ import TimeHeader from './TimeHeader';
import type { BodyOperationRef } from './TimeBody'; import type { BodyOperationRef } from './TimeBody';
import TimeBody from './TimeBody'; import TimeBody from './TimeBody';
import type { PanelSharedProps, DisabledTimes } from '../../interface'; import type { PanelSharedProps, DisabledTimes } from '../../interface';
import { createKeyDownHandler } from '../../utils/uiUtil'; import { createKeydownHandler } from '../../utils/uiUtil';
import classNames from '../../../_util/classNames'; import classNames from '../../../_util/classNames';
import { ref } from '@vue/reactivity'; import { ref } from '@vue/reactivity';
import useMergeProps from '../../hooks/useMergeProps'; import useMergeProps from '../../hooks/useMergeProps';
@ -53,8 +53,8 @@ function TimePanel<DateType>(_props: TimePanelProps<DateType>) {
const columnsCount = countBoolean([showHour, showMinute, showSecond, use12Hours]); const columnsCount = countBoolean([showHour, showMinute, showSecond, use12Hours]);
operationRef.value = { operationRef.value = {
onKeyDown: (event: KeyboardEvent) => onKeydown: (event: KeyboardEvent) =>
createKeyDownHandler(event, { createKeydownHandler(event, {
onLeftRight: diff => { onLeftRight: diff => {
activeColumnIndex.value = (activeColumnIndex.value + diff + columnsCount) % columnsCount; activeColumnIndex.value = (activeColumnIndex.value + diff + columnsCount) % columnsCount;
}, },

6
components/vc-picker/panels/YearPanel/index.tsx
View File

@ -1,7 +1,7 @@
import YearHeader from './YearHeader'; import YearHeader from './YearHeader';
import YearBody, { YEAR_COL_COUNT } from './YearBody'; import YearBody, { YEAR_COL_COUNT } from './YearBody';
import type { PanelSharedProps, PanelMode } from '../../interface'; import type { PanelSharedProps, PanelMode } from '../../interface';
import { createKeyDownHandler } from '../../utils/uiUtil'; import { createKeydownHandler } from '../../utils/uiUtil';
import useMergeProps from '../../hooks/useMergeProps'; import useMergeProps from '../../hooks/useMergeProps';
export type YearPanelProps<DateType> = { export type YearPanelProps<DateType> = {
@ -28,8 +28,8 @@ function YearPanel<DateType>(_props: YearPanelProps<DateType>) {
// ======================= Keyboard ======================= // ======================= Keyboard =======================
operationRef.value = { operationRef.value = {
onKeyDown: (event: KeyboardEvent) => onKeydown: (event: KeyboardEvent) =>
createKeyDownHandler(event, { createKeydownHandler(event, {
onLeftRight: diff => { onLeftRight: diff => {
onSelect(generateConfig.addYear(value || viewDate, diff), 'key'); onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
}, },

4
components/vc-picker/utils/getRanges.tsx
View File

@ -32,9 +32,9 @@ export default function getRanges({
presetNode = ( presetNode = (
<> <>
{rangeList.map(({ label, onClick, onMouseEnter, onMouseLeave }) => ( {rangeList.map(({ label, onClick, onMouseenter, onMouseleave }) => (
<li key={label} class={`${prefixCls}-preset`}> <li key={label} class={`${prefixCls}-preset`}>
<Item onClick={onClick} onMouseenter={onMouseEnter} onMouseleave={onMouseLeave}> <Item onClick={onClick} onMouseenter={onMouseenter} onMouseleave={onMouseleave}>
{label} {label}
</Item> </Item>
</li> </li>

4
components/vc-picker/utils/uiUtil.ts
View File

@ -66,7 +66,7 @@ export type KeyboardConfig = {
onPageUpDown?: ((diff: number) => void) | null; onPageUpDown?: ((diff: number) => void) | null;
onEnter?: (() => void) | null; onEnter?: (() => void) | null;
}; };
export function createKeyDownHandler( export function createKeydownHandler(
event: KeyboardEvent, event: KeyboardEvent,
{ onLeftRight, onCtrlLeftRight, onUpDown, onPageUpDown, onEnter }: KeyboardConfig, { onLeftRight, onCtrlLeftRight, onUpDown, onPageUpDown, onEnter }: KeyboardConfig,
): boolean { ): boolean {
@ -197,7 +197,7 @@ type ClickEventHandler = (event: MouseEvent) => void;
let globalClickFunc: ClickEventHandler | null = null; let globalClickFunc: ClickEventHandler | null = null;
const clickCallbacks = new Set<ClickEventHandler>(); const clickCallbacks = new Set<ClickEventHandler>();
export function addGlobalMouseDownEvent(callback: ClickEventHandler) { export function addGlobalMousedownEvent(callback: ClickEventHandler) {
if (!globalClickFunc && typeof window !== 'undefined' && window.addEventListener) { if (!globalClickFunc && typeof window !== 'undefined' && window.addEventListener) {
globalClickFunc = (e: MouseEvent) => { globalClickFunc = (e: MouseEvent) => {
// Clone a new list to avoid repeat trigger events // Clone a new list to avoid repeat trigger events