From d8ebe8a1360b9bba584e683090fa4c1b73012c7b Mon Sep 17 00:00:00 2001 From: binkpitch Date: Sun, 22 Oct 2017 18:15:32 +0700 Subject: [PATCH 1/4] refactor(mention-area): migrate mention-area to styled component --- CONTRIBUTORS.md | 2 +- src/components/mention-area.component.js | 60 +++++++++++------------- 2 files changed, 28 insertions(+), 34 deletions(-) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index e60bcb980..ef601865a 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -13,5 +13,5 @@ Thank you to all the people who have already contributed to GitPoint! | [
Vitaliy Kanev](https://github.com/vitalkanev)
[πŸ“–](https://github.com/gitpoint/git-point/commits?author=vitalkanev "Documentation") | [
Peter Dave Hello](https://www.peterdavehello.org/)
[πŸ“–](https://github.com/gitpoint/git-point/commits?author=PeterDaveHello "Documentation") [πŸ”§](#tool-PeterDaveHello "Tools") | [
Ernoff](https://github.com/Ernoff)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=Ernoff "Code") [πŸ›](https://github.com/gitpoint/git-point/issues?q=author%3AErnoff "Bug reports") | [
Matthew Brandly](http://words.brandly.me/about/)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=brandly "Code") | [
JoΓ£o Fonseca](https://github.com/Jpfonseca)
[🌍](#translation-Jpfonseca "Translation") | [
Arjun Curat](https://github.com/acurat)
[πŸ“–](https://github.com/gitpoint/git-point/commits?author=acurat "Documentation") | | [
siderio2](https://github.com/siderio2)
[🌍](#translation-siderio2 "Translation") | [
Kodo Verkisto](https://github.com/kodisto)
[🌍](#translation-kodisto "Translation") | [
Sarah Vessels](http://sarahvessels.com/)
[πŸ“–](https://github.com/gitpoint/git-point/commits?author=cheshire137 "Documentation") | [
Thales Sousa](https://github.com/tminussi)
[🌍](#translation-tminussi "Translation") | [
Aseem Sood](https://github.com/asood123)
[πŸ“–](https://github.com/gitpoint/git-point/commits?author=asood123 "Documentation") | [
Eliott hauteclair](https://eliott.be)
[🌍](#translation-Eliottiosdevs "Translation") | | [
Peter Blazejewicz](http://www.linkedin.com/in/peterblazejewicz)
[🌍](#translation-peterblazejewicz "Translation") | [
Eric Adamski](https://github.com/ericadamski)
[πŸ›](https://github.com/gitpoint/git-point/issues?q=author%3Aericadamski "Bug reports") | [
Jouderian Nobre Junior](https://github.com/jouderianjr)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=jouderianjr "Code") | [
Phi Dong](http://www.phidong.com)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=pdong "Code") | [
Γ“scar Carretero](https://github.com/ocarreterom)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=ocarreterom "Code") | [
Dyesse YUMBA](https://github.com/dyesseyumba)
[πŸ”§](#tool-dyesseyumba "Tools") | -| [
Bink](https://binkpitch.me/)
| +| [
Bink](https://binkpitch.me/)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=binkpitch "Code") | diff --git a/src/components/mention-area.component.js b/src/components/mention-area.component.js index 9c9ee5679..85d03e5c3 100644 --- a/src/components/mention-area.component.js +++ b/src/components/mention-area.component.js @@ -1,36 +1,30 @@ import React, { Component } from 'react'; import fuzzysort from 'fuzzysort'; -import { - Text, - View, - TouchableOpacity, - Animated, - ScrollView, - StyleSheet, -} from 'react-native'; +import styled from 'styled-components/native'; +import { TouchableOpacity, Animated, ScrollView } from 'react-native'; import { animations, fonts, normalize } from 'config'; -const styles = StyleSheet.create({ - suggestionsRowContainer: { - padding: 5, - flexDirection: 'row', - paddingRight: 15, - paddingBottom: 15, - }, - userDetailsBox: { - flex: 1, - margin: 5, - }, - displayNameText: { - fontSize: normalize(12), - ...fonts.fontPrimary, - }, - realNameText: { - fontSize: normalize(12), - ...fonts.fontPrimarySemiBold, - }, -}); +const SuggestionsRowContainer = styled.View` + flex-direction: row; + padding-top: 5; + padding-left: 5; + padding-right: 15; + padding-bottom: 15; +`; + +const UserDetailsBox = styled.View` + flex: 1; + margin-left: 5; + margin-right: 5; + margin-top: 5; + margin-bottom: 5; +`; + +const DisplayNameText = styled.Text` + fontSize: ${normalize(12)}; + ${{ ...fonts.fontPrimary }}' +`; export class MentionArea extends Component { props: { @@ -149,11 +143,11 @@ export class MentionArea extends Component { key={user} onPress={() => this.onSuggestionTap(user, true)} > - - - @{user} - - + + + @{user} + + )); } From f66e1aca1af4ec7ec64638e85e968312d063c68c Mon Sep 17 00:00:00 2001 From: binkpitch Date: Sun, 22 Oct 2017 19:53:24 +0700 Subject: [PATCH 2/4] refactor(mention-area): remove unnecessary object spread operator --- src/components/mention-area.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/mention-area.component.js b/src/components/mention-area.component.js index 85d03e5c3..1d7dc4735 100644 --- a/src/components/mention-area.component.js +++ b/src/components/mention-area.component.js @@ -23,7 +23,7 @@ const UserDetailsBox = styled.View` const DisplayNameText = styled.Text` fontSize: ${normalize(12)}; - ${{ ...fonts.fontPrimary }}' + ${fonts.fontPrimary}' `; export class MentionArea extends Component { From dd475eb7958da56bfdba1d506ed13324c216d2e2 Mon Sep 17 00:00:00 2001 From: binkpitch Date: Sun, 22 Oct 2017 20:12:53 +0700 Subject: [PATCH 3/4] refactor(mention-area): add missing semi-colon --- src/components/mention-area.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/mention-area.component.js b/src/components/mention-area.component.js index 1d7dc4735..556d858b6 100644 --- a/src/components/mention-area.component.js +++ b/src/components/mention-area.component.js @@ -22,8 +22,8 @@ const UserDetailsBox = styled.View` `; const DisplayNameText = styled.Text` - fontSize: ${normalize(12)}; - ${fonts.fontPrimary}' + fontsize: ${normalize(12)}; + ${fonts.fontPrimary}; `; export class MentionArea extends Component { From d4797ec79835f8383aff39005bc343493fec1e5f Mon Sep 17 00:00:00 2001 From: binkpitch Date: Mon, 23 Oct 2017 09:27:26 +0700 Subject: [PATCH 4/4] refactor(mention-area): migrate Animated.View to StyledAnimatedView --- src/components/mention-area.component.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/mention-area.component.js b/src/components/mention-area.component.js index 556d858b6..e1156a024 100644 --- a/src/components/mention-area.component.js +++ b/src/components/mention-area.component.js @@ -5,6 +5,10 @@ import { TouchableOpacity, Animated, ScrollView } from 'react-native'; import { animations, fonts, normalize } from 'config'; +const StyledAnimatedView = styled(Animated.View)` + ${({ style }) => style}; +`; + const SuggestionsRowContainer = styled.View` flex-direction: row; padding-top: 5; @@ -161,13 +165,13 @@ export class MentionArea extends Component { } return ( - {this.state.tracking && this.renderSuggestionsRow(searched)} - + ); } }