diff --git a/apps/mobile/src/components/ActionSheetComponent/index.js b/apps/mobile/src/components/ActionSheetComponent/index.js index 8cdaad46a..22f1d9d19 100644 --- a/apps/mobile/src/components/ActionSheetComponent/index.js +++ b/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,12 +111,160 @@ export const ActionSheetComponent = ({ } }; + const localRefresh = type => { + let toAdd; + switch (type) { + case 'note': { + toAdd = db.getNote(note.dateCreated); + break; + } + case 'notebook': { + toAdd = db.getNotebook(note.dateCreated); + break; + } + case 'topic': { + toAdd = db.getTopic(topic.notebookId, topic.title); + break; + } + } + setNote({...toAdd}); + }; + + const rowItemsData = [ + { + name: 'Add to', + icon: 'book', + func: () => { + close(); + NavigationService.push('Folders', { + note: note, + title: 'Choose a notebook', + isMove: true, + 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 ( - + - { - close(); - NavigationService.push('Folders', { - note: note, - title: 'Choose a notebook', - isMove: true, - hideMore: true, - canGoBack: true, - }); - }} - style={{ - alignItems: 'center', - }}> - + {rowItemsData.map(rowItem => + rowItems.includes(rowItem.name) ? ( + + - - Move to - - - { - close(); - }} - style={{ - alignItems: 'center', - }}> - - - Share - - - { - close(); - }} - style={{ - alignItems: 'center', - }}> - - - - Export - - - { - close('delete'); - }} - style={{ - alignItems: 'center', - }}> - - - - Delete - - + + {rowItem.name} + + + ) : null, + )} - - {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( - color => ( + + {hasColors ? ( + + {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( + color => ( + { + let noteColors = note.colors; + + if (noteColors.includes(color)) { + noteColors.splice(color, 1); + } else { + noteColors.push(color); + } + + db.addNote({ + dateCreated: note.dateCreated, + colors: noteColors, + content: note.content, + title: note.title, + }); + localRefresh(item.type); + setWillRefresh(true); + }} + style={{ + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center', + borderColor: colors.nav, + }}> + + {note.colors.includes(color) ? ( + + ) : null} + + + ), + )} + + ) : null} + + {hasTags ? ( + + {note.tags.map(tag => ( { - let noteColors = note.colors; - - if (noteColors.includes(color)) { - noteColors.splice(color, 1); - } else { - noteColors.push(color); - } + let oldProps = {...note}; + oldProps.tags.splice(oldProps.tags.indexOf(tag), 1); db.addNote({ dateCreated: note.dateCreated, - colors: noteColors, content: note.content, title: note.title, + tags: oldProps.tags, }); - setNote({...db.getNote(note.dateCreated)}); + localRefresh(item.type); setWillRefresh(true); }} style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - borderColor: colors.nav, + margin: 1, + paddingHorizontal: 5, + paddingVertical: 2.5, }}> - - {note.colors.includes(color) ? ( - - ) : null} - - - ), - )} - - - - {note.tags.map(tag => ( - { - let oldProps = {...note}; - - oldProps.tags.splice(oldProps.tags.indexOf(tag), 1); - db.addNote({ - dateCreated: note.dateCreated, - content: note.content, - title: note.title, - tags: oldProps.tags, - }); - setNote({...db.getNote(note.dateCreated)}); - }} - style={{ - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - margin: 1, - paddingHorizontal: 5, - paddingVertical: 2.5, - }}> - - - {tag.slice(0, 1)} - - {tag.slice(1)} - - - ))} - (tagsInputRef = ref)} - placeholderTextColor={colors.icon} - onFocus={() => { - setFocused(true); - }} - selectionColor={colors.accent} - onBlur={() => { - setFocused(false); - }} - placeholder="#hashtag" - onChangeText={value => { - tagToAdd = value; - if (tagToAdd.length > 0) backPressCount = 0; - }} - onSubmitEditing={_onSubmit} - onKeyPress={_onKeyPress} - /> - - - { - 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}) => ( - { - item.func(); - }} - style={{ - width: '100%', - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-end', - paddingHorizontal: 12, - paddingVertical: pv + 5, - paddingTop: index === 0 ? 5 : pv + 5, - }}> - - - {item.name} + + {tag.slice(0, 1)} + + {tag.slice(1)} - - {item.switch ? ( - - ) : ( - undefined - )} - {item.check ? ( + + ))} + (tagsInputRef = ref)} + placeholderTextColor={colors.icon} + onFocus={() => { + setFocused(true); + }} + selectionColor={colors.accent} + onBlur={() => { + setFocused(false); + }} + placeholder="#hashtag" + onChangeText={value => { + tagToAdd = value; + if (tagToAdd.length > 0) backPressCount = 0; + }} + onSubmitEditing={_onSubmit} + onKeyPress={_onKeyPress} + /> + + ) : null} + + {columnItems.length > 0 ? ( + + {columnItemsData.map(item => + columnItems.includes(item.name) ? ( { + item.func(); + }} style={{ - borderWidth: 2, - borderColor: item.on ? colors.accent : colors.icon, - width: 23, - height: 23, - justifyContent: 'center', - alignItems: 'center', - borderRadius: 100, - paddingTop: 3, + width: '100%', + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-end', + paddingHorizontal: 12, + paddingVertical: pv + 5, }}> - {item.on ? ( - + + + + {item.name} + + + {item.switch ? ( + + ) : ( + undefined + )} + {item.check ? ( + + {item.on ? ( + + ) : null} + ) : null} - ) : null} - - )} - /> + ) : null, + )} + + ) : null} ); };