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

feat: add new components

Browse Source
This commit is contained in:
ammarahm-ed
2019-12-03 22:05:47 +05:00
parent 98ce2c3c7f
commit 267008ae9c
7 changed files with 400 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, {useEffect, useState, createRef} from 'react';
import {
ScrollView,
View,
@@ -29,10 +29,11 @@ import {useForceUpdate} from '../../views/ListsEditor';
const refs = [];
export const AddNotebookDialog = ({visible}) => {
export const AddNotebookDialog = ({visible, close}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const [topicsToAdd, setTopicsToAdd] = useState(['']);
const forceUpdate = useForceUpdate();
let listRef = createRef();
let prevItem = null;
let prevIndex = null;
let currentSelectedItem = null;
@@ -53,13 +54,17 @@ export const AddNotebookDialog = ({visible}) => {
forceUpdate();
currentSelectedItem = null;
if (!willFocus) return;
//if (!willFocus) return;
if (!refs[index + 1]) {
setTimeout(() => {
if (!refs[index + 1]) return;
refs[index + 1].focus();
}, 400);
} else {
setTimeout(() => {
refs[index + 1].focus();
}, 400);
}
};
const onFocus = index => {
@@ -82,15 +87,21 @@ export const AddNotebookDialog = ({visible}) => {
prevItem = text;
};
const onDelete = index => {
console.log('deleting');
let listData = topicsToAdd;
if (listData.length === 1) return;
refs.splice(index, 1);
listData.splice(index, 1);
console.log(refs, listData);
setTopicsToAdd(listData);
forceUpdate();
};
return (
<SafeAreaView>
<Modal visible={visible} transparent={true}>
<Modal
visible={visible}
transparent={true}
onRequestClose={() => (refs = [])}>
<View
style={{
width: '100%',
@@ -102,7 +113,7 @@ export const AddNotebookDialog = ({visible}) => {
<View
style={{
width: '80%',
maxHeight: '80%',
maxHeight: 350,
elevation: 5,
borderRadius: 5,
backgroundColor: colors.bg,
@@ -119,7 +130,7 @@ export const AddNotebookDialog = ({visible}) => {
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.medium,
fontFamily: WEIGHT.semibold,
marginLeft: 10,
fontSize: SIZE.lg,
marginTop: -5,
@@ -140,7 +151,7 @@ export const AddNotebookDialog = ({visible}) => {
marginTop: 20,
marginBottom: 10,
}}
placeholder="Enter title of notebook"
placeholder="Title of notebook"
placeholderTextColor={colors.icon}
/>
@@ -154,6 +165,14 @@ export const AddNotebookDialog = ({visible}) => {
<FlatList
data={topicsToAdd}
ref={listRef}
removeClippedSubviews={false}
enableEmptySections={false}
getItemLayout={(data, index) => ({
length: 50,
offset: 50 * index,
index,
})}
renderItem={({item, index}) => (
<TopicItem
item={item}
@@ -199,6 +218,13 @@ export const AddNotebookDialog = ({visible}) => {
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
setTopicsToAdd(['']);
prevIndex = null;
prevItem = null;
currentSelectedItem = null;
close();
}}
style={{
paddingVertical: pv,
paddingHorizontal: ph,
@@ -221,7 +247,6 @@ export const AddNotebookDialog = ({visible}) => {
</View>
</View>
</Modal>
</SafeAreaView>
);
};
@@ -281,24 +306,18 @@ const TopicItem = ({
placeholderTextColor={colors.icon}
/>
{index == 0 && !focus ? (
<TouchableOpacity
onPress={() =>
!focus && index !== 0
? onDelete(index)
: onSubmit(text, index, true)
}
onPress={() => (!focus ? onDelete(index) : onSubmit(text, index, true))}
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon
name={!focus && index !== 0 ? 'minus' : 'plus'}
name={!focus ? 'minus' : 'plus'}
size={SIZE.lg}
color={colors.accent}
/>
</TouchableOpacity>
) : null}
</View>
);
};

62
apps/mobile/src/components/NotebookItem/index.js Normal file
View File

@@ -0,0 +1,62 @@
import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
export const NotebookItem = ({item, index, colors}) => {
return (
<TouchableOpacity
onPress={() => {
NavigationService.navigate('Notebook', {
notebook: item,
});
}}
style={{
paddingHorizontal: ph,
marginHorizontal: '5%',
borderBottomWidth: 1,
borderBottomColor: '#f0f0f0',
paddingVertical: pv + 5,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<View>
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.md,
color: colors.pri,
maxWidth: '100%',
}}>
{item.name}
</Text>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
paddingTop: pv / 2,
}}>
15 notes
</Text>
</View>
<Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
</View>
</TouchableOpacity>
);
};

10
apps/mobile/src/components/Recents/index.js
View File

@@ -148,7 +148,7 @@ export const RecentList = ({update}) => {
style={{
width: Platform.isPad ? '95%' : '90%',
alignSelf: 'center',
backgroundColor: 'red',
backgroundColor: colors.errorBg,
padding: pv,
borderRadius: 5,
flexDirection: 'row',
@@ -158,16 +158,16 @@ export const RecentList = ({update}) => {
<Text
style={{
fontFamily: WEIGHT.bold,
color: 'white',
color: colors.errorText,
}}>
Sync Disabled
Sync is disabled
</Text>
<Text
style={{
fontFamily: WEIGHT.medium,
color: 'white',
color: colors.errorText,
}}>
Fix Now
Fix now
</Text>
</TouchableOpacity>
</>

4
apps/mobile/src/services/NavigationService.js
View File

@@ -15,6 +15,7 @@ import Settings from '../views/Settings';
import Trash from '../views/Trash';
import Notes from '../views/Notes';
import Tags from '../views/Tags';
import Notebook from '../views/Notebook';
const TopLevelNavigator = createStackNavigator(
{
@@ -63,6 +64,9 @@ const TopLevelNavigator = createStackNavigator(
Tags: {
screen: Tags,
},
Notebook: {
screen: Notebook,
},
},
{
initialRouteName: 'Home',

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

@@ -22,7 +22,7 @@ import {
WEIGHT,
} from '../../common/common';
import WebView from 'react-native-webview';
import Icon from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/Feather';
import {useForceUpdate} from '../ListsEditor';
import {NavigationEvents} from 'react-navigation';
import {storage} from '../../../App';
@@ -92,23 +92,41 @@ const Editor = ({navigation}) => {
style={{
height: '100%',
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '96%',
alignSelf: 'center',
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
}}>
<Icon
style={{
paddingRight: 10,
}}
name="chevron-left"
color={colors.pri}
size={SIZE.xxl}
/>
<TextInput
ref={titleRef}
placeholder="Untitled Note"
placeholderTextColor={colors.icon}
style={{
width: '100%',
width: '90%',
fontFamily: WEIGHT.bold,
fontSize: SIZE.xxl,
paddingHorizontal: '3%',
maxWidth: '90%',
paddingVertical: 0,
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
}}
onChangeText={value => {
title = value;
}}
onSubmitEditing={async () => await saveNote()}
/>
</View>
<WebView
ref={EditorWebView}

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

@@ -28,6 +28,7 @@ import {getElevation, h, w, timeSince} from '../../utils/utils';
import {FlatList, TextInput} from 'react-native-gesture-handler';
import {useForceUpdate} from '../ListsEditor';
import {AddNotebookDialog} from '../../components/AddNotebookDialog';
import {NotebookItem} from '../../components/NotebookItem';
const refs = [];
@@ -36,7 +37,10 @@ export const Folders = ({navigation}) => {
const [addNotebook, setAddNotebook] = useState(false);
return (
<SafeAreaView>
<AddNotebookDialog visible={addNotebook} />
<AddNotebookDialog
visible={addNotebook}
close={() => setAddNotebook(false)}
/>
<View
style={{
flexDirection: 'row',
@@ -98,55 +102,16 @@ export const Folders = ({navigation}) => {
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.bold,
fontFamily: WEIGHT.semibold,
color: 'white',
}}>
Create new notebook
Create a new notebook
</Text>
<Icon name="plus" color="white" size={SIZE.lg} />
</TouchableOpacity>
}
renderItem={({item, index}) => (
<View
style={{
paddingHorizontal: ph,
marginHorizontal: '5%',
borderBottomWidth: 1,
borderBottomColor: '#f0f0f0',
paddingVertical: pv + 5,
}}>
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.md,
color: colors.pri,
maxWidth: '100%',
}}>
{item.name}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: pv,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
color: colors.accent,
}}>
June 21
</Text>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
15 notes
</Text>
</View>
</View>
<NotebookItem item={item} index={index} colors={colors} />
)}
/>
</SafeAreaView>

136
apps/mobile/src/views/Notebook/index.js Normal file
View File

@@ -0,0 +1,136 @@
import React, {useEffect, useState} from 'react';
import {
ScrollView,
View,
Text,
TouchableOpacity,
Dimensions,
Image,
SafeAreaView,
Platform,
FlatList,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
import {NotebookItem} from '../../components/NotebookItem';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Notebook = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
return (
<SafeAreaView>
<Header
colors={colors}
heading={navigation.state.params.notebook.name}
canGoBack={false}
/>
<FlatList
style={{
width: '100%',
}}
data={[
{
name: 'Class Notes',
Qty: '8',
},
{
name: 'Notes of water tabs',
Qty: '3',
},
{
name: 'My Lists',
Qty: '3',
},
]}
ListHeaderComponent={
<>
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
setAddNotebook(true);
}}
style={{
borderWidth: 1,
borderRadius: 5,
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15,
backgroundColor: colors.accent,
}}>
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.semibold,
color: 'white',
}}>
Add a new topic
</Text>
<Icon name="plus" color="white" size={SIZE.lg} />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
setAddNotebook(true);
}}
style={{
borderWidth: 1,
borderRadius: 5,
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15,
}}>
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.bold,
color: colors.pri,
}}>
View All Notes
</Text>
</TouchableOpacity>
</>
}
renderItem={({item, index}) => (
<NotebookItem item={item} index={index} colors={colors} />
)}
/>
</SafeAreaView>
);
};
Notebook.navigationOptions = {
header: null,
};
export default Notebook;