From f0b18db9dc3d0321fb01677e98f3968b21af36fa Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 8 Jun 2021 18:19:19 -0400 Subject: Added comment preview, WIP on mention part types --- src/utils/comments.tsx | 41 ++++++++++++++++++++++++++++------------- 1 file changed, 28 insertions(+), 13 deletions(-) (limited to 'src/utils/comments.tsx') diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 5c17cefe..e700da88 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,26 +79,41 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = ( - style, +const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = ( + theme, ) => { + switch (theme) { + case 'blue': + return { + color: TAGG_LIGHT_BLUE, + top: normalize(3), + }; + case 'commentPreview': + return { + color: 'white', + fontWeight: '800', + top: normalize(3), + }; + case 'white': + default: + return { + color: 'white', + fontWeight: '800', + top: normalize(7.5), + }; + } +}; + +export const mentionPartTypes: ( + theme: 'blue' | 'white' | 'commentPreview', +) => PartType[] = (theme) => { return [ { trigger: '@', renderSuggestions: (props) => , allowedSpacesCount: 0, isInsertSpaceAfterMention: true, - textStyle: - style === 'blue' - ? { - color: TAGG_LIGHT_BLUE, - top: normalize(3), - } - : { - color: 'white', - fontWeight: '800', - top: normalize(7.5), - }, + textStyle: textStyle(theme), }, ]; }; -- cgit v1.2.3-70-g09d2 From 54d5a79e3359a826c1fafd8322ee835b79438fd9 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 10 Jun 2021 16:33:53 -0400 Subject: Fix type warning --- src/components/moments/MomentCommentPreview.tsx | 6 ---- src/components/moments/MomentPostContent.tsx | 2 +- src/utils/comments.tsx | 38 ++++++++++++------------- 3 files changed, 20 insertions(+), 26 deletions(-) (limited to 'src/utils/comments.tsx') diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index 03f30dda..94fcb008 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -23,12 +23,6 @@ const MomentCommentPreview: React.FC = ({ ? 'No Comments' : moment.comments_count + ' comments'; - /** - * TODO: - * - figure out why mention PartTypes have type warnings - * - fix padding for all types (double check on iPhone 8) - */ - return ( = ({ renderTextWithMentions({ value: moment.caption, styles: styles.captionText, - partTypes: mentionPartTypes('white'), + partTypes: mentionPartTypes('momentCaption'), onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index e700da88..161ede0b 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,9 +79,23 @@ export const renderTextWithMentions: React.FC = ({ ); }; -const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = ( - theme, -) => { +export const mentionPartTypes: ( + theme: 'blue' | 'momentCaption' | 'commentPreview', +) => PartType[] = (theme) => { + return [ + { + trigger: '@', + renderSuggestions: (props) => , + allowedSpacesCount: 0, + isInsertSpaceAfterMention: true, + textStyle: _textStyle(theme), + }, + ]; +}; + +const _textStyle: ( + theme: 'blue' | 'momentCaption' | 'commentPreview', +) => StyleProp = (theme) => { switch (theme) { case 'blue': return { @@ -94,26 +108,12 @@ const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = ( fontWeight: '800', top: normalize(3), }; - case 'white': + case 'momentCaption': default: return { color: 'white', fontWeight: '800', - top: normalize(7.5), + top: normalize(4.5), }; } }; - -export const mentionPartTypes: ( - theme: 'blue' | 'white' | 'commentPreview', -) => PartType[] = (theme) => { - return [ - { - trigger: '@', - renderSuggestions: (props) => , - allowedSpacesCount: 0, - isInsertSpaceAfterMention: true, - textStyle: textStyle(theme), - }, - ]; -}; -- cgit v1.2.3-70-g09d2 From 22a58b2ad08297b6d5dd3dd241ae23a756ae7552 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 11 Jun 2021 17:44:24 -0400 Subject: Adjust mention text padding --- src/components/moments/MomentCommentPreview.tsx | 2 +- src/components/moments/MomentPostContent.tsx | 2 +- src/utils/comments.tsx | 22 ++++++++-------------- 3 files changed, 10 insertions(+), 16 deletions(-) (limited to 'src/utils/comments.tsx') diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index 092f8936..e53ed258 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -50,7 +50,7 @@ const MomentCommentPreview: React.FC = ({ {renderTextWithMentions({ value: commentPreview.comment, styles: styles.normalFont, - partTypes: mentionPartTypes('commentPreview'), + partTypes: mentionPartTypes('white'), onPress: (user: UserType) => navigateToProfile( state, diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index e43cba4f..aca2999c 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -112,7 +112,7 @@ const MomentPostContent: React.FC = ({ renderTextWithMentions({ value: moment.caption, styles: styles.captionText, - partTypes: mentionPartTypes('momentCaption'), + partTypes: mentionPartTypes('white'), onPress: (user: UserType) => navigateToProfile( state, diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 161ede0b..910b44e7 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,9 +79,9 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: ( - theme: 'blue' | 'momentCaption' | 'commentPreview', -) => PartType[] = (theme) => { +export const mentionPartTypes: (theme: 'blue' | 'white') => PartType[] = ( + theme, +) => { return [ { trigger: '@', @@ -93,27 +93,21 @@ export const mentionPartTypes: ( ]; }; -const _textStyle: ( - theme: 'blue' | 'momentCaption' | 'commentPreview', -) => StyleProp = (theme) => { +const _textStyle: (theme: 'blue' | 'white') => StyleProp = ( + theme, +) => { switch (theme) { case 'blue': return { color: TAGG_LIGHT_BLUE, top: normalize(3), }; - case 'commentPreview': - return { - color: 'white', - fontWeight: '800', - top: normalize(3), - }; - case 'momentCaption': + case 'white': default: return { color: 'white', fontWeight: '800', - top: normalize(4.5), + top: normalize(3), }; } }; -- cgit v1.2.3-70-g09d2