From 1979a2b55ebe560b9d20862bd835343516b40379 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 10 Aug 2020 15:14:26 -0700 Subject: [TMA-160] Search Page Suggestions ("Explore") UI (#30) * Fix require cycle in Checkpoint.tsx * Create file structure for search * Add react-native-vector-icons to project * Create search page UI * Create search page UI * [TMA-65] Onboarding Link Social Media UI (#29) * Basic setup for SocialMediaLinker component * Added social media icons * Displayed 3 main social components * Layout components in a row * Added base Show More/Less button * Display all 9 socials with Show More button * Added different font colors for each linker * Realized that the check doesn't replace the text * Added type-checking to some constants * Updated state name * Fixed Checkpoint.tsx merge issue * Removed unnecessary path element * Fixed type issues on Verification.tsx * Create file structure for search * Add react-native-vector-icons to project * Create search page UI * Replace avatars with image placeholder * Add search bar placeholder Co-authored-by: Justin Shillingford --- src/components/index.ts | 1 + src/components/search/SearchBackground.tsx | 27 ++++++++++ src/components/search/SearchBar.tsx | 87 ++++++++++++++++++++++++++++++ src/components/search/SuggestedSection.tsx | 42 +++++++++++++++ src/components/search/SuggestedUser.tsx | 61 +++++++++++++++++++++ src/components/search/index.ts | 3 ++ 6 files changed, 221 insertions(+) create mode 100644 src/components/search/SearchBackground.tsx create mode 100644 src/components/search/SearchBar.tsx create mode 100644 src/components/search/SuggestedSection.tsx create mode 100644 src/components/search/SuggestedUser.tsx create mode 100644 src/components/search/index.ts (limited to 'src/components') diff --git a/src/components/index.ts b/src/components/index.ts index 48b7df05..77ba0f67 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ export * from './common'; export * from './onboarding'; export * from './profile'; +export * from './search'; diff --git a/src/components/search/SearchBackground.tsx b/src/components/search/SearchBackground.tsx new file mode 100644 index 00000000..66e3dbdb --- /dev/null +++ b/src/components/search/SearchBackground.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import {StyleSheet, ViewProps} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; + +interface SearchBackgroundProps extends ViewProps {} +const SearchBackground: React.FC = ({ + style, + children, +}) => { + return ( + + {children} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}); + +export default SearchBackground; diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx new file mode 100644 index 00000000..283b6d59 --- /dev/null +++ b/src/components/search/SearchBar.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { + StyleSheet, + TextInput, + TextInputProps, + NativeSyntheticEvent, + TextInputFocusEventData, + TouchableOpacity, + Text, + View, +} from 'react-native'; +import Icon from 'react-native-vector-icons/Feather'; +import Animated from 'react-native-reanimated'; + +interface SearchBarProps extends TextInputProps { + active: boolean; +} +const SearchBar: React.FC = ({onFocus, onBlur, active}) => { + const handleFocus = (e: NativeSyntheticEvent) => { + // TODO: animate Icon & View.inputContainer.borderColor color to '#000' + // TODO: animate background color (& page color in results ScrollView) to '#ffff' (last f for opacity) + // TODO: animate TextInput width and mount "Cancel" button (& animate opacity) + // OR + // TODO: just animate "Cancel" button width and opacity (this might be easier) + onFocus && onFocus(e); + }; + const handleBlur = (e: NativeSyntheticEvent) => { + // TODO: animate Icon color & View.inputContainer borderColor back + // TODO: animate background color (and page color in ScrollView) back to '#fff3' + // TODO: unmount Cancel button (and animate width change) + onBlur && onBlur(e); + }; + + return ( + + + + + + {active && ( + + Cancel + + )} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + height: 40, + }, + inputContainer: { + flexDirection: 'row', + alignItems: 'center', + flex: 1, + height: '100%', + paddingHorizontal: 8, + backgroundColor: '#fff3', + borderColor: '#fff', + borderWidth: 1.5, + borderRadius: 20, + }, + searchIcon: { + marginRight: 8, + }, + input: { + flex: 1, + fontSize: 16, + }, + cancelButton: { + marginHorizontal: 5, + }, + cancel: { + color: '#818181', + fontWeight: '600', + }, +}); + +export default SearchBar; diff --git a/src/components/search/SuggestedSection.tsx b/src/components/search/SuggestedSection.tsx new file mode 100644 index 00000000..af0323a5 --- /dev/null +++ b/src/components/search/SuggestedSection.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import {View, Text, ScrollView, StyleSheet} from 'react-native'; +import SuggestedUser from './SuggestedUser'; + +/** + * Search Screen for user recommendations and a search + * tool to allow user to find other users + */ + +interface SuggestedSectionProps { + title: string; + users: Array; +} +const SuggestedSection: React.FC = ({title, users}) => { + return ( + + {title} + + {users.map((name, key) => ( + + ))} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginBottom: 30, + }, + header: { + fontWeight: '600', + fontSize: 20, + color: '#fff', + marginBottom: 20, + }, + user: { + marginHorizontal: 15, + }, +}); + +export default SuggestedSection; diff --git a/src/components/search/SuggestedUser.tsx b/src/components/search/SuggestedUser.tsx new file mode 100644 index 00000000..467e5e6c --- /dev/null +++ b/src/components/search/SuggestedUser.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import {View, StyleSheet, Text, ViewProps, Image} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; + +/** + * Search Screen for user recommendations and a search + * tool to allow user to find other users + */ + +interface SuggestedUserProps extends ViewProps { + name: string; +} +const SuggestedUser: React.FC = ({name, style}) => { + return ( + + + + + {name} + {`@${name.split(' ').join('')}`} + + ); +}; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + }, + gradient: { + height: 80, + width: 80, + borderRadius: 40, + justifyContent: 'center', + alignItems: 'center', + marginBottom: 10, + }, + profile: { + height: 76, + width: 76, + borderRadius: 38, + }, + name: { + fontWeight: '600', + fontSize: 16, + color: '#fff', + }, + username: { + fontWeight: '600', + fontSize: 14, + color: '#fff', + }, +}); +export default SuggestedUser; diff --git a/src/components/search/index.ts b/src/components/search/index.ts new file mode 100644 index 00000000..4e1d2b14 --- /dev/null +++ b/src/components/search/index.ts @@ -0,0 +1,3 @@ +export {default as SearchBar} from './SearchBar'; +export {default as SuggestedSection} from './SuggestedSection'; +export {default as SearchBackground} from './SearchBackground'; -- cgit v1.2.3-70-g09d2