diff --git a/apps/mobile/src/components/SelectionWrapper/actionstrip.js b/apps/mobile/src/components/SelectionWrapper/actionstrip.js
new file mode 100644
index 000000000..cb5f81dbf
--- /dev/null
+++ b/apps/mobile/src/components/SelectionWrapper/actionstrip.js
@@ -0,0 +1,239 @@
+import React, {useEffect, useState} from 'react';
+import {Clipboard, View} from 'react-native';
+import {useTracked} from '../../provider';
+import {Actions} from '../../provider/Actions';
+import {
+ eSendEvent,
+ openVault,
+ sendNoteEditedEvent,
+ ToastEvent,
+} from '../../services/EventManager';
+import {dWidth, getElevation, toTXT} from '../../utils';
+import {db} from '../../utils/DB';
+import {refreshNotesPage} from '../../utils/Events';
+import {deleteItems} from '../../utils/functions';
+import {ActionIcon} from '../ActionIcon';
+import {Button} from '../Button';
+import {simpleDialogEvent} from '../DialogManager/recievers';
+import {TEMPLATE_PERMANANT_DELETE} from '../DialogManager/Templates';
+
+export const ActionStrip = ({note, setActionStrip}) => {
+ const [state, dispatch] = useTracked();
+ const {colors, selectionMode} = state;
+ const [isPinnedToMenu, setIsPinnedToMenu] = useState(false);
+ const [width, setWidth] = useState(dWidth);
+ useEffect(() => {
+ if (note.type === 'note') return;
+ setIsPinnedToMenu(db.settings.isPinned(note.id));
+ }, []);
+
+ const updateNotes = () => {
+ dispatch({type: Actions.NOTES});
+ sendNoteEditedEvent({id: note.id, forced: true});
+ dispatch({type: Actions.FAVORITES});
+ eSendEvent(refreshNotesPage);
+ };
+
+ const actions = [
+ {
+ title: 'Pin ' + note.type,
+ icon: note.pinned ? 'pin-off' : 'pin',
+ visible: note.type === 'note' || note.type === 'notebook',
+ onPress: async () => {
+ if (!note.id) return;
+
+ if (note.type === 'note') {
+ if (db.notes.pinned.length === 3 && !note.pinned) {
+ ToastEvent.show('You cannot pin more than 3 notes', 'error');
+ return;
+ }
+ await db.notes.note(note.id).pin();
+ } else {
+ if (db.notebooks.pinned.length === 3 && !note.pinned) {
+ ToastEvent.show('You cannot pin more than 3 notebooks', 'error');
+ return;
+ }
+ await db.notebooks.notebook(note.id).pin();
+ dispatch({type: Actions.NOTEBOOKS});
+ }
+ updateNotes();
+ setActionStrip(false);
+ },
+ },
+ {
+ title: 'Add to favorites',
+ icon: note.favorite ? 'star-off' : 'star',
+ onPress: async () => {
+ if (!note.id) return;
+ if (note.type === 'note') {
+ await db.notes.note(note.id).favorite();
+ } else {
+ await db.notebooks.notebook(note.id).favorite();
+ }
+ updateNotes();
+ setActionStrip(false);
+ },
+ visible: note.type === 'note',
+ color: !note.favorite ? 'orange' : null,
+ },
+
+ {
+ title: isPinnedToMenu
+ ? 'Remove Shortcut from Menu'
+ : 'Add Shortcut to Menu',
+ icon: isPinnedToMenu ? 'link-variant-remove' : 'link-variant',
+ onPress: async () => {
+ try {
+ if (isPinnedToMenu) {
+ await db.settings.unpin(note.id);
+ ToastEvent.show('Shortcut removed from menu', 'success');
+ } else {
+ if (note.type === 'topic') {
+ await db.settings.pin(note.type, {
+ id: note.id,
+ notebookId: note.notebookId,
+ });
+ } else {
+ await db.settings.pin(note.type, {id: note.id});
+ }
+
+ ToastEvent.show('Shortcut added to menu', 'success');
+ }
+ setIsPinnedToMenu(db.settings.isPinned(note.id));
+ dispatch({type: Actions.MENU_PINS});
+
+ setActionStrip(false);
+ } catch (e) {}
+ },
+ visible: note.type !== 'note',
+ },
+ {
+ title: 'Copy Note',
+ icon: 'content-copy',
+ visible: note.type === 'note',
+ onPress: async () => {
+ if (note.locked) {
+ openVault({
+ copyNote: true,
+ novault: true,
+ locked: true,
+ item: note,
+ });
+ } else {
+ let delta = await db.notes.note(note.id).content();
+ let text = toTXT(delta);
+ text = `${note.title}\n \n ${text}`;
+ Clipboard.setString(text);
+ ToastEvent.show('Note copied to clipboard', 'success');
+ }
+ setActionStrip(false);
+ },
+ },
+ {
+ title: 'Restore ' + note.itemType,
+ icon: 'delete-restore',
+ onPress: async () => {
+ await db.trash.restore(note.id);
+ dispatch({type: Actions.TRASH});
+ dispatch({type: note.itemType});
+ dispatch({type: Actions.FAVORITES});
+ eSendEvent(refreshNotesPage);
+ ToastEvent.show(
+ item.type === 'note' ? 'Note restored' : 'Notebook restored',
+ 'success',
+ );
+ setActionStrip(false);
+ },
+ visible: note.type === 'trash',
+ },
+ {
+ title: 'Delete' + note.itemType,
+ icon: 'delete',
+ visible: note.type === 'trash',
+ onPress: () => {
+ simpleDialogEvent(TEMPLATE_PERMANANT_DELETE);
+ setActionStrip(false);
+ },
+ },
+ {
+ title: 'Delete' + note.type,
+ icon: 'delete',
+ visible: note.type !== 'trash',
+ onPress: async () => {
+ try {
+ await deleteItems(note);
+ } catch (e) {}
+ setActionStrip(false);
+ },
+ },
+ {
+ title: 'Close',
+ icon: 'close',
+ onPress: () => setActionStrip(false),
+ color: colors.light,
+ bg: colors.red,
+ visible: true,
+ },
+ ];
+
+ return (
+ setWidth(event.nativeEvent.layout.width)}
+ style={{
+ position: 'absolute',
+ zIndex: 10,
+ width: '102%',
+ height: '100%',
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ alignItems: 'center',
+ }}>
+
+ );
+};
diff --git a/apps/mobile/src/components/SelectionWrapper/backfill.js b/apps/mobile/src/components/SelectionWrapper/backfill.js
new file mode 100644
index 000000000..cb3fbec3d
--- /dev/null
+++ b/apps/mobile/src/components/SelectionWrapper/backfill.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTracked } from '../../provider';
+import { hexToRGBA } from '../../utils/ColorUtils';
+import { SIZE } from '../../utils/SizeUtils';
+import Heading from '../Typography/Heading';
+
+export const Filler = ({item, background}) => {
+ const [state] = useTracked();
+ const {colors, currentEditingNote} = state;
+ const color = item.color || 'accent';
+
+ return (
+
+
+ {item.conflicted ? (
+
+
+
+ CONFLICTS
+
+
+ ) : null}
+
+ {currentEditingNote === item.id ? (
+
+
+
+ EDITING NOW
+
+
+ ) : null}
+
+
+ );
+};
diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js
index 69db5287b..e94192c0e 100644
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/apps/mobile/src/components/SelectionWrapper/index.js
@@ -1,318 +1,12 @@
import React, {useEffect, useState} from 'react';
-import {TouchableOpacity, View, Clipboard} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
-import {Actions} from '../../provider/Actions';
-import {
- eSendEvent,
- eSubscribeEvent,
- eUnSubscribeEvent,
- openVault,
- sendNoteEditedEvent,
- ToastEvent,
-} from '../../services/EventManager';
-import {dWidth, getElevation, toTXT} from '../../utils';
-import {hexToRGBA} from '../../utils/ColorUtils';
-import {db} from '../../utils/DB';
-import {refreshNotesPage} from '../../utils/Events';
-import {deleteItems} from '../../utils/functions';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import {SIZE} from '../../utils/SizeUtils';
-import {ActionIcon} from '../ActionIcon';
-import {Button} from '../Button';
-import {simpleDialogEvent} from '../DialogManager/recievers';
-import {TEMPLATE_PERMANANT_DELETE} from '../DialogManager/Templates';
import {PressableButton} from '../PressableButton';
-import Heading from '../Typography/Heading';
-const Filler = ({item, background}) => {
- const [state] = useTracked();
- const {colors, currentEditingNote} = state;
- const color = item.color || 'accent';
-
- return (
-
-
- {item.conflicted ? (
-
-
-
- CONFLICTS
-
-
- ) : null}
-
- {currentEditingNote === item.id ? (
-
-
-
- EDITING NOW
-
-
- ) : null}
-
-
- );
-};
-
-const ActionStrip = ({note, setActionStrip}) => {
- const [state, dispatch] = useTracked();
- const {colors, selectionMode} = state;
- const [isPinnedToMenu, setIsPinnedToMenu] = useState(false);
- const [width, setWidth] = useState(dWidth);
- useEffect(() => {
- if (note.type === 'note') return;
- setIsPinnedToMenu(db.settings.isPinned(note.id));
- }, []);
-
- const updateNotes = () => {
- dispatch({type: Actions.NOTES});
- sendNoteEditedEvent({id: note.id, forced: true});
- dispatch({type: Actions.FAVORITES});
- eSendEvent(refreshNotesPage);
- };
-
- const actions = [
- {
- title: 'Pin ' + note.type,
- icon: note.pinned ? 'pin-off' : 'pin',
- visible: note.type === 'note' || note.type === 'notebook',
- onPress: async () => {
- if (!note.id) return;
-
- if (note.type === 'note') {
- if (db.notes.pinned.length === 3 && !note.pinned) {
- ToastEvent.show('You cannot pin more than 3 notes', 'error');
- return;
- }
- await db.notes.note(note.id).pin();
- } else {
- if (db.notebooks.pinned.length === 3 && !note.pinned) {
- ToastEvent.show('You cannot pin more than 3 notebooks', 'error');
- return;
- }
- await db.notebooks.notebook(note.id).pin();
- dispatch({type: Actions.NOTEBOOKS});
- }
- updateNotes();
- setActionStrip(false);
- },
- },
- {
- title: 'Add to favorites',
- icon: note.favorite ? 'star-off' : 'star',
- onPress: async () => {
- if (!note.id) return;
- if (note.type === 'note') {
- await db.notes.note(note.id).favorite();
- } else {
- await db.notebooks.notebook(note.id).favorite();
- }
- updateNotes();
- setActionStrip(false);
- },
- visible: note.type === 'note',
- color: !note.favorite ? 'orange' : null,
- },
-
- {
- title: isPinnedToMenu
- ? 'Remove Shortcut from Menu'
- : 'Add Shortcut to Menu',
- icon: isPinnedToMenu ? 'link-variant-remove' : 'link-variant',
- onPress: async () => {
- try {
- if (isPinnedToMenu) {
- await db.settings.unpin(note.id);
- ToastEvent.show('Shortcut removed from menu', 'success');
- } else {
- if (note.type === 'topic') {
- await db.settings.pin(note.type, {
- id: note.id,
- notebookId: note.notebookId,
- });
- } else {
- await db.settings.pin(note.type, {id: note.id});
- }
-
- ToastEvent.show('Shortcut added to menu', 'success');
- }
- setIsPinnedToMenu(db.settings.isPinned(note.id));
- dispatch({type: Actions.MENU_PINS});
-
- setActionStrip(false);
- } catch (e) {}
- },
- visible: note.type !== 'note',
- },
- {
- title: 'Copy Note',
- icon: 'content-copy',
- visible: note.type === 'note',
- onPress: async () => {
- if (note.locked) {
- openVault({
- copyNote: true,
- novault: true,
- locked: true,
- item: note,
- });
- } else {
- let delta = await db.notes.note(note.id).content();
- let text = toTXT(delta);
- text = `${note.title}\n \n ${text}`;
- Clipboard.setString(text);
- ToastEvent.show('Note copied to clipboard', 'success');
- }
- setActionStrip(false);
- },
- },
- {
- title: 'Restore ' + note.itemType,
- icon: 'delete-restore',
- onPress: async () => {
- await db.trash.restore(note.id);
- dispatch({type: Actions.TRASH});
- dispatch({type: note.itemType});
- dispatch({type: Actions.FAVORITES});
- eSendEvent(refreshNotesPage);
- ToastEvent.show(
- item.type === 'note' ? 'Note restored' : 'Notebook restored',
- 'success',
- );
- setActionStrip(false);
- },
- visible: note.type === 'trash',
- },
- {
- title: 'Delete' + note.itemType,
- icon: 'delete',
- visible: note.type === 'trash',
- onPress: () => {
- simpleDialogEvent(TEMPLATE_PERMANANT_DELETE);
- setActionStrip(false);
- },
- },
- {
- title: 'Delete' + note.type,
- icon: 'delete',
- visible: note.type !== 'trash',
- onPress: async () => {
- try {
- await deleteItems(note);
- } catch (e) {}
- setActionStrip(false);
- },
- },
- {
- title: 'Close',
- icon: 'close',
- onPress: () => setActionStrip(false),
- color: colors.light,
- bg: colors.red,
- visible: true,
- },
- ];
-
- return (
- setWidth(event.nativeEvent.layout.width)}
- style={{
- position: 'absolute',
- zIndex: 10,
- width: '102%',
- height: '100%',
- flexDirection: 'row',
- justifyContent: 'flex-end',
- alignItems: 'center',
- }}>
-
- );
-};
+import {ActionStrip} from './action-strip';
+import {Filler} from './back-fill';
const SelectionWrapper = ({
children,
@@ -349,7 +43,6 @@ const SelectionWrapper = ({
const onLong = () => {
if (selectionMode) return;
- console.log(item.type,item.title)
if (item.type === 'topic' && item.title === 'General') return;
setActionStrip(!actionStrip);
@@ -367,6 +60,10 @@ const SelectionWrapper = ({
setActionStrip(false);
};
+ const closeStrip = () => {
+ setActionStrip(false);
+ };
+
useEffect(() => {
eSubscribeEvent('navigate', closeStrip);