refactor: styles #154

ant-design · Dec 8, 2018 · b4a25ed · b4a25ed
1 parent b845165
commit b4a25ed
Show file tree

Hide file tree

Showing 11 changed files with 409 additions and 394 deletions.
diff --git a/components/style/index.tsx b/components/style/index.tsx
@@ -2,7 +2,7 @@ import deepmerge from 'deepmerge';
 import React, { useContext } from 'react';
 import defaultTheme from './themes/default';
 export const ThemeContext = React.createContext(defaultTheme);
-export type Theme = typeof defaultTheme;
+export type Theme = typeof defaultTheme & { [key: string]: any };
 export type PartialTheme = Partial<Theme>;
 export interface ThemeProviderProps {
   value?: PartialTheme;

diff --git a/components/tag/index.tsx b/components/tag/index.tsx
@@ -1,24 +1,16 @@
 // tslint:disable:jsx-no-multiline-js
 import React from 'react';
-import {
-  Platform,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Platform, StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle } from 'react-native';
+import { WithTheme, WithThemeStyles } from '../style';
 import { TagPropsType } from './PropsType';
-import TagStyle, { ITagStyle } from './style/index';
+import TagStyles, { TagStyle } from './style/index';
 
-export interface TagNativeProps extends TagPropsType {
-  styles?: ITagStyle;
+export interface TagNativeProps
+  extends TagPropsType,
+    WithThemeStyles<TagStyle> {
   style?: StyleProp<ViewStyle>;
 }
 
-const TagStyles = StyleSheet.create<any>(TagStyle);
-
 export default class Tag extends React.Component<TagNativeProps, any> {
   static defaultProps = {
     disabled: false,
@@ -29,7 +21,6 @@ export default class Tag extends React.Component<TagNativeProps, any> {
     afterClose() {},
     onChange() {},
     onLongPress() {},
-    styles: TagStyles,
   };
 
   closeDom: View | null;
@@ -67,7 +58,7 @@ export default class Tag extends React.Component<TagNativeProps, any> {
         }
       },
     );
-  }
+  };
 
   handleLongPress = () => {
     const { disabled, onLongPress } = this.props;
@@ -77,7 +68,7 @@ export default class Tag extends React.Component<TagNativeProps, any> {
     if (onLongPress) {
       onLongPress();
     }
-  }
+  };
 
   onTagClose = () => {
     if (this.props.onClose) {
@@ -89,10 +80,9 @@ export default class Tag extends React.Component<TagNativeProps, any> {
       },
       this.props.afterClose,
     );
-  }
+  };
 
-  onPressIn = () => {
-    const styles = this.props.styles!;
+  onPressIn = (styles: ReturnType<typeof TagStyles>) => () => {
     if (this.closeDom) {
       this.closeDom.setNativeProps({
         style: [
@@ -104,10 +94,9 @@ export default class Tag extends React.Component<TagNativeProps, any> {
         ],
       });
     }
-  }
+  };
 
-  onPressOut = () => {
-    const styles = this.props.styles!;
+  onPressOut = (styles: ReturnType<typeof TagStyles>) => () => {
     if (this.closeDom) {
       this.closeDom.setNativeProps({
         style: [
@@ -116,68 +105,78 @@ export default class Tag extends React.Component<TagNativeProps, any> {
         ],
       });
     }
-  }
+  };
 
   render() {
     const { children, disabled, small, closable, style } = this.props;
-    const styles = this.props.styles!;
     const selected = this.state.selected;
 
-    let wrapStyle;
-    let textStyle;
-    if (!selected && !disabled) {
-      wrapStyle = styles.normalWrap;
-      textStyle = styles.normalText;
-    }
-    if (selected && !disabled) {
-      wrapStyle = styles.activeWrap;
-      textStyle = styles.activeText;
-    }
-    if (disabled) {
-      wrapStyle = styles.disabledWrap;
-      textStyle = styles.disabledText;
-    }
-
-    const sizeWrapStyle = small ? styles.wrapSmall : {};
-    const sizeTextStyle = small ? styles.textSmall : {};
-
-    const closableDom =
-      closable && !small && !disabled ? (
-        <TouchableWithoutFeedback
-          onPressIn={this.onPressIn}
-          onPressOut={this.onPressOut}
-          onPress={this.onTagClose}
-        >
-          <View
-            ref={(component: any) => ((this.closeDom as any) = component)}
-            style={[
-              styles.close,
-              Platform.OS === 'ios' ? styles.closeIOS : styles.closeAndroid,
-            ]}
-          >
-            <Text
-              style={[
-                styles.closeText,
-                Platform.OS === 'android' ? styles.closeTransform : {},
-              ]}
-            >
-              ×
-            </Text>
-          </View>
-        </TouchableWithoutFeedback>
-      ) : null;
-
-    return !this.state.closed ? (
-      <View style={[styles.tag, style]}>
-        <TouchableWithoutFeedback onPress={this.onPress} onLongPress={this.handleLongPress}>
-          <View style={[styles.wrap, sizeWrapStyle, wrapStyle]}>
-            <Text style={[styles.text, sizeTextStyle, textStyle]}>
-              {children}{' '}
-            </Text>
-          </View>
-        </TouchableWithoutFeedback>
-        {closableDom}
-      </View>
-    ) : null;
+    return (
+      <WithTheme styles={this.props.styles} themeStyles={TagStyles}>
+        {styles => {
+          let wrapStyle;
+          let textStyle;
+          if (!selected && !disabled) {
+            wrapStyle = styles.normalWrap;
+            textStyle = styles.normalText;
+          }
+          if (selected && !disabled) {
+            wrapStyle = styles.activeWrap;
+            textStyle = styles.activeText;
+          }
+          if (disabled) {
+            wrapStyle = styles.disabledWrap;
+            textStyle = styles.disabledText;
+          }
+
+          const sizeWrapStyle = small ? styles.wrapSmall : {};
+          const sizeTextStyle = small ? styles.textSmall : {};
+
+          const closableDom =
+            closable && !small && !disabled ? (
+              <TouchableWithoutFeedback
+                onPressIn={this.onPressIn(styles)}
+                onPressOut={this.onPressOut(styles)}
+                onPress={this.onTagClose}
+              >
+                <View
+                  ref={(component: any) => ((this.closeDom as any) = component)}
+                  style={[
+                    styles.close,
+                    Platform.OS === 'ios'
+                      ? styles.closeIOS
+                      : styles.closeAndroid,
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.closeText,
+                      Platform.OS === 'android' ? styles.closeTransform : {},
+                    ]}
+                  >
+                    ×
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            ) : null;
+
+          return !this.state.closed ? (
+            <View style={[styles.tag, style]}>
+              <TouchableWithoutFeedback
+                onPress={this.onPress}
+                onLongPress={this.handleLongPress}
+              >
+                <View style={[styles.wrap, sizeWrapStyle, wrapStyle]}>
+                  <Text style={[styles.text, sizeTextStyle, textStyle]}>
+                    {children}{' '}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+              {closableDom}
+            </View>
+          ) : null;
+        }}
+      </WithTheme>
+    );
   }
 }