ui: dynamic ActionSheet Component

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

@@ -6,14 +6,21 @@ import {
   Dimensions,
   TextInput,
   FlatList,
+  Platform,
 } from 'react-native';
-import {SIZE, pv, WEIGHT, opacity} from '../../common/common';
+import {
+  SIZE,
+  pv,
+  WEIGHT,
+  opacity,
+  COLOR_SCHEME_DARK,
+  COLOR_SCHEME_LIGHT,
+} from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import NavigationService from '../../services/NavigationService';
-
 import {db} from '../../../App';
-
 import {useAppContext} from '../../provider/useAppContext';
+import AsyncStorage from '@react-native-community/async-storage';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -23,8 +30,12 @@ export const ActionSheetComponent = ({
   close = () => {},
   item = {},
   setWillRefresh = value => {},
+  hasColors = false,
+  hasTags = false,
+  rowItems = [],
+  columnItems = [],
 }) => {
-  const {colors} = useAppContext();
+  const {colors, changeColorScheme} = useAppContext();
   const [focused, setFocused] = useState(false);
   const [note, setNote] = useState(item ? item : {});
 
@@ -100,21 +111,30 @@ export const ActionSheetComponent = ({
     }
   };
 
-  return (
+  const localRefresh = type => {
-    <View>
+    let toAdd;
-      <View
+    switch (type) {
-        style={{
+      case 'note': {
-          width: w - 24,
+        toAdd = db.getNote(note.dateCreated);
-          justifyContent: 'space-around',
+        break;
-          alignItems: 'center',
+      }
-          marginHorizontal: 12,
+      case 'notebook': {
-          paddingVertical: 10,
+        toAdd = db.getNotebook(note.dateCreated);
-          flexDirection: 'row',
+        break;
-          borderBottomWidth: 1,
+      }
-          borderBottomColor: colors.nav,
+      case 'topic': {
-        }}>
+        toAdd = db.getTopic(topic.notebookId, topic.title);
-        <TouchableOpacity
+        break;
-          onPress={() => {
+      }
+    }
+    setNote({...toAdd});
+  };
+
+  const rowItemsData = [
+    {
+      name: 'Add to',
+      icon: 'book',
+      func: () => {
         close();
         NavigationService.push('Folders', {
           note: note,
@@ -123,22 +143,154 @@ export const ActionSheetComponent = ({
           hideMore: true,
           canGoBack: true,
         });
-          }}
+      },
+    },
+    {
+      name: 'Share',
+      icon: 'share-2',
+      func: () => {
+        close();
+      },
+    },
+    {
+      name: 'Export',
+      icon: 'external-link',
+      func: () => {
+        close();
+      },
+    },
+    {
+      name: 'Delete',
+      icon: 'trash',
+      func: () => close('delete'),
+    },
+    {
+      name: 'Edit Notebook',
+      icon: 'trash',
+      func: () => {
+        close('topic');
+      },
+    },
+    {
+      name: 'Edit Topic',
+      icon: 'trash',
+      func: () => {
+        close('topic');
+      },
+    },
+    {
+      name: 'Restore',
+      icon: 'trash',
+      func: () => {
+        db.restoreItem(item.dateCreated);
+        ToastEvent.show(
+          item.type == 'note' ? 'Note restored' : 'Notebook restored',
+          'success',
+          1000,
+          () => {},
+          '',
+        );
+        close();
+      },
+    },
+    {
+      name: 'Remove',
+      icon: 'trash',
+      func: () => {
+        close();
+      },
+    },
+  ];
+
+  columnItemsData = [
+    {
+      name: 'Dark Mode',
+      icon: 'moon',
+      func: () => {
+        if (!colors.night) {
+          AsyncStorage.setItem('theme', JSON.stringify(COLOR_SCHEME_DARK));
+          changeColorScheme(COLOR_SCHEME_DARK);
+        } else {
+          AsyncStorage.setItem('theme', JSON.stringify(COLOR_SCHEME_LIGHT));
+          changeColorScheme(COLOR_SCHEME_LIGHT);
+        }
+      },
+      switch: true,
+      on: colors.night ? true : false,
+      close: false,
+    },
+    {
+      name: 'Pin',
+      icon: 'tag',
+      func: () => {
+        db.pinItem(note.type, note.dateCreated);
+        localRefresh(item.type);
+        setWillRefresh(true);
+      },
+      close: false,
+      check: true,
+      on: note.pinned,
+    },
+    {
+      name: 'Favorite',
+      icon: 'star',
+      func: () => {
+        db.favoriteItem(note.type, note.dateCreated);
+        localRefresh(item.type);
+        setWillRefresh(true);
+      },
+      close: false,
+      check: true,
+      on: note.favorite,
+    },
+    {
+      name: 'Add to Vault',
+      icon: 'lock',
+      func: () => {
+        note.locked ? close('unlock') : close('lock');
+      },
+      close: true,
+      check: true,
+      on: note.locked,
+    },
+  ];
+
+  return (
+    <View
+      style={{
+        paddingBottom: 15,
+        backgroundColor: colors.bg,
+      }}>
+      <View
+        style={{
+          width: w - 24,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginHorizontal: 12,
+          paddingVertical: 10,
+          flexDirection: 'row',
+          borderBottomWidth: 1,
+          borderBottomColor: colors.nav,
+        }}>
+        {rowItemsData.map(rowItem =>
+          rowItems.includes(rowItem.name) ? (
+            <TouchableOpacity
+              onPress={rowItem.func}
               style={{
                 alignItems: 'center',
+                width: (w - 24) / rowItems.length,
               }}>
               <Icon
                 style={{
                   width: 50,
-              height: 50,
+                  height: 40,
                   borderRadius: 100,
                   justifyContent: 'center',
                   alignItems: 'center',
                   textAlign: 'center',
                   textAlignVertical: 'center',
-              marginBottom: 5,
                 }}
-            name="arrow-right"
+                name={rowItem.icon}
                 size={SIZE.lg}
                 color={colors.accent}
               />
@@ -147,102 +299,16 @@ export const ActionSheetComponent = ({
                 style={{
                   fontFamily: WEIGHT.regular,
                   fontSize: SIZE.xs + 1,
+                  color: colors.pri,
                 }}>
-            Move to
+                {rowItem.name}
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={() => {
-            close();
-          }}
-          style={{
-            alignItems: 'center',
-          }}>
-          <Icon
-            style={{
-              width: 50,
-              height: 50,
-              justifyContent: 'center',
-              alignItems: 'center',
-              textAlign: 'center',
-              textAlignVertical: 'center',
-              marginBottom: 5,
-            }}
-            name="share-2"
-            size={SIZE.lg}
-            color={colors.accent}
-          />
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xs + 1,
-            }}>
-            Share
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={() => {
-            close();
-          }}
-          style={{
-            alignItems: 'center',
-          }}>
-          <Icon
-            style={{
-              width: 50,
-              height: 50,
-              justifyContent: 'center',
-              alignItems: 'center',
-              textAlign: 'center',
-              textAlignVertical: 'center',
-              marginBottom: 5,
-            }}
-            name="external-link"
-            size={SIZE.lg}
-            color={colors.accent}
-          />
-
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xs + 1,
-            }}>
-            Export
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={() => {
-            close('delete');
-          }}
-          style={{
-            alignItems: 'center',
-          }}>
-          <Icon
-            style={{
-              width: 50,
-              height: 50,
-              borderRadius: 100,
-              justifyContent: 'center',
-              alignItems: 'center',
-              textAlign: 'center',
-              textAlignVertical: 'center',
-
-              marginBottom: 5,
-            }}
-            name="trash"
-            size={SIZE.lg}
-            color={colors.accent}
-          />
-
-          <Text
-            style={{
-              fontFamily: WEIGHT.regular,
-              fontSize: SIZE.xs + 1,
-            }}>
-            Delete
               </Text>
             </TouchableOpacity>
+          ) : null,
+        )}
       </View>
+
+      {hasColors ? (
         <View
           style={{
             flexDirection: 'row',
@@ -271,7 +337,7 @@ export const ActionSheetComponent = ({
                     content: note.content,
                     title: note.title,
                   });
-                setNote({...db.getNote(note.dateCreated)});
+                  localRefresh(item.type);
                   setWillRefresh(true);
                 }}
                 style={{
@@ -297,7 +363,9 @@ export const ActionSheetComponent = ({
             ),
           )}
         </View>
+      ) : null}
 
+      {hasTags ? (
         <View
           style={{
             flexDirection: 'row',
@@ -307,6 +375,7 @@ export const ActionSheetComponent = ({
             borderRadius: 5,
             borderWidth: 1.5,
             borderColor: focused ? colors.accent : colors.nav,
+            paddingVertical: 5,
           }}>
           {note.tags.map(tag => (
             <TouchableOpacity
@@ -320,7 +389,8 @@ export const ActionSheetComponent = ({
                   title: note.title,
                   tags: oldProps.tags,
                 });
-              setNote({...db.getNote(note.dateCreated)});
+                localRefresh(item.type);
+                setWillRefresh(true);
               }}
               style={{
                 flexDirection: 'row',
@@ -375,50 +445,12 @@ export const ActionSheetComponent = ({
             onKeyPress={_onKeyPress}
           />
         </View>
+      ) : null}
 
-      <FlatList
+      {columnItems.length > 0 ? (
-        style={{
+        <View>
-          marginTop: 10,
+          {columnItemsData.map(item =>
-        }}
+            columnItems.includes(item.name) ? (
-        data={[
-          {
-            name: 'Pin',
-            icon: 'tag',
-            func: () => {
-              db.pinItem(note.type, note.dateCreated);
-              setNote({...db.getNote(note.dateCreated)});
-              setWillRefresh(true);
-            },
-            close: false,
-            check: true,
-            on: note.pinned,
-          },
-
-          {
-            name: 'Favorite',
-            icon: 'star',
-            func: () => {
-              db.favoriteItem(note.type, note.dateCreated);
-              setNote({...db.getNote(note.dateCreated)});
-              setWillRefresh(true);
-            },
-            close: false,
-            check: true,
-            on: note.favorite,
-          },
-          {
-            name: 'Add to Vault',
-            icon: 'lock',
-            func: () => {
-              note.locked ? close('unlock') : close('lock');
-            },
-            close: true,
-            check: true,
-            on: note.locked,
-          },
-        ]}
-        keyExtractor={(item, index) => item.name}
-        renderItem={({item, index}) => (
               <TouchableOpacity
                 activeOpacity={opacity}
                 onPress={() => {
@@ -432,7 +464,6 @@ export const ActionSheetComponent = ({
                   alignItems: 'flex-end',
                   paddingHorizontal: 12,
                   paddingVertical: pv + 5,
-              paddingTop: index === 0 ? 5 : pv + 5,
                 }}>
                 <View
                   style={{
@@ -478,13 +509,19 @@ export const ActionSheetComponent = ({
                       paddingTop: 3,
                     }}>
                     {item.on ? (
-                  <Icon size={SIZE.sm - 2} color={colors.accent} name="check" />
+                      <Icon
-                ) : null}
+                        size={SIZE.sm - 2}
-              </TouchableOpacity>
+                        color={colors.accent}
-            ) : null}
+                        name="check"
-          </TouchableOpacity>
-        )}
                       />
+                    ) : null}
+                  </TouchableOpacity>
+                ) : null}
+              </TouchableOpacity>
+            ) : null,
+          )}
+        </View>
+      ) : null}
     </View>
   );
 };