22import React , { Component } from 'react' ;
33import { connect } from 'react-redux' ;
44import { bindActionCreators } from 'redux' ;
5- import { ScrollView , StyleSheet , TextInput , View , Alert } from 'react-native' ;
5+ import { Alert , ScrollView } from 'react-native' ;
66import { ListItem } from 'react-native-elements' ;
7+ import styled from 'styled-components' ;
78
89import { ViewContainer , SectionList , LoadingModal } from 'components' ;
910import { t } from 'utils' ;
1011import { colors , fonts , normalize } from 'config' ;
1112import { submitNewIssue } from '../issue.action' ;
1213
13- const styles = StyleSheet . create ( {
14- textInput : {
15- fontSize : normalize ( 12 ) ,
16- marginHorizontal : 15 ,
17- flex : 1 ,
18- color : colors . black ,
19- ...fonts . fontPrimary ,
20- } ,
21- submitTitle : {
22- color : colors . green ,
23- ...fonts . fontPrimary ,
24- } ,
25- listItemContainer : {
26- flex : 1 ,
27- } ,
28- titleSmall : {
14+ const StyledListItem = styled ( ListItem ) . attrs ( {
15+ titleStyle : {
2916 color : colors . primaryDark ,
3017 ...fonts . fontPrimarySemiBold ,
3118 fontSize : normalize ( 10 ) ,
3219 } ,
33- } ) ;
20+ } ) `` ;
21+
22+ const StyledTextInput = styled . TextInput `
23+ flex-grow: 1;
24+ height: ${ props => Math . max ( 60 , props . valueHeight ) }
25+ margin: 0 15px;
26+ ${ fonts . fontPrimary }
27+ font-size: ${ normalize ( 12 ) }
28+ color: ${ colors . black }
29+ ` ;
30+
31+ const SubmitListItem = styled ( ListItem ) . attrs ( {
32+ titleStyle : {
33+ color : colors . green ,
34+ ...fonts . fontPrimary ,
35+ } ,
36+ } ) `` ;
37+
38+ const SubmitView = styled . View `
39+ flex-grow: 1;
40+ ` ;
3441
3542const mapStateToProps = state => ( {
3643 locale : state . auth . locale ,
@@ -94,16 +101,20 @@ class NewIssue extends Component {
94101
95102 render ( ) {
96103 const { locale, repository, isPendingSubmitting } = this . props ;
97- const { issueTitle, issueComment } = this . state ;
104+ const {
105+ issueTitle,
106+ issueTitleHeight,
107+ issueComment,
108+ issueCommentHeight,
109+ } = this . state ;
98110
99111 return (
100112 < ViewContainer >
101113 { isPendingSubmitting && < LoadingModal /> }
102114 < ScrollView >
103115 { repository . full_name && (
104- < ListItem
116+ < StyledListItem
105117 title = { repository . full_name }
106- titleStyle = { styles . titleSmall }
107118 leftIcon = { {
108119 name : 'repo' ,
109120 size : 17 ,
@@ -114,7 +125,7 @@ class NewIssue extends Component {
114125 />
115126 ) }
116127 < SectionList title = { t ( 'Issue Title' , locale ) } >
117- < TextInput
128+ < StyledTextInput
118129 underlineColorAndroid = { 'transparent' }
119130 placeholder = { t ( 'Write a title for your issue here' , locale ) }
120131 blurOnSubmit
@@ -126,16 +137,13 @@ class NewIssue extends Component {
126137 }
127138 onChangeText = { text => this . setState ( { issueTitle : text } ) }
128139 placeholderTextColor = { colors . grey }
129- style = { [
130- styles . textInput ,
131- { height : Math . max ( 60 , this . state . issueTitleHeight ) } ,
132- ] }
133140 value = { issueTitle }
141+ valueHeight = { issueTitleHeight }
134142 />
135143 </ SectionList >
136144
137145 < SectionList title = { t ( 'Issue Comment' , locale ) } >
138- < TextInput
146+ < StyledTextInput
139147 underlineColorAndroid = { 'transparent' }
140148 placeholder = { t ( 'Write a comment for your issue here' , locale ) }
141149 multiline
@@ -146,24 +154,20 @@ class NewIssue extends Component {
146154 } )
147155 }
148156 placeholderTextColor = { colors . grey }
149- style = { [
150- styles . textInput ,
151- { height : Math . max ( 60 , this . state . issueCommentHeight ) } ,
152- ] }
153157 value = { issueComment }
158+ valueHeight = { issueCommentHeight }
154159 />
155160 </ SectionList >
156161
157162 < SectionList >
158- < View style = { styles . listItemContainer } >
159- < ListItem
163+ < SubmitView >
164+ < SubmitListItem
160165 title = { t ( 'Submit' , locale ) }
161166 hideChevron
162167 underlayColor = { colors . greyLight }
163- titleStyle = { styles . submitTitle }
164168 onPress = { ( ) => this . submitNewIssue ( ) }
165169 />
166- </ View >
170+ </ SubmitView >
167171 </ SectionList >
168172 </ ScrollView >
169173 </ ViewContainer >
0 commit comments