Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 15:09:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

push changes

Browse Source
This commit is contained in:
ammarahm-ed
2019-12-21 09:46:08 +05:00
parent b7db841118
commit db4fbf0481
13 changed files with 795 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/mobile/src/components/AddNotebookDialog/index.js
View File

@@ -1,4 +1,4 @@
import React, {useState, createRef} from 'react';
import React, {useState, createRef, useEffect} from 'react';
import {
View,
Text,
@@ -17,7 +17,7 @@ import {useAppContext} from '../../provider/useAppContext';
let refs = [];
export const AddNotebookDialog = ({visible, close}) => {
export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
const {colors} = useAppContext();
const [topics, setTopics] = useState(['']);
const [title, setTitle] = useState(null);
@@ -26,7 +26,7 @@ export const AddNotebookDialog = ({visible, close}) => {
let prevItem = null;
let prevIndex = null;
let currentSelectedInput = null;
let timestamp = null;
let description = 'my first notebook';
const onSubmit = (text, index, willFocus = true) => {
let prevTopics = topics;
@@ -103,7 +103,10 @@ export const AddNotebookDialog = ({visible, close}) => {
title,
description,
topics,
timestamp: toEdit ? toEdit.dateCreated : null,
});
console.log(title, description, topics, toEdit.dateCreated);
ToastEvent.show('New notebook added', 'success', 3000, () => {}, '');
setTopics(['']);
prevIndex = null;
@@ -119,6 +122,23 @@ export const AddNotebookDialog = ({visible, close}) => {
transparent={true}
animated
animationType="fade"
onShow={() => {
if (toEdit !== null) {
let topicsList = [];
toEdit.topics.forEach(item => {
if (item.title !== 'General') {
topicsList.push(item.title);
}
});
topicsList.push('');
setTopics([...topicsList]);
setTitle(toEdit.title);
timestamp = toEdit.dateCreated;
setTimeout(() => {
console.log(timestamp, title, topics);
}, 400);
}
}}
onRequestClose={() => (refs = [])}>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
@@ -154,7 +174,7 @@ export const AddNotebookDialog = ({visible, close}) => {
marginLeft: 5,
fontSize: SIZE.md,
}}>
New Notebook
{toEdit ? 'Edit Notebook' : 'New Notebook'}
</Text>
</View>
@@ -171,6 +191,7 @@ export const AddNotebookDialog = ({visible, close}) => {
marginTop: 20,
marginBottom: 10,
}}
defaultValue={toEdit ? toEdit.title : null}
onChangeText={value => {
setTitle(value);
}}
@@ -200,6 +221,7 @@ export const AddNotebookDialog = ({visible, close}) => {
renderItem={({item, index}) => (
<TopicItem
item={item}
toEdit={toEdit ? true : false}
index={index}
colors={colors}
onSubmit={onSubmit}
@@ -288,6 +310,7 @@ const TopicItem = ({
onDelete,
onChange,
colors,
toEdit,
}) => {
const [focus, setFocus] = useState(true);
const topicRef = ref => (refs[index] = ref);
@@ -318,7 +341,6 @@ const TopicItem = ({
}}
onChangeText={value => {
onChange(value, index);
text = value;
}}
onSubmit={() => onSubmit(text, index, true)}
@@ -332,6 +354,7 @@ const TopicItem = ({
width: '90%',
maxWidth: '90%',
}}
defaultValue={item}
placeholder="Add a topic"
placeholderTextColor={colors.icon}
/>

90
apps/mobile/src/components/EditorMenu/index.js
View File

@@ -39,11 +39,15 @@ import {useAppContext} from '../../provider/useAppContext';
let tagsInputRef;
export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
const {colors} = useAppContext();
const forceUpdate = useForceUpdate();
const [tags, setTags] = useState([]);
const [selectedColor, setSelectedColor] = useState([]);
export const EditorMenu = ({
close = () => {},
hide,
update = () => {},
updateProps = () => {},
noteProps,
}) => {
const {colors, changeColorScheme} = useAppContext();
let tagToAdd = null;
let backPressCount = 0;
@@ -84,13 +88,13 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
'theme',
JSON.stringify(COLOR_SCHEME_DARK),
);
setColorScheme(COLOR_SCHEME_DARK);
changeColorScheme(COLOR_SCHEME_DARK);
} else {
AsyncStorage.setItem(
'theme',
JSON.stringify(COLOR_SCHEME_LIGHT),
);
setColorScheme(COLOR_SCHEME_LIGHT);
changeColorScheme(COLOR_SCHEME_LIGHT);
}
},
switch: true,
@@ -100,46 +104,53 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
{
name: 'Pinned',
icon: 'tag',
func: () => NavigationService.push('Home'),
close: true,
func: () => {
let props = {...noteProps};
props.pinned = !noteProps.pinned;
updateProps(props);
},
close: false,
check: true,
on: true,
on: noteProps.pinned,
},
{
name: 'Add to Favorites',
icon: 'star',
func: () =>
NavigationService.push('Folders', {
title: 'Notebooks',
}),
close: true,
func: () => {
let props = {...noteProps};
props.favorite = !noteProps.favorite;
updateProps(props);
},
close: false,
check: true,
on: false,
on: noteProps.favorite,
},
{
name: 'Share ',
icon: 'share',
func: () => NavigationService.push('Lists'),
func: () => {},
close: true,
},
{
name: 'Move to Notebook',
icon: 'arrow-right',
func: () => NavigationService.push('Favorites'),
func: () => {},
close: true,
},
{
name: 'Delete',
icon: 'trash',
func: () => NavigationService.push('Trash'),
func: () => {},
close: true,
},
{
name: 'Locked',
icon: 'lock',
func: () => NavigationService.push('Settings'),
func: () => {},
close: true,
check: true,
on: false,
@@ -263,7 +274,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
borderRadius: 5,
backgroundColor: colors.nav,
}}>
{tags.map(item => (
{noteProps.tags.map(item => (
<TouchableOpacity
style={{
flexDirection: 'row',
@@ -312,17 +323,18 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
if (backPressCount === 1 && !tagToAdd) {
backPressCount = 0;
let tagInputValue = tags[tags.length - 1];
let allTags = tags;
let tagInputValue =
noteProps.tags[noteProps.tags.length - 1];
let oldProps = {...noteProps};
if (allTags.length === 1) return;
allTags.splice(allTags.length - 1);
oldProps.tags.splice(allTags.length - 1);
setTags(allTags);
updateProps(oldProps);
tagsInputRef.setNativeProps({
text: tagInputValue,
});
forceUpdate();
setTimeout(() => {
tagsInputRef.focus();
}, 300);
@@ -339,12 +351,12 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
if (tag.includes(' ')) {
tag = tag.replace(' ', '_');
}
let allTags = [...tags];
allTags.push(tag);
let oldProps = {...noteProps};
oldProps.tags.push(tag);
tagsInputRef.setNativeProps({
text: '#',
});
setTags(allTags);
updateProps(oldProps);
tagToAdd = '';
setTimeout(() => {
tagsInputRef.focus();
@@ -354,10 +366,6 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
</ScrollView>
<TouchableOpacity
onPress={() => {
close();
NavigationService.navigate('Tags');
}}
style={{
width: '100%',
alignSelf: 'center',
@@ -411,7 +419,14 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
].map(item => (
<TouchableOpacity
onPress={() => {
setSelectedColor(item);
let props = {...noteProps};
if (props.colors.includes(item)) {
props.colors.splice(props.colors.indexOf(item), 1);
} else {
props.colors.push(item);
}
updateProps(props);
}}
style={{
flexDirection: 'row',
@@ -422,8 +437,9 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
borderWidth: 1.5,
borderRadius: 100,
padding: 3,
borderColor:
selectedColor === item ? colors.pri : colors.navbg,
borderColor: noteProps.colors.includes(item)
? colors.pri
: colors.navbg,
}}>
<View
style={{
@@ -434,7 +450,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
justifyContent: 'center',
alignItems: 'center',
}}>
{selectedColor === item ? (
{noteProps.colors.includes(item) ? (
<Icon name="check" color="white" size={SIZE.md} />
) : null}
</View>

457
apps/mobile/src/components/NoteItem/index.js
View File

@@ -4,7 +4,12 @@ import {View, Text, TouchableOpacity, Dimensions} from 'react-native';
import {COLOR_SCHEME, SIZE, br, ph, pv, WEIGHT} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {timeSince, ToastEvent, SideMenuEvent} from '../../utils/utils';
import {
timeSince,
ToastEvent,
SideMenuEvent,
getElevation,
} from '../../utils/utils';
import NavigationService from '../../services/NavigationService';
import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
import {Dialog} from '../Dialog';
@@ -53,19 +58,22 @@ const NoteItem = props => {
};
return (
<View
style={{
marginHorizontal: '5%',
paddingVertical: pv,
borderRadius: br,
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: ph,
width: '100%',
alignSelf: 'center',
borderBottomWidth: 1,
borderBottomColor: colors.nav,
}}>
style={[
{
marginHorizontal: '5%',
paddingVertical: pv,
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 0,
width: DDS.isTab ? '95%' : '90%',
marginHorizontal: '5%',
alignSelf: 'center',
borderBottomWidth: 1,
borderBottomColor: colors.nav,
},
props.customStyle ? props.customStyle : {},
]}>
<Dialog
visible={visible}
title="Delete note"
@@ -78,6 +86,30 @@ const NoteItem = props => {
}}
/>
<VaultDialog visible={vaultDialog} />
{props.pinned ? (
<View
style={{
...getElevation(3),
width: 30,
height: 30,
backgroundColor: colors.accent,
borderRadius: 100,
position: 'absolute',
left: 20,
top: -15,
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{
width: 5,
height: 5,
backgroundColor: 'white',
borderRadius: 100,
}}
/>
</View>
) : null}
<TouchableOpacity
activeOpacity={1}
@@ -131,28 +163,57 @@ const NoteItem = props => {
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<Icon
style={{width: 30}}
name="lock"
size={SIZE.xs}
color={colors.icon}
/>
<Icon
style={{width: 30}}
name="star"
size={SIZE.xs}
color={colors.icon}
/>
{!props.isTrash ? (
<>
<Icon
style={{width: 30}}
name="lock"
size={SIZE.xs}
color={colors.icon}
/>
<Icon
style={{width: 30}}
name="star"
size={SIZE.xs}
color={colors.icon}
/>
<Text
style={{
color: colors.accent,
fontSize: SIZE.xxs,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{timeSince(item.dateCreated) + ' '}
</Text>
<Text
style={{
color: colors.icon,
fontSize: SIZE.xs - 1,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{timeSince(item.dateCreated) + ' '}
</Text>
</>
) : null}
{props.isTrash ? (
<>
<Text
style={{
color: colors.icon,
fontSize: SIZE.xs - 1,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{'Deleted on: ' +
new Date(item.dateDeleted).toISOString().slice(0, 10) +
' '}
</Text>
<Text
style={{
color: colors.accent,
fontSize: SIZE.xs - 1,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{item.type[0].toUpperCase() + item.type.slice(1) + ' '}
</Text>
</>
) : null}
</View>
</View>
</>
@@ -185,163 +246,199 @@ const NoteItem = props => {
<Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
</TouchableOpacity>
}>
<MenuItem
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
{props.isTrash ? (
<>
<MenuItem
onPress={() => {
show = 'topic';
hideMenu();
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="star" size={SIZE.xs} color={colors.icon} />
{' '}Pin
</MenuItem>
<MenuItem
style={{
height: 35,
}}
onPress={() => {
hideMenu();
ToastEvent.show(
'Note added to favorites.',
'success',
3000,
() => {},
'Ok',
);
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="arrow-left" size={SIZE.sm} color={colors.icon} />
{' '}Restore
</MenuItem>
<MenuItem
onPress={() => {
show = 'topic';
hideMenu();
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="star" size={SIZE.xs} color={colors.icon} />
{' '}Favorite
</MenuItem>
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="trash" size={SIZE.sm} color={colors.icon} />
{' '}Remove
</MenuItem>
</>
) : (
<>
<MenuItem
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
<MenuItem
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="star" size={SIZE.xs} color={colors.icon} />
{' '}Pin
</MenuItem>
<MenuItem
style={{
height: 35,
}}
onPress={() => {
hideMenu();
ToastEvent.show(
'Note added to favorites.',
'success',
3000,
() => {},
'Ok',
);
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="share" size={SIZE.xs} color={colors.icon} />
{' '}Share
</MenuItem>
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="star" size={SIZE.xs} color={colors.icon} />
{' '}Favorite
</MenuItem>
<MenuItem
onPress={() => {
hideMenu();
NavigationService.push('Folders', {
note: item,
<MenuItem
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
title: 'Choose Notebook',
isMove: true,
hideMore: true,
});
}}
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="share" size={SIZE.xs} color={colors.icon} />
{' '}Share
</MenuItem>
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="arrow-right" size={SIZE.xs} color={colors.icon} />
{' '}Move
</MenuItem>
<MenuItem
onPress={() => {
show = 'vault';
hideMenu(true);
}}
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
<MenuItem
onPress={() => {
hideMenu();
NavigationService.push('Folders', {
note: item,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="lock" size={SIZE.xs} color={colors.icon} />
{' '}Lock
</MenuItem>
title: 'Choose Notebook',
isMove: true,
hideMore: true,
});
}}
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
<MenuItem
onPress={() => {
show = 'delete';
hideMenu();
}}
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="trash" size={SIZE.xs} color={colors.icon} />
{' '}Delete
</MenuItem>
<MenuDivider />
<MenuItem
disabled={true}
textStyle={{
color: colors.icon,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="arrow-right" size={SIZE.xs} color={colors.icon} />
{' '}Move
</MenuItem>
<MenuItem
onPress={() => {
show = 'vault';
hideMenu(true);
}}
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
}}
style={{
paddingVertical: 0,
margin: 0,
height: 35,
}}>
Notebook: School Notes
</MenuItem>
<MenuItem
disabled={true}
textStyle={{
color: colors.icon,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="lock" size={SIZE.xs} color={colors.icon} />
{' '}Lock
</MenuItem>
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
}}
style={{
paddingVertical: 0,
margin: 0,
height: 35,
paddingBottom: 10,
}}>
{' '}- Topic: Physics
</MenuItem>
<MenuItem
onPress={() => {
show = 'delete';
hideMenu();
}}
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
<Icon name="trash" size={SIZE.xs} color={colors.icon} />
{' '}Delete
</MenuItem>
<MenuDivider />
<MenuItem
disabled={true}
textStyle={{
color: colors.icon,
<MenuItem
disabled={true}
textStyle={{
color: colors.icon,
height: 35,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
}}
style={{
paddingVertical: 0,
margin: 0,
height: 35,
paddingBottom: 10,
}}>
Created on: {new Date(item.dateCreated).toISOString().slice(0, 10)}
</MenuItem>
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
}}
style={{
paddingVertical: 0,
margin: 0,
height: 35,
}}>
Notebook: School Notes
</MenuItem>
<MenuItem
disabled={true}
textStyle={{
color: colors.icon,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
}}
style={{
paddingVertical: 0,
margin: 0,
height: 35,
paddingBottom: 10,
}}>
{' '}- Topic: Physics
</MenuItem>
<MenuItem
disabled={true}
textStyle={{
color: colors.icon,
height: 35,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
}}
style={{
paddingVertical: 0,
margin: 0,
height: 35,
paddingBottom: 10,
}}>
Created on:{' '}
{new Date(item.dateCreated).toISOString().slice(0, 10)}
</MenuItem>
</>
)}
</Menu>
</View>
</View>

191
apps/mobile/src/components/NotebookItem/index.js
View File

@@ -17,6 +17,7 @@ import {db} from '../../../App';
import {Dialog} from '../Dialog';
import {AddTopicDialog} from '../AddTopicDialog';
import {useAppContext} from '../../provider/useAppContext';
import {AddNotebookDialog} from '../AddNotebookDialog';
export const NotebookItem = ({
item,
index,
@@ -27,11 +28,13 @@ export const NotebookItem = ({
noteToMove = null,
notebookID,
numColumns,
isTrash,
refresh = () => {},
}) => {
const {colors} = useAppContext();
const [isVisible, setVisible] = useState(false);
const [addTopic, setAddTopic] = useState(false);
const [addNotebook, setAddNotebook] = useState(false);
let setMenuRef = {};
let show = null;
@@ -69,8 +72,7 @@ export const NotebookItem = ({
setVisible(true);
show = null;
} else if (show === 'topic') {
setAddTopic(true);
show = null;
isTopic ? setAddTopic(true) : setAddNotebook(true);
}
}
};
@@ -91,7 +93,7 @@ export const NotebookItem = ({
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: ph,
paddingHorizontal: 0,
width: '100%',
alignSelf: 'center',
borderBottomWidth: 1,
@@ -113,6 +115,13 @@ export const NotebookItem = ({
toEdit={item}
close={() => setAddTopic(false)}
/>
<AddNotebookDialog
visible={addNotebook}
toEdit={item}
close={() => {
setAddNotebook(false);
}}
/>
<View
style={{
@@ -181,7 +190,37 @@ export const NotebookItem = ({
</View>
)}
{isTopic ? null : (
{isTrash ? (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 5,
}}>
<Text
style={{
color: colors.icon,
fontSize: SIZE.xs - 1,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{'Deleted on: ' +
new Date(item.dateDeleted).toISOString().slice(0, 10) +
' '}
</Text>
<Text
style={{
color: colors.accent,
fontSize: SIZE.xs - 1,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{item.type[0].toUpperCase() + item.type.slice(1) + ' '}
</Text>
</View>
) : null}
{isTopic || isTrash ? null : (
<View
style={{
flexDirection: 'row',
@@ -235,66 +274,102 @@ export const NotebookItem = ({
<Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
</TouchableOpacity>
}>
<MenuItem
onPress={() => {
show = 'topic';
hideMenu();
}}
textStyle={{
color: colors.pri,
{isTrash ? (
<>
<MenuItem
onPress={() => {
show = 'topic';
hideMenu();
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="edit-2" size={SIZE.sm} color={colors.icon} />
{' '}Edit
</MenuItem>
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="arrow-left" size={SIZE.sm} color={colors.icon} />
{' '}Restore
</MenuItem>
<MenuItem
onPress={() => {
show = 'topic';
hideMenu();
}}
textStyle={{
color: colors.pri,
<MenuItem
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="trash" size={SIZE.sm} color={colors.icon} />
{' '}Remove
</MenuItem>
</>
) : (
<>
<MenuItem
onPress={() => {
show = 'topic';
hideMenu();
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
{' '}Pin
</MenuItem>
<MenuItem
onPress={() => {
hideMenu();
ToastEvent.show(
'Note added to favorites.',
'success',
3000,
() => {},
'Ok',
);
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="edit-2" size={SIZE.sm} color={colors.icon} />
{' '}Edit
</MenuItem>
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
{' '}Favorite
</MenuItem>
<MenuItem
textStyle={{
color: colors.pri,
<MenuItem
onPress={() => {
show = 'delete';
hideMenu();
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
{' '}Pin
</MenuItem>
<MenuItem
onPress={() => {
hideMenu();
ToastEvent.show(
'Note added to favorites.',
'success',
3000,
() => {},
'Ok',
);
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
{' '}Favorite
</MenuItem>
<MenuItem
onPress={() => {
show = 'delete';
hideMenu();
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="trash" size={SIZE.sm} color={colors.icon} />
{' '}Delete
</MenuItem>
</>
)}
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="trash" size={SIZE.sm} color={colors.icon} />
{' '}Delete
</MenuItem>
<MenuDivider />
</Menu>
)}

135
apps/mobile/src/components/NotesList/index.js
View File

@@ -8,7 +8,7 @@ import {
SectionList,
} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import {COLOR_SCHEME, SIZE, WEIGHT, ph} from '../../common/common';
import {COLOR_SCHEME, SIZE, WEIGHT, ph, pv} from '../../common/common';
import * as Animatable from 'react-native-animatable';
import NoteItem from '../NoteItem';
import {DDS} from '../../../App';
@@ -20,10 +20,121 @@ export const NotesList = ({
margin,
onScroll,
isSearch = false,
isGrouped = false,
refresh = () => {},
}) => {
const {colors} = useAppContext();
const [numColumns, setNumColumns] = useState(1);
return (
return isGrouped ? (
<SectionList
sections={notes}
keyExtractor={(item, index) => item.dateCreated.toString()}
ListFooterComponent={
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
}
renderSectionHeader={({section: {title}}) => (
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.sm,
color: colors.accent,
width: DDS.isTab ? '95%' : '90%',
alignSelf: 'center',
paddingBottom: 5,
}}>
{title}
</Text>
)}
onScroll={event => {
y = event.nativeEvent.contentOffset.y;
onScroll(y);
}}
ListHeaderComponent={
<View
style={{
marginTop: Platform.OS == 'ios' ? 145 : 185,
}}>
{notes[0] ? (
<>
<NoteItem
customStyle={{
backgroundColor: colors.navbg,
width: '100%',
paddingHorizontal: '5%',
paddingTop: 20,
marginBottom: 10,
marginTop: 20,
borderBottomWidth: 0,
}}
pinned={true}
item={notes[0].data[0]}
numColumns={1}
index={0}
/>
<NoteItem
customStyle={{
backgroundColor: colors.navbg,
width: '100%',
paddingHorizontal: '5%',
paddingTop: 20,
marginBottom: 10,
marginTop: 20,
borderBottomWidth: 0,
}}
pinned={true}
item={notes[0].data[1]}
numColumns={1}
index={0}
/>
</>
) : null}
</View>
}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
}}
ListFooterComponent={
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
}
renderItem={({item, index}) => (
<NoteItem
item={item}
refresh={() => refresh()}
numColumns={numColumns}
index={index}
/>
)}
/>
) : (
<FlatList
data={notes}
keyExtractor={(item, index) => item.dateCreated.toString()}
@@ -51,25 +162,9 @@ export const NotesList = ({
ListHeaderComponent={
<View
style={{
marginTop: margin,
marginTop: Platform.OS == 'ios' ? 145 : 185,
}}></View>
}
numColumns={numColumns}
key={numColumns}
columnWrapperStyle={
numColumns === 1
? null
: {
width:
notes.length === 1
? DDS.isTab
? '95%'
: '90%'
: DDS.isTab
? '45%'
: '42.5%',
}
}
contentContainerStyle={{
width:
numColumns === 2
@@ -134,7 +229,7 @@ export const NotesList = ({
ListHeaderComponent={
<View
style={{
marginTop: margin,
marginTop: 185,
}}></View>
}
numColumns={numColumns}

23
apps/mobile/src/components/SearchInput/index.js
View File

@@ -22,21 +22,16 @@ export const Search = props => {
const inputRef = createRef();
return (
<Animatable.View
onLayout={e => {
props.sendHeight(e.nativeEvent.layout.height);
}}
transition="opacity"
transition={['marginTop', 'borderWidth', 'marginBottom', 'opacity']}
duration={200}
style={{
opacity: props.hide ? 0 : 1,
height: 60,
justifyContent: 'center',
marginTop: props.hide ? -65 : 0,
}}>
<Animatable.View
transition={[
'marginTop',
'borderWidth',
'marginBottom',
'paddingVertical',
]}
transition={['borderWidth']}
duration={300}
style={{
flexDirection: 'row',
@@ -45,16 +40,10 @@ export const Search = props => {
width: DDS.isTab ? '95%' : '90%',
alignSelf: 'center',
borderRadius: br,
height: '90%',
borderWidth: props.hide ? 0 : 1.5,
paddingHorizontal: ph,
paddingVertical: props.hide
? 0
: Platform.OS == 'ios'
? pv - 1
: pv - 8,
marginBottom: props.hide ? 0 : 10,
borderColor: focus ? colors.accent : colors.nav,
marginTop: props.hide ? -60 : 0,
}}>
<TextInput
ref={inputRef}

30
apps/mobile/src/components/header/index.js
View File

@@ -20,26 +20,17 @@ export const Header = ({
return (
<Animatable.View
onLayout={e => {
if (sendHeight) {
sendHeight(e.nativeEvent.layout.height);
}
}}
transition={['minHeight', 'marginBottom']}
duration={250}
style={{
minHeight: hide ? 50 : 50,
flexDirection: 'row',
zIndex: 10,
height: 50,
marginTop: Platform.OS === 'ios' ? 10 : 45,
marginBottom: 10,
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
paddingTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.06,
marginBottom: hide
? h * 0.03
: Platform.OS == 'ios'
? h * 0.04
: h * 0.04,
}}>
<View
style={{
@@ -65,7 +56,7 @@ export const Header = ({
}}
color={colors.pri}
name={'chevron-left'}
size={SIZE.xl}
size={SIZE.xxxl}
/>
</TouchableOpacity>
) : (
@@ -87,24 +78,23 @@ export const Header = ({
justifyContent: 'center',
alignItems: 'flex-start',
height: 40,
width: 45,
marginTop: 2.5,
width: 40,
}}>
<Icon color={colors.pri} name={'menu'} size={SIZE.xl} />
<Icon color={colors.pri} name={'menu'} size={SIZE.xxxl - 3} />
</TouchableOpacity>
) : (
undefined
)}
<Animatable.Text
transition="fontSize"
duration={300}
<Text
style={{
fontSize: hide ? SIZE.xl : SIZE.xl,
fontSize: SIZE.xl,
color: colors.pri,
fontFamily: WEIGHT.bold,
}}>
{heading}
</Animatable.Text>
</Text>
</View>
<Animatable.View
transition="opacity"

51
apps/mobile/src/views/Editor/index.js
View File

@@ -41,8 +41,16 @@ const Editor = ({navigation}) => {
const [dialog, setDialog] = useState(false);
const [isOpen, setOpen] = useState(false);
const [sidebar, setSidebar] = useState(DDS.isTab ? true : false);
const [noteProps, setNoteProps] = useState({
tags: [],
locked: false,
pinned: false,
favorite: false,
colors: [],
});
// VARIABLES
let updateInterval = null;
// FUNCTIONS
const post = value => EditorWebView.postMessage(value);
@@ -53,7 +61,7 @@ const Editor = ({navigation}) => {
}
};
const saveNote = async () => {
const saveNote = async (noteProps = {}) => {
if (!content) {
content = {
text: '',
@@ -62,6 +70,11 @@ const Editor = ({navigation}) => {
}
timestamp = await db.addNote({
tags: noteProps.tags,
colors: noteProps.colors,
pinned: noteProps.pinned,
favorite: noteProps.favorite,
locked: noteProps.locked,
title,
content,
dateCreated: timestamp,
@@ -76,9 +89,20 @@ const Editor = ({navigation}) => {
text: note.title,
});
title = note.title;
timestamp = note.dateCreated;
post(JSON.stringify(note.content.delta));
let props = {
tags: note.tags,
colors: note.colors,
pinned: note.pinned,
favorite: note.favorite,
locked: note.locked,
};
setNoteProps({...props});
console.log(note);
}
if (content && content.delta) {
post(JSON.stringify(content.delta));
}
@@ -212,18 +236,13 @@ const Editor = ({navigation}) => {
);
};
handleBackEvent = () => {
setDialog(true);
return true;
};
// EFFECTS
useEffect(() => {
let handleBack = BackHandler.addEventListener(
'hardwareBackPress',
handleBackEvent,
);
let handleBack = BackHandler.addEventListener('hardwareBackPress', () => {
setDialog(true);
return true;
});
return () => {
title = null;
timestamp = null;
@@ -235,14 +254,14 @@ const Editor = ({navigation}) => {
useEffect(() => {
updateInterval = setInterval(async function() {
await saveNote();
await saveNote(noteProps);
}, 2000);
return () => {
saveNote();
saveNote(noteProps);
clearInterval(updateInterval);
updateInterval = null;
};
}, []);
}, [noteProps]);
useEffect(() => {
return () => {
@@ -311,6 +330,12 @@ const Editor = ({navigation}) => {
menu={
<EditorMenu
hide={false}
noteProps={noteProps}
updateProps={props => {
setNoteProps(props);
console.log(props, noteProps);
}}
close={() => {
setTimeout(() => {
setOpen(args);

127
apps/mobile/src/views/Favorites/index.js
View File

@@ -1,41 +1,51 @@
import React, {useEffect, useState} from 'react';
import {
ScrollView,
View,
Text,
TouchableOpacity,
Dimensions,
Image,
SafeAreaView,
Platform,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Dimensions, KeyboardAvoidingView} from 'react-native';
import {Header} from '../../components/header';
import {useForceUpdate} from '../ListsEditor';
import {AnimatedSafeAreaView} from '../Home';
import {useAppContext} from '../../provider/useAppContext';
import * as Animatable from 'react-native-animatable';
import {Search} from '../../components/SearchInput';
import {db} from '../../../App';
import {NotesList} from '../../components/NotesList';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Favorites = ({navigation}) => {
// Global State
const {colors} = useAppContext();
// Local State
const [text, setText] = useState('');
const [margin, setMargin] = useState(185);
const [hideHeader, setHideHeader] = useState(false);
const [favs, setFavs] = useState([]);
const [buttonHide, setButtonHide] = useState(false);
// Variables
let offsetY = 0;
let countUp = 1;
let countDown = 0;
// Functions
const fetchFavs = () => {
let favs = db.getFavorites();
if (!favs) return;
setFavs([...favs]);
};
// Effects
useEffect(() => {
fetchFavs();
}, []);
// Render
return (
<AnimatedSafeAreaView
transition="backgroundColor"
@@ -44,7 +54,66 @@ export const Favorites = ({navigation}) => {
height: '100%',
backgroundColor: colors.bg,
}}>
<Header colors={colors} heading="Favorites" canGoBack={false} />
<KeyboardAvoidingView
style={{
height: '100%',
}}>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
position: 'absolute',
backgroundColor: colors.night ? colors.bg : colors.bg,
zIndex: 10,
width: '100%',
}}>
<Header
menu={true}
hide={hideHeader}
showSearch={() => {
setHideHeader(false);
countUp = 0;
countDown = 0;
}}
colors={colors}
heading="Favorites"
canGoBack={false}
customIcon="menu"
/>
<Search
clear={() => setText('')}
hide={hideHeader}
placeholder="Search your notes"
value={text}
/>
</Animatable.View>
<NotesList
margin={margin}
refresh={() => {
fetchFavs();
}}
onScroll={y => {
if (buttonHide) return;
if (y < 30) setHideHeader(false);
if (y > offsetY) {
if (y - offsetY < 150 || countDown > 0) return;
countDown = 1;
countUp = 0;
setHideHeader(true);
} else {
if (offsetY - y < 150 || countUp > 0) return;
countDown = 0;
countUp = 1;
setHideHeader(false);
}
offsetY = y;
}}
isSearch={false}
notes={favs}
keyword={''}
/>
</KeyboardAvoidingView>
</AnimatedSafeAreaView>
);
};

4
apps/mobile/src/views/Folders/index.js
View File

@@ -46,7 +46,7 @@ export const Folders = ({navigation}) => {
const [notebooks, setNotebooks] = useState([]);
const [hideHeader, setHideHeader] = useState(false);
const [buttonHide, setButtonHide] = useState(false);
const [margin, setMargin] = useState(190);
const [margin, setMargin] = useState(180);
const [numColumns, setNumColumns] = useState(1);
const params = navigation.state.params;
@@ -158,7 +158,7 @@ export const Folders = ({navigation}) => {
ListHeaderComponent={
<View
style={{
marginTop: margin,
marginTop: Platform.OS == 'ios' ? 145 : 185,
}}
/>
}

34
apps/mobile/src/views/Home/index.js
View File

@@ -33,7 +33,7 @@ export const Home = ({navigation}) => {
const [text, setText] = useState('');
const [update, setUpdate] = useState(0);
const [hideHeader, setHideHeader] = useState(false);
const [margin, setMargin] = useState(190);
const [margin, setMargin] = useState(180);
const [buttonHide, setButtonHide] = useState(false);
const [notes, setNotes] = useState([]);
const [keyword, setKeyword] = useState('');
@@ -56,12 +56,13 @@ export const Home = ({navigation}) => {
useEffect(() => {
if (!isFocused) return;
fetchNotes();
}, [isFocused]);
const fetchNotes = () => {
allNotes = db.getNotes();
setNotes(allNotes);
allNotes = db.groupNotes();
setNotes([...allNotes]);
};
useEffect(() => {
@@ -133,20 +134,6 @@ export const Home = ({navigation}) => {
}
};
const setMarginTop = () => {
return;
if (headerHeight < 30 || searchHeight < 30) {
return;
}
let toAdd = h * 0.06;
if (marginSet) return;
let a = headerHeight + searchHeight + toAdd;
setMargin(a);
headerHeight = 0;
searchHeight = 0;
marginSet = true;
};
// Render
return (
@@ -176,10 +163,6 @@ export const Home = ({navigation}) => {
width: '100%',
}}>
<Header
sendHeight={height => {
headerHeight = height;
setMarginTop();
}}
menu={true}
hide={hideHeader}
showSearch={() => {
@@ -194,10 +177,6 @@ export const Home = ({navigation}) => {
/>
<Search
sendHeight={height => {
searchHeight = height;
setMarginTop();
}}
clear={() => setText('')}
hide={hideHeader}
onChangeText={onChangeText}
@@ -212,7 +191,10 @@ export const Home = ({navigation}) => {
<NotesList
margin={margin}
numOfColumns={DDS.isTab ? 2 : 1}
isGrouped={true}
refresh={() => {
fetchNotes();
}}
onScroll={y => {
if (buttonHide) return;
if (y < 30) setHideHeader(false);

8
apps/mobile/src/views/Notebook/index.js
View File

@@ -48,7 +48,7 @@ export const Notebook = ({navigation}) => {
const {colors} = useAppContext();
const params = navigation.state.params;
const [hideHeader, setHideHeader] = useState(false);
const [margin, setMargin] = useState(190);
const [margin, setMargin] = useState(180);
const [buttonHide, setButtonHide] = useState(false);
const [numColumns, setNumColumns] = useState(1);
const [addTopic, setAddTopic] = useState(false);
@@ -161,7 +161,7 @@ export const Notebook = ({navigation}) => {
ListHeaderComponent={
<>
{params.hideMore ? (
<View style={{marginTop: margin}} />
<View style={{marginTop: Platform.OS == 'ios' ? 145 : 185}} />
) : (
<AnimatedTouchableOpacity
transition="marginTop"
@@ -173,7 +173,7 @@ export const Notebook = ({navigation}) => {
style={{
borderWidth: 1,
borderRadius: 5,
marginTop: margin,
marginTop: Platform.OS == 'ios' ? 145 : 185,
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
@@ -199,7 +199,7 @@ export const Notebook = ({navigation}) => {
ListHeaderComponent={
<View
style={{
marginTop: margin + 20,
marginTop: Platform.OS == 'ios' ? 145 : 185 + 20,
flexDirection: 'row',
justifyContent: 'space-between',
width:

44
apps/mobile/src/views/Trash/index.js
View File

@@ -30,41 +30,43 @@ import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
import {useForceUpdate} from '../ListsEditor';
import {useAppContext} from '../../provider/useAppContext';
import {db, DDS} from '../../../App';
import {NotebookItem} from '../../components/NotebookItem';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Trash = ({navigation}) => {
const {colors} = useAppContext();
const [trash, setTrash] = useState([]);
useEffect(() => {
let allTrash = db.getTrash();
setTrash([...allTrash]);
console.log(allTrash);
}, []);
return (
<SafeAreaView
style={{
backgroundColor: colors.bg,
height: '100%',
}}>
<Header colors={colors} heading="Trash" canGoBack={false} />
<Header colors={colors} heading="Trash" canGoBack={false} menu={true} />
<FlatList
numColumns={2}
columnWrapperStyle={{
width: '45%',
marginHorizontal: '2.5%',
}}
numColumns={1}
style={{
width: '100%',
width: DDS.isTab ? '95%' : '90%',
alignSelf: 'center',
}}
data={[
{
title: 'my note',
headline: 'my simple not that i just deleted. please restore.',
dateCreated: Date.now(),
},
{
title: 'my note',
headline: 'my simple not that i just deleted. please restore.',
dateCreated: Date.now(),
},
]}
renderItem={({item, index}) => <NoteItem item={item} />}
data={trash}
renderItem={({item, index}) =>
item.type === 'note' ? (
<NoteItem item={item} index={index} isTrash={true} />
) : (
<NotebookItem item={item} isTrash={true} index={index} />
)
}
/>
<TouchableOpacity
activeOpacity={opacity}
@@ -87,7 +89,7 @@ export const Trash = ({navigation}) => {
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.semibold,
fontFamily: WEIGHT.regular,
color: 'white',
}}>
{' '}Clear all Trash