refactor(ui): tab component children

akveo · Jan 24, 2019 · 9341d0f · 9341d0f
1 parent fd1684c
commit 9341d0f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/src/framework/ui/tab/tab.component.tsx b/src/framework/ui/tab/tab.component.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import {
   View,
-  Text,
   Image,
+  Text,
   ViewProps,
+  ImageProps,
+  TextProps,
   ImageSourcePropType,
 } from 'react-native';
 import {
@@ -32,21 +34,40 @@ export class Tab extends React.Component<Props> {
     };
   };
 
+  private createTextComponent = (style: StyleType): React.ReactElement<TextProps> => (
+    <Text
+      style={style}
+      key={1}>
+      {this.props.title}
+    </Text>
+  );
+
+  private createImageComponent = (style: StyleType): React.ReactElement<ImageProps> => (
+    <Image
+      style={style}
+      key={0}
+      source={this.props.icon}
+    />
+  );
+
+  private createComponentChildren = (style: StyleType) => {
+    const { icon, title } = this.props;
+
+    return [
+      icon ? this.createImageComponent(style.icon) : undefined,
+      title ? this.createTextComponent(style.title) : undefined,
+    ];
+  };
+
   render() {
     const componentStyle: StyleType = this.getComponentStyle(this.props.themedStyle);
+    const children = this.createComponentChildren(componentStyle);
 
     return (
       <View
         {...this.props}
         style={[this.props.style, componentStyle.container]}>
-        <Image
-          style={componentStyle.icon}
-          source={this.props.icon}
-        />
-        <Text
-          style={componentStyle.title}>
-          {this.props.title}
-        </Text>
+        {children}
       </View>
     );
   }

diff --git a/src/playground/src/ui/screen/tabView.component.tsx b/src/playground/src/ui/screen/tabView.component.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import {
   withStyles,
@@ -35,9 +36,15 @@ class TabView extends React.Component<Props, State> {
         style={this.props.themedStyle.container}
         selectedIndex={this.state.selectedIndex}
         onSelect={this.onSelect}>
-        <TabComponent title='❤️'>Tab 1</TabComponent>
-        <TabComponent title='💛️'>Tab 2</TabComponent>
-        <TabComponent title='💚️'>Tab 3</TabComponent>
+        <TabComponent title='❤️'>
+          <Text>Tab 1</Text>
+        </TabComponent>
+        <TabComponent title='💛️'>
+          <Text>Tab 2</Text>
+        </TabComponent>
+        <TabComponent title='💚️'>
+          <Text>Tab 3</Text>
+        </TabComponent>
       </TabViewComponent>
     );
   }