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

undo changes related to SafeAreaView

Browse Source
This commit is contained in:
ammarahm-ed
2020-04-19 21:27:03 +05:00
parent e85e5acd54
commit c61070539a
12 changed files with 442 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/mobile/App.js
View File

@@ -1,15 +1,14 @@
import React, { useEffect, useState } from 'react';
import React, {useEffect, useState} from 'react';
import MMKV from 'react-native-mmkv-storage';
import Orientation from 'react-native-orientation';
import { Loading } from './Loading';
import { getColorScheme, scale, updateSize } from './src/common/common';
import { useTracked } from './src/provider';
import { ACTIONS } from './src/provider/actions';
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 { SafeAreaContext, SafeAreaProvider } from 'react-native-safe-area-context';
import {Loading} from './Loading';
import {getColorScheme, scale, updateSize} from './src/common/common';
import {useTracked} from './src/provider';
import {ACTIONS} from './src/provider/actions';
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';
const App = () => {
const [state, dispatch] = useTracked();
@@ -44,9 +43,8 @@ const App = () => {
useEffect(() => {
Initialize().then(() => {
db.init().then(async () => {
let user = await db.user.get();
dispatch({ type: ACTIONS.USER, user: user });
dispatch({type: ACTIONS.USER, user: user});
setInit(true);
});
@@ -59,7 +57,7 @@ const App = () => {
let s;
try {
s = await MMKV.getStringAsync('settings');
} catch (e) { }
} catch (e) {}
if (typeof s !== 'string') {
s = defaultState.settings;
s = JSON.stringify(s);
@@ -67,7 +65,7 @@ const App = () => {
await MMKV.setStringAsync('settings', s);
dispatch({ type: ACTIONS.SETTINGS, s });
dispatch({type: ACTIONS.SETTINGS, s});
} else {
s = JSON.parse(s);
if (s.fontScale) {
@@ -77,24 +75,19 @@ const App = () => {
}
updateSize();
dispatch({ type: ACTIONS.SETTINGS, settings: { ...s } });
dispatch({type: ACTIONS.SETTINGS, settings: {...s}});
}
dispatch({ type: ACTIONS.THEME, colors: newColors });
dispatch({type: ACTIONS.THEME, colors: newColors});
}
if (!init) {
return <></>;
}
return (
<SafeAreaProvider>
<>
<I.Initialize />
<Loading />
</>
</SafeAreaProvider>
<>
<I.Initialize />
<Loading />
</>
);
};

6
apps/mobile/android/app/src/main/java/com/notes/MainActivity.java
View File

@@ -53,6 +53,12 @@ public class MainActivity extends ReactActivity {
return "Notes";
}
@Override
public void invokeDefaultOnBackPressed() {
moveTaskToBack(true);
}
}

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

@@ -3,10 +3,11 @@ import {
Keyboard,
KeyboardAvoidingView,
Platform,
SafeAreaView,
Text,
TouchableOpacity,
View,
StatusBar,
SafeAreaView,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -20,16 +21,13 @@ import {Header} from '../header';
import {Search} from '../SearchInput';
import SelectionHeader from '../SelectionHeader';
import {inputRef} from '../../utils/refs';
import {useSafeArea} from 'react-native-safe-area-context';
const AnimatedKeyboardAvoidingView = Animatable.createAnimatableComponent(
KeyboardAvoidingView,
);
const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
TouchableOpacity,
);
const AnimatedSafeAreaView = Animatable.createAnimatableComponent(SafeAreaView);
export const Container = ({
children,
bottomButtonOnPress,
@@ -56,7 +54,6 @@ export const Container = ({
const [text, setText] = useState('');
const [hideHeader, setHideHeader] = useState(false);
const [buttonHide, setButtonHide] = useState(false);
const insets = useSafeArea();
let offsetY = 0;
let countUp = 1;
@@ -185,119 +182,120 @@ export const Container = ({
// Render
return (
<AnimatedKeyboardAvoidingView
transition="backgroundColor"
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,
paddingTop: insets.top,
}}
<KeyboardAvoidingView
behavior="padding"
enabled={Platform.OS === 'ios' ? true : false}>
{noSelectionHeader ? null : <SelectionHeader items={data} />}
<View
<AnimatedSafeAreaView
transition="backgroundColor"
duration={300}
style={{
position: selectionMode ? 'relative' : 'absolute',
height: '100%',
backgroundColor: colors.bg,
zIndex: 999,
display: selectionMode ? 'none' : 'flex',
width: '100%',
paddingTop: StatusBar.currentHeight,
}}>
<Header
menu={menu}
hide={hideHeader}
verticalMenu={verticalMenu}
showSearch={() => {
setHideHeader(false);
countUp = 0;
countDown = 0;
}}
headerColor={headerColor}
navigation={navigation}
colors={colors}
isLoginNavigator={isLoginNavigator}
preventDefaultMargins={preventDefaultMargins}
heading={heading}
canGoBack={canGoBack}
customIcon={customIcon}
/>
{noSelectionHeader ? null : <SelectionHeader items={data} />}
{data[0] && !noSearch ? (
<Search
clear={() => setText('')}
hide={hideHeader}
onChangeText={onChangeText}
headerColor={headerColor}
onSubmitEditing={onSubmitEditing}
placeholder={placeholder}
onBlur={onBlur}
onFocus={onFocus}
clearSearch={clearSearch}
value={text}
/>
) : null}
</View>
{children}
{noBottomButton ? null : (
<Animatable.View
transition={['translateY', 'opacity']}
useNativeDriver={true}
duration={300}
<View
style={{
position: selectionMode ? 'relative' : 'absolute',
backgroundColor: colors.bg,
zIndex: 999,
display: selectionMode ? 'none' : 'flex',
width: '100%',
opacity: buttonHide ? 0 : 1,
position: 'absolute',
paddingHorizontal: 12,
zIndex: 10,
bottom: Platform.OS === 'ios' ? insets.bottom : 15,
transform: [
{
translateY: buttonHide ? 200 : 0,
},
],
}}>
<AnimatedTouchableOpacity
onPress={bottomButtonOnPress}
activeOpacity={opacity}
style={{
...getElevation(5),
width: '100%',
<Header
menu={menu}
hide={hideHeader}
verticalMenu={verticalMenu}
showSearch={() => {
setHideHeader(false);
countUp = 0;
countDown = 0;
}}
headerColor={headerColor}
navigation={navigation}
colors={colors}
isLoginNavigator={isLoginNavigator}
preventDefaultMargins={preventDefaultMargins}
heading={heading}
canGoBack={canGoBack}
customIcon={customIcon}
/>
alignSelf: 'center',
borderRadius: br,
backgroundColor: headerColor ? headerColor : colors.accent,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 0,
{data[0] && !noSearch ? (
<Search
clear={() => setText('')}
hide={hideHeader}
onChangeText={onChangeText}
headerColor={headerColor}
onSubmitEditing={onSubmitEditing}
placeholder={placeholder}
onBlur={onBlur}
onFocus={onFocus}
clearSearch={clearSearch}
value={text}
/>
) : null}
</View>
{children}
{noBottomButton ? null : (
<Animatable.View
transition={['translateY', 'opacity']}
useNativeDriver={true}
duration={300}
style={{
width: '100%',
opacity: buttonHide ? 0 : 1,
position: 'absolute',
paddingHorizontal: 12,
zIndex: 10,
transform: [
{
translateY: buttonHide ? 200 : 0,
},
],
}}>
<View
<AnimatedTouchableOpacity
onPress={bottomButtonOnPress}
activeOpacity={opacity}
style={{
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
...getElevation(5),
width: '100%',
padding: pv,
paddingVertical: pv + 5,
alignSelf: 'center',
borderRadius: br,
backgroundColor: headerColor ? headerColor : colors.accent,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 0,
}}>
<Icon name="plus" color="white" size={SIZE.xl} />
<Text
<View
style={{
fontSize: SIZE.md,
color: 'white',
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
width: '100%',
padding: pv,
paddingVertical: pv + 5,
}}>
{' ' + bottomButtonText}
</Text>
</View>
</AnimatedTouchableOpacity>
</Animatable.View>
)}
</AnimatedKeyboardAvoidingView>
<Icon name="plus" color="white" size={SIZE.xl} />
<Text
style={{
fontSize: SIZE.md,
color: 'white',
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
}}>
{' ' + bottomButtonText}
</Text>
</View>
</AnimatedTouchableOpacity>
</Animatable.View>
)}
</AnimatedSafeAreaView>
</KeyboardAvoidingView>
);
};

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState, createRef } from 'react';
import React, {useEffect, useState, createRef} from 'react';
import {
ActivityIndicator,
FlatList,
@@ -8,27 +8,25 @@ import {
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 { eScrollEvent, eClearSearch } from '../../services/events';
import { ToastEvent, hexToRGBA, DDS, db } from '../../utils/utils';
import { NotesPlaceHolder } from '../ListPlaceholders';
import {SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {eScrollEvent, eClearSearch} from '../../services/events';
import {ToastEvent, hexToRGBA, DDS, db} from '../../utils/utils';
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';
import {useIsFocused} from 'react-navigation-hooks';
const sectionListRef = createRef();
export const NotesList = ({ isGrouped = false }) => {
export const NotesList = ({isGrouped = false}) => {
const [state, dispatch] = useTracked();
const { colors, selectionMode, currentEditingNote, loading, notes } = state;
const {colors, selectionMode, currentEditingNote, loading, notes} = state;
const isFocused = useIsFocused();
const [refreshing, setRefreshing] = useState(false);
const searchResults = { ...state.searchResults };
const insets = useSafeArea();
const _renderItem = ({ item, index }) => (
const searchResults = {...state.searchResults};
const _renderItem = ({item, index}) => (
<SelectionWrapper
index={index}
currentEditingNote={
@@ -47,12 +45,12 @@ export const NotesList = ({ isGrouped = false }) => {
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({ type: ACTIONS.SELECTION_MODE, enabled: true });
dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
}
dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item });
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
update={() => {
dispatch({ type: ACTIONS.NOTES });
dispatch({type: ACTIONS.NOTES});
}}
item={item}
index={index}
@@ -78,8 +76,8 @@ export const NotesList = ({ isGrouped = false }) => {
: 135
: 135 - 60
: notes[0] && !selectionMode
? 155 - insets.top
: (155 - 60) - insets.top,
? 155
: 155 - 60,
}}>
<PinnedItems />
</View>
@@ -116,23 +114,23 @@ export const NotesList = ({ isGrouped = false }) => {
{loading ? (
<ActivityIndicator size={SIZE.xl} color={colors.accent} />
) : (
<>
<NotesPlaceHolder colors={colors} />
<Text
style={{
color: colors.icon,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 35,
}}>
Notes you write will appear here.
<>
<NotesPlaceHolder colors={colors} />
<Text
style={{
color: colors.icon,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 35,
}}>
Notes you write will appear here.
</Text>
</>
)}
</>
)}
</View>
);
const _renderSectionHeader = ({ section: { title } }) => (
const _renderSectionHeader = ({section: {title}}) => (
<Text
style={{
fontFamily: WEIGHT.bold,
@@ -159,8 +157,8 @@ export const NotesList = ({ isGrouped = false }) => {
: 135
: 135 - 60
: notes[0] && !selectionMode
? 155
: 155 - 60,
? 155
: 155 - 60,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
@@ -209,10 +207,10 @@ export const NotesList = ({ isGrouped = false }) => {
setRefreshing(false);
ToastEvent.show(e.message, 'error');
}
dispatch({ type: ACTIONS.NOTES });
dispatch({ type: ACTIONS.PINNED });
dispatch({type: ACTIONS.NOTES});
dispatch({type: ACTIONS.PINNED});
let user = await db.user.get();
dispatch({ type: ACTIONS.USER, user: user });
dispatch({type: ACTIONS.USER, user: user});
}}
refreshing={refreshing}
/>
@@ -235,31 +233,31 @@ export const NotesList = ({ isGrouped = false }) => {
renderItem={_renderItem}
/>
) : (
<FlatList
data={searchResults.type === 'notes' ? searchResults.results : []}
keyExtractor={_listKeyExtractor}
ListFooterComponent={_ListFooterComponent}
onScroll={_onScroll}
ListHeaderComponent={_ListHeaderComponent_S}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
minHeight: '100%',
}}
style={{
height: '100%',
}}
renderItem={_renderItem}
/>
);
<FlatList
data={searchResults.type === 'notes' ? searchResults.results : []}
keyExtractor={_listKeyExtractor}
ListFooterComponent={_ListFooterComponent}
onScroll={_onScroll}
ListHeaderComponent={_ListHeaderComponent_S}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
minHeight: '100%',
}}
style={{
height: '100%',
}}
renderItem={_renderItem}
/>
);
};
const PinnedItems = () => {
const [state, dispatch] = useTracked();
const { pinned, colors, selectionMode } = state;
const {pinned, colors, selectionMode} = state;
useEffect(() => {
dispatch({ type: ACTIONS.PINNED });
dispatch({type: ACTIONS.PINNED});
}, []);
return (
@@ -267,7 +265,7 @@ const PinnedItems = () => {
<FlatList
data={pinned.notes}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({ item, index }) =>
renderItem={({item, index}) =>
item.type === 'note' ? (
<SelectionWrapper
index={index}
@@ -295,12 +293,12 @@ const PinnedItems = () => {
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({ type: ACTIONS.SELECTION_MODE, enabled: true });
dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
}
dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item });
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
update={() => {
dispatch({ type: ACTIONS.NOTES });
dispatch({type: ACTIONS.NOTES});
}}
item={item}
index={index}

87
apps/mobile/src/components/SideMenu/index.js
View File

@@ -180,6 +180,34 @@ export default class SideMenu extends React.Component {
return this.props.menuPosition === 'right' ? -1 : 1;
}
doAfterShow() {
sideMenuOverlayRef.current?.setNativeProps({
style: {
display: 'none',
position: 'relative',
transform: [
{
translateX: -deviceScreen.width * 2,
},
],
},
});
}
doAfterHide() {
sideMenuOverlayRef.current?.setNativeProps({
style: {
display: 'flex',
position: 'absolute',
transform: [
{
translateX: 0,
},
],
},
});
}
handlePanResponderMove(e, gestureState) {
if (this.state.left.__getValue() * this.menuPositionMultiplier() >= 0) {
let newLeft = this.prevLeft + gestureState.dx;
@@ -199,32 +227,11 @@ export default class SideMenu extends React.Component {
let o = newLeft / this.props.openMenuOffset;
this.opacity.setValue(o * 0.5);
if (o > 0.015) {
sideMenuOverlayRef.current?.setNativeProps({
style: {
display: 'none',
position: 'relative',
transform: [
{
translateX: -deviceScreen.width * 2,
},
],
},
});
if (o > 0.1) {
this.doAfterShow();
} else {
sideMenuOverlayRef.current?.setNativeProps({
style: {
display: 'flex',
position: 'absolute',
transform: [
{
translateX: 0,
},
],
},
});
this.doAfterHide();
}
this.props.onMove(newLeft);
this.state.left.setValue(newLeft);
}
@@ -246,6 +253,7 @@ export default class SideMenu extends React.Component {
const touchMoved = x > this.props.toleranceX && y < this.props.toleranceY;
if (this.isOpen) {
this.doAfterShow();
return touchMoved;
}
@@ -266,30 +274,17 @@ export default class SideMenu extends React.Component {
const {hiddenMenuOffset, openMenuOffset} = this.state;
if (isOpen) {
sideMenuOverlayRef.current.setNativeProps({
style: {
display: 'none',
position: 'relative',
transform: [
{
translateX: -deviceScreen.width * 2,
},
],
},
});
this.doAfterShow();
setTimeout(() => {
if (this.isOpen) {
this.doAfterShow();
}
}, 500);
} else {
setTimeout(() => {
sideMenuOverlayRef.current.setNativeProps({
style: {
display: 'flex',
position: 'absolute',
transform: [
{
translateX: 0,
},
],
},
});
if (!this.isOpen) {
this.doAfterHide();
}
}, 500);
}

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

@@ -1,14 +1,13 @@
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,
@@ -25,9 +24,9 @@ const SimpleList = ({
noteToMove,
}) => {
const [state, dispatch] = useTracked();
const { colors, selectionMode } = state;
const searchResults = { ...state.searchResults };
const insets = useSafeArea();
const {colors, selectionMode} = state;
const searchResults = {...state.searchResults};
const _onScroll = event => {
if (!event) return;
let y = event.nativeEvent.contentOffset.y;
@@ -63,8 +62,8 @@ const SimpleList = ({
? 135
: 135 - 60
: data[0] && !selectionMode
? 155 - insets.top
: (155 - insets.top) - 60,
? 155
: 155 - 60,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
@@ -91,70 +90,70 @@ const SimpleList = ({
</Text>
</View>
) : (
<View
style={{
marginTop:
Platform.OS == 'ios'
? data[0] && !selectionMode
? 135
: 135 - 60
: data[0] && !selectionMode
? 155
: 155 - 60,
}}>
{pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
<>
<FlatList
data={pinned.notebooks}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({ item, index }) =>
item.type === 'notebook' ? (
<SelectionWrapper
index={index}
currentEditingNote={false}
<View
style={{
marginTop:
Platform.OS == 'ios'
? data[0] && !selectionMode
? 135
: 135 - 60
: data[0] && !selectionMode
? 155
: 155 - 60,
}}>
{pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
<>
<FlatList
data={pinned.notebooks}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item, index}) =>
item.type === 'notebook' ? (
<SelectionWrapper
index={index}
currentEditingNote={false}
pinned={true}
background={
Platform.ios
? hexToRGBA(colors.accent + '19')
: hexToRGBA(colors.shade)
}
item={item}>
<NotebookItem
hideMore={hideMore}
customStyle={{
width: '100%',
paddingTop: 15,
paddingRight: 18,
marginBottom: 10,
marginTop: 15,
borderBottomWidth: 0,
marginHorizontal: 0,
}}
isMove={isMove}
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({
type: ACTIONS.SELECTION_MODE,
enabled: true,
});
}
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
noteToMove={noteToMove}
item={item}
pinned={true}
background={
Platform.ios
? hexToRGBA(colors.accent + '19')
: hexToRGBA(colors.shade)
}
item={item}>
<NotebookItem
hideMore={hideMore}
customStyle={{
width: '100%',
paddingTop: 15,
paddingRight: 18,
marginBottom: 10,
marginTop: 15,
borderBottomWidth: 0,
marginHorizontal: 0,
}}
isMove={isMove}
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({
type: ACTIONS.SELECTION_MODE,
enabled: true,
});
}
dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item });
}}
noteToMove={noteToMove}
item={item}
pinned={true}
index={index}
colors={colors}
/>
</SelectionWrapper>
) : null
}
/>
</>
) : null}
</View>
);
index={index}
colors={colors}
/>
</SelectionWrapper>
) : null
}
/>
</>
) : null}
</View>
);
const _ListEmptyComponent = (
<View
@@ -188,8 +187,8 @@ const SimpleList = ({
<FlatList
data={
searchResults.type === type &&
focused &&
searchResults.results.length > 0
focused &&
searchResults.results.length > 0
? searchResults.results
: data
}

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

@@ -1,18 +1,17 @@
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 { useSafeArea } from 'react-native-safe-area-context';
import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
import {ACTIONS} from '../../provider/actions';
import {sideMenuRef} from '../../utils/refs';
import {moveNoteHideEvent} from '../DialogManager/recievers';
const menuRef = createRef();
export const Header = ({
heading,
@@ -27,8 +26,7 @@ export const Header = ({
headerColor,
}) => {
const [state, dispatch] = useTracked();
const { colors } = state;
const insets = useSafeArea();
const {colors} = state;
return (
<View
@@ -38,10 +36,10 @@ export const Header = ({
height: 50,
marginTop:
Platform.OS === 'ios'
? insets.top
? 0
: preventDefaultMargins || isLoginNavigator
? 0
: insets.top,
? 0
: StatusBar.currentHeight,
marginBottom: 10,
justifyContent: 'space-between',
alignItems: 'center',
@@ -56,7 +54,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') {
@@ -90,11 +88,11 @@ export const Header = ({
/>
</TouchableOpacity>
) : (
undefined
)}
undefined
)}
{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);
}}
@@ -107,8 +105,8 @@ export const Header = ({
<Icon color={colors.pri} name={'menu'} size={SIZE.xxxl} />
</TouchableOpacity>
) : (
undefined
)}
undefined
)}
<Text
style={{
@@ -185,7 +183,7 @@ export const Header = ({
color: colors.pri,
}}
onPress={() => {
dispatch({ type: ACTIONS.NOTES, sort: null });
dispatch({type: ACTIONS.NOTES, sort: null});
menuRef.current?.hide();
}}>
Default
@@ -196,7 +194,7 @@ export const Header = ({
color: colors.pri,
}}
onPress={() => {
dispatch({ type: ACTIONS.NOTES, sort: 'abc' });
dispatch({type: ACTIONS.NOTES, sort: 'abc'});
menuRef.current?.hide();
}}>
Alphabetical
@@ -207,7 +205,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
@@ -218,7 +216,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
@@ -229,7 +227,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

20
apps/mobile/src/services/Navigator.js
View File

@@ -14,10 +14,11 @@ import Settings from '../views/Settings';
import Signup from '../views/Signup';
import Tags from '../views/Tags';
import Trash from '../views/Trash';
import { createStackNavigator } from 'react-navigation-stack';
import {createStackNavigator} from 'react-navigation-stack';
import {Animated} from 'react-native';
const fade = props => {
const { position, scene } = props;
const {position, scene} = props;
const index = scene.index;
@@ -31,11 +32,10 @@ const fade = props => {
return {
opacity,
transform: [{ translateX }, { translateY }],
transform: [{translateX}, {translateY}],
};
};
export const TopLevelNavigator = createStackNavigator(
{
Home: {
@@ -89,11 +89,9 @@ export const TopLevelNavigator = createStackNavigator(
Notebook: {
screen: Notebook,
},
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
gesturesEnabled: false,
headerStyle: {
@@ -102,8 +100,14 @@ export const TopLevelNavigator = createStackNavigator(
height: 0,
},
},
cardOverlayEnabled: true,
cardShadowEnabled: true,
transitionConfig: () => ({
transitionSpec: {
timing: Animated.timing,
},
screenInterpolator: () => {},
}),
cardOverlayEnabled: false,
cardShadowEnabled: false,
animationEnabled: false,
},
);

9
apps/mobile/src/utils/refs.js
View File

@@ -1,12 +1,5 @@
import { createRef } from 'react';
import * as Animatable from 'react-native-animatable';
import { SafeAreaView } from 'react-native';
import {createRef} from 'react';
export const sideMenuRef = createRef();
export const inputRef = createRef();
export const sideMenuOverlayRef = createRef();
export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
SafeAreaView,
);

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

@@ -38,7 +38,6 @@ 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 = {};
@@ -57,7 +56,7 @@ const Editor = ({noMenu}) => {
const {colors} = state;
const [fullscreen, setFullscreen] = useState(false);
const [dateEdited, setDateEdited] = useState(0);
const insets = useSafeArea();
// FUNCTIONS
const post = message =>
@@ -518,7 +517,7 @@ const Editor = ({noMenu}) => {
position: 'absolute',
left: 0,
top: 0,
marginTop: Platform.OS === 'ios' ? 0 : insets.top,
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
paddingLeft: 12,
zIndex: 800,
}}>
@@ -539,7 +538,7 @@ const Editor = ({noMenu}) => {
flexDirection: 'row',
marginRight: 0,
position: 'absolute',
marginTop: Platform.OS === 'ios' ? 0 : insets.top,
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
zIndex: 800,
right: 0,
top: 0,
@@ -593,7 +592,8 @@ const Editor = ({noMenu}) => {
<View
style={{
paddingHorizontal: 12,
marginTop: Platform.OS === 'ios' ? 45 : insets.top + 45,
marginTop:
Platform.OS === 'ios' ? 45 : StatusBar.currentHeight + 45,
width: '100%',
position: 'absolute',
justifyContent: 'flex-start',

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

@@ -21,23 +21,22 @@ import {
WEIGHT,
} from '../../common/common';
import Container from '../../components/Container';
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 { useSafeArea } from 'react-native-safe-area-context';
import {hexToRGBA, w, DDS, setSetting, db, ToastEvent} from '../../utils/utils';
export const Settings = ({ navigation }) => {
export const Settings = ({navigation}) => {
const [state, dispatch] = useTracked();
const { colors, user, settings } = state;
const insets = useSafeArea();
const {colors, user, settings} = state;
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 +55,7 @@ export const Settings = ({ navigation }) => {
noBottomButton={true}>
<View
style={{
marginTop: Platform.OS == 'ios' ? 135 - 60 : (155 - insets.top) - 60,
marginTop: Platform.OS == 'ios' ? 135 - 60 : 155 - 60,
}}
/>
@@ -143,27 +142,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.CLEAR_ALL });
dispatch({type: ACTIONS.USER, user: null});
dispatch({type: ACTIONS.CLEAR_ALL});
ToastEvent.show('Logged out, syncing disabled', 'success');
},
},
@@ -193,74 +192,74 @@ export const Settings = ({ navigation }) => {
))}
</>
) : (
<>
<TouchableOpacity
onPress={() => {
DDS.isTab
? eSendEvent(eOpenLoginDialog)
: NavigationService.navigate('Login');
}}
activeOpacity={opacity / 2}
<>
<TouchableOpacity
onPress={() => {
DDS.isTab
? eSendEvent(eOpenLoginDialog)
: NavigationService.navigate('Login');
}}
activeOpacity={opacity / 2}
style={{
paddingVertical: pv + 5,
marginBottom: pv + 5,
width: '100%',
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.shade,
borderRadius: 5,
paddingHorizontal: 6,
}}>
<View
style={{
paddingVertical: pv + 5,
marginBottom: pv + 5,
width: '100%',
flexDirection: 'row',
width: 40,
backgroundColor: colors.accent,
height: 40,
borderRadius: 100,
alignItems: 'center',
backgroundColor: colors.shade,
borderRadius: 5,
paddingHorizontal: 6,
justifyContent: 'center',
}}>
<View
style={{
width: 40,
backgroundColor: colors.accent,
height: 40,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
}}>
<Icon size={SIZE.lg} color="white" name="account-outline" />
</View>
<Icon size={SIZE.lg} color="white" name="account-outline" />
</View>
<View
<View
style={{
marginLeft: 10,
}}>
<Text
style={{
marginLeft: 10,
fontFamily: WEIGHT.regular,
color: colors.icon,
fontSize: SIZE.xs,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
color: colors.icon,
fontSize: SIZE.xs,
}}>
You are not logged in
You are not logged in
</Text>
<Text
style={{
color: colors.accent,
}}>
Login to sync notes.
<Text
style={{
color: colors.accent,
}}>
Login to sync notes.
</Text>
</View>
</View>
<View
style={{
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
right: 6,
}}>
<Icon
name="chevron-right"
color={colors.accent}
size={SIZE.lg}
/>
</View>
</TouchableOpacity>
</>
)}
<View
style={{
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
right: 6,
}}>
<Icon
name="chevron-right"
color={colors.accent}
size={SIZE.lg}
/>
</View>
</TouchableOpacity>
</>
)}
<Text
style={{
fontSize: SIZE.xs,
@@ -349,10 +348,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);
}
@@ -389,18 +388,18 @@ export const Settings = ({ navigation }) => {
scale === 1
? (scale = 1.1)
: scale === 1.1
? (scale = 1.2)
: scale === 1.2
? (scale = 1.3)
: scale === 1.3
? (scale = 1.4)
: scale === 1.4
? (scale = 1.5)
: scale === 1.5
? (scale = 0.8)
: scale === 0.8
? (scale = 0.9)
: (scale = 0.9 ? (scale = 1) : (scale = 1));
? (scale = 1.2)
: scale === 1.2
? (scale = 1.3)
: scale === 1.3
? (scale = 1.4)
: scale === 1.4
? (scale = 1.5)
: scale === 1.5
? (scale = 0.8)
: scale === 0.8
? (scale = 0.9)
: (scale = 0.9 ? (scale = 1) : (scale = 1));
await setSetting(settings, 'fontScale', scale);
}}
@@ -588,15 +587,15 @@ export const Settings = ({ navigation }) => {
{[
{
name: 'Terms of Service',
func: () => { },
func: () => {},
},
{
name: 'Privacy Policy',
func: () => { },
func: () => {},
},
{
name: 'About',
func: () => { },
func: () => {},
},
].map(item => (
<TouchableOpacity

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

@@ -118,7 +118,7 @@ export const Trash = ({navigation}) => {
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={<TrashPlaceHolder colors={colors} />}
//placeholder={<TrashPlaceHolder colors={colors} />}
placeholderText="Deleted notes & notebooks appear here."
/>
</Container>