refactor: checkbox #154

components/checkbox/AgreeItem.tsx

@@ -1,74 +1,65 @@
 import React from 'react';
-import {
-  ImageStyle,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { ImageStyle, StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle } from 'react-native';
+import { WithTheme, WithThemeStyles } from '../style';
 import Checkbox from './Checkbox';
 import { CheckboxPropsType } from './PropsType';
-import AgreeItemstyle, { ICheckboxStyle } from './style/index';
+import AgreeItemstyles, { CheckboxStyle } from './style/index';
 
-const refCheckbox = 'checkbox';
-
-export interface AgreeItemNativeProps extends CheckboxPropsType {
-  styles?: ICheckboxStyle;
+export interface AgreeItemProps
+  extends CheckboxPropsType,
+    WithThemeStyles<CheckboxStyle> {
   checkboxStyle?: StyleProp<ImageStyle>;
   style?: StyleProp<ViewStyle>;
 }
 
-const AgreeItemstyles = StyleSheet.create<any>(AgreeItemstyle);
-
-export default class AgreeItem extends React.Component<
-  AgreeItemNativeProps,
-  any
-> {
-  static defaultProps = {
-    styles: AgreeItemstyles,
-  };
+export default class AgreeItem extends React.Component<AgreeItemProps, any> {
+  checkbox: Checkbox | null;
 
   handleClick = () => {
-    const checkBox: Checkbox = this.refs[refCheckbox] as Checkbox;
-    checkBox.handleClick();
-  }
+    if (this.checkbox) {
+      this.checkbox.handleClick();
+    }
+  };
 
-  render(): JSX.Element {
-    // tslint:disable:prefer-const
-    let {
+  render() {
+    const {
       style,
       checkboxStyle,
       children,
       disabled,
       checked,
       defaultChecked,
       onChange,
-      styles,
     } = this.props;
-    styles = styles!;
-
-    let contentDom = !children ? null : React.isValidElement(children) ? (
-      children
-    ) : (
-      <Text>{children}</Text>
-    );
 
     return (
-      <TouchableWithoutFeedback onPress={this.handleClick}>
-        <View style={[styles.agreeItem, style]}>
-          <Checkbox
-            ref={refCheckbox}
-            style={[styles.agreeItemCheckbox, checkboxStyle]}
-            disabled={disabled}
-            checked={checked}
-            defaultChecked={defaultChecked}
-            onChange={onChange}
-          />
-          <View style={{ flex: 1 }}>{contentDom}</View>
-        </View>
-      </TouchableWithoutFeedback>
+      <WithTheme styles={this.props.styles} themeStyles={AgreeItemstyles}>
+        {styles => {
+          const contentDom = !children ? null : React.isValidElement(
+              children,
+            ) ? (
+            children
+          ) : (
+            <Text>{children}</Text>
+          );
+
+          return (
+            <TouchableWithoutFeedback onPress={this.handleClick}>
+              <View style={[styles.agreeItem, style]}>
+                <Checkbox
+                  ref={ref => (this.checkbox = ref)}
+                  style={[styles.agreeItemCheckbox, checkboxStyle]}
+                  disabled={disabled}
+                  checked={checked}
+                  defaultChecked={defaultChecked}
+                  onChange={onChange}
+                />
+                <View style={{ flex: 1 }}>{contentDom}</View>
+              </View>
+            </TouchableWithoutFeedback>
+          );
+        }}
+      </WithTheme>
     );
   }
 }

components/checkbox/Checkbox.tsx

@@ -1,45 +1,30 @@
 import React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-
-import { CheckboxPropsType } from './PropsType';
-import CheckboxStyle, { ICheckboxStyle } from './style/index';
+import { StyleProp, Text, TextStyle, TouchableWithoutFeedback, View } from 'react-native';
 import Icon from '../icon';
+import { WithTheme, WithThemeStyles } from '../style';
 import variables from '../style/themes/default';
+import { CheckboxPropsType } from './PropsType';
+import CheckboxStyles, { CheckboxStyle } from './style/index';
 
-export interface ICheckboxNativeProps extends CheckboxPropsType {
-  styles?: ICheckboxStyle;
+export interface CheckboxProps
+  extends CheckboxPropsType,
+    WithThemeStyles<CheckboxStyle> {
   style?: StyleProp<TextStyle>;
 }
 
-const CheckboxStyles = StyleSheet.create<any>(CheckboxStyle);
-
-export default class Checkbox extends React.Component<
-  ICheckboxNativeProps,
-  any
-> {
+export default class Checkbox extends React.Component<CheckboxProps, any> {
   static CheckboxItem: any;
   static AgreeItem: any;
 
-  static defaultProps = {
-    styles: CheckboxStyles,
-  };
-
-  constructor(props: CheckboxPropsType, context: any) {
+  constructor(props: CheckboxProps, context: any) {
     super(props, context);
 
     this.state = {
       checked: props.checked || props.defaultChecked || false,
     };
   }
 
-  componentWillReceiveProps(nextProps: CheckboxPropsType): void {
+  componentWillReceiveProps(nextProps: CheckboxProps): void {
     if (typeof nextProps.checked === 'boolean') {
       this.setState({
         checked: !!nextProps.checked,
@@ -63,43 +48,49 @@ export default class Checkbox extends React.Component<
   };
 
   render(): JSX.Element {
-    const { style, disabled, children, styles } = this.props;
+    const { style, disabled, children } = this.props;
     const checked = this.state.checked;
-    let icon;
-    if (checked) {
-      icon = disabled ? (
-        <Icon name="check-square" style={[styles!.icon, style]} />
-      ) : (
-        <Icon
-          name="check-square"
-          color={variables.brand_primary}
-          style={[styles!.icon, style]}
-        />
-      );
-    } else {
-      icon = disabled ? (
-        <Icon name="border" style={[styles!.icon, style]} />
-      ) : (
-        <Icon
-          name="border"
-          color={variables.brand_primary}
-          style={[styles!.icon, style]}
-        />
-      );
-    }
-
     return (
-      <TouchableWithoutFeedback onPress={this.handleClick}>
-        <View style={[styles!.wrapper]}>
-          {icon}
-          {typeof children === 'string' ? (
-            // tslint:disable-next-line:jsx-no-multiline-js
-            <Text style={styles!.iconRight}>{this.props.children}</Text>
-          ) : (
-            children
-          )}
-        </View>
-      </TouchableWithoutFeedback>
+      <WithTheme themeStyles={CheckboxStyles} styles={this.props.styles}>
+        {styles => {
+          let icon;
+          if (checked) {
+            icon = disabled ? (
+              <Icon name="check-square" style={[styles.icon, style]} />
+            ) : (
+              <Icon
+                name="check-square"
+                color={variables.brand_primary}
+                style={[styles.icon, style]}
+              />
+            );
+          } else {
+            icon = disabled ? (
+              <Icon name="border" style={[styles.icon, style]} />
+            ) : (
+              <Icon
+                name="border"
+                color={variables.brand_primary}
+                style={[styles.icon, style]}
+              />
+            );
+          }
+
+          return (
+            <TouchableWithoutFeedback onPress={this.handleClick}>
+              <View style={[styles.wrapper]}>
+                {icon}
+                {typeof children === 'string' ? (
+                  // tslint:disable-next-line:jsx-no-multiline-js
+                  <Text style={styles.iconRight}>{this.props.children}</Text>
+                ) : (
+                  children
+                )}
+              </View>
+            </TouchableWithoutFeedback>
+          );
+        }}
+      </WithTheme>
     );
   }
 }

components/checkbox/CheckboxItem.tsx

@@ -1,36 +1,33 @@
 import React from 'react';
-import { ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import List from '../list/index';
+import { WithTheme, WithThemeStyles } from '../style';
 import Checkbox from './Checkbox';
 import { CheckboxItemPropsType } from './PropsType';
-import CheckboxItemStyle, { ICheckboxStyle } from './style/index';
+import CheckboxItemStyles, { CheckboxStyle } from './style/index';
 
 const ListItem = List.Item;
-const refCheckbox = 'checkbox';
 
-export interface ICheckboxItemNativeProps extends CheckboxItemPropsType {
-  styles?: ICheckboxStyle;
-  checkboxStyle?: StyleProp<ImageStyle>;
+export interface CheckboxItemProps
+  extends CheckboxItemPropsType,
+    WithThemeStyles<CheckboxStyle> {
+  checkboxStyle?: StyleProp<TextStyle>;
   style?: StyleProp<ViewStyle>;
 }
 
-const CheckboxItemStyles = StyleSheet.create<any>(CheckboxItemStyle);
-
 export default class CheckboxItem extends React.Component<
-  ICheckboxItemNativeProps,
+  CheckboxItemProps,
   any
 > {
-  static defaultProps = {
-    styles: CheckboxItemStyles,
-  };
-
+  checkbox: Checkbox | null;
   handleClick = () => {
-    const checkBox: Checkbox = this.refs[refCheckbox] as Checkbox;
-    checkBox.handleClick();
+    if (this.checkbox) {
+      this.checkbox.handleClick();
+    }
     if (this.props.onPress) {
       this.props.onPress();
     }
-  }
+  };
 
   render() {
     const {
@@ -43,24 +40,27 @@ export default class CheckboxItem extends React.Component<
       extra,
       onChange,
     } = this.props;
-    const styles = this.props.styles!;
 
-    const thumbEl = (
-      <Checkbox
-        ref={refCheckbox}
-        style={[styles.checkboxItemCheckbox, checkboxStyle]}
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-      />
+    const thumbNode = (
+      <WithTheme styles={this.props.styles} themeStyles={CheckboxItemStyles}>
+        {styles => (
+          <Checkbox
+            ref={ref => (this.checkbox = ref)}
+            style={[styles.checkboxItemCheckbox, checkboxStyle]}
+            defaultChecked={defaultChecked}
+            checked={checked}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        )}
+      </WithTheme>
     );
     return (
       <ListItem
         style={style}
         onPress={disabled ? undefined : this.handleClick}
         extra={extra}
-        thumb={thumbEl}
+        thumb={thumbNode}
       >
         {children}
       </ListItem>