Skip to content

refactor: comment input to styled components #596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alejandronanez merged 2 commits into from
Oct 28, 2017
Merged

refactor: comment input to styled components #596

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb0aa73
Refactor comment input to styled components
simonhoyos Oct 27, 2017
7c8310d
Refactor comment input to styled components
simonhoyos Oct 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 52 additions & 63 deletions src/components/comment-input.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,49 @@
// @flow

import React, { Component } from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
Text,
TextInput,
Platform,
} from 'react-native';
import { View, Text, Platform } from 'react-native';
import { Icon } from 'react-native-elements';
import styled from 'styled-components/native';

import { MentionArea } from 'components';
import { translate } from 'utils';
import { colors, fonts, normalize } from 'config';

const styles = StyleSheet.create({
container: {
borderTopColor: colors.greyLight,
borderTopWidth: 1,
backgroundColor: 'transparent',
},
wrapper: {
padding: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
textInput: {
fontSize: normalize(12),
flex: 1,
marginRight: 5,
color: colors.black,
...fonts.fontPrimary,
},
postButtonContainer: {
flex: 0.15,
alignItems: 'flex-end',
justifyContent: 'center',
},
postButtonDisabled: {
color: colors.grey,
},
postButtonEnabled: {
color: colors.primaryDark,
},
});
const Container = styled.View`
border-top-color: ${colors.greyLight};
border-top-width: 1;
background-color: transparent;
`;

const Wrapper = styled.View`
flex-direction: row;
align-items: center;
padding: 10px;
justify-content: center;
`;

const InputText = styled.TextInput`
font-size: ${normalize(12)};
flex: 1;
margin-right: 5;
color: ${colors.black};
${fonts.fontPrimary};
`;
const TextInputText = InputText.withComponent(Text);

const PostButtonContainerCanPost = styled.TouchableOpacity`
flex: 0.15;
align-items: flex-end;
justify-content: center;
`;
const PostButtonContainerCantPost = PostButtonContainerCanPost.withComponent(
View
);

const PostButtonIcon = ({ style }) => <Icon name="send" iconStyle={style} />;
Copy link
Member

@alejandronanez alejandronanez Oct 28, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to add props validation to this function.
What I think is that you need to do something like:

type PostButtonIconProps = {
  style: Object
};

const PostButtonIcon = ({ style } : PostButtonIconProps)=> <Icon name="send" iconStyle={style} />;

PostButtonIconProps is a flow type annotation.

Welcome to Gitpoint! Let us know if you have any other question!

const StyledPostButtonIcon = styled(PostButtonIcon)`
color: ${props => (props.disabled ? colors.grey : colors.primaryDark)};
`;

export class CommentInput extends Component {
props: {
Expand Down Expand Up @@ -93,17 +91,17 @@ export class CommentInput extends Component {
}

return (
<View style={styles.container}>
<Container>
<MentionArea
trigger="@"
text={this.state.text}
updateText={text => this.setState({ text })}
height={200}
users={users}
/>
<View style={styles.wrapper}>
<Wrapper>
{userCanPost && (
<TextInput
<InputText
underlineColorAndroid={'transparent'}
placeholder={
issueLocked && userHasPushPermission
Expand All @@ -118,45 +116,36 @@ export class CommentInput extends Component {
onSubmitEditing={event =>
this.handleSubmitEditing(event.nativeEvent.text)}
placeholderTextColor={colors.grey}
style={[
styles.textInput,
{ height: Math.max(30, this.state.height) },
]}
style={{
height: Math.max(30, this.state.height),
}}
value={this.state.text}
/>
)}

{!userCanPost && (
<Text style={[styles.textInput, { color: colors.grey }]}>
<TextInputText style={{ color: colors.grey }}>
{translate('issue.main.lockedIssue', locale)}
</Text>
</TextInputText>
)}

{userCanPost && (
<TouchableOpacity
<PostButtonContainerCanPost
disabled={this.state.text === ''}
style={styles.postButtonContainer}
onPress={() => this.handleSubmit(this.state.text)}
>
<Icon
name="send"
iconStyle={
this.state.text === ''
? styles.postButtonDisabled
: styles.postButtonEnabled
}
/>
</TouchableOpacity>
<StyledPostButtonIcon disabled={this.state.text === ''} />
</PostButtonContainerCanPost>
)}

{!userCanPost &&
this.props.issueLocked && (
<View style={styles.postButtonContainer}>
<PostButtonContainerCantPost>
<Icon name="lock" type="octicon" color={colors.grey} />
</View>
</PostButtonContainerCantPost>
)}
</View>
</View>
</Wrapper>
</Container>
);
}
}