feat: Button for blurring search bar

WeixuanZ · Aug 26, 2020 · 22e7403 · 22e7403
1 parent accd161
commit 22e7403
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 34 deletions.
diff --git a/App.js b/App.js
@@ -15,15 +15,15 @@ export default function App() {
   const [canGoForward, setCanGoForward] = useState(false)
   const [currentUrl, setCurrentUrl] = useState('https://www.google.com')
   const [currentSearchbar, setCurrentSearchbar] = useState('')
+  const [seachbarFocused, setSeachbarFocused] = useState(true)
 
   const webviewRef = useRef(null)
-  const searchbarRef = useRef(null)
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
-        if (canGoBack && !searchbarRef.current.isFocused()) {
+        if (canGoBack && !seachbarFocused) {
           webviewRef.current.goBack()
           return true
         }
@@ -42,14 +42,21 @@ export default function App() {
       />
       <Toolbar
         currentSearchbar={currentSearchbar}
-        searchbarRef={searchbarRef}
+        seachbarFocused={seachbarFocused}
         webviewRef={webviewRef}
         handleChangeText={setCurrentSearchbar}
         handleSubmit={({ nativeEvent: { text } }) => {
           setCurrentUrl(formatQuery(text))
           Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
         }}
-        handleBlur={() => setCurrentSearchbar(getDisplayStr(currentUrl))} // restore if not submitted
+        handleFocus={() => {
+          setSeachbarFocused(true)
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+        }}
+        handleBlur={() => {
+          setSeachbarFocused(false)
+          setCurrentSearchbar(getDisplayStr(currentUrl)) // restore if not submitted
+        }}
       />
       <Frame
         currentUrl={currentUrl}
@@ -59,7 +66,7 @@ export default function App() {
           setCanGoForward(navState.canGoForward)
           setCurrentUrl(navState.url)
           // prevent text update when textinput is in focus
-          if (!searchbarRef.current.isFocused()) {
+          if (!seachbarFocused) {
             setCurrentSearchbar(getDisplayStr(navState.url))
           }
         }}

diff --git a/components/Searchbar.js b/components/Searchbar.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import { View, TextInput, BackHandler, StyleSheet } from 'react-native'
 import { Ionicons } from '@expo/vector-icons'
-import * as Haptics from 'expo-haptics'
 
 import colors from '../config/colors.js'
 
@@ -10,6 +9,7 @@ export default function SearchBar({
   searchbarRef,
   handleChangeText,
   handleSubmit,
+  handleFocus,
   handleBlur
 }) {
   useEffect(() => {
@@ -39,7 +39,7 @@ export default function SearchBar({
         value={currentSearchbar}
         onChangeText={handleChangeText}
         onSubmitEditing={handleSubmit}
-        onFocus={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
+        onFocus={handleFocus}
         onBlur={handleBlur}
         placeholder="Search or enter URL"
         keyboardAppearance="light"

diff --git a/components/Toolbar.js b/components/Toolbar.js
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { View, TouchableOpacity, StyleSheet } from 'react-native'
-import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons'
+import { MaterialCommunityIcons } from '@expo/vector-icons'
 import { Camera } from 'expo-camera'
 import * as Haptics from 'expo-haptics'
 
@@ -10,12 +10,18 @@ import FaceDetector from './FaceDetector.js'
 import colors, { faceRecBtnColors } from '../config/colors.js'
 import faceAction from '../lib/face.js'
 
-export default function Toolbar({ webviewRef, searchbarRef, ...props }) {
+export default function Toolbar({
+  seachbarFocused,
+  webviewRef,
+  ...props
+}) {
   // true|false: whether face detection is enabled
   const [faceTrackState, setFaceTrackState] = useState(false)
   // 'noPermission'|'noFace'|'normal': the state of face detection
   const [faceState, setFaceState] = useState('noFace')
 
+  const searchbarRef = useRef(null)
+
   // check camera permission
   useEffect(() => {
     (async () => {
@@ -27,30 +33,40 @@ export default function Toolbar({ webviewRef, searchbarRef, ...props }) {
 
   return (
     <View style={styles.container}>
-      <Searchbar
-        searchbarRef={searchbarRef}
-        {...props}
-      />
-      <TouchableOpacity
-        style={styles.btn}
-        onPress={() => {
-          setFaceTrackState(!faceTrackState) // toggle face detection
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
-        }}
-      >
-        <MaterialCommunityIcons
-          name="face-recognition"
-          size={22}
-          color={
-            faceTrackState
-              ? faceRecBtnColors[faceState] || faceRecBtnColors.noPermission
-              : colors.black
-          } // black if not enabled, otherwise color depends on face detection state
-        />
-      </TouchableOpacity>
-      {/* <TouchableOpacity style={styles.btn}>
-        <Ionicons name="ios-menu" size={28} color="black" />
-      </TouchableOpacity> */}
+      <Searchbar searchbarRef={searchbarRef} {...props} />
+      {seachbarFocused ? (
+        <TouchableOpacity
+          style={styles.btn}
+          onPress={() => {
+            searchbarRef.current.blur()
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+          }}
+        >
+          <MaterialCommunityIcons
+            name="close-circle-outline"
+            size={24}
+            color="black"
+          />
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          style={styles.btn}
+          onPress={() => {
+            setFaceTrackState(!faceTrackState) // toggle face detection
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+          }}
+        >
+          <MaterialCommunityIcons
+            name="face-recognition"
+            size={22}
+            color={
+              faceTrackState
+                ? faceRecBtnColors[faceState] || faceRecBtnColors.noPermission
+                : colors.black
+            } // black if not enabled, otherwise color depends on face detection state
+          />
+        </TouchableOpacity>
+      )}
       <FaceDetector
         faceTrackState={faceTrackState}
         handleMountError={() => setFaceState('noPermission')}