refactor: date
parent
571369bb66
commit
8b7197d173
|
@ -3,7 +3,7 @@ import { inject, provide } from 'vue';
|
|||
import type { OnSelect, PanelMode } from './interface';
|
||||
|
||||
export type ContextOperationRefProps = {
|
||||
onKeyDown?: (e: KeyboardEvent) => boolean;
|
||||
onKeydown?: (e: KeyboardEvent) => boolean;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
|
@ -14,8 +14,8 @@ export type PanelContextProps = {
|
|||
panelRef?: Ref<HTMLDivElement>;
|
||||
hidePrevBtn?: Ref<boolean>;
|
||||
hideNextBtn?: Ref<boolean>;
|
||||
onDateMouseEnter?: (date: any) => void;
|
||||
onDateMouseLeave?: (date: any) => void;
|
||||
onDateMouseenter?: (date: any) => void;
|
||||
onDateMouseleave?: (date: any) => void;
|
||||
onSelect?: OnSelect<any>;
|
||||
hideRanges?: Ref<boolean>;
|
||||
open?: Ref<boolean>;
|
||||
|
|
|
@ -76,13 +76,13 @@ export type PickerSharedProps<DateType> = {
|
|||
onOpenChange?: (open: boolean) => void;
|
||||
onFocus?: FocusEventHandler;
|
||||
onBlur?: FocusEventHandler;
|
||||
onMouseDown?: MouseEventHandler;
|
||||
onMouseUp?: MouseEventHandler;
|
||||
onMouseEnter?: MouseEventHandler;
|
||||
onMouseLeave?: MouseEventHandler;
|
||||
onMousedown?: MouseEventHandler;
|
||||
onMouseup?: MouseEventHandler;
|
||||
onMouseenter?: MouseEventHandler;
|
||||
onMouseleave?: MouseEventHandler;
|
||||
onClick?: MouseEventHandler;
|
||||
onContextMenu?: MouseEventHandler;
|
||||
onKeyDown?: (event: KeyboardEvent, preventDefault: () => void) => void;
|
||||
onContextmenu?: MouseEventHandler;
|
||||
onKeydown?: (event: KeyboardEvent, preventDefault: () => void) => void;
|
||||
|
||||
// WAI-ARIA
|
||||
role?: string;
|
||||
|
@ -163,13 +163,13 @@ function Picker<DateType>() {
|
|||
'onOpenChange',
|
||||
'onFocus',
|
||||
'onBlur',
|
||||
'onMouseDown',
|
||||
'onMouseUp',
|
||||
'onMouseEnter',
|
||||
'onMouseLeave',
|
||||
'onContextMenu',
|
||||
'onMousedown',
|
||||
'onMouseup',
|
||||
'onMouseenter',
|
||||
'onMouseleave',
|
||||
'onContextmenu',
|
||||
'onClick',
|
||||
'onKeyDown',
|
||||
'onKeydown',
|
||||
'onSelect',
|
||||
'direction',
|
||||
'autocomplete',
|
||||
|
@ -273,10 +273,10 @@ function Picker<DateType>() {
|
|||
triggerInnerOpen(newOpen);
|
||||
};
|
||||
|
||||
const forwardKeyDown = (e: KeyboardEvent) => {
|
||||
if (mergedOpen && operationRef.value && operationRef.value.onKeyDown) {
|
||||
const forwardKeydown = (e: KeyboardEvent) => {
|
||||
if (mergedOpen && operationRef.value && operationRef.value.onKeydown) {
|
||||
// Let popup panel handle keyboard
|
||||
return operationRef.value.onKeyDown(e);
|
||||
return operationRef.value.onKeydown(e);
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
|
@ -284,15 +284,15 @@ function Picker<DateType>() {
|
|||
{
|
||||
warning(
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
const onInternalMouseUp: MouseEventHandler = (...args) => {
|
||||
if (props.onMouseUp) {
|
||||
props.onMouseUp(...args);
|
||||
const onInternalMouseup: MouseEventHandler = (...args) => {
|
||||
if (props.onMouseup) {
|
||||
props.onMouseup(...args);
|
||||
}
|
||||
|
||||
if (inputRef.value) {
|
||||
|
@ -307,7 +307,7 @@ function Picker<DateType>() {
|
|||
open: mergedOpen,
|
||||
value: text,
|
||||
triggerOpen,
|
||||
forwardKeyDown,
|
||||
forwardKeydown,
|
||||
isClickOutside: target =>
|
||||
!elementsContains([panelDivRef.value, inputDivRef.value], target as HTMLElement),
|
||||
onSubmit: () => {
|
||||
|
@ -325,8 +325,8 @@ function Picker<DateType>() {
|
|||
setSelectedValue(mergedValue.value);
|
||||
resetText();
|
||||
},
|
||||
onKeyDown: (e, preventDefault) => {
|
||||
props.onKeyDown?.(e, preventDefault);
|
||||
onKeydown: (e, preventDefault) => {
|
||||
props.onKeydown?.(e, preventDefault);
|
||||
},
|
||||
onFocus: (e: FocusEvent) => {
|
||||
props.onFocus?.(e);
|
||||
|
@ -387,8 +387,8 @@ function Picker<DateType>() {
|
|||
onSelect: onContextSelect,
|
||||
open: mergedOpen,
|
||||
defaultOpenValue: toRef(props, 'defaultOpenValue'),
|
||||
onDateMouseEnter: onEnter,
|
||||
onDateMouseLeave: onLeave,
|
||||
onDateMouseenter: onEnter,
|
||||
onDateMouseleave: onLeave,
|
||||
});
|
||||
|
||||
expose({
|
||||
|
@ -426,10 +426,10 @@ function Picker<DateType>() {
|
|||
placeholder,
|
||||
getPopupContainer,
|
||||
panelRender,
|
||||
onMouseDown,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
onContextMenu,
|
||||
onMousedown,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
onContextmenu,
|
||||
onClick,
|
||||
onSelect,
|
||||
direction,
|
||||
|
@ -542,11 +542,11 @@ function Picker<DateType>() {
|
|||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
})}
|
||||
style={attrs.style}
|
||||
onMousedown={onMouseDown}
|
||||
onMouseup={onInternalMouseUp}
|
||||
onMouseenter={onMouseEnter}
|
||||
onMouseleave={onMouseLeave}
|
||||
onContextmenu={onContextMenu}
|
||||
onMousedown={onMousedown}
|
||||
onMouseup={onInternalMouseup}
|
||||
onMouseenter={onMouseenter}
|
||||
onMouseleave={onMouseleave}
|
||||
onContextmenu={onContextmenu}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div
|
||||
|
|
|
@ -72,7 +72,7 @@ export type PickerPanelSharedProps<DateType> = {
|
|||
onSelect?: (value: DateType) => void;
|
||||
onChange?: (value: DateType) => void;
|
||||
onPanelChange?: OnPanelChange<DateType>;
|
||||
onMouseDown?: (e: MouseEvent) => void;
|
||||
onMousedown?: (e: MouseEvent) => void;
|
||||
onOk?: (date: DateType) => void;
|
||||
|
||||
direction?: 'ltr' | 'rtl';
|
||||
|
@ -142,7 +142,7 @@ function PickerPanel<DateType>() {
|
|||
'onSelect',
|
||||
'onChange',
|
||||
'onPanelChange',
|
||||
'onMouseDown',
|
||||
'onMousedown',
|
||||
'onPickerValueChange',
|
||||
'onOk',
|
||||
'components',
|
||||
|
@ -309,8 +309,8 @@ function PickerPanel<DateType>() {
|
|||
};
|
||||
|
||||
// ========================= Interactive ==========================
|
||||
const onInternalKeyDown = (e: KeyboardEvent) => {
|
||||
if (panelRef.value && panelRef.value.onKeyDown) {
|
||||
const onInternalKeydown = (e: KeyboardEvent) => {
|
||||
if (panelRef.value && panelRef.value.onKeydown) {
|
||||
if (
|
||||
[
|
||||
KeyCode.LEFT,
|
||||
|
@ -324,7 +324,7 @@ function PickerPanel<DateType>() {
|
|||
) {
|
||||
e.preventDefault();
|
||||
}
|
||||
return panelRef.value.onKeyDown(e);
|
||||
return panelRef.value.onKeydown(e);
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
|
@ -399,13 +399,13 @@ function PickerPanel<DateType>() {
|
|||
showTime,
|
||||
showToday,
|
||||
renderExtraFooter,
|
||||
onMouseDown,
|
||||
onMousedown,
|
||||
onOk,
|
||||
components,
|
||||
} = props;
|
||||
if (operationRef && panelPosition.value !== 'right') {
|
||||
operationRef.value = {
|
||||
onKeyDown: onInternalKeyDown,
|
||||
onKeydown: onInternalKeydown,
|
||||
onClose: () => {
|
||||
if (panelRef.value && panelRef.value.onClose) {
|
||||
panelRef.value.onClose();
|
||||
|
@ -580,9 +580,9 @@ function PickerPanel<DateType>() {
|
|||
tabindex={tabindex}
|
||||
class={classNames(classString.value, attrs.class)}
|
||||
style={attrs.style}
|
||||
onKeydown={onInternalKeyDown}
|
||||
onKeydown={onInternalKeydown}
|
||||
onBlur={onInternalBlur}
|
||||
onMousedown={onMouseDown}
|
||||
onMousedown={onMousedown}
|
||||
ref={panelDivRef}
|
||||
>
|
||||
{panelNode}
|
||||
|
|
|
@ -105,8 +105,8 @@ export type RangePickerSharedProps<DateType> = {
|
|||
onPanelChange?: (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => void;
|
||||
onFocus?: FocusEventHandler;
|
||||
onBlur?: FocusEventHandler;
|
||||
onMouseEnter?: MouseEventHandler;
|
||||
onMouseLeave?: MouseEventHandler;
|
||||
onMouseenter?: MouseEventHandler;
|
||||
onMouseleave?: MouseEventHandler;
|
||||
onOk?: (dates: RangeValue<DateType>) => void;
|
||||
direction?: 'ltr' | 'rtl';
|
||||
autocomplete?: string;
|
||||
|
@ -168,6 +168,8 @@ type MergedRangePickerProps<DateType> = {
|
|||
} & OmitType<DateType>;
|
||||
function RangerPicker<DateType>() {
|
||||
return defineComponent<MergedRangePickerProps<DateType>>({
|
||||
name: 'RangerPicker',
|
||||
inheritAttrs: false,
|
||||
props: [
|
||||
'prefixCls',
|
||||
'id',
|
||||
|
@ -210,10 +212,10 @@ function RangerPicker<DateType>() {
|
|||
'onCalendarChange',
|
||||
'onFocus',
|
||||
'onBlur',
|
||||
'onMouseEnter',
|
||||
'onMouseLeave',
|
||||
'onMouseenter',
|
||||
'onMouseleave',
|
||||
'onOk',
|
||||
'onKeyDown',
|
||||
'onKeydown',
|
||||
'components',
|
||||
'order',
|
||||
'direction',
|
||||
|
@ -502,10 +504,10 @@ function RangerPicker<DateType>() {
|
|||
}
|
||||
}
|
||||
|
||||
const forwardKeyDown = (e: KeyboardEvent) => {
|
||||
if (mergedOpen && operationRef.value && operationRef.value.onKeyDown) {
|
||||
const forwardKeydown = (e: KeyboardEvent) => {
|
||||
if (mergedOpen && operationRef.value && operationRef.value.onKeydown) {
|
||||
// Let popup panel handle keyboard
|
||||
return operationRef.value.onKeyDown(e);
|
||||
return operationRef.value.onKeydown(e);
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
|
@ -513,7 +515,7 @@ function RangerPicker<DateType>() {
|
|||
{
|
||||
warning(
|
||||
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;
|
||||
}
|
||||
|
@ -573,7 +575,7 @@ function RangerPicker<DateType>() {
|
|||
|
||||
const [endHoverValue, onEndEnter, onEndLeave] = useHoverValue(endText, sharedTextHooksProps);
|
||||
|
||||
const onDateMouseEnter = (date: DateType) => {
|
||||
const onDateMouseenter = (date: DateType) => {
|
||||
setHoverRangedValue(updateValues(selectedValue.value, date, mergedActivePickerIndex.value));
|
||||
if (mergedActivePickerIndex.value === 0) {
|
||||
onStartEnter(date);
|
||||
|
@ -582,7 +584,7 @@ function RangerPicker<DateType>() {
|
|||
}
|
||||
};
|
||||
|
||||
const onDateMouseLeave = () => {
|
||||
const onDateMouseleave = () => {
|
||||
setHoverRangedValue(updateValues(selectedValue.value, null, mergedActivePickerIndex.value));
|
||||
if (mergedActivePickerIndex.value === 0) {
|
||||
onStartLeave();
|
||||
|
@ -593,7 +595,7 @@ function RangerPicker<DateType>() {
|
|||
|
||||
// ============================= Input =============================
|
||||
const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({
|
||||
forwardKeyDown,
|
||||
forwardKeydown,
|
||||
onBlur: (e: FocusEvent) => {
|
||||
props.onBlur?.(e);
|
||||
},
|
||||
|
@ -625,8 +627,8 @@ function RangerPicker<DateType>() {
|
|||
blurToCancel: needConfirmButton,
|
||||
open: startOpen,
|
||||
value: startText,
|
||||
onKeyDown: (e, preventDefault) => {
|
||||
props.onKeyDown?.(e, preventDefault);
|
||||
onKeydown: (e, preventDefault) => {
|
||||
props.onKeydown?.(e, preventDefault);
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -635,8 +637,8 @@ function RangerPicker<DateType>() {
|
|||
blurToCancel: needConfirmButton,
|
||||
open: endOpen,
|
||||
value: endText,
|
||||
onKeyDown: (e, preventDefault) => {
|
||||
props.onKeyDown?.(e, preventDefault);
|
||||
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
|
||||
if (
|
||||
mergedOpen.value &&
|
||||
|
@ -759,10 +761,10 @@ function RangerPicker<DateType>() {
|
|||
triggerChange(newValues, null);
|
||||
triggerOpen(false, mergedActivePickerIndex.value);
|
||||
},
|
||||
onMouseEnter: () => {
|
||||
onMouseenter: () => {
|
||||
setRangeHoverValue(newValues);
|
||||
},
|
||||
onMouseLeave: () => {
|
||||
onMouseleave: () => {
|
||||
setRangeHoverValue(null);
|
||||
},
|
||||
};
|
||||
|
@ -897,8 +899,8 @@ function RangerPicker<DateType>() {
|
|||
useProvidePanel({
|
||||
operationRef,
|
||||
hideHeader: computed(() => props.picker === 'time'),
|
||||
onDateMouseEnter,
|
||||
onDateMouseLeave,
|
||||
onDateMouseenter,
|
||||
onDateMouseleave,
|
||||
hideRanges: computed(() => true),
|
||||
onSelect: onContextSelect,
|
||||
open: mergedOpen,
|
||||
|
@ -927,8 +929,8 @@ function RangerPicker<DateType>() {
|
|||
clearIcon,
|
||||
inputReadOnly,
|
||||
renderExtraFooter,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
onOk,
|
||||
components,
|
||||
direction,
|
||||
|
@ -1145,9 +1147,9 @@ function RangerPicker<DateType>() {
|
|||
})}
|
||||
style={attrs.style}
|
||||
onClick={onPickerClick}
|
||||
onMouseenter={onMouseEnter}
|
||||
onMouseleave={onMouseLeave}
|
||||
onMousedown={onPickerMouseDown}
|
||||
onMouseenter={onMouseenter}
|
||||
onMouseleave={onMouseleave}
|
||||
onMousedown={onPickerMousedown}
|
||||
{...getDataOrAriaProps(props)}
|
||||
>
|
||||
<div
|
||||
|
|
|
@ -6,15 +6,15 @@ import { ref } from 'vue';
|
|||
import { computed } from 'vue';
|
||||
import type { FocusEventHandler } from '../../_util/EventInterface';
|
||||
import KeyCode from '../../_util/KeyCode';
|
||||
import { addGlobalMouseDownEvent, getTargetFromEvent } from '../utils/uiUtil';
|
||||
import { addGlobalMousedownEvent, getTargetFromEvent } from '../utils/uiUtil';
|
||||
|
||||
export default function usePickerInput({
|
||||
open,
|
||||
value,
|
||||
isClickOutside,
|
||||
triggerOpen,
|
||||
forwardKeyDown,
|
||||
onKeyDown,
|
||||
forwardKeydown,
|
||||
onKeydown,
|
||||
blurToCancel,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
|
@ -25,8 +25,8 @@ export default function usePickerInput({
|
|||
value: Ref<string>;
|
||||
isClickOutside: (clickElement: EventTarget | null) => boolean;
|
||||
triggerOpen: (open: boolean) => void;
|
||||
forwardKeyDown: (e: KeyboardEvent) => boolean;
|
||||
onKeyDown: (e: KeyboardEvent, preventDefault: () => void) => void;
|
||||
forwardKeydown: (e: KeyboardEvent) => boolean;
|
||||
onKeydown: (e: KeyboardEvent, preventDefault: () => void) => void;
|
||||
blurToCancel?: ComputedRef<boolean>;
|
||||
onSubmit: () => void | boolean;
|
||||
onCancel: () => void;
|
||||
|
@ -56,7 +56,7 @@ export default function usePickerInput({
|
|||
preventDefaultRef.value = true;
|
||||
};
|
||||
|
||||
onKeyDown(e, preventDefault);
|
||||
onKeydown(e, preventDefault);
|
||||
|
||||
if (preventDefaultRef.value) return;
|
||||
|
||||
|
@ -77,7 +77,7 @@ export default function usePickerInput({
|
|||
typing.value = false;
|
||||
e.preventDefault();
|
||||
} else if (!typing.value && open.value) {
|
||||
if (!forwardKeyDown(e) && e.shiftKey) {
|
||||
if (!forwardKeydown(e) && e.shiftKey) {
|
||||
typing.value = true;
|
||||
e.preventDefault();
|
||||
}
|
||||
|
@ -96,7 +96,7 @@ export default function usePickerInput({
|
|||
triggerOpen(true);
|
||||
} else if (!typing.value) {
|
||||
// Let popup panel handle keyboard
|
||||
forwardKeyDown(e);
|
||||
forwardKeydown(e);
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -149,13 +149,13 @@ export default function usePickerInput({
|
|||
watch(value, () => {
|
||||
valueChangedRef.value = true;
|
||||
});
|
||||
const globalMouseDownEvent = ref();
|
||||
const globalMousedownEvent = ref();
|
||||
// Global click handler
|
||||
watchEffect(
|
||||
() =>
|
||||
globalMouseDownEvent.value &&
|
||||
globalMouseDownEvent.value()(
|
||||
(globalMouseDownEvent.value = addGlobalMouseDownEvent((e: MouseEvent) => {
|
||||
globalMousedownEvent.value &&
|
||||
globalMousedownEvent.value()(
|
||||
(globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
|
||||
const target = getTargetFromEvent(e);
|
||||
|
||||
if (open) {
|
||||
|
@ -176,7 +176,7 @@ export default function usePickerInput({
|
|||
),
|
||||
);
|
||||
onBeforeUnmount(() => {
|
||||
globalMouseDownEvent.value && globalMouseDownEvent.value();
|
||||
globalMousedownEvent.value && globalMousedownEvent.value();
|
||||
});
|
||||
|
||||
return [inputProps, { focused, typing }];
|
||||
|
|
|
@ -46,7 +46,7 @@ export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year'
|
|||
export type PickerMode = Exclude<PanelMode, 'datetime' | 'decade'>;
|
||||
|
||||
export type PanelRefProps = {
|
||||
onKeyDown?: (e: KeyboardEvent) => boolean;
|
||||
onKeydown?: (e: KeyboardEvent) => boolean;
|
||||
onBlur?: (e: FocusEvent) => void;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
@ -103,8 +103,8 @@ export type Components = {
|
|||
export type RangeList = {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
onMouseEnter: () => void;
|
||||
onMouseLeave: () => void;
|
||||
onMouseenter: () => void;
|
||||
onMouseleave: () => void;
|
||||
}[];
|
||||
|
||||
export type CustomFormat<DateType> = (value: DateType) => string;
|
||||
|
|
|
@ -4,7 +4,7 @@ import DateHeader from './DateHeader';
|
|||
import type { PanelSharedProps } from '../../interface';
|
||||
import { WEEK_DAY_COUNT } from '../../utils/dateUtil';
|
||||
import type { KeyboardConfig } from '../../utils/uiUtil';
|
||||
import { createKeyDownHandler } from '../../utils/uiUtil';
|
||||
import { createKeydownHandler } from '../../utils/uiUtil';
|
||||
import classNames from '../../../_util/classNames';
|
||||
import useMergeProps from '../../hooks/useMergeProps';
|
||||
|
||||
|
@ -38,8 +38,8 @@ function DatePanel<DateType>(_props: DatePanelProps<DateType>) {
|
|||
const panelPrefixCls = `${prefixCls}-${panelName}-panel`;
|
||||
// ======================= Keyboard =======================
|
||||
operationRef.value = {
|
||||
onKeyDown: (event: KeyboardEvent) =>
|
||||
createKeyDownHandler(event, {
|
||||
onKeydown: (event: KeyboardEvent) =>
|
||||
createKeydownHandler(event, {
|
||||
onLeftRight: diff => {
|
||||
onSelect(generateConfig.addDate(value || viewDate, diff), 'key');
|
||||
},
|
||||
|
|
|
@ -54,7 +54,7 @@ function DatetimePanel<DateType>(_props: DatetimePanelProps<DateType>) {
|
|||
};
|
||||
|
||||
operationRef.value = {
|
||||
onKeyDown: (event: KeyboardEvent) => {
|
||||
onKeydown: (event: KeyboardEvent) => {
|
||||
// Switch active panel
|
||||
if (event.which === KeyCode.TAB) {
|
||||
const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1);
|
||||
|
@ -71,8 +71,8 @@ function DatetimePanel<DateType>(_props: DatetimePanelProps<DateType>) {
|
|||
if (activePanel.value) {
|
||||
const ref = activePanel.value === 'date' ? dateOperationRef : timeOperationRef;
|
||||
|
||||
if (ref.value && ref.value.onKeyDown) {
|
||||
ref.value.onKeyDown(event);
|
||||
if (ref.value && ref.value.onKeydown) {
|
||||
ref.value.onKeydown(event);
|
||||
}
|
||||
|
||||
return true;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import DecadeHeader from './DecadeHeader';
|
||||
import DecadeBody, { DECADE_COL_COUNT } from './DecadeBody';
|
||||
import type { PanelSharedProps } from '../../interface';
|
||||
import { createKeyDownHandler } from '../../utils/uiUtil';
|
||||
import { createKeydownHandler } from '../../utils/uiUtil';
|
||||
import useMergeProps from '../../hooks/useMergeProps';
|
||||
|
||||
export type DecadePanelProps<DateType> = PanelSharedProps<DateType>;
|
||||
|
@ -25,8 +25,8 @@ function DecadePanel<DateType>(_props: DecadePanelProps<DateType>) {
|
|||
|
||||
// ======================= Keyboard =======================
|
||||
operationRef.value = {
|
||||
onKeyDown: (event: KeyboardEvent) =>
|
||||
createKeyDownHandler(event, {
|
||||
onKeydown: (event: KeyboardEvent) =>
|
||||
createKeydownHandler(event, {
|
||||
onLeftRight: diff => {
|
||||
onSelect(generateConfig.addYear(viewDate, diff * DECADE_UNIT_DIFF), 'key');
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@ import MonthHeader from './MonthHeader';
|
|||
import type { MonthCellRender } from './MonthBody';
|
||||
import MonthBody, { MONTH_COL_COUNT } from './MonthBody';
|
||||
import type { PanelSharedProps } from '../../interface';
|
||||
import { createKeyDownHandler } from '../../utils/uiUtil';
|
||||
import { createKeydownHandler } from '../../utils/uiUtil';
|
||||
import useMergeProps from '../../hooks/useMergeProps';
|
||||
|
||||
export type MonthPanelProps<DateType> = {
|
||||
|
@ -26,8 +26,8 @@ function MonthPanel<DateType>(_props: MonthPanelProps<DateType>) {
|
|||
|
||||
// ======================= Keyboard =======================
|
||||
operationRef.value = {
|
||||
onKeyDown: (event: KeyboardEvent) =>
|
||||
createKeyDownHandler(event, {
|
||||
onKeydown: (event: KeyboardEvent) =>
|
||||
createKeydownHandler(event, {
|
||||
onLeftRight: diff => {
|
||||
onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
|
||||
},
|
||||
|
|
|
@ -49,7 +49,7 @@ function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
|
|||
titleCell,
|
||||
headerCells,
|
||||
} = useMergeProps(_props);
|
||||
const { onDateMouseEnter, onDateMouseLeave, mode } = useInjectPanel();
|
||||
const { onDateMouseenter, onDateMouseleave, mode } = useInjectPanel();
|
||||
|
||||
const cellPrefixCls = `${prefixCls}-cell`;
|
||||
|
||||
|
@ -99,13 +99,13 @@ function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
|
|||
}
|
||||
}}
|
||||
onMouseenter={() => {
|
||||
if (!disabled && onDateMouseEnter) {
|
||||
onDateMouseEnter(currentDate);
|
||||
if (!disabled && onDateMouseenter) {
|
||||
onDateMouseenter(currentDate);
|
||||
}
|
||||
}}
|
||||
onMouseleave={() => {
|
||||
if (!disabled && onDateMouseLeave) {
|
||||
onDateMouseLeave(currentDate);
|
||||
if (!disabled && onDateMouseleave) {
|
||||
onDateMouseleave(currentDate);
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import QuarterHeader from './QuarterHeader';
|
||||
import QuarterBody from './QuarterBody';
|
||||
import type { PanelSharedProps } from '../../interface';
|
||||
import { createKeyDownHandler } from '../../utils/uiUtil';
|
||||
import { createKeydownHandler } from '../../utils/uiUtil';
|
||||
import useMergeProps from '../../hooks/useMergeProps';
|
||||
|
||||
export type QuarterPanelProps<DateType> = {} & PanelSharedProps<DateType>;
|
||||
|
@ -23,8 +23,8 @@ function QuarterPanel<DateType>(_props: QuarterPanelProps<DateType>) {
|
|||
|
||||
// ======================= Keyboard =======================
|
||||
operationRef.value = {
|
||||
onKeyDown: (event: KeyboardEvent) =>
|
||||
createKeyDownHandler(event, {
|
||||
onKeydown: (event: KeyboardEvent) =>
|
||||
createKeydownHandler(event, {
|
||||
onLeftRight: diff => {
|
||||
onSelect(generateConfig.addMonth(value || viewDate, diff * 3), 'key');
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@ import TimeHeader from './TimeHeader';
|
|||
import type { BodyOperationRef } from './TimeBody';
|
||||
import TimeBody from './TimeBody';
|
||||
import type { PanelSharedProps, DisabledTimes } from '../../interface';
|
||||
import { createKeyDownHandler } from '../../utils/uiUtil';
|
||||
import { createKeydownHandler } from '../../utils/uiUtil';
|
||||
import classNames from '../../../_util/classNames';
|
||||
import { ref } from '@vue/reactivity';
|
||||
import useMergeProps from '../../hooks/useMergeProps';
|
||||
|
@ -53,8 +53,8 @@ function TimePanel<DateType>(_props: TimePanelProps<DateType>) {
|
|||
const columnsCount = countBoolean([showHour, showMinute, showSecond, use12Hours]);
|
||||
|
||||
operationRef.value = {
|
||||
onKeyDown: (event: KeyboardEvent) =>
|
||||
createKeyDownHandler(event, {
|
||||
onKeydown: (event: KeyboardEvent) =>
|
||||
createKeydownHandler(event, {
|
||||
onLeftRight: diff => {
|
||||
activeColumnIndex.value = (activeColumnIndex.value + diff + columnsCount) % columnsCount;
|
||||
},
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import YearHeader from './YearHeader';
|
||||
import YearBody, { YEAR_COL_COUNT } from './YearBody';
|
||||
import type { PanelSharedProps, PanelMode } from '../../interface';
|
||||
import { createKeyDownHandler } from '../../utils/uiUtil';
|
||||
import { createKeydownHandler } from '../../utils/uiUtil';
|
||||
import useMergeProps from '../../hooks/useMergeProps';
|
||||
|
||||
export type YearPanelProps<DateType> = {
|
||||
|
@ -28,8 +28,8 @@ function YearPanel<DateType>(_props: YearPanelProps<DateType>) {
|
|||
|
||||
// ======================= Keyboard =======================
|
||||
operationRef.value = {
|
||||
onKeyDown: (event: KeyboardEvent) =>
|
||||
createKeyDownHandler(event, {
|
||||
onKeydown: (event: KeyboardEvent) =>
|
||||
createKeydownHandler(event, {
|
||||
onLeftRight: diff => {
|
||||
onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
|
||||
},
|
||||
|
|
|
@ -32,9 +32,9 @@ export default function getRanges({
|
|||
|
||||
presetNode = (
|
||||
<>
|
||||
{rangeList.map(({ label, onClick, onMouseEnter, onMouseLeave }) => (
|
||||
{rangeList.map(({ label, onClick, onMouseenter, onMouseleave }) => (
|
||||
<li key={label} class={`${prefixCls}-preset`}>
|
||||
<Item onClick={onClick} onMouseenter={onMouseEnter} onMouseleave={onMouseLeave}>
|
||||
<Item onClick={onClick} onMouseenter={onMouseenter} onMouseleave={onMouseleave}>
|
||||
{label}
|
||||
</Item>
|
||||
</li>
|
||||
|
|
|
@ -66,7 +66,7 @@ export type KeyboardConfig = {
|
|||
onPageUpDown?: ((diff: number) => void) | null;
|
||||
onEnter?: (() => void) | null;
|
||||
};
|
||||
export function createKeyDownHandler(
|
||||
export function createKeydownHandler(
|
||||
event: KeyboardEvent,
|
||||
{ onLeftRight, onCtrlLeftRight, onUpDown, onPageUpDown, onEnter }: KeyboardConfig,
|
||||
): boolean {
|
||||
|
@ -197,7 +197,7 @@ type ClickEventHandler = (event: MouseEvent) => void;
|
|||
let globalClickFunc: ClickEventHandler | null = null;
|
||||
const clickCallbacks = new Set<ClickEventHandler>();
|
||||
|
||||
export function addGlobalMouseDownEvent(callback: ClickEventHandler) {
|
||||
export function addGlobalMousedownEvent(callback: ClickEventHandler) {
|
||||
if (!globalClickFunc && typeof window !== 'undefined' && window.addEventListener) {
|
||||
globalClickFunc = (e: MouseEvent) => {
|
||||
// Clone a new list to avoid repeat trigger events
|
||||
|
|
Loading…
Reference in New Issue