refactor(entity-info.component): use styled-components (#558)

Author: MrLoh

src/components/entity-info.component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import styled from 'styled-components/native';
 import { ListItem } from 'react-native-elements';
 import Communications from 'react-native-communications';
 
@@ -14,31 +14,18 @@ type Props = {
   navigation: Object,
 };
 
-const styles = StyleSheet.create({
-  badge: {
-    padding: 12,
-    paddingTop: 3,
-    paddingBottom: 3,
-    borderRadius: 20,
-  },
-  mergedIssue: {
-    backgroundColor: colors.purple,
-  },
-  openIssue: {
-    backgroundColor: colors.green,
-  },
-  closedIssue: {
-    backgroundColor: colors.red,
-  },
-  listTitle: {
+const StyledListItem = styled(ListItem).attrs({
+  titleStyle: {
     color: colors.black,
     ...fonts.fontPrimary,
   },
-  listSubTitle: {
+  subtitleStyle: {
     color: colors.greyDark,
     ...fonts.fontPrimary,
   },
-});
+  underlayColor: props => (props.unknown ? null : colors.greyLight),
+  hideChevron: props => props.unkown,
+})``;
 
 const getBlogLink = url =>
   url.substr(0, 4) === 'http' ? url : `http://${url}`;
@@ -78,73 +65,59 @@ export const EntityInfo = ({ entity, orgs, locale, navigation }: Props) => {
     <SectionList title={translate('common.info', locale)}>
       {!!entity.company &&
         entity.company !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.company', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'organization',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.company}
-            subtitleStyle={styles.listSubTitle}
             onPress={() => navigateToCompany(entity.company, orgs, navigation)}
-            underlayColor={
-              companyInOrgs(entity.company, orgs) ? colors.greyLight : null
-            }
-            hideChevron={!companyInOrgs(entity.company, orgs)}
+            unknown={companyInOrgs(entity.company, orgs)}
           />
         )}
 
       {!!entity.location &&
         entity.location !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.location', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'location',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.location}
-            subtitleStyle={styles.listSubTitle}
             onPress={() => Communications.web(getLocationLink(entity.location))}
-            underlayColor={colors.greyLight}
           />
         )}
 
       {!!entity.email &&
         entity.email !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.email', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'mail',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.email}
-            subtitleStyle={styles.listSubTitle}
             onPress={() =>
               Communications.email([entity.email], null, null, null, null)}
-            underlayColor={colors.greyLight}
           />
         )}
 
       {!!entity.blog &&
         entity.blog !== '' && (
-          <ListItem
+          <StyledListItem
             title={translate('common.website', locale)}
-            titleStyle={styles.listTitle}
             leftIcon={{
               name: 'link',
               color: colors.grey,
               type: 'octicon',
             }}
             subtitle={entity.blog}
-            subtitleStyle={styles.listSubTitle}
             onPress={() => Communications.web(getBlogLink(entity.blog))}
-            underlayColor={colors.greyLight}
           />
         )}
     </SectionList>