diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js index e4189d5cb..ecb098223 100644 --- a/apps/mobile/src/components/Container/index.js +++ b/apps/mobile/src/components/Container/index.js @@ -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 ( - - {noSelectionHeader ? null : } - - -
{ - setHideHeader(false); - countUp = 0; - countDown = 0; - }} - headerColor={headerColor} - navigation={navigation} - colors={colors} - isLoginNavigator={isLoginNavigator} - preventDefaultMargins={preventDefaultMargins} - heading={heading} - canGoBack={canGoBack} - customIcon={customIcon} - /> + {noSelectionHeader ? null : } - {data[0] && !noSearch ? ( - setText('')} - hide={hideHeader} - onChangeText={onChangeText} - headerColor={headerColor} - onSubmitEditing={onSubmitEditing} - placeholder={placeholder} - onBlur={onBlur} - onFocus={onFocus} - clearSearch={clearSearch} - value={text} - /> - ) : null} - - - {children} - - {noBottomButton ? null : ( - - { + 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 ? ( + setText('')} + hide={hideHeader} + onChangeText={onChangeText} + headerColor={headerColor} + onSubmitEditing={onSubmitEditing} + placeholder={placeholder} + onBlur={onBlur} + onFocus={onFocus} + clearSearch={clearSearch} + value={text} + /> + ) : null} + + + {children} + + {noBottomButton ? null : ( + - - - - {' ' + bottomButtonText} - - - - - )} - + + + {' ' + bottomButtonText} + + + + + )} + + ); }; diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index 9b40a326d..522e0c8ab 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/apps/mobile/src/components/NotesList/index.js @@ -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}) => ( { 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, }}> @@ -116,23 +114,23 @@ export const NotesList = ({ isGrouped = false }) => { {loading ? ( ) : ( - <> - - - Notes you write will appear here. + <> + + + Notes you write will appear here. - - )} + + )} ); - const _renderSectionHeader = ({ section: { title } }) => ( + const _renderSectionHeader = ({section: {title}}) => ( { : 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} /> ) : ( - - ); + + ); }; 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 = () => { item.id.toString()} - renderItem={({ item, index }) => + renderItem={({item, index}) => item.type === 'note' ? ( { 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} diff --git a/apps/mobile/src/components/SideMenu/index.js b/apps/mobile/src/components/SideMenu/index.js index 85ffddafc..33e69546e 100644 --- a/apps/mobile/src/components/SideMenu/index.js +++ b/apps/mobile/src/components/SideMenu/index.js @@ -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); } diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index 0918a6406..7f7fde8ce 100644 --- a/apps/mobile/src/components/header/index.js +++ b/apps/mobile/src/components/header/index.js @@ -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 ( {canGoBack ? ( { if (navigation && preventDefaultMargins) { if (navigation.state.routeName === 'Folders') { @@ -90,11 +88,11 @@ export const Header = ({ /> ) : ( - undefined - )} + undefined + )} {menu && !DDS.isTab ? ( { sideMenuRef.current?.openMenu(true); }} @@ -107,8 +105,8 @@ export const Header = ({ ) : ( - undefined - )} + undefined + )} { - 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 diff --git a/apps/mobile/src/utils/refs.js b/apps/mobile/src/utils/refs.js index 9a23472b1..f0aeccc41 100644 --- a/apps/mobile/src/utils/refs.js +++ b/apps/mobile/src/utils/refs.js @@ -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, -); - diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index 7163b6120..fbbaa5741 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -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}) => { { +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}> @@ -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 }) => { ))} ) : ( - <> - { - DDS.isTab - ? eSendEvent(eOpenLoginDialog) - : NavigationService.navigate('Login'); - }} - activeOpacity={opacity / 2} + <> + { + 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, + }}> + - - - + + - + - - You are not logged in + You are not logged in - - Login to sync notes. + + Login to sync notes. - + - - - - - - )} + + + + + + )} { { 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 => ( { focused={isFocused} onRefresh={_onRefresh} renderItem={_renderItem} - placeholder={} + //placeholder={} placeholderText="Deleted notes & notebooks appear here." />