fix header and search

apps/mobile/src/components/Header/index.js

@@ -1,23 +1,61 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {ActivityIndicator, Platform, StyleSheet, View} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useTracked} from '../../provider';
-import {eSendEvent} from '../../services/EventManager';
-import {useHideHeader} from '../../utils/Hooks';
+import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
 import {dWidth} from '../../utils';
 import {ActionIcon} from '../ActionIcon';
 import {HeaderMenu} from './HeaderMenu';
 import {HeaderTitle} from './HeaderTitle';
 import {SIZE} from "../../utils/SizeUtils";
 import {HeaderLeftMenu} from "./HeaderLeftMenu";
+import { eScrollEvent } from '../../utils/Events';
 
+let timeout = null;
 export const Header = ({showSearch, root}) => {
   const [state, ] = useTracked();
   const {colors, syncing} = state;
-
   const insets = useSafeAreaInsets();
-  const hideHeader = useHideHeader();
+  const [hideHeader,setHideHeader] = useState(false);
+
+  const {
+    searchResults,
+  } = state;
+  let offsetY = 0;
+
+
+  const onScroll = (y) => {
+    if (searchResults.results.length > 0) return;
+    if (y < 30) {
+      setHideHeader(false);
+      offsetY = y;
+    }
+    if (y > offsetY) {
+      if (y - offsetY < 100) return;
+      clearTimeout(timeout);
+      timeout = null;
+      timeout = setTimeout(() => {
+        setHideHeader(true);
+      }, 300);
+      offsetY = y;
+    } else {
+      if (offsetY - y < 50) return;
+      clearTimeout(timeout);
+      timeout = null;
+      timeout = setTimeout(() => {
+        setHideHeader(false);
+      }, 300);
+      offsetY = y;
+    }
+  };
+
+  useEffect(() => {
+    eSubscribeEvent(eScrollEvent, onScroll);
+    return () => {
+      eUnSubscribeEvent(eScrollEvent, onScroll);
+    };
+  }, []);
 
   return (
     <View

apps/mobile/src/components/SearchInput/index.js

@@ -18,22 +18,12 @@ let searchResult = [];
 let offsetY = 0;
 let timeoutAnimate = null;
 let animating = false;
-export const Search = (props) => {
-  const [state, dispatch] = useTracked();
-  const {colors, searchResults} = state;
-  const [text, setText] = useState('');
-  const [focus, setFocus] = useState(false);
-  const [searchState,setSearchState] = useState({
-    noSearch: false,
-    data: [],
-    type: 'notes',
-    color: null,
-    placeholder: 'Search all notes',
-  })
-  const _marginAnim = new Value(0);
-  const _opacity = new Value(1);
-  const _borderAnim = new Value(1.5);
-  const animation = (margin, opacity, border) => {
+
+const _marginAnim = new Value(0);
+const _opacity = new Value(1);
+const _borderAnim = new Value(1.5);
+
+const animation = (margin, opacity, border) => {
   if (animating) return;
   animating = true;
   timing(_marginAnim, {
@@ -54,7 +44,21 @@ export const Search = (props) => {
   setTimeout(() => {
     animating = false;
   }, 500);
-  };
+};
+
+export const Search = (props) => {
+  const [state, dispatch] = useTracked();
+  const {colors, searchResults} = state;
+  const [text, setText] = useState('');
+  const [focus, setFocus] = useState(false);
+  const [searchState,setSearchState] = useState({
+    noSearch: false,
+    data: [],
+    type: 'notes',
+    color: null,
+    placeholder: 'Search all notes',
+  })
+
 
   const onScroll = (y) => {
     if (searchResults.results.length > 0) return;
@@ -96,12 +100,15 @@ export const Search = (props) => {
     selection.type = searchState.type;
     eSubscribeEvent(eScrollEvent, onScroll);
     eSubscribeEvent('showSearch', () => {
+      console.log('show search');
+      animating = false;
       animation(0, 1, 1.5);
     });
     eSubscribeEvent(eUpdateSearchState,updateSearchState)
     return () => {
       eUnSubscribeEvent(eScrollEvent, onScroll);
       eUnSubscribeEvent('showSearch', () => {
+        animating = false;
         animation(0, 1, 1.5);
       });
       eUnSubscribeEvent(eUpdateSearchState,updateSearchState)

apps/mobile/src/utils/Hooks.js

@@ -16,46 +16,3 @@ export function useForceUpdate() {
   return update;
 }
 
-export function useHideHeader() {
-  const [hide,setHide] = useState(false);
-  const [state, dispatch] = useTracked();
-  const {
-    searchResults,
-  } = state;
-  let offsetY = 0;
-  let timeout = null;
-
-  const onScroll = (y) => {
-    if (searchResults.results.length > 0) return;
-    if (y < 30) {
-      setHide(false);
-      offsetY = y;
-    }
-    if (y > offsetY) {
-      if (y - offsetY < 100) return;
-      clearTimeout(timeout);
-      timeout = null;
-      timeout = setTimeout(() => {
-        setHide(true);
-      }, 300);
-      offsetY = y;
-    } else {
-      if (offsetY - y < 50) return;
-      clearTimeout(timeout);
-      timeout = null;
-      timeout = setTimeout(() => {
-        setHide(false);
-      }, 300);
-      offsetY = y;
-    }
-  };
-
-  useEffect(() => {
-    eSubscribeEvent(eScrollEvent, onScroll);
-    return () => {
-      eUnSubscribeEvent(eScrollEvent, onScroll);
-    };
-  }, []);
-  return hide;
-
-}