fix(button): use React.HTMLProps for button's props (ant-design#10229)

louisptremblay · May 4, 2018 · 6019245 · 6019245
1 parent 3fd9397
commit 6019245
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import Icon from '../icon';
+import { Omit } from '../_util/type';
 import Group from './button-group';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
@@ -38,29 +39,26 @@ export type ButtonType = 'default' | 'primary' | 'ghost' | 'dashed' | 'danger';
 export type ButtonShape = 'circle' | 'circle-outline';
 export type ButtonSize = 'small' | 'default' | 'large';
 
-export interface ButtonProps {
+export interface BaseButtonProps<T> extends Omit<React.HTMLProps<T>, 'size'> {
   type?: ButtonType;
   htmlType?: string;
   icon?: string;
   shape?: ButtonShape;
   size?: ButtonSize;
-  onClick?: React.FormEventHandler<any>;
-  onMouseUp?: React.FormEventHandler<any>;
-  onMouseDown?: React.FormEventHandler<any>;
-  onKeyPress?: React.KeyboardEventHandler<any>;
-  onKeyDown?: React.KeyboardEventHandler<any>;
-  tabIndex?: number;
   loading?: boolean | { delay?: number };
-  disabled?: boolean;
-  style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
   ghost?: boolean;
-  target?: string;
-  href?: string;
-  download?: string;
 }
 
+export interface AnchorButtonProps extends BaseButtonProps<HTMLAnchorElement> {
+  href: string;
+}
+
+export interface NativeButtonProps extends BaseButtonProps<HTMLButtonElement> {}
+
+export type ButtonProps = AnchorButtonProps | NativeButtonProps;
+
 export default class Button extends React.Component<ButtonProps, any> {
   static Group: typeof Group;
   static __ANT_BUTTON = true;
@@ -143,15 +141,15 @@ export default class Button extends React.Component<ButtonProps, any> {
     }
   }
 
-  handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     // Add click effect
     this.setState({ clicked: true });
     clearTimeout(this.timeout);
     this.timeout = window.setTimeout(() => this.setState({ clicked: false }), 500);
 
     const onClick = this.props.onClick;
     if (onClick) {
-      onClick(e);
+      (onClick as (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void)(e);
     }
   }
 
@@ -180,7 +178,7 @@ export default class Button extends React.Component<ButtonProps, any> {
         break;
     }
 
-    const ComponentProp = others.href ? 'a' : 'button';
+    const ComponentProp = (others as AnchorButtonProps).href ? 'a' : 'button';
 
     const classes = classNames(prefixCls, className, {
       [`${prefixCls}-${type}`]: type,
@@ -201,7 +199,7 @@ export default class Button extends React.Component<ButtonProps, any> {
     return (
       <ComponentProp
         {...omit(others, ['loading'])}
-        type={others.href ? undefined : (htmlType || 'button')}
+        type={(others as AnchorButtonProps).href ? undefined : (htmlType || 'button')}
         className={classes}
         onClick={this.handleClick}
       >

diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx
@@ -9,7 +9,7 @@ const ButtonGroup = Button.Group;
 export interface DropdownButtonProps extends ButtonGroupProps, DropDownProps {
   type?: 'primary' | 'ghost' | 'dashed';
   disabled?: boolean;
-  onClick?: React.MouseEventHandler<any>;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
   children?: any;
 }
 

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.FormEventHandler<any>;
-  moveToRight?: React.FormEventHandler<any>;
+  moveToLeft?: React.FormEventHandler<HTMLButtonElement>;
+  moveToRight?: React.FormEventHandler<HTMLButtonElement>;
   leftActive?: boolean;
   rightActive?: boolean;
 }