From 163cc950b449dbadef13a5ad3dc7ff480ae2d290 Mon Sep 17 00:00:00 2001 From: MrLoh Date: Sun, 22 Oct 2017 22:20:04 +0200 Subject: [PATCH 1/3] refactor(comment-list-item.component): use styled-components --- src/components/comment-list-item.component.js | 184 +++++++++--------- 1 file changed, 87 insertions(+), 97 deletions(-) diff --git a/src/components/comment-list-item.component.js b/src/components/comment-list-item.component.js index 532851a0c..e81b999b7 100644 --- a/src/components/comment-list-item.component.js +++ b/src/components/comment-list-item.component.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { StyleSheet, View, Text, TouchableOpacity, Image } from 'react-native'; +import styled from 'styled-components/native'; import { GithubHtmlView } from 'components'; import { Icon } from 'react-native-elements'; import ActionSheet from 'react-native-actionsheet'; @@ -11,71 +11,71 @@ import ActionSheet from 'react-native-actionsheet'; import { translate, relativeTimeToNow } from 'utils'; import { colors, fonts, normalize } from 'config'; -const styles = StyleSheet.create({ - container: { - paddingRight: 10, - paddingTop: 10, - backgroundColor: 'transparent', - }, - header: { - flexDirection: 'row', - marginLeft: 10, - alignItems: 'center', - }, - avatarContainer: { - backgroundColor: colors.greyLight, - borderRadius: 17, - width: 34, - height: 34, - }, - avatar: { - width: 34, - height: 34, - borderRadius: 17, - }, - titleSubtitleContainer: { - justifyContent: 'center', - flex: 1, - marginLeft: 10, - }, - dateContainer: { - flex: 0.15, - alignItems: 'flex-end', - justifyContent: 'center', - }, - linkDescription: { - ...fonts.fontPrimaryBold, - fontSize: normalize(13), - color: colors.primaryDark, - }, - date: { - color: colors.greyDark, - }, - commentContainer: { - paddingTop: 5, - marginLeft: 54, - borderBottomColor: colors.greyLight, - borderBottomWidth: 1, - }, - commentBottomPadding: { - paddingBottom: 15, - }, - commentText: { - fontSize: normalize(12), - color: colors.primaryDark, - }, - commentTextNone: { - ...fonts.fontPrimary, - color: colors.primaryDark, - fontStyle: 'italic', - }, - actionButtonIconContainer: { - paddingTop: 5, - paddingBottom: 10, - alignItems: 'flex-end', - justifyContent: 'center', - }, -}); +const Container = styled.View` + padding: 10px 10px 0 0; + background-color: transparent; +`; + +const Header = styled.View` + flex-direction: row; + margin-left: 10px; + align-items: center; +`; + +const AvatarContainer = styled.TouchableOpacity` + background-color: ${colors.greyLight}; + border-radius: 17px; + width: 34px; + height: 34px; +`; + +const Avatar = styled.Image` + border-radius: 17px; + width: 34px; + height: 34px; +`; + +const TitleSubtitleContainer = styled.View` + justify-content: center; + flex: 1; + margin-left: 10px; +`; + +const DateContainer = styled.View` + flex: 0.1; + align-items: flex-end; + justify-content: center; +`; + +const LinkDescription = styled.Text` + ${{ ...fonts.fontPrimaryBold }}; + font-size: ${normalize(13)}; + color: ${colors.primaryDark}; +`; + +const DateLabel = styled.Text` + color: ${colors.greyDark}; +`; + +const CommentContainer = styled.View` + padding-top: 5px; + margin-left: 54px; + border-bottom-color: ${colors.greyLight}; + border-bottom-width: 1px; + padding-bottom: ${props => (props.bottomPadding ? 15 : 0)}px; +`; + +const CommentTextNone = styled.Text` + ${{ ...fonts.fontPrimary }}; + color: ${colors.primaryDark}; + font-style: italic; +`; + +const ActionButtonIconContainer = styled.View` + padding: 5px 0; + align-items: flex-end; + justify-content: center; +`; const mapStateToProps = state => ({ authUser: state.auth.user, @@ -131,11 +131,10 @@ class CommentListItemComponent extends Component { comment.user && authUser.login === comment.user.login; return ( - - + +
{comment.user && ( - navigation.navigate( authUser.login === comment.user.login @@ -146,19 +145,17 @@ class CommentListItemComponent extends Component { } )} > - - + )} {comment.user && ( - - + navigation.navigate( authUser.login === comment.user.login @@ -170,36 +167,29 @@ class CommentListItemComponent extends Component { )} > {comment.user.login} - - + + )} - - - {relativeTimeToNow(comment.created_at)} - - - - - + + {relativeTimeToNow(comment.created_at)} + +
+ + {commentPresent ? ( ) : ( - + {translate('issue.main.noDescription', locale)} - + )} {isActionMenuEnabled && ( - + - + )} - + { @@ -223,7 +213,7 @@ class CommentListItemComponent extends Component { cancelButtonIndex={this.commentActionSheetOptions(comment).length} onPress={this.handlePress} /> - + ); } } From e704e55b4e557d393fc7860012d7cb05a8630cd8 Mon Sep 17 00:00:00 2001 From: Xianming Zhong Date: Mon, 12 Feb 2018 17:05:09 +0800 Subject: [PATCH 2/3] fix(style): Keep unitless --- src/components/comment-list-item.component.js | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/comment-list-item.component.js b/src/components/comment-list-item.component.js index e81b999b7..0a59ede1b 100644 --- a/src/components/comment-list-item.component.js +++ b/src/components/comment-list-item.component.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import styled from 'styled-components/native'; +import styled from 'styled-components'; import { GithubHtmlView } from 'components'; import { Icon } from 'react-native-elements'; import ActionSheet from 'react-native-actionsheet'; @@ -18,31 +18,31 @@ const Container = styled.View` const Header = styled.View` flex-direction: row; - margin-left: 10px; + margin-left: 10; align-items: center; `; const AvatarContainer = styled.TouchableOpacity` background-color: ${colors.greyLight}; - border-radius: 17px; - width: 34px; - height: 34px; + border-radius: 17; + width: 34; + height: 34; `; const Avatar = styled.Image` - border-radius: 17px; - width: 34px; - height: 34px; + border-radius: 17; + width: 34; + height: 34; `; const TitleSubtitleContainer = styled.View` justify-content: center; flex: 1; - margin-left: 10px; + margin-left: 10; `; const DateContainer = styled.View` - flex: 0.1; + flex: 0.15; align-items: flex-end; justify-content: center; `; @@ -58,11 +58,11 @@ const DateLabel = styled.Text` `; const CommentContainer = styled.View` - padding-top: 5px; - margin-left: 54px; + padding-top: 5; + margin-left: 54; border-bottom-color: ${colors.greyLight}; - border-bottom-width: 1px; - padding-bottom: ${props => (props.bottomPadding ? 15 : 0)}px; + border-bottom-width: 1; + padding-bottom: ${props => (props.bottomPadding ? 15 : 0)}; `; const CommentTextNone = styled.Text` @@ -72,7 +72,7 @@ const CommentTextNone = styled.Text` `; const ActionButtonIconContainer = styled.View` - padding: 5px 0; + padding: 5px 0 10px; align-items: flex-end; justify-content: center; `; @@ -143,7 +143,8 @@ class CommentListItemComponent extends Component { { user: comment.user, } - )} + ) + } > {comment.user.login} From 3382fdcfaf0e6254bd3385b8a966565212b03715 Mon Sep 17 00:00:00 2001 From: Xianming Zhong Date: Mon, 12 Feb 2018 21:40:13 +0800 Subject: [PATCH 3/3] fix(lint): fix stylelint --- .stylelintrc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index f952a3a99..bc7e5ba70 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -8,8 +8,8 @@ "block-no-empty": null, "declaration-colon-newline-after": null, "declaration-property-value-whitelist": { - "margin": ["/^(0|[+-]?(\\d*\\.)?\\d+px)( (0|[+-]?(\\d*\\.)?\\d+px))?$/"], - "padding": ["/^(0|[+-]?(\\d*\\.)?\\d+px)( (0|[+-]?(\\d*\\.)?\\d+px))?$/"], + "margin": ["/^(0|[+-]?(\\d*\\.)?\\d+px)( (0|[+-]?(\\d*\\.)?\\d+px)){0,3}$/"], + "padding": ["/^(0|[+-]?(\\d*\\.)?\\d+px)( (0|[+-]?(\\d*\\.)?\\d+px)){0,3}$/"], }, "value-list-max-empty-lines": null },