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

use SafeAreaContext

Browse Source
This commit is contained in:
ammarahm-ed
2020-04-16 13:57:51 +05:00
parent deb52ee2a7
commit c8156de412
11 changed files with 348 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/mobile/App.js
View File

@@ -9,9 +9,7 @@ import { defaultState } from './src/provider/defaultState';
import { eSubscribeEvent, eUnSubscribeEvent } from './src/services/eventManager';
import { eDispatchAction } from './src/services/events';
import { db, DDS } from './src/utils/utils';
import { test } from './src/utils/storage';
import { SafeAreaContext, SafeAreaProvider } from 'react-native-safe-area-context';
const App = () => {
const [state, dispatch] = useTracked();
@@ -88,10 +86,15 @@ const App = () => {
return <></>;
}
return (
<SafeAreaProvider>
<>
<I.Initialize />
<Loading />
</>
</SafeAreaProvider>
);
};

1
apps/mobile/index.mobile.js
View File

@@ -11,6 +11,7 @@ import { useTracked } from './src/provider';
import { StatusBar, Platform } from 'react-native';
import { AppContainer } from './src/services/AppContainer';
import NavigationService from './src/services/NavigationService';
import { useSafeArea } from 'react-native-safe-area-context';
const editorRef = createRef();
export const Initialize = () => {

43
apps/mobile/src/components/Container/index.js
View File

@@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, { useEffect, useState } from 'react';
import {
Keyboard,
KeyboardAvoidingView,
@@ -10,18 +10,19 @@ import {
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
import {eScrollEvent, eClearSearch} from '../../services/events';
import {db, getElevation, ToastEvent, DDS, selection} from '../../utils/utils';
import {Header} from '../header';
import {Search} from '../SearchInput';
import { br, opacity, pv, SIZE, WEIGHT } from '../../common/common';
import { useTracked } from '../../provider';
import { ACTIONS } from '../../provider/actions';
import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/eventManager';
import { eScrollEvent, eClearSearch } from '../../services/events';
import { db, getElevation, ToastEvent, DDS, selection } from '../../utils/utils';
import { Header } from '../header';
import { Search } from '../SearchInput';
import SelectionHeader from '../SelectionHeader';
import {inputRef} from '../../utils/refs';
import { inputRef } from '../../utils/refs';
import { useSafeArea } from 'react-native-safe-area-context';
const AnimatedSafeAreaView = Animatable.createAnimatableComponent(SafeAreaView);
const AnimatedKeyboardAvoidingView = Animatable.createAnimatableComponent(KeyboardAvoidingView);
const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
TouchableOpacity,
@@ -49,11 +50,13 @@ export const Container = ({
}) => {
// State
const [state, dispatch] = useTracked();
const {colors, selectionMode, searchResults, loading} = state;
const { colors, selectionMode, searchResults, loading } = state;
const [text, setText] = useState('');
const [hideHeader, setHideHeader] = useState(false);
const [buttonHide, setButtonHide] = useState(false);
const insets = useSafeArea();
let offsetY = 0;
let countUp = 1;
@@ -182,19 +185,18 @@ export const Container = ({
// Render
return (
<AnimatedSafeAreaView
<AnimatedKeyboardAvoidingView
transition="backgroundColor"
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,
}}>
<KeyboardAvoidingView
paddingTop: insets.top
}}
behavior="padding"
enabled={Platform.OS === 'ios' ? true : false}
style={{
height: '100%',
}}>
>
{noSelectionHeader ? null : <SelectionHeader items={data} />}
<View
@@ -297,8 +299,7 @@ export const Container = ({
</AnimatedTouchableOpacity>
</Animatable.View>
)}
</KeyboardAvoidingView>
</AnimatedSafeAreaView>
</AnimatedKeyboardAvoidingView>
);
};

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

@@ -18,6 +18,7 @@ import { NotesPlaceHolder } from '../ListPlaceholders';
import NoteItem from '../NoteItem';
import SelectionWrapper from '../SelectionWrapper';
import { useIsFocused } from 'react-navigation-hooks';
import { useSafeArea } from 'react-native-safe-area-context';
const sectionListRef = createRef();
export const NotesList = ({ isGrouped = false }) => {
@@ -26,7 +27,7 @@ export const NotesList = ({ isGrouped = false }) => {
const isFocused = useIsFocused();
const [refreshing, setRefreshing] = useState(false);
const searchResults = { ...state.searchResults };
const insets = useSafeArea();
const _renderItem = ({ item, index }) => (
<SelectionWrapper
index={index}
@@ -77,8 +78,8 @@ export const NotesList = ({ isGrouped = false }) => {
: 135
: 135 - 60
: notes[0] && !selectionMode
? 155
: 155 - 60,
? 155 - insets.top
: (155 - 60) - insets.top,
}}>
<PinnedItems />
</View>
@@ -202,22 +203,16 @@ export const NotesList = ({ isGrouped = false }) => {
setRefreshing(true);
try {
await db.sync();
dispatch({ type: ACTIONS.NOTES });
dispatch({ type: ACTIONS.PINNED });
let user = await db.user.get();
dispatch({ type: ACTIONS.USER, user: user });
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
ToastEvent.show(e.message, 'error');
}
dispatch({ type: ACTIONS.NOTES });
dispatch({ type: ACTIONS.PINNED });
let user = await db.user.get();
dispatch({ type: ACTIONS.USER, user: user });
ToastEvent.show(e.message, 'error');
}
}}
refreshing={refreshing}
/>

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

@@ -42,11 +42,11 @@ export const Search = props => {
transition={['marginTop', 'opacity']}
duration={200}
style={{
opacity: props.hide ? 0 : 1,
opacity: _opacity,
height: 60,
justifyContent: 'center',
marginTop: props.hide ? -65 : 0,
paddingHorizontal: 12,
marginTop: _marginAnim,
paddingHorizontal: 12
}}>
<Animated.View
transition={['borderWidth']}
@@ -60,7 +60,7 @@ export const Search = props => {
alignSelf: 'center',
borderRadius: br,
height: '90%',
borderWidth: props.hide ? 0 : 1.5,
borderWidth: _borderAnim,
borderColor: focus
? props.headerColor
? props.headerColor

31
apps/mobile/src/components/SimpleList/index.js
View File

@@ -1,13 +1,14 @@
import React from 'react';
import {FlatList, Platform, RefreshControl, Text, View} from 'react-native';
import {SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {eClearSearch, eScrollEvent} from '../../services/events';
import {hexToRGBA} from '../../utils/utils';
import {NotebookItem} from '../NotebookItem';
import { FlatList, Platform, RefreshControl, Text, View } from 'react-native';
import { SIZE, WEIGHT } from '../../common/common';
import { useTracked } from '../../provider';
import { ACTIONS } from '../../provider/actions';
import { eSendEvent } from '../../services/eventManager';
import { eClearSearch, eScrollEvent } from '../../services/events';
import { hexToRGBA } from '../../utils/utils';
import { NotebookItem } from '../NotebookItem';
import SelectionWrapper from '../SelectionWrapper';
import { useSafeArea } from 'react-native-safe-area-context';
const SimpleList = ({
data,
@@ -24,9 +25,9 @@ const SimpleList = ({
noteToMove,
}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode} = state;
const searchResults = {...state.searchResults};
const { colors, selectionMode } = state;
const searchResults = { ...state.searchResults };
const insets = useSafeArea();
const _onScroll = event => {
if (!event) return;
let y = event.nativeEvent.contentOffset.y;
@@ -62,8 +63,8 @@ const SimpleList = ({
? 135
: 135 - 60
: data[0] && !selectionMode
? 155
: 155 - 60,
? 155 - insets.top
: (155 - insets.top) - 60,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
@@ -106,7 +107,7 @@ const SimpleList = ({
<FlatList
data={pinned.notebooks}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item, index}) =>
renderItem={({ item, index }) =>
item.type === 'notebook' ? (
<SelectionWrapper
index={index}
@@ -138,7 +139,7 @@ const SimpleList = ({
enabled: true,
});
}
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item });
}}
noteToMove={noteToMove}
item={item}

2
apps/mobile/src/components/VaultDialog/index.js
View File

@@ -322,7 +322,7 @@ export class VaultDialog extends Component {
maxWidth: '90%',
alignSelf: 'center',
marginTop: 10,
marginBottom: 10
marginBottom: 5
}}>
{!novault
? 'Set a password to create vault'

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

@@ -1,18 +1,19 @@
import React, {createRef} from 'react';
import {Platform, StatusBar, Text, TouchableOpacity, View} from 'react-native';
import React, { createRef } from 'react';
import { Platform, StatusBar, Text, TouchableOpacity, View } from 'react-native';
import * as Animatable from 'react-native-animatable';
import {SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {eSendEvent} from '../../services/eventManager';
import {eCloseLoginDialog} from '../../services/events';
import { SIZE, WEIGHT } from '../../common/common';
import { useTracked } from '../../provider';
import { eSendEvent } from '../../services/eventManager';
import { eCloseLoginDialog } from '../../services/events';
import NavigationService from '../../services/NavigationService';
import {DDS} from '../../utils/utils';
import { DDS } from '../../utils/utils';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
import {ACTIONS} from '../../provider/actions';
import {sideMenuRef} from '../../utils/refs';
import {moveNoteHideEvent} from '../DialogManager/recievers';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
import { ACTIONS } from '../../provider/actions';
import { sideMenuRef } from '../../utils/refs';
import { moveNoteHideEvent } from '../DialogManager/recievers';
import { useSafeArea } from 'react-native-safe-area-context';
const menuRef = createRef();
export const Header = ({
heading,
canGoBack = true,
@@ -26,8 +27,9 @@ export const Header = ({
headerColor,
}) => {
const [state, dispatch] = useTracked();
const {colors} = state;
const menuRef = createRef();
const { colors } = state;
const insets = useSafeArea();
return (
<View
style={{
@@ -36,10 +38,10 @@ export const Header = ({
height: 50,
marginTop:
Platform.OS === 'ios'
? 0
? insets.top
: preventDefaultMargins || isLoginNavigator
? 0
: StatusBar.currentHeight,
: insets.top,
marginBottom: 10,
justifyContent: 'space-between',
alignItems: 'center',
@@ -54,7 +56,7 @@ export const Header = ({
}}>
{canGoBack ? (
<TouchableOpacity
hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 40 }}
onPress={() => {
if (navigation && preventDefaultMargins) {
if (navigation.state.routeName === 'Folders') {
@@ -92,7 +94,7 @@ export const Header = ({
)}
{menu && !DDS.isTab ? (
<TouchableOpacity
hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 40 }}
onPress={() => {
sideMenuRef.current?.openMenu(true);
}}
@@ -183,7 +185,7 @@ export const Header = ({
color: colors.pri,
}}
onPress={() => {
dispatch({type: ACTIONS.NOTES, sort: null});
dispatch({ type: ACTIONS.NOTES, sort: null });
menuRef.current?.hide();
}}>
Default
@@ -194,7 +196,7 @@ export const Header = ({
color: colors.pri,
}}
onPress={() => {
dispatch({type: ACTIONS.NOTES, sort: 'abc'});
dispatch({ type: ACTIONS.NOTES, sort: 'abc' });
menuRef.current?.hide();
}}>
Alphabetical
@@ -205,7 +207,7 @@ export const Header = ({
color: colors.pri,
}}
onPress={() => {
dispatch({type: ACTIONS.NOTES, sort: 'year'});
dispatch({ type: ACTIONS.NOTES, sort: 'year' });
menuRef.current?.hide();
}}>
By year
@@ -216,7 +218,7 @@ export const Header = ({
color: colors.pri,
}}
onPress={() => {
dispatch({type: ACTIONS.NOTES, sort: 'month'});
dispatch({ type: ACTIONS.NOTES, sort: 'month' });
menuRef.current?.hide();
}}>
By month
@@ -227,7 +229,7 @@ export const Header = ({
color: colors.pri,
}}
onPress={() => {
dispatch({type: ACTIONS.NOTES, sort: 'week'});
dispatch({ type: ACTIONS.NOTES, sort: 'week' });
menuRef.current?.hide();
}}>
By week

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

@@ -38,6 +38,7 @@ import {
import { exitEditorAnimation } from '../../utils/animations';
import { sideMenuRef } from '../../utils/refs';
import { db, DDS, editing, timeConverter, ToastEvent } from '../../utils/utils';
import { useSafeArea } from 'react-native-safe-area-context';
const EditorWebView = createRef();
let note = {};
@@ -54,6 +55,7 @@ const Editor = ({ noMenu }) => {
const { colors } = state;
const [fullscreen, setFullscreen] = useState(false);
const [dateEdited, setDateEdited] = useState(0);
const insets = useSafeArea();
// FUNCTIONS
const post = message =>
@@ -520,7 +522,7 @@ const Editor = ({ noMenu }) => {
position: 'absolute',
left: 0,
top: 0,
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
marginTop: Platform.OS === 'ios' ? 0 : insets.top,
paddingLeft: 12,
zIndex: 800,
}}>
@@ -541,7 +543,7 @@ const Editor = ({ noMenu }) => {
flexDirection: 'row',
marginRight: 0,
position: 'absolute',
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
marginTop: Platform.OS === 'ios' ? 0 : insets.top,
zIndex: 800,
right: 0,
top: 0,
@@ -596,10 +598,10 @@ const Editor = ({ noMenu }) => {
style={{
paddingHorizontal: 12,
marginTop:
Platform.OS === 'ios' ? 45 : StatusBar.currentHeight + 45,
Platform.OS === 'ios' ? 45 : insets.top + 45,
width: '100%',
position: 'absolute',
justifyContent: 'space-between',
justifyContent: 'flex-start',
flexDirection: 'row',
alignItems: 'center',
paddingLeft: noMenu ? 12 : 12 + 50,

2
apps/mobile/src/views/Login/index.js
View File

@@ -71,7 +71,9 @@ export const Login = ({ navigation }) => {
try {
console.log('here reacched');
await db.user.login(username, password);
} catch (e) {
console.log(e, 'ERROR');
setTimeout(() => {

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

@@ -21,23 +21,23 @@ import {
WEIGHT,
} from '../../common/common';
import Container from '../../components/Container';
import {updateEvent} from '../../components/DialogManager/recievers';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {eOpenLoginDialog} from '../../services/events';
import { useTracked } from '../../provider';
import { ACTIONS } from '../../provider/actions';
import { eSendEvent } from '../../services/eventManager';
import { eOpenLoginDialog } from '../../services/events';
import NavigationService from '../../services/NavigationService';
import {hexToRGBA, w, DDS, setSetting, db, ToastEvent} from '../../utils/utils';
import { hexToRGBA, w, DDS, setSetting, db, ToastEvent } from '../../utils/utils';
import { useSafeArea } from 'react-native-safe-area-context';
export const Settings = ({navigation}) => {
export const Settings = ({ navigation }) => {
const [state, dispatch] = useTracked();
const {colors, user, settings} = state;
const { colors, user, settings } = state;
const insets = useSafeArea();
function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
let newColors = setColorScheme(colors, accent);
StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
dispatch({type: ACTIONS.THEME, colors: newColors});
dispatch({ type: ACTIONS.THEME, colors: newColors });
}
function changeAccentColor(accentColor) {
@@ -56,7 +56,7 @@ export const Settings = ({navigation}) => {
noBottomButton={true}>
<View
style={{
marginTop: Platform.OS == 'ios' ? 135 - 60 : 155 - 60,
marginTop: Platform.OS == 'ios' ? 135 - 60 : (155 - insets.top) - 60,
}}
/>
@@ -143,27 +143,27 @@ export const Settings = ({navigation}) => {
{[
{
name: 'Backup my notes',
func: () => {},
func: () => { },
},
{
name: 'My vault',
func: () => {},
func: () => { },
},
{
name: 'Subscription status',
func: () => {},
func: () => { },
},
{
name: 'Change password',
func: () => {},
func: () => { },
},
{
name: 'Logout',
func: async () => {
await db.user.logout();
dispatch({type: ACTIONS.USER, user: null});
dispatch({type: ACTIONS.ALL});
dispatch({ type: ACTIONS.USER, user: null });
dispatch({ type: ACTIONS.CLEAR_ALL });
ToastEvent.show('Logged out, syncing disabled', 'success');
},
},
@@ -349,10 +349,10 @@ export const Settings = ({navigation}) => {
<TouchableOpacity
onPress={() => {
if (!colors.night) {
MMKV.setStringAsync('theme', JSON.stringify({night: true}));
MMKV.setStringAsync('theme', JSON.stringify({ night: true }));
changeColorScheme(COLOR_SCHEME_DARK);
} else {
MMKV.setStringAsync('theme', JSON.stringify({night: false}));
MMKV.setStringAsync('theme', JSON.stringify({ night: false }));
changeColorScheme(COLOR_SCHEME_LIGHT);
}
@@ -588,15 +588,15 @@ export const Settings = ({navigation}) => {
{[
{
name: 'Terms of Service',
func: () => {},
func: () => { },
},
{
name: 'Privacy Policy',
func: () => {},
func: () => { },
},
{
name: 'About',
func: () => {},
func: () => { },
},
].map(item => (
<TouchableOpacity