type: Button type optimization (#39533)

* type: type optimization * fix type * fix type * fix type * update docs
ant-design · Dec 15, 2022 · 120db80 · 120db80
1 parent b04b759
commit 120db80
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 24 deletions.
diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx
@@ -65,7 +65,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     );
   };
 
-  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     const { actionFn } = props;
     if (clickedRef.current) {
       return;
@@ -75,7 +75,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
       onInternalClose();
       return;
     }
-    let returnValueOfOnOk;
+    let returnValueOfOnOk: PromiseLike<any>;
     if (props.emitEvent) {
       returnValueOfOnOk = actionFn(e);
       if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {

diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -119,13 +119,13 @@ export interface BaseButtonProps {
 export type AnchorButtonProps = {
   href: string;
   target?: string;
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 } & BaseButtonProps &
   Omit<React.AnchorHTMLAttributes<any>, 'type' | 'onClick'>;
 
 export type NativeButtonProps = {
   htmlType?: ButtonHTMLType;
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 } & BaseButtonProps &
   Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'>;
 
@@ -141,7 +141,10 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
 
 type Loading = number | boolean;
 
-const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
+const InternalButton: React.ForwardRefRenderFunction<
+  HTMLButtonElement | HTMLAnchorElement,
+  ButtonProps
+> = (props, ref) => {
   const {
     loading = false,
     prefixCls: customizePrefixCls,
@@ -175,7 +178,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const groupSize = React.useContext(GroupSizeContext);
   const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
-  const buttonRef = (ref as any) || React.createRef<HTMLElement>();
+  const buttonRef = (ref as any) || React.createRef<HTMLAnchorElement | HTMLButtonElement>();
   const isNeedInserted = () =>
     React.Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
 
@@ -316,7 +319,10 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   return wrapSSR(buttonNode);
 };
 
-const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
+const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  InternalButton,
+) as CompoundedComponent;
+
 if (process.env.NODE_ENV !== 'production') {
   Button.displayName = 'Button';
 }

diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -64,7 +64,7 @@ Different button styles can be generated by setting Button properties. The recom
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` |  |
-| onClick | Set the handler to handle `click` event | (event) => void | - |  |
+| onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - |  |
 
 It accepts all props which native buttons support.
 

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -69,7 +69,7 @@ group:
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event) => void | - |  |
+| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |  |
 
 支持原生 button 的其他所有属性。
 

diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx
@@ -20,7 +20,7 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
   danger?: boolean;
   disabled?: boolean;
   loading?: ButtonProps['loading'];
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onClick?: React.MouseEventHandler<HTMLElement>;
   icon?: React.ReactNode;
   href?: string;
   children?: React.ReactNode;

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -45,9 +45,9 @@ export interface ModalProps {
   /** 是否显示右上角的关闭按钮 */
   closable?: boolean;
   /** 点击确定回调 */
-  onOk?: (e: React.MouseEvent<HTMLElement>) => void;
+  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
-  onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
+  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   afterClose?: () => void;
   /** 垂直居中 */
   centered?: boolean;
@@ -201,11 +201,7 @@ const Modal: React.FC<ModalProps> = (props) => {
         <Dialog
           width={width}
           {...restProps}
-          getContainer={
-            getContainer === undefined
-              ? (getContextPopupContainer as getContainerFunc)
-              : getContainer
-          }
+          getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
           prefixCls={prefixCls}
           rootClassName={hashId}
           wrapClassName={wrapClassNameExtended}

diff --git a/components/modal/PurePanel.tsx b/components/modal/PurePanel.tsx
@@ -38,8 +38,8 @@ export function renderFooter(
     | 'okButtonProps'
     | 'cancelButtonProps'
   > & {
-    onOk?: React.MouseEventHandler;
-    onCancel?: React.MouseEventHandler;
+    onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
   },
 ) {
   const {

diff --git a/components/popconfirm/PurePanel.tsx b/components/popconfirm/PurePanel.tsx
@@ -32,8 +32,8 @@ export interface OverlayProps
   > {
   prefixCls: string;
   close?: Function;
-  onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
-  onCancel?: React.MouseEventHandler<HTMLButtonElement>;
+  onConfirm?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 }
 
 export const Overlay: React.FC<OverlayProps> = (props) => {

diff --git a/components/select/demo/custom-dropdown-menu.tsx b/components/select/demo/custom-dropdown-menu.tsx
@@ -14,7 +14,7 @@ const App: React.FC = () => {
     setName(event.target.value);
   };
 
-  const addItem = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const addItem = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     e.preventDefault();
     setItems([...items, name || `New item ${index++}`]);
     setName('');

diff --git a/components/transfer/operation.tsx b/components/transfer/operation.tsx
@@ -8,8 +8,8 @@ export interface TransferOperationProps {
   className?: string;
   leftArrowText?: string;
   rightArrowText?: string;
-  moveToLeft?: React.MouseEventHandler<HTMLButtonElement>;
-  moveToRight?: React.MouseEventHandler<HTMLButtonElement>;
+  moveToLeft?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  moveToRight?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
   leftActive?: boolean;
   rightActive?: boolean;
   style?: React.CSSProperties;