Merge pull request #285 from leonyjiang/hotfix-hide-search-cancel

[Hotfix] Hide Search Bar Cancel Button

4 files changed, 58 insertions, 95 deletions

diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index b4cc5483..84d35cac 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -25,12 +25,7 @@ interface RecentSearchesProps extends TouchableOpacityProps {
 }
 
 const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
-  const {
-    sectionTitle,
-    recents,
-    recentCategories,
-    screenType,
-  } = props;
+  const {sectionTitle, recents, recentCategories, screenType} = props;
   return (
     <ScrollView
       style={styles.mainContainer}
@@ -53,10 +48,11 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
 
 const styles = StyleSheet.create({
   mainContainer: {
-    flexGrow: 1,
+    flex: 1,
   },
   contentContainer: {
     paddingBottom: SCREEN_HEIGHT * 0.1,
+    flex: 1,
   },
   header: {
     paddingHorizontal: 25,
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index be0eecc7..5e3a1e64 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {
   StyleSheet,
   TextInput,
@@ -10,10 +10,10 @@ import {
   NativeSyntheticEvent,
   TextInputSubmitEditingEventData,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {interpolate} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
 import {normalize} from 'react-native-elements';
-import {SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT} from '../../utils';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -27,7 +27,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
-  style,
+  top,
 }) => {
   const handleSubmit = (
     e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
@@ -36,47 +36,52 @@ const SearchBar: React.FC<SearchBarProps> = ({
     Keyboard.dismiss();
   };
 
+  /*
+   * CSS properties for width change animation.
+   */
+  const marginRight: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputRange: [0, 58],
+  });
+  const opacity: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputRange: [0, 1],
+  });
+
   return (
-    <>
-      <View style={[styles.container, style]}>
-        <Animated.View style={[styles.inputContainer]}>
-          <AnimatedIcon
-            name="search"
-            color={'#7E7E7E'}
-            size={25}
-            style={styles.searchIcon}
-          />
-          <TextInput
-            style={[styles.input]}
-            placeholder={'Search'}
-            placeholderTextColor={'#828282'}
-            onSubmitEditing={handleSubmit}
-            clearButtonMode="while-editing"
-            autoCapitalize="none"
-            autoCorrect={false}
-            {...{value, onChangeText, onFocus, onBlur}}
-          />
-        </Animated.View>
-        <View style={styles.cancelButtonView}>
-          <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-            <Text style={styles.cancelText}>Cancel</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-      <Text style={styles.helperText}>
-        Try searching for "trending on tagg"
-      </Text>
-    </>
+    <View style={styles.container}>
+      <Animated.View style={styles.inputContainer}>
+        <AnimatedIcon
+          name="search"
+          color={'#7E7E7E'}
+          size={25}
+          style={styles.searchIcon}
+        />
+        <TextInput
+          style={[styles.input]}
+          placeholder={'Search'}
+          placeholderTextColor={'#828282'}
+          onSubmitEditing={handleSubmit}
+          clearButtonMode="while-editing"
+          autoCapitalize="none"
+          autoCorrect={false}
+          {...{value, onChangeText, onFocus, onBlur}}
+        />
+      </Animated.View>
+      <Animated.View style={{marginRight, opacity}}>
+        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+          <Text style={styles.cancelText}>Cancel</Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     height: 40,
+    paddingHorizontal: 20,
     flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'stretch',
-    zIndex: 2,
   },
   inputContainer: {
     flexGrow: 1,
@@ -95,27 +100,15 @@ const styles = StyleSheet.create({
     color: '#000',
     letterSpacing: normalize(0.5),
   },
-  cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
   cancelButton: {
-    position: 'absolute',
     height: '100%',
+    position: 'absolute',
     justifyContent: 'center',
-    paddingHorizontal: 5,
+    paddingHorizontal: 8,
   },
   cancelText: {
     color: '#818181',
-    fontWeight: '600',
-  },
-  helperText: {
-    fontWeight: '400',
-    fontSize: 14,
-    lineHeight: normalize(16.71),
-    color: '#828282',
-    marginBottom: '2%',
-    marginHorizontal: '2.5%',
-    marginTop: '1%',
-    textAlign: 'center',
-    width: SCREEN_WIDTH * 0.74,
+    fontWeight: '500',
   },
 });
 
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index 798d3251..fbeae1d8 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -5,7 +5,6 @@ import {
   ScreenType,
   CategoryPreviewType,
 } from '../../types';
-import ProfilePreview from '../profile/ProfilePreview';
 import {StyleSheet, View} from 'react-native';
 import SearchResultsCell from './SearchResultCell';
 import {useSelector} from 'react-redux';
@@ -16,30 +15,14 @@ interface SearchResultsProps {
   screenType: ScreenType;
   categories: CategoryPreviewType[];
 }
-const SearchResults: React.FC<SearchResultsProps> = ({
-  results,
-  previewType,
-  screenType,
-  categories,
-}) => {
+const SearchResults: React.FC<SearchResultsProps> = ({results, categories}) => {
   /**
    * Added the following swicth case to make Results on Search and Recents screen a list
    * Flex is love
    */
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
-  let containerStyle;
-  switch (previewType) {
-    case 'Search':
-      containerStyle = styles.containerSearch;
-      break;
-    case 'Recent':
-      containerStyle = styles.containerSearch;
-      break;
-    default:
-      containerStyle = styles.container;
-  }
   return (
-    <View style={containerStyle}>
+    <View>
       {categories.map((category: CategoryPreviewType) => (
         <SearchResultsCell
           key={category.name}
@@ -58,15 +41,4 @@ const SearchResults: React.FC<SearchResultsProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  containerSearch: {
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-  },
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-});
-
 export default SearchResults;
diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index 25dcf781..2833553d 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import Animated, {interpolate} from 'react-native-reanimated';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 interface SearchResultsBackgroundProps {
   top: Animated.Value<number>;
@@ -21,7 +21,8 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
   return (
     <Animated.View
       style={[styles.container, {opacity: opacityBackground, top}]}>
-      <Animated.View style={{opacity: opacityContent}}>
+      <Animated.View
+        style={[styles.contentContainer, {opacity: opacityContent}]}>
         {children}
       </Animated.View>
     </Animated.View>
@@ -29,14 +30,15 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
     position: 'absolute',
     backgroundColor: 'white',
-    paddingTop: 60,
-    paddingBottom: 10,
-    zIndex: 0,
+  },
+  contentContainer: {
+    flex: 1,
+    paddingVertical: 10,
+    paddingBottom: SCREEN_HEIGHT / 15,
   },
 });
 export default SearchResultsBackground;