refactor(styled-components): migrate NewIssue (#836)

Migrated the `NewIssue` component to styled-components.
gitpoint · Oct 26, 2018 · c778e3f · c778e3f
1 parent a2c3293
commit c778e3f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 36 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -835,13 +835,23 @@
         "translation"
       ]
     },
+    {
       "login": "TFarla",
       "name": "Thomas Farla",
       "avatar_url": "https://avatars3.githubusercontent.com/u/4613944?v=4",
       "profile": "https://ilearned.today",
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "samuelmeuli",
+      "name": "Samuel Meuli",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/22477950?v=4",
+      "profile": "https://samuelmeuli.com",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github"

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -19,5 +19,5 @@ Thank you to all the people who have already contributed to GitPoint!
 | [<img src="https://avatars0.githubusercontent.com/u/3683673?v=4" width="100px;"/><br /><sub><b>TheCodeTalker</b></sub>](https://thecodetalker.github.io/)<br />[💻](https://github.com/gitpoint/git-point/commits?author=TheCodeTalker "Code") | [<img src="https://avatars0.githubusercontent.com/u/2670744?v=4" width="100px;"/><br /><sub><b>Leonardo</b></sub>](https://github.com/LeoCp)<br />[💻](https://github.com/gitpoint/git-point/commits?author=LeoCp "Code") | [<img src="https://avatars2.githubusercontent.com/u/13105865?v=4" width="100px;"/><br /><sub><b>Stephen</b></sub>](https://github.com/coderste)<br />[📖](https://github.com/gitpoint/git-point/commits?author=coderste "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/5565340?v=4" width="100px;"/><br /><sub><b>Zahra Traboulsi</b></sub>](http://www.zahra.tech)<br />[💻](https://github.com/gitpoint/git-point/commits?author=ZahraTee "Code") [⚠️](https://github.com/gitpoint/git-point/commits?author=ZahraTee "Tests") | [<img src="https://avatars3.githubusercontent.com/u/13391685?v=4" width="100px;"/><br /><sub><b>Joseba Carral</b></sub>](http://codevs.es)<br />[🌍](#translation-jcarral "Translation") | [<img src="https://avatars2.githubusercontent.com/u/5800039?v=4" width="100px;"/><br /><sub><b>CTownsdin</b></sub>](https://github.com/CTownsdin)<br />[💻](https://github.com/gitpoint/git-point/commits?author=CTownsdin "Code") |
 | [<img src="https://avatars0.githubusercontent.com/u/7470681?v=4" width="100px;"/><br /><sub><b>Apostolis Economou</b></sub>](https://github.com/apoeco)<br />[💻](https://github.com/gitpoint/git-point/commits?author=apoeco "Code") | [<img src="https://avatars3.githubusercontent.com/u/9337254?v=4" width="100px;"/><br /><sub><b>Arjun</b></sub>](https://github.com/Arjun-sna)<br />[💻](https://github.com/gitpoint/git-point/commits?author=Arjun-sna "Code") | [<img src="https://avatars1.githubusercontent.com/u/5786033?v=4" width="100px;"/><br /><sub><b>Riccardo</b></sub>](http://rkpasia.github.io)<br />[💻](https://github.com/gitpoint/git-point/commits?author=rkpasia "Code") [🎨](#design-rkpasia "Design") | [<img src="https://avatars3.githubusercontent.com/u/21980965?v=4" width="100px;"/><br /><sub><b>Luong Dang Hai</b></sub>](https://luongdanghai.com/)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jarvisluong "Code") | [<img src="https://avatars3.githubusercontent.com/u/1428396?v=4" width="100px;"/><br /><sub><b>Jens Strobel</b></sub>](https://github.com/jstrobel)<br />[🐛](https://github.com/gitpoint/git-point/issues?q=author%3Ajstrobel "Bug reports") [🌍](#translation-jstrobel "Translation") | [<img src="https://avatars3.githubusercontent.com/u/3621147?v=4" width="100px;"/><br /><sub><b>James Gosbell</b></sub>](https://github.com/jamesg1)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jamesg1 "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/11476348?v=4" width="100px;"/><br /><sub><b>Dhanial Rizky Wira Putra</b></sub>](https://github.com/dhamanutd)<br />[💻](https://github.com/gitpoint/git-point/commits?author=dhamanutd "Code") [🎨](#design-dhamanutd "Design") | [<img src="https://avatars1.githubusercontent.com/u/16650066?v=4" width="100px;"/><br /><sub><b>James Logue</b></sub>](https://github.com/jjlljj)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jjlljj "Code") [⚠️](https://github.com/gitpoint/git-point/commits?author=jjlljj "Tests") | [<img src="https://avatars0.githubusercontent.com/u/22607072?v=4" width="100px;"/><br /><sub><b>parker lindley</b></sub>](https://github.com/etcetera8)<br />[💻](https://github.com/gitpoint/git-point/commits?author=etcetera8 "Code") [⚠️](https://github.com/gitpoint/git-point/commits?author=etcetera8 "Tests") | [<img src="https://avatars2.githubusercontent.com/u/22456673?v=4" width="100px;"/><br /><sub><b>Amanda Tjan</b></sub>](https://github.com/soytjan)<br />[💻](https://github.com/gitpoint/git-point/commits?author=soytjan "Code") [⚠️](https://github.com/gitpoint/git-point/commits?author=soytjan "Tests") | [<img src="https://avatars2.githubusercontent.com/u/10307875?v=4" width="100px;"/><br /><sub><b>Richie</b></sub>](https://github.com/whitedogg13)<br />[💻](https://github.com/gitpoint/git-point/commits?author=whitedogg13 "Code") | [<img src="https://avatars2.githubusercontent.com/u/10983824?v=4" width="100px;"/><br /><sub><b>Mario Arnautou</b></sub>](http://mario.arnautou.fr/)<br />[💻](https://github.com/gitpoint/git-point/commits?author=MarioArnt "Code") |
-| [<img src="https://avatars1.githubusercontent.com/u/31237758?v=4" width="100px;"/><br /><sub><b>Lenore</b></sub>](https://github.com/SpaceLenore)<br />[🌍](#translation-SpaceLenore "Translation") | [<img src="https://avatars0.githubusercontent.com/u/17492631?v=4" width="100px;"/><br /><sub><b>Geo Galagaran</b></sub>](http://geeofree.github.io)<br />[🌍](#translation-geeofree "Translation") | [<img src="https://avatars0.githubusercontent.com/u/2192460?v=4" width="100px;"/><br /><sub><b>Никола Радовановић (Nikola Radovanović)</b></sub>](http://www.toptal.com/resume/nikola-radovanovic)<br />[🌍](#translation-cobisimo "Translation") | [<img src="https://avatars3.githubusercontent.com/u/4613944?v=4" width="100px;"/><br /><sub><b>Thomas Farla</b></sub>](https://ilearned.today)<br />[💻](https://github.com/gitpoint/git-point/commits?author=TFarla "Code") |[<img src="https://avatars2.githubusercontent.com/u/26858034?s=400&u=fd8893b7f81dd9c9baeaf2807a1f7f98db0b2fe2&v=4" width="100px;"/><br /><sub><b>Huda Al Dallal</b></sub>](https://github.com/ooHAoo)<br />[🌍](#translation-ooHAoo "Translation") |
+| [<img src="https://avatars1.githubusercontent.com/u/31237758?v=4" width="100px;"/><br /><sub><b>Lenore</b></sub>](https://github.com/SpaceLenore)<br />[🌍](#translation-SpaceLenore "Translation") | [<img src="https://avatars0.githubusercontent.com/u/17492631?v=4" width="100px;"/><br /><sub><b>Geo Galagaran</b></sub>](http://geeofree.github.io)<br />[🌍](#translation-geeofree "Translation") | [<img src="https://avatars0.githubusercontent.com/u/2192460?v=4" width="100px;"/><br /><sub><b>Никола Радовановић (Nikola Radovanović)</b></sub>](http://www.toptal.com/resume/nikola-radovanovic)<br />[🌍](#translation-cobisimo "Translation") | [<img src="https://avatars2.githubusercontent.com/u/26858034?s=400&u=fd8893b7f81dd9c9baeaf2807a1f7f98db0b2fe2&v=4" width="100px;"/><br /><sub><b>Huda Al Dallal</b></sub>](https://github.com/ooHAoo)<br />[🌍](#translation-ooHAoo "Translation") | [<img src="https://avatars3.githubusercontent.com/u/4613944?v=4" width="100px;"/><br /><sub><b>Thomas Farla</b></sub>](https://ilearned.today)<br />[💻](https://github.com/gitpoint/git-point/commits?author=TFarla "Code") | [<img src="https://avatars0.githubusercontent.com/u/22477950?v=4" width="100px;"/><br /><sub><b>Samuel Meuli</b></sub>](https://samuelmeuli.com)<br />[💻](https://github.com/gitpoint/git-point/commits?author=samuelmeuli "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
diff --git a/src/issue/screens/new-issue.screen.js b/src/issue/screens/new-issue.screen.js
@@ -2,35 +2,42 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { ScrollView, StyleSheet, TextInput, View, Alert } from 'react-native';
+import { Alert, ScrollView } from 'react-native';
 import { ListItem } from 'react-native-elements';
+import styled from 'styled-components';
 
 import { ViewContainer, SectionList, LoadingModal } from 'components';
 import { t } from 'utils';
 import { colors, fonts, normalize } from 'config';
 import { submitNewIssue } from '../issue.action';
 
-const styles = StyleSheet.create({
-  textInput: {
-    fontSize: normalize(12),
-    marginHorizontal: 15,
-    flex: 1,
-    color: colors.black,
-    ...fonts.fontPrimary,
-  },
-  submitTitle: {
-    color: colors.green,
-    ...fonts.fontPrimary,
-  },
-  listItemContainer: {
-    flex: 1,
-  },
-  titleSmall: {
+const StyledListItem = styled(ListItem).attrs({
+  titleStyle: {
     color: colors.primaryDark,
     ...fonts.fontPrimarySemiBold,
     fontSize: normalize(10),
   },
-});
+})``;
+
+const StyledTextInput = styled.TextInput`
+  flex-grow: 1;
+  height: ${props => Math.max(60, props.valueHeight)}
+  margin: 0 15px;
+  ${fonts.fontPrimary};
+  font-size: ${normalize(12)};
+  color: ${colors.black};
+`;
+
+const SubmitListItem = styled(ListItem).attrs({
+  titleStyle: {
+    color: colors.green,
+    ...fonts.fontPrimary,
+  },
+})``;
+
+const SubmitView = styled.View`
+  flex-grow: 1;
+`;
 
 const mapStateToProps = state => ({
   locale: state.auth.locale,
@@ -94,16 +101,20 @@ class NewIssue extends Component {
 
   render() {
     const { locale, repository, isPendingSubmitting } = this.props;
-    const { issueTitle, issueComment } = this.state;
+    const {
+      issueTitle,
+      issueTitleHeight,
+      issueComment,
+      issueCommentHeight,
+    } = this.state;
 
     return (
       <ViewContainer>
         {isPendingSubmitting && <LoadingModal />}
         <ScrollView>
           {repository.full_name && (
-            <ListItem
+            <StyledListItem
               title={repository.full_name}
-              titleStyle={styles.titleSmall}
               leftIcon={{
                 name: 'repo',
                 size: 17,
@@ -114,7 +125,7 @@ class NewIssue extends Component {
             />
           )}
           <SectionList title={t('Issue Title', locale)}>
-            <TextInput
+            <StyledTextInput
               underlineColorAndroid={'transparent'}
               placeholder={t('Write a title for your issue here', locale)}
               blurOnSubmit
@@ -126,16 +137,13 @@ class NewIssue extends Component {
               }
               onChangeText={text => this.setState({ issueTitle: text })}
               placeholderTextColor={colors.grey}
-              style={[
-                styles.textInput,
-                { height: Math.max(60, this.state.issueTitleHeight) },
-              ]}
               value={issueTitle}
+              valueHeight={issueTitleHeight}
             />
           </SectionList>
 
           <SectionList title={t('Issue Comment', locale)}>
-            <TextInput
+            <StyledTextInput
               underlineColorAndroid={'transparent'}
               placeholder={t('Write a comment for your issue here', locale)}
               multiline
@@ -146,24 +154,20 @@ class NewIssue extends Component {
                 })
               }
               placeholderTextColor={colors.grey}
-              style={[
-                styles.textInput,
-                { height: Math.max(60, this.state.issueCommentHeight) },
-              ]}
               value={issueComment}
+              valueHeight={issueCommentHeight}
             />
           </SectionList>
 
           <SectionList>
-            <View style={styles.listItemContainer}>
-              <ListItem
+            <SubmitView>
+              <SubmitListItem
                 title={t('Submit', locale)}
                 hideChevron
                 underlayColor={colors.greyLight}
-                titleStyle={styles.submitTitle}
                 onPress={() => this.submitNewIssue()}
               />
-            </View>
+            </SubmitView>
           </SectionList>
         </ScrollView>
       </ViewContainer>