refactor

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

@@ -12,8 +12,12 @@ import * as Animatable from 'react-native-animatable';
 import Icon from 'react-native-vector-icons/Feather';
 import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
-import {getElevation, w} from '../../utils/utils';
-import {DDS} from '../../../App';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
+import {eScrollEvent} from '../../services/events';
+import {getElevation} from '../../utils/utils';
+import {Header} from '../header';
+import {Search} from '../SearchInput';
+import SelectionHeader from '../SelectionHeader';
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
@@ -27,13 +31,71 @@ export const Container = ({
   bottomButtonOnPress,
   bottomButtonText,
   noBottomButton = false,
+  data = [],
 }) => {
   // State
   const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, selectionMode, searchResults} = state;
+  const [text, setText] = useState('');
 
+  const [hideHeader, setHideHeader] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);
 
+  let offsetY = 0;
+  let countUp = 1;
+  let countDown = 0;
+  let searchResult = [];
+
+  const onScroll = y => {
+    if (searchResults.length > 0) return;
+    if (y < 30) setHideHeader(false);
+    if (y > offsetY) {
+      if (y - offsetY < 150 || countDown > 0) return;
+      countDown = 1;
+      countUp = 0;
+      setHideHeader(true);
+    } else {
+      if (offsetY - y < 150 || countUp > 0) return;
+      countDown = 0;
+      countUp = 1;
+      setHideHeader(false);
+    }
+    offsetY = y;
+  };
+
+  const onChangeText = value => {
+    //setText(value);
+  };
+  const onSubmitEditing = async () => {
+    if (!text || text.length < 1) {
+      clearSearch();
+    } else {
+      //setKeyword(text);
+      searchResult = await db.searchNotes(text);
+
+      if (searchResult && searchResult.length > 0) {
+        //setSearchResults([...searchResult]);
+      } else {
+        ToastEvent.show('No search results found', 'error', 3000, () => {}, '');
+      }
+    }
+  };
+
+  const onBlur = () => {
+    if (text && text.length < 1) {
+      clearSearch();
+    }
+  };
+
+  const onFocus = () => {
+    //setSearch(false);
+  };
+
+  const clearSearch = () => {
+    searchResult = null;
+    //setSearchResults([...[]]);
+  };
+
   useEffect(() => {
     Keyboard.addListener('keyboardDidShow', () => {
       setTimeout(() => {
@@ -58,6 +120,15 @@ export const Container = ({
       });
     };
   }, []);
+
+  useEffect(() => {
+    eSubscribeEvent(eScrollEvent, onScroll);
+
+    return () => {
+      eUnSubscribeEvent(eScrollEvent, onScroll);
+    };
+  });
+
   // Render
 
   return (
@@ -75,6 +146,55 @@ export const Container = ({
         style={{
           height: '100%',
         }}>
+        <SelectionHeader />
+
+        <Animatable.View
+          animation="fadeIn"
+          useNativeDriver={true}
+          duration={600}
+          delay={700}>
+          <Animatable.View
+            transition={['backgroundColor', 'opacity', 'height']}
+            duration={300}
+            style={{
+              position: 'absolute',
+              backgroundColor: colors.bg,
+              zIndex: 10,
+              height: selectionMode ? 0 : null,
+              opacity: selectionMode ? 0 : 1,
+              width: '100%',
+            }}>
+            <Header
+              menu
+              hide={hideHeader}
+              verticalMenu
+              showSearch={() => {
+                setHideHeader(false);
+                countUp = 0;
+                countDown = 0;
+              }}
+              colors={colors}
+              heading={'Home'}
+              canGoBack={false}
+              customIcon="menu"
+            />
+
+            {data[0] ? (
+              <Search
+                clear={() => setText('')}
+                hide={hideHeader}
+                onChangeText={onChangeText}
+                onSubmitEditing={onSubmitEditing}
+                placeholder="Search your notes"
+                onBlur={onBlur}
+                onFocus={onFocus}
+                clearSearch={clearSearch}
+                value={text}
+              />
+            ) : null}
+          </Animatable.View>
+        </Animatable.View>
+
         {children}
 
         {noBottomButton ? null : (