refactor Button tsx

ant-design · May 16, 2017 · 705ab80 · 705ab80
1 parent 665e398
commit 705ab80
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 29 deletions.
diff --git a/components/button/PropsType.tsx b/components/button/PropsType.tsx
@@ -1,23 +1,35 @@
-interface ButtonProps {
+import { NativeProps, WebProps } from '../baseType';
+
+export interface ButtonProps {
   type?: 'primary' | 'warning' | 'ghost';
   size?: 'large' | 'small';
   activeStyle?: boolean|Object;
   disabled?: boolean;
-  onClick?: (x: any) => void;
-  style?: Object|Array<Object>;
-  /** web only */
+  onClick?: (x?: any) => void;
+  loading?: boolean;
+}
+
+export interface ButtonWebProps extends WebProps, ButtonProps {
   inline?: boolean;
   across?: boolean;
-  loading?: boolean;
-  icon?: any;
-  prefixCls?: string;
-  className?: string;
-  /** rn only */
+  icon?: string;
+}
+
+export interface ButtonNativeProps extends NativeProps, ButtonProps {
   onPressIn?: (x?: any) => void;
   onPressOut?: (x?: any) => void;
   onShowUnderlay?: (x?: any) => void;
   onHideUnderlay?: (x?: any) => void;
-  styles?: any;
+  styles?: {
+    primaryRawText?: {},
+    warningRawText?: {},
+    ghostRawText?: {},
+    largeRawText?: {},
+    smallRawText?: {},
+    disabledRawText?: {},
+    wrapperStyle?: {},
+    disabledRaw?: {},
+    container?: {},
+    indicator?: {},
+  };
 }
-
-export default ButtonProps;
diff --git a/components/button/index.tsx b/components/button/index.tsx
@@ -2,9 +2,9 @@
 import React from 'react';
 import { TouchableHighlight, Text, StyleSheet, View, ActivityIndicator } from 'react-native';
 import buttonStyles from './style/index';
-import tsProps from './PropsType';
+import { ButtonNativeProps } from './PropsType';
 
-export default class Button extends React.Component<tsProps, any> {
+export default class Button extends React.Component<ButtonNativeProps, any> {
   static defaultProps = {
     pressIn: false,
     disabled: false,
@@ -63,6 +63,7 @@ export default class Button extends React.Component<tsProps, any> {
       size = 'large', type = 'default', disabled, activeStyle, onClick, style,
       styles, loading, ...restProps,
     } = this.props;
+    const buttonStyles = styles!;
 
     ['activeOpacity', 'delayPressOut', 'underlayColor', 'onPress', 'onPressIn',
      'onPressOut', 'onShowUnderlay', 'onHideUnderlay'].forEach((prop) => {
@@ -72,28 +73,28 @@ export default class Button extends React.Component<tsProps, any> {
      });
 
     const textStyle = [
-      styles[`${size}RawText`],
-      styles[`${type}RawText`],
-      disabled && styles.disabledRawText,
-      this.state.pressIn && styles[`${type}HighlightText`],
+      buttonStyles[`${size}RawText`],
+      buttonStyles[`${type}RawText`],
+      disabled && buttonStyles.disabledRawText,
+      this.state.pressIn && buttonStyles[`${type}HighlightText`],
     ];
 
     const wrapperStyle = [
-      styles.wrapperStyle,
-      styles[`${size}Raw`],
-      styles[`${type}Raw`],
-      disabled && styles.disabledRaw,
-      this.state.pressIn && activeStyle && styles[`${type}Highlight`],
+      buttonStyles.wrapperStyle,
+      buttonStyles[`${size}Raw`],
+      buttonStyles[`${type}Raw`],
+      disabled && buttonStyles.disabledRaw,
+      this.state.pressIn && activeStyle && buttonStyles[`${type}Highlight`],
       activeStyle && this.state.touchIt && activeStyle,
       style,
     ];
 
     const underlayColor = StyleSheet.flatten(
-      styles[activeStyle ? `${type}Highlight` : `${type}Raw`],
+      buttonStyles[activeStyle ? `${type}Highlight` : `${type}Raw`],
     ).backgroundColor;
 
     const indicatorColor = (StyleSheet.flatten(
-      this.state.pressIn ? styles[`${type}HighlightText`] : styles[`${type}RawText`],
+      this.state.pressIn ? buttonStyles[`${type}HighlightText`] : buttonStyles[`${type}RawText`],
     ) as any).color;
 
     return (
@@ -110,11 +111,11 @@ export default class Button extends React.Component<tsProps, any> {
         disabled={disabled}
         {...restProps}
       >
-        <View style={styles.container}>
+        <View style={buttonStyles.container}>
           {
             loading ? (
               <ActivityIndicator
-                style={styles.indicator}
+                style={buttonStyles.indicator}
                 animating
                 color={indicatorColor}
                 size="small"

diff --git a/components/button/index.web.tsx b/components/button/index.web.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import Icon from '../icon/index.web';
-import tsProps from './PropsType';
+import { ButtonWebProps } from './PropsType';
 import Touchable from 'rc-touchable';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
@@ -25,7 +25,7 @@ function insertSpace(child) {
   return child;
 }
 
-class Button extends React.Component<tsProps, any> {
+class Button extends React.Component<ButtonWebProps, any> {
   static defaultProps = {
     prefixCls: 'am-button',
     size: 'large',