add attachment dialog

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

@@ -0,0 +1,153 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {ScrollView, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useTracked} from '../../provider';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {eCloseTagsDialog, eOpenTagsDialog} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
+import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
+import DialogHeader from '../Dialog/dialog-header';
+import {PressableButton} from '../PressableButton';
+import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
+
+export const AttachmentDialog = () => {
+  const [state] = useTracked();
+  const colors = state.colors;
+  const [visible, setVisible] = useState(false);
+  const [note, setNote] = useState(null);
+  const actionSheetRef = useRef();
+  const [attachments, setAttachments] = useState([
+    {
+      name: 'my-file.png',
+      length: 10000,
+      type: 'text/pdf'
+    }
+  ]);
+
+  useEffect(() => {
+    eSubscribeEvent(eOpenTagsDialog, open);
+    eSubscribeEvent(eCloseTagsDialog, close);
+    return () => {
+      eUnSubscribeEvent(eOpenTagsDialog, open);
+      eUnSubscribeEvent(eCloseTagsDialog, close);
+    };
+  }, []);
+
+  const open = item => {
+    setNote(item);
+    setVisible(true);
+  };
+
+  useEffect(() => {
+    if (visible) {
+      actionSheetRef.current?.show();
+    }
+  }, [visible]);
+
+  const close = () => {
+    actionSheetRef.current?.hide();
+  };
+
+  return visible ? null : (
+    <ActionSheetWrapper
+      centered={false}
+      fwdRef={actionSheetRef}
+      onClose={async () => {
+        setVisible(false);
+      }}>
+      <View
+        style={{
+          width: '100%',
+          alignSelf: 'center',
+          paddingHorizontal: 12,
+          minHeight: '60%'
+        }}>
+        <DialogHeader title="Attachments" />
+        <ScrollView
+          nestedScrollEnabled
+          overScrollMode="never"
+          scrollToOverflowEnabled={false}
+          keyboardDismissMode="none"
+          keyboardShouldPersistTaps="always"
+          onMomentumScrollEnd={() => {
+            actionSheetRef.current?.handleChildScrollEnd();
+          }}>
+          {attachments.map(item => (
+            <Attachment attachment={item} note={note} setNote={setNote} />
+          ))}
+        </ScrollView>
+      </View>
+    </ActionSheetWrapper>
+  );
+};
+
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+let icons = {
+  image: 'image',
+  file: 'file',
+  pdf: 'file-pdf-box',
+  video: 'file-video-outline',
+  audio: 'file-music-outline'
+};
+
+function getIcon(type) {
+  let types = type.split('/');
+  let icon = Object.keys(icons).find(
+    i => i.includes(types[0]) || i.includes(types[1])
+  );
+  return icons[icon] || 'file';
+}
+
+const Attachment = ({attachment, note, setNote}) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+
+  const onPress = async () => {};
+
+  return (
+    <PressableButton
+      customStyle={{
+        flexDirection: 'row',
+        marginVertical: 5,
+        justifyContent: 'space-between',
+        padding: 12
+      }}
+      onPress={onPress}
+      type="grayBg">
+      <Text
+        style={{
+          flexWrap: 'wrap',
+          flexShrink: 1
+        }}>
+        <Icon
+          name={getIcon(attachment.type)}
+          size={SIZE.md}
+          color={colors.pri}
+        />{' '}
+        <Heading
+          size={SIZE.sm}
+          style={{
+            flexWrap: 'wrap'
+          }}
+          color={colors.pri}>
+          {attachment.name}
+        </Heading>
+        <Paragraph size={12}> ({formatBytes(attachment.length)})</Paragraph>
+      </Text>
+
+      <Icon name="download" size={SIZE.lg} color={colors.pri} />
+    </PressableButton>
+  );
+};

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

@@ -1,27 +1,32 @@
-import React, { Component, createRef } from 'react';
+import React, {Component, createRef} from 'react';
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
   openVault
 } from '../../services/EventManager';
-import { getCurrentColors } from '../../utils/Colors';
+import {getCurrentColors} from '../../utils/Colors';
 import {
   eCloseActionSheet,
   eCloseAddNotebookDialog,
-  eCloseLoginDialog, eClosePremiumDialog, eOnLoadNote,
+  eCloseLoginDialog,
+  eClosePremiumDialog,
+  eOnLoadNote,
   eOpenActionSheet,
   eOpenAddNotebookDialog,
   eOpenExportDialog,
-  eOpenLoginDialog, eOpenPremiumDialog, eShowGetPremium,
+  eOpenLoginDialog,
+  eOpenPremiumDialog,
+  eShowGetPremium,
   eThemeUpdated
 } from '../../utils/Events';
-import { EditorSettings } from '../../views/Editor/EditorSettings';
-import { ActionSheetComponent } from '../ActionSheetComponent';
+import {EditorSettings} from '../../views/Editor/EditorSettings';
+import {ActionSheetComponent} from '../ActionSheetComponent';
 import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
-import { AddNotebookDialog } from '../AddNotebookDialog';
-import { AddTopicDialog } from '../AddTopicDialog';
-import { Dialog } from '../Dialog';
+import {AddNotebookDialog} from '../AddNotebookDialog';
+import {AddTopicDialog} from '../AddTopicDialog';
+import {AttachmentDialog} from '../AttachmentDialog';
+import {Dialog} from '../Dialog';
 import ExportDialog from '../ExportDialog';
 import ImagePreview from '../ImagePreview';
 import LoginDialog from '../LoginDialog';
@@ -38,8 +43,8 @@ import RestoreDialog from '../RestoreDialog';
 import ResultDialog from '../ResultDialog';
 import SortDialog from '../SortDialog';
 import TagsDialog from '../TagsDialog';
-import { UpdateDialog } from '../UpdateDialog';
-import { VaultDialog } from '../VaultDialog';
+import {UpdateDialog} from '../UpdateDialog';
+import {VaultDialog} from '../VaultDialog';
 
 export class DialogManager extends Component {
   constructor(props) {
@@ -54,7 +59,7 @@ export class DialogManager extends Component {
         colors: false,
         tags: false,
         rowItems: [],
-        columnItems: [],
+        columnItems: []
       },
       simpleDialog: {
         title: '',
@@ -62,8 +67,8 @@ export class DialogManager extends Component {
         positiveText: '',
         negativeText: '',
         action: 0,
-        icon: '',
-      },
+        icon: ''
+      }
     };
   }
 
@@ -79,11 +84,11 @@ export class DialogManager extends Component {
       {
         actionSheetData: data,
         item: data.item ? data.item : {},
-        actionSheetVisible: true,
+        actionSheetVisible: true
       },
       () => {
         this.actionSheet.current?.setModalVisible();
-      },
+      }
     );
   };
 
@@ -94,11 +99,11 @@ export class DialogManager extends Component {
   loadNote = i => {
     if (i && i.type === 'new') {
       this.setState({
-        item: {},
+        item: {}
       });
     } else {
       this.setState({
-        item: i,
+        item: i
       });
     }
   };
@@ -107,7 +112,7 @@ export class DialogManager extends Component {
     let item = this.state.item;
     this.addTopicsDialog.open({
       notebookId: item?.type !== 'topic' ? item.id : item.notebookId,
-      toEdit: item?.type === 'topic' ? item : null,
+      toEdit: item?.type === 'topic' ? item : null
     });
   };
 
@@ -117,7 +122,7 @@ export class DialogManager extends Component {
 
   onThemeChange = () => {
     this.setState({
-      colors: getCurrentColors(),
+      colors: getCurrentColors()
     });
   };
 
@@ -163,11 +168,11 @@ export class DialogManager extends Component {
   showAddNotebook = data => {
     this.setState(
       {
-        item: data.item ? data.item : data.type === 'notebook' ? data : {},
+        item: data.item ? data.item : data.type === 'notebook' ? data : {}
       },
       () => {
         this.addNotebooksDialog.open();
-      },
+      }
     );
   };
   hideAddNotebook = () => {
@@ -182,7 +187,7 @@ export class DialogManager extends Component {
             item: this.state.item,
             novault: false,
             title: 'Create vault',
-            description: 'Set a password to create a vault and lock note.',
+            description: 'Set a password to create a vault and lock note.'
           });
           break;
         }
@@ -192,7 +197,7 @@ export class DialogManager extends Component {
             novault: true,
             locked: true,
             title: 'Lock note',
-            description: 'Give access to vault to lock this note.',
+            description: 'Give access to vault to lock this note.'
           });
           break;
         }
@@ -203,7 +208,7 @@ export class DialogManager extends Component {
             locked: true,
             permanant: true,
             title: 'Unlock note',
-            description: 'Remove note from the vault.',
+            description: 'Remove note from the vault.'
           });
           break;
         }
@@ -239,7 +244,7 @@ export class DialogManager extends Component {
               eSendEvent(eShowGetPremium, null);
               this.onActionSheetHide();
               this.setState({
-                actionSheetVisible: false,
+                actionSheetVisible: false
               });
             }}>
             <ActionSheetComponent
@@ -250,7 +255,7 @@ export class DialogManager extends Component {
               getRef={() => this.actionSheet}
               hasColors={actionSheetData.colors}
               hasTags={actionSheetData.colors}
-              overlayColor='rgba(0,0,0,0.3)'
+              overlayColor="rgba(0,0,0,0.3)"
               rowItems={actionSheetData.rowItems}
               columnItems={actionSheetData.columnItems}
               close={value => {
@@ -262,13 +267,12 @@ export class DialogManager extends Component {
             />
           </ActionSheetWrapper>
         )}
-
         <Dialog context="global" />
         <AddTopicDialog
           ref={ref => (this.addTopicsDialog = ref)}
           close={() => {
             this.setState({
-              item: {},
+              item: {}
             });
           }}
           colors={colors}
@@ -293,13 +297,13 @@ export class DialogManager extends Component {
         <ResultDialog />
         <VaultDialog colors={colors} />
         <MoveNoteDialog colors={colors} />
-
         <UpdateDialog />
         <RateDialog />
         <ImagePreview />
         <EditorSettings />
         <PublishNoteDialog />
-        <TagsDialog/>
+        <TagsDialog />
+        <AttachmentDialog />
       </>
     );
   }

apps/mobile/src/utils/Events.js

@@ -130,3 +130,6 @@ export const eClosePublishNoteDialog = '567';
 
 export const eOpenTagsDialog = '568';
 export const eCloseTagsDialog = '569';
+
+export const eOpenAttachmentsDialog = '600';
+export const eCloseAttachmentDialog = '601';