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

View File

@ -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>;

View File

@ -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

View File

@ -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}

View File

@ -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

View File

@ -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 }];

View File

@ -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;

View File

@ -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');
},

View File

@ -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;

View File

@ -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');
},

View File

@ -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');
},

View File

@ -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);
}
}}
>

View File

@ -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');
},

View File

@ -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;
},

View File

@ -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');
},

View File

@ -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>

View File

@ -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