fix: update EventHandlerNonNull to EventHandler

Author: tangjinzhou

components/_util/EventInterface.ts

@@ -0,0 +1,10 @@
+export type FocusEventHandler = (e: FocusEvent) => void;
+export type MouseEventHandler = (e: MouseEvent) => void;
+export type KeyboardEventHandler = (e: KeyboardEvent) => void;
+export type ChangeEvent = Event & {
+  target: {
+    value?: string | undefined;
+  };
+};
+
+export type EventHandler = (...args: any[]) => void;

components/checkbox/Checkbox.tsx

@@ -6,6 +6,7 @@ import hasProp, { getOptionProps, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 import type { RadioChangeEvent } from '../radio/interface';
+import type { EventHandler } from '../_util/EventInterface';
 function noop() {}
 
 export default defineComponent({
@@ -127,8 +128,8 @@ export default defineComponent({
       <label
         class={classString}
         style={style}
-        onMouseenter={onMouseenter as EventHandlerNonNull}
-        onMouseleave={onMouseleave as EventHandlerNonNull}
+        onMouseenter={onMouseenter as EventHandler}
+        onMouseleave={onMouseleave as EventHandler}
       >
         <VcCheckbox {...checkboxProps} class={checkboxClass} ref="vcCheckbox" />
         {children.length ? <span>{children}</span> : null}

components/date-picker/interface.tsx

@@ -1,5 +1,6 @@
 import type moment from 'moment';
 import type { CSSProperties } from 'vue';
+import type { EventHandler } from '../_util/EventInterface';
 import type { VueNode } from '../_util/type';
 import { tuple } from '../_util/type';
 
@@ -37,8 +38,8 @@ export interface PickerProps {
   disabledDate?: (current: moment.Moment | null) => boolean;
   dateRender?: (current: moment.Moment, today: moment.Moment) => any;
   autofocus?: boolean;
-  onFocus?: EventHandlerNonNull;
-  onBlur?: EventHandlerNonNull;
+  onFocus?: EventHandler;
+  onBlur?: EventHandler;
 }
 
 export interface SinglePickerProps {

components/input-number/index.tsx

@@ -8,6 +8,7 @@ import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import VcInputNumber from '../vc-input-number/src';
 import { defaultConfigProvider } from '../config-provider';
 import { tuple, withInstall } from '../_util/type';
+import type { EventHandler } from '../_util/EventInterface';
 
 const inputNumberProps = {
   prefixCls: PropTypes.string,
@@ -28,7 +29,7 @@ const inputNumberProps = {
   precision: PropTypes.number,
   autofocus: PropTypes.looseBool,
   onPressEnter: {
-    type: Function as PropType<EventHandlerNonNull>,
+    type: Function as PropType<EventHandler>,
   },
   onChange: Function as PropType<(num: number) => void>,
 };

components/typography/Base.tsx

@@ -30,6 +30,7 @@ import {
 } from 'vue';
 import type { AutoSizeType } from '../input/ResizableTextArea';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import type { EventHandler } from '../_util/EventInterface';
 
 export type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
 
@@ -58,7 +59,7 @@ export interface EllipsisConfig {
   expandable?: boolean;
   suffix?: string;
   symbol?: string;
-  onExpand?: EventHandlerNonNull;
+  onExpand?: EventHandler;
   onEllipsis?: (ellipsis: boolean) => void;
   tooltip?: boolean;
 }

components/vc-select/OptionList.tsx

@@ -16,6 +16,7 @@ import type {
 } from './interface';
 import type { RawValueType, FlattenOptionsType } from './interface/generator';
 import useMemo from '../_util/hooks/useMemo';
+import type { EventHandler } from '../_util/EventInterface';
 export interface OptionListProps {
   prefixCls: string;
   id: string;
@@ -37,10 +38,10 @@ export interface OptionListProps {
   onToggleOpen: (open?: boolean) => void;
   /** Tell Select that some value is now active to make accessibility work */
   onActiveValue: OnActiveValue;
-  onScroll: EventHandlerNonNull;
+  onScroll: EventHandler;
 
   /** Tell Select that mouse enter the popup to force re-render */
-  onMouseenter?: EventHandlerNonNull;
+  onMouseenter?: EventHandler;
 }
 
 const OptionListProps = {
@@ -90,7 +91,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
     // =========================== List ===========================
     const listRef = createRef();
 
-    const onListMouseDown: EventHandlerNonNull = event => {
+    const onListMouseDown: EventHandler = event => {
       event.preventDefault();
     };
 

components/vc-select/Selector/Input.tsx

@@ -5,6 +5,7 @@ import PropTypes from '../../_util/vue-types';
 import type { RefObject } from '../../_util/createRef';
 import antInput from '../../_util/antInputDirective';
 import classNames from '../../_util/classNames';
+import type { EventHandler } from '../../_util/EventInterface';
 
 interface InputProps {
   prefixCls: string;
@@ -21,19 +22,43 @@ interface InputProps {
   /** Pass accessibility props to input */
   attrs: object;
   inputRef: RefObject;
-  onKeydown: EventHandlerNonNull;
-  onMousedown: EventHandlerNonNull;
-  onChange: EventHandlerNonNull;
-  onPaste: EventHandlerNonNull;
-  onCompositionstart: EventHandlerNonNull;
-  onCompositionend: EventHandlerNonNull;
-  onFocus: EventHandlerNonNull;
-  onBlur: EventHandlerNonNull;
+  onKeydown: EventHandler;
+  onMousedown: EventHandler;
+  onChange: EventHandler;
+  onPaste: EventHandler;
+  onCompositionstart: EventHandler;
+  onCompositionend: EventHandler;
+  onFocus: EventHandler;
+  onBlur: EventHandler;
 }
 
-const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTimeout: any }>({
+const Input = defineComponent({
   name: 'Input',
   inheritAttrs: false,
+  props: {
+    inputRef: PropTypes.any,
+    prefixCls: PropTypes.string,
+    id: PropTypes.string,
+    inputElement: PropTypes.any,
+    disabled: PropTypes.looseBool,
+    autofocus: PropTypes.looseBool,
+    autocomplete: PropTypes.string,
+    editable: PropTypes.looseBool,
+    accessibilityIndex: PropTypes.number,
+    value: PropTypes.string,
+    open: PropTypes.looseBool,
+    tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Pass accessibility props to input */
+    attrs: PropTypes.object,
+    onKeydown: PropTypes.func,
+    onMousedown: PropTypes.func,
+    onChange: PropTypes.func,
+    onPaste: PropTypes.func,
+    onCompositionstart: PropTypes.func,
+    onCompositionend: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+  },
   setup(props) {
     if (process.env.NODE_ENV === 'test') {
       onMounted(() => {
@@ -47,7 +72,7 @@ const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTim
     }
     return {
       blurTimeout: null,
-      VCSelectContainerEvent: inject('VCSelectContainerEvent'),
+      VCSelectContainerEvent: inject('VCSelectContainerEvent') as any,
     };
   },
   render() {
@@ -164,29 +189,29 @@ const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTim
   },
 });
 
-Input.props = {
-  inputRef: PropTypes.any,
-  prefixCls: PropTypes.string,
-  id: PropTypes.string,
-  inputElement: PropTypes.any,
-  disabled: PropTypes.looseBool,
-  autofocus: PropTypes.looseBool,
-  autocomplete: PropTypes.string,
-  editable: PropTypes.looseBool,
-  accessibilityIndex: PropTypes.number,
-  value: PropTypes.string,
-  open: PropTypes.looseBool,
-  tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Pass accessibility props to input */
-  attrs: PropTypes.object,
-  onKeydown: PropTypes.func,
-  onMousedown: PropTypes.func,
-  onChange: PropTypes.func,
-  onPaste: PropTypes.func,
-  onCompositionstart: PropTypes.func,
-  onCompositionend: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-};
+// Input.props = {
+//   inputRef: PropTypes.any,
+//   prefixCls: PropTypes.string,
+//   id: PropTypes.string,
+//   inputElement: PropTypes.any,
+//   disabled: PropTypes.looseBool,
+//   autofocus: PropTypes.looseBool,
+//   autocomplete: PropTypes.string,
+//   editable: PropTypes.looseBool,
+//   accessibilityIndex: PropTypes.number,
+//   value: PropTypes.string,
+//   open: PropTypes.looseBool,
+//   tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+//   /** Pass accessibility props to input */
+//   attrs: PropTypes.object,
+//   onKeydown: PropTypes.func,
+//   onMousedown: PropTypes.func,
+//   onChange: PropTypes.func,
+//   onPaste: PropTypes.func,
+//   onCompositionstart: PropTypes.func,
+//   onCompositionend: PropTypes.func,
+//   onFocus: PropTypes.func,
+//   onBlur: PropTypes.func,
+// };
 
 export default Input;

components/vc-select/Selector/index.tsx

@@ -19,6 +19,7 @@ import { defineComponent } from 'vue';
 import createRef from '../../_util/createRef';
 import PropTypes from '../../_util/vue-types';
 import type { VueNode } from '../../_util/type';
+import type { EventHandler } from '../../_util/EventInterface';
 
 export interface SelectorProps {
   id: string;
@@ -57,7 +58,7 @@ export interface SelectorProps {
   onSearch: (searchText: string, fromTyping: boolean, isCompositing: boolean) => boolean;
   onSearchSubmit: (searchText: string) => void;
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
-  onInputKeyDown?: EventHandlerNonNull;
+  onInputKeyDown?: EventHandler;
 
   /**
    * @private get real dom for trigger align.
@@ -106,7 +107,7 @@ const Selector = defineComponent<SelectorProps>({
     onSearch: PropTypes.func,
     onSearchSubmit: PropTypes.func,
     onSelect: PropTypes.func,
-    onInputKeyDown: PropTypes.func,
+    onInputKeyDown: { type: Function as PropType<EventHandler> },
 
     /**
      * @private get real dom for trigger align.

components/vc-select/Selector/interface.ts

@@ -2,6 +2,7 @@ import type { RefObject } from '../../_util/createRef';
 import type { VNodeChild } from 'vue';
 import type { Mode } from '../interface';
 import type { LabelValueType } from '../interface/generator';
+import type { EventHandler } from '../../_util/EventInterface';
 
 export interface InnerSelectorProps {
   prefixCls: string;
@@ -18,10 +19,10 @@ export interface InnerSelectorProps {
   accessibilityIndex: number;
   open: boolean;
   tabindex?: number | string;
-  onInputKeyDown: EventHandlerNonNull;
-  onInputMouseDown: EventHandlerNonNull;
-  onInputChange: EventHandlerNonNull;
-  onInputPaste: EventHandlerNonNull;
-  onInputCompositionStart: EventHandlerNonNull;
-  onInputCompositionEnd: EventHandlerNonNull;
+  onInputKeyDown: EventHandler;
+  onInputMouseDown: EventHandler;
+  onInputChange: EventHandler;
+  onInputPaste: EventHandler;
+  onInputCompositionStart: EventHandler;
+  onInputCompositionEnd: EventHandler;
 }

components/vc-select/generate.tsx

@@ -38,7 +38,7 @@ import { getSeparatedContent } from './utils/valueUtil';
 import useSelectTriggerControl from './hooks/useSelectTriggerControl';
 import useCacheDisplayValue from './hooks/useCacheDisplayValue';
 import useCacheOptions from './hooks/useCacheOptions';
-import type { CSSProperties, DefineComponent, VNode, VNodeChild } from 'vue';
+import type { CSSProperties, DefineComponent, PropType, VNode, VNodeChild } from 'vue';
 import {
   computed,
   defineComponent,
@@ -54,6 +54,7 @@ import PropTypes, { withUndefined } from '../_util/vue-types';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import warning from '../_util/warning';
 import isMobile from '../vc-util/isMobile';
+import type { EventHandler } from '../_util/EventInterface';
 
 const DEFAULT_OMIT_PROPS = [
   'children',
@@ -148,7 +149,7 @@ export const BaseProps = () => ({
   onDropdownVisibleChange: PropTypes.func,
   onSelect: PropTypes.func,
   onDeselect: PropTypes.func,
-  onInputKeyDown: PropTypes.func,
+  onInputKeyDown: { type: Function as PropType<EventHandler> },
   onClick: PropTypes.func,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
@@ -244,20 +245,20 @@ export interface SelectProps<OptionsType extends object[], ValueType> {
   tabindex?: number | string;
 
   // Events
-  onKeyup?: EventHandlerNonNull;
-  onKeydown?: EventHandlerNonNull;
-  onPopupScroll?: EventHandlerNonNull;
+  onKeyup?: EventHandler;
+  onKeydown?: EventHandler;
+  onPopupScroll?: EventHandler;
   onDropdownVisibleChange?: (open: boolean) => void;
   onSelect?: (value: SingleType<ValueType>, option: OptionsType[number]) => void;
   onDeselect?: (value: SingleType<ValueType>, option: OptionsType[number]) => void;
-  onInputKeyDown?: EventHandlerNonNull;
-  onClick?: EventHandlerNonNull;
+  onInputKeyDown?: EventHandler;
+  onClick?: EventHandler;
   onChange?: (value: ValueType, option: OptionsType[number] | OptionsType) => void;
-  onBlur?: EventHandlerNonNull;
-  onFocus?: EventHandlerNonNull;
-  onMousedown?: EventHandlerNonNull;
-  onMouseenter?: EventHandlerNonNull;
-  onMouseleave?: EventHandlerNonNull;
+  onBlur?: EventHandler;
+  onFocus?: EventHandler;
+  onMousedown?: EventHandler;
+  onMouseenter?: EventHandler;
+  onMouseleave?: EventHandler;
 
   // Motion
   choiceTransitionName?: string;
@@ -1326,7 +1327,7 @@ export default function generateSelector<
             getTriggerDOMNode={() => selectorDomRef.current}
           >
             <Selector
-              {...this.$props}
+              {...(this.$props as any)}
               domRef={selectorDomRef}
               prefixCls={prefixCls}
               inputElement={customizeInputElement}