From 2fa0b4fb6da8cf5dd4b87174f438e90a08dffe84 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 16:40:34 -0400 Subject: Refactor moment category icon logic --- src/utils/moments.ts | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) (limited to 'src/utils') diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 9e8cc332..2b924b1b 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -1,4 +1,6 @@ import moment from 'moment'; +import {ImageSourcePropType} from 'react-native'; +import {MOMENT_CATEGORY_BG_COLORS} from '../constants'; /** * Formats elapsed time from a given time. @@ -71,3 +73,85 @@ export const getTimeInShorthand = (date_time: string) => { } return time; }; + +export const getMomentCategoryIconInfo = (category: string) => { + let icon: ImageSourcePropType, bgColor: string; + switch (category) { + case 'Friends': + icon = require('../../assets/moment-categories/friends-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[0]; + break; + case 'Adventure': + icon = require('../../assets/moment-categories/adventure-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[1]; + break; + case 'Photo Dump': + icon = require('../../assets/moment-categories/photo-dump-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[2]; + break; + case 'Food': + icon = require('../../assets/moment-categories/food-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[3]; + break; + case 'Music': + icon = require('../../assets/moment-categories/music-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[4]; + break; + case 'Art': + icon = require('../../assets/moment-categories/art-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[5]; + break; + case 'Sports': + icon = require('../../assets/moment-categories/sports-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[6]; + break; + case 'Fashion': + icon = require('../../assets/moment-categories/fashion-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[7]; + break; + case 'Travel': + icon = require('../../assets/moment-categories/travel-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[8]; + break; + case 'Pets': + icon = require('../../assets/moment-categories/pets-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[9]; + break; + case 'Fitness': + icon = require('../../assets/moment-categories/fitness-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[10]; + break; + case 'DIY': + icon = require('../../assets/moment-categories/diy-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[11]; + break; + case 'Nature': + icon = require('../../assets/moment-categories/nature-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[12]; + break; + case 'Early Life': + icon = require('../../assets/moment-categories/early-life-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[13]; + break; + case 'Beauty': + icon = require('../../assets/moment-categories/beauty-icon.png'); + bgColor = MOMENT_CATEGORY_BG_COLORS[14]; + break; + default: + // All custom categories + icon = require('../../assets/moment-categories/custom-icon.png'); + // A quick deterministic "random" color picker by summing up ascii char codees + const charCodeSum = category + .split('') + .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0); + bgColor = + MOMENT_CATEGORY_BG_COLORS[ + charCodeSum % MOMENT_CATEGORY_BG_COLORS.length + ]; + break; + } + return { + icon, + bgColor, + }; +}; -- cgit v1.2.3-70-g09d2 From 408f422ead09b9810860fc6ebe5da4eb9721ad76 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 16:57:26 -0400 Subject: Fix icon bug --- src/utils/moments.ts | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'src/utils') diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 2b924b1b..4aadb4d4 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -78,68 +78,68 @@ export const getMomentCategoryIconInfo = (category: string) => { let icon: ImageSourcePropType, bgColor: string; switch (category) { case 'Friends': - icon = require('../../assets/moment-categories/friends-icon.png'); + icon = require('../assets/moment-categories/friends-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[0]; break; case 'Adventure': - icon = require('../../assets/moment-categories/adventure-icon.png'); + icon = require('../assets/moment-categories/adventure-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[1]; break; case 'Photo Dump': - icon = require('../../assets/moment-categories/photo-dump-icon.png'); + icon = require('../assets/moment-categories/photo-dump-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[2]; break; case 'Food': - icon = require('../../assets/moment-categories/food-icon.png'); + icon = require('../assets/moment-categories/food-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[3]; break; case 'Music': - icon = require('../../assets/moment-categories/music-icon.png'); + icon = require('../assets/moment-categories/music-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[4]; break; case 'Art': - icon = require('../../assets/moment-categories/art-icon.png'); + icon = require('../assets/moment-categories/art-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[5]; break; case 'Sports': - icon = require('../../assets/moment-categories/sports-icon.png'); + icon = require('../assets/moment-categories/sports-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[6]; break; case 'Fashion': - icon = require('../../assets/moment-categories/fashion-icon.png'); + icon = require('../assets/moment-categories/fashion-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[7]; break; case 'Travel': - icon = require('../../assets/moment-categories/travel-icon.png'); + icon = require('../assets/moment-categories/travel-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[8]; break; case 'Pets': - icon = require('../../assets/moment-categories/pets-icon.png'); + icon = require('../assets/moment-categories/pets-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[9]; break; case 'Fitness': - icon = require('../../assets/moment-categories/fitness-icon.png'); + icon = require('../assets/moment-categories/fitness-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[10]; break; case 'DIY': - icon = require('../../assets/moment-categories/diy-icon.png'); + icon = require('../assets/moment-categories/diy-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[11]; break; case 'Nature': - icon = require('../../assets/moment-categories/nature-icon.png'); + icon = require('../assets/moment-categories/nature-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[12]; break; case 'Early Life': - icon = require('../../assets/moment-categories/early-life-icon.png'); + icon = require('../assets/moment-categories/early-life-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[13]; break; case 'Beauty': - icon = require('../../assets/moment-categories/beauty-icon.png'); + icon = require('../assets/moment-categories/beauty-icon.png'); bgColor = MOMENT_CATEGORY_BG_COLORS[14]; break; default: // All custom categories - icon = require('../../assets/moment-categories/custom-icon.png'); + icon = require('../assets/moment-categories/custom-icon.png'); // A quick deterministic "random" color picker by summing up ascii char codees const charCodeSum = category .split('') -- cgit v1.2.3-70-g09d2 From aa25df7dbd192394f2d6d42ed07d1e1f43cc07f0 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Jul 2021 15:23:12 -0400 Subject: Fix mention box position, Fix image flickering --- src/components/common/TaggTypeahead.tsx | 44 +++++++++++++++++++++------ src/screens/profile/CaptionScreen.tsx | 53 ++++++++++++++++++++------------- src/utils/comments.tsx | 9 ++++-- 3 files changed, 75 insertions(+), 31 deletions(-) (limited to 'src/utils') diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 7967fdbc..7444e2d8 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,5 +1,5 @@ -import React, {Fragment, useEffect, useState} from 'react'; -import {ScrollView, StyleSheet, View} from 'react-native'; +import React, {Fragment, useEffect, useRef, useState} from 'react'; +import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'; import {Suggestion} from 'react-native-controlled-mentions'; import {useSelector} from 'react-redux'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; @@ -13,15 +13,19 @@ type TaggTypeaheadProps = { keyword: string | undefined; component: string | undefined; onSuggestionPress: (suggestion: Suggestion) => void; + isShowBelowStyle?: boolean; }; const TaggTypeahead: React.FC = ({ keyword, component, onSuggestionPress, + isShowBelowStyle = false, }) => { const {friends} = useSelector((state: RootState) => state.friends); const [results, setResults] = useState([]); + const [viewPx, setViewPx] = useState(0); + const viewRef = useRef(null); const [height, setHeight] = useState(0); const margin = component === 'comment' ? -10 : 0; @@ -33,6 +37,22 @@ const TaggTypeahead: React.FC = ({ } }, [keyword]); + const onLayout = (e: LayoutChangeEvent) => { + setHeight(e.nativeEvent.layout.height); + viewRef.current?.measure( + ( + _fx: number, + _fy: number, + _width: number, + _height: number, + px: number, + _py: number, + ) => { + setViewPx(px); + }, + ); + }; + const getQuerySuggested = async () => { if (keyword === undefined || keyword === '@') { return; @@ -50,14 +70,17 @@ const TaggTypeahead: React.FC = ({ } return ( - - + + {!isShowBelowStyle && } { - setHeight(event.nativeEvent.layout.height); - }} + onLayout={onLayout} keyboardShouldPersistTaps={'always'}> {results.map((user) => ( = ({ const styles = StyleSheet.create({ container: { + position: 'absolute', width: SCREEN_WIDTH, maxHeight: 264, backgroundColor: 'white', - position: 'absolute', alignSelf: 'center', zIndex: 1, }, @@ -95,6 +118,9 @@ const styles = StyleSheet.create({ bottom: 10, zIndex: -1, }, + topPadding: { + top: 30, + }, }); export default TaggTypeahead; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 9a1878aa..02b8caf2 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {FC, useEffect, useState} from 'react'; +import React, {FC, useEffect, useMemo, useState} from 'react'; import { Alert, Image, @@ -293,27 +293,39 @@ const CaptionScreen: React.FC = ({route, navigation}) => { placeholderTextColor="white" value={caption} onChange={setCaption} - partTypes={mentionPartTypes('white', 'caption')} + partTypes={mentionPartTypes('white', 'caption', true)} /> - navigation.navigate('ChoosingCategoryScreen', {})} - /> - - navigation.navigate('TagFriendsScreen', { - media: { - uri: mediaUri, - isVideo: isMediaAVideo, - }, - selectedTags: tags, - }) - } - /> + {useMemo( + () => ( + + navigation.navigate('ChoosingCategoryScreen', {}) + } + /> + ), + [momentCategory], + )} + {useMemo( + () => ( + + navigation.navigate('TagFriendsScreen', { + media: { + uri: mediaUri, + isVideo: isMediaAVideo, + }, + selectedTags: tags, + }) + } + /> + ), + [taggedUsersText], + )} {momentCategory ? ( = ({ export const mentionPartTypes: ( theme: 'blue' | 'white', component: 'caption' | 'comment', -) => PartType[] = (theme, component) => { + isShowBelowStyle?: boolean, +) => PartType[] = (theme, component, isShowBelowStyle = false) => { return [ { trigger: '@', renderSuggestions: (props) => ( - + ), allowedSpacesCount: 0, isInsertSpaceAfterMention: true, -- cgit v1.2.3-70-g09d2