(ListItem) Change instance of react node to element

flyingcircle · Apr 2, 2018 · 7b02f00 · 7b02f00
1 parent 0c2f4fa
commit 7b02f00
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 60 deletions.
diff --git a/docs/listitem.md b/docs/listitem.md
@@ -361,9 +361,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `title`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -385,9 +385,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `subtitle`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -409,9 +409,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `rightTitle`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -433,9 +433,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `rightSubtitle`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -489,17 +489,17 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `leftElement`
 
-|    Type    | Default |
-| :--------: | :-----: |
-| React node |  none   |
+|     Type      | Default |
+| :-----------: | :-----: |
+| React element |  none   |
 
 ---
 
 ### `rightElement`
 
-|    Type    | Default |
-| :--------: | :-----: |
-| React node |  none   |
+|     Type      | Default |
+| :-----------: | :-----: |
+| React element |  none   |
 
 ---
 

diff --git a/src/list/ListItem.js b/src/list/ListItem.js
@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import TouchableScale from 'react-native-touchable-scale'
+import TouchableScale from 'react-native-touchable-scale';
 import Avatar from '../avatar/Avatar';
 import Badge from '../badge/badge';
 import CheckBox from '../checkbox/CheckBox';
@@ -18,7 +18,7 @@ import Input from '../input/Input';
 import Divider from '../divider/Divider';
 import ViewPropTypes from '../config/ViewPropTypes';
 
-import colors from '../config/colors'
+import colors from '../config/colors';
 
 const ANDROID_SECONDARY = 'rgba(0, 0, 0, 0.54)';
 
@@ -62,15 +62,18 @@ const ListItem = props => {
     scaleProps,
     linearGradientProps,
     ViewComponent = linearGradientProps && global.Expo
-    ? global.Expo.LinearGradient
-    : View,
+      ? global.Expo.LinearGradient
+      : View,
     ...attributes
   } = props;
 
   const { onPress, onLongPress } = props;
   let Component =
-    component || (scaleProps ? TouchableScale : (onPress || onLongPress ? TouchableOpacity : View));
-
+    component ||
+    (scaleProps
+      ? TouchableScale
+      : onPress || onLongPress ? TouchableOpacity : View);
+
   return (
     <Component {...attributes} {...scaleProps} disabled={disabled}>
       {topDivider && <Divider />}
@@ -87,14 +90,31 @@ const ListItem = props => {
         {renderNode(leftElement)}
         {renderIcon(leftIcon)}
         {renderAvatar(leftAvatar)}
-        {(title || subtitle) && <View style={[styles.contentContainer, contentContainerStyle]}>
-          {renderNode(title, titleProps, [styles.title, titleStyle])}
-          {renderNode(subtitle, subtitleProps, [styles.subtitle, subtitleStyle])}
-        </View>}
-        {(rightTitle||rightSubtitle) && <View style={[styles.rightContentContainer, rightContentContainerStyle]}>
-          {renderNode(rightTitle, rightTitleProps, [styles.title, styles.rightTitle, rightTitleStyle])}
-          {renderNode(rightSubtitle, rightSubtitleProps, [styles.subtitle, styles.rightSubtitle, rightSubtitleStyle])}
-        </View>}
+        {(title || subtitle) && (
+          <View style={[styles.contentContainer, contentContainerStyle]}>
+            {renderNode(title, titleProps, [styles.title, titleStyle])}
+            {renderNode(subtitle, subtitleProps, [
+              styles.subtitle,
+              subtitleStyle,
+            ])}
+          </View>
+        )}
+        {(rightTitle || rightSubtitle) && (
+          <View
+            style={[styles.rightContentContainer, rightContentContainerStyle]}
+          >
+            {renderNode(rightTitle, rightTitleProps, [
+              styles.title,
+              styles.rightTitle,
+              rightTitleStyle,
+            ])}
+            {renderNode(rightSubtitle, rightSubtitleProps, [
+              styles.subtitle,
+              styles.rightSubtitle,
+              rightSubtitleStyle,
+            ])}
+          </View>
+        )}
         {input && (
           <Input
             {...input}
@@ -245,30 +265,34 @@ const styles = StyleSheet.create({
   },
 });
 
-const nodeOrObject = PropTypes.oneOfType([PropTypes.node, PropTypes.object])
+const elementOrObject = PropTypes.oneOfType([
+  PropTypes.element,
+  PropTypes.object,
+]);
+
 ListItem.propTypes = {
   containerStyle: ViewPropTypes.style,
   contentContainerStyle: ViewPropTypes.style,
   rightContentContainerStyle: ViewPropTypes.style,
   component: PropTypes.element,
   onPress: PropTypes.func,
   onLongPress: PropTypes.func,
-  title: PropTypes.node,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   titleStyle: Text.propTypes.style,
   titleProps: PropTypes.object,
-  subtitle: PropTypes.node,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   subtitleStyle: Text.propTypes.style,
   subtitleProps: PropTypes.object,
-  leftIcon: nodeOrObject,
-  leftAvatar: nodeOrObject,
+  leftIcon: elementOrObject,
+  leftAvatar: elementOrObject,
   leftElement: PropTypes.element,
-  rightIcon: nodeOrObject,
-  rightAvatar: nodeOrObject,
+  rightIcon: elementOrObject,
+  rightAvatar: elementOrObject,
   rightElement: PropTypes.element,
-  rightTitle: PropTypes.node,
+  rightTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   rightTitleStyle: Text.propTypes.style,
   rightTitleProps: PropTypes.object,
-  rightSubtitle: PropTypes.node,
+  rightSubtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   rightSubtitleStyle: Text.propTypes.style,
   rightSubtitleProps: PropTypes.object,
   input: PropTypes.object,
@@ -294,7 +318,7 @@ ListItem.defaultProps = {
 const PadView = ({ children, pad = 16, Component, ...props }) => {
   const childrens = React.Children.toArray(children);
   const length = childrens.length;
-  const Container = Component || View
+  const Container = Component || View;
   return (
     <Container {...props}>
       {React.Children.map(

diff --git a/website/versioned_docs/version-1.0.0-beta4/listitem.md b/website/versioned_docs/version-1.0.0-beta4/listitem.md
@@ -362,9 +362,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `title`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -386,9 +386,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `subtitle`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -410,9 +410,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `rightTitle`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -434,9 +434,9 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `rightSubtitle`
 
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string **OR** React node |  none   |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| string **OR** React element |  none   |
 
 ---
 
@@ -490,17 +490,17 @@ import LinearGradient from 'react-native-linear-gradient' // Only if no expo
 
 ### `leftElement`
 
-|    Type    | Default |
-| :--------: | :-----: |
-| React node |  none   |
+|     Type      | Default |
+| :-----------: | :-----: |
+| React element |  none   |
 
 ---
 
 ### `rightElement`
 
-|    Type    | Default |
-| :--------: | :-----: |
-| React node |  none   |
+|     Type      | Default |
+| :-----------: | :-----: |
+| React element |  none   |
 
 ---