add selectAll to multi-select

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

@@ -15,7 +15,7 @@ import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
 import {eScrollEvent, eClearSearch} from '../../services/events';
-import {db, getElevation, ToastEvent, DDS} from '../../utils/utils';
+import {db, getElevation, ToastEvent, DDS, selection} from '../../utils/utils';
 import {Header} from '../header';
 import {Search, inputRef} from '../SearchInput';
 import SelectionHeader from '../SelectionHeader';
@@ -171,6 +171,8 @@ export const Container = ({
   }, []);
 
   useEffect(() => {
+    selection.data = data;
+    selection.type = type;
     eSubscribeEvent(eScrollEvent, onScroll);
 
     return () => {
@@ -194,7 +196,7 @@ export const Container = ({
         style={{
           height: '100%',
         }}>
-        {noSelectionHeader ? null : <SelectionHeader />}
+        {noSelectionHeader ? null : <SelectionHeader items={data} />}
 
         <View
           style={{

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

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   Platform,
   SafeAreaView,
@@ -12,7 +12,7 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
-import {w, ToastEvent, db} from '../../utils/utils';
+import {w, ToastEvent, db, selection} from '../../utils/utils';
 import {eSendEvent} from '../../services/eventManager';
 import {eOpenMoveNoteDialog, eOpenSimpleDialog} from '../../services/events';
 import {TEMPLATE_DELETE} from '../DialogManager/templates';
@@ -21,12 +21,14 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
 
-export const SelectionHeader = ({navigation}) => {
+export const SelectionHeader = () => {
   // State
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList, currentScreen} = state;
+  const [selectAll, setSelectAll] = useState(false);
 
   useEffect(() => {
+    console.log(selection.data, selection.type);
     console.log(currentScreen);
   }, [currentScreen]);
 
@@ -38,7 +40,7 @@ export const SelectionHeader = ({navigation}) => {
       style={{
         width: '100%',
         position: 'absolute',
-        height: Platform.OS === 'android' ? 50 + StatusBar.currentHeight : 50,
+        height: Platform.OS === 'android' ? 80 + StatusBar.currentHeight : 80,
         backgroundColor: colors.bg,
         paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
         justifyContent: 'flex-end',
@@ -67,7 +69,6 @@ export const SelectionHeader = ({navigation}) => {
           <TouchableOpacity
             onPress={() => {
               dispatch({type: ACTIONS.SELECTION_MODE, enabled: !selectionMode});
-
               dispatch({type: ACTIONS.CLEAR_SELECTION});
             }}
             hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
@@ -86,6 +87,7 @@ export const SelectionHeader = ({navigation}) => {
               size={SIZE.xxxl}
             />
           </TouchableOpacity>
+
           <Text
             style={{
               fontSize: SIZE.lg,
@@ -93,7 +95,7 @@ export const SelectionHeader = ({navigation}) => {
               color: colors.pri,
               textAlignVertical: 'center',
             }}>
-            {selectedItemsList.length}
+            {selectAll ? 'All' : selectedItemsList.length}
           </Text>
         </View>
 
@@ -227,6 +229,44 @@ export const SelectionHeader = ({navigation}) => {
           ) : null}
         </View>
       </View>
+
+      <TouchableOpacity
+        onPress={() => {
+          if (selectAll) {
+            dispatch({type: ACTIONS.SELECT_ALL, selected: []});
+          } else {
+            dispatch({
+              type: ACTIONS.SELECT_ALL,
+              selected:
+                selection.type === 'notes' ? db.notes.all : selection.data,
+            });
+          }
+
+          setSelectAll(!selectAll);
+        }}
+        hitSlop={{top: 20, bottom: 20, left: 20, right: 40}}
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: 40,
+          flexDirection: 'row',
+          alignSelf: 'flex-start',
+        }}>
+        <Icon
+          style={{}}
+          color={selectAll ? colors.accent : colors.icon}
+          name={
+            selectAll ? 'check-circle-outline' : 'checkbox-blank-circle-outline'
+          }
+          size={SIZE.lg}
+        />
+        <Text
+          style={{
+            marginLeft: 10,
+          }}>
+          Select All
+        </Text>
+      </TouchableOpacity>
     </Animatable.View>
   );
 };

apps/mobile/src/provider/actions.js

@@ -17,4 +17,5 @@ export const ACTIONS = {
   USER: 'getUser',
   CURRENT_SCREEN: 'currentScreen',
   SETTINGS: 'getSettings',
+  SELECT_ALL: 'selectAll',
 };

apps/mobile/src/provider/reducer.js

@@ -96,6 +96,14 @@ export const reducer = (state, action) => {
         selectionMode: action.enabled,
       };
     }
+    case ACTIONS.SELECT_ALL: {
+      console.log(action.selected);
+
+      return {
+        ...state,
+        selectedItemsList: action.selected,
+      };
+    }
     case ACTIONS.SELECTED_ITEMS: {
       let selectedItems = [...state.selectedItemsList];
       if (selectedItems.includes(action.item)) {

apps/mobile/src/utils/utils.js

@@ -31,6 +31,11 @@ export const editing = {
     type: null,
   },
 };
+export const selection = {
+  data: [],
+  type: null,
+  selectedItems: [],
+};
 
 export const history = {
   selectedItemsList: [],