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

make sure menu does not rerender on swipe

Browse Source
This commit is contained in:
ammarahm-ed
2020-11-14 10:04:53 +05:00
parent 87e6e975ea
commit fe207b5bb2
2 changed files with 167 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
apps/mobile/src/components/Menu/index.js
View File

@@ -1,13 +1,9 @@
import React from 'react'; import React from 'react';
import {ScrollView, StatusBar, View} from 'react-native'; import {ScrollView, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions'; import {Actions} from '../../provider/Actions';
import {ColorSection} from './ColorSection'; import {DDS} from '../../services/DeviceDetection';
import {MenuListItem} from './MenuListItem';
import {TagsSection} from './TagsSection';
import {UserSection} from './UserSection';
import Seperator from '../Seperator';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import { import {
ACCENT, ACCENT,
COLOR_SCHEME, COLOR_SCHEME,
@@ -15,61 +11,73 @@ import {
COLOR_SCHEME_LIGHT, COLOR_SCHEME_LIGHT,
setColorScheme, setColorScheme,
} from '../../utils/Colors'; } from '../../utils/Colors';
import {MenuItemsList} from "../../utils/index" import {MenuItemsList} from '../../utils/index';
import {MMKV} from '../../utils/mmkv'; import {MMKV} from '../../utils/mmkv';
import {SIZE} from '../../utils/SizeUtils';
import Seperator from '../Seperator';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
import {ColorSection} from './ColorSection';
import {MenuListItem} from './MenuListItem';
import {TagsSection} from './TagsSection';
import {UserSection} from './UserSection';
export const Menu = ({close = () => {}, hide, noTextMode = false}) => { export const Menu = React.memo(
const [state, dispatch] = useTracked(); () => {
const {colors} = state; const [state, dispatch] = useTracked();
const insets = useSafeAreaInsets(); const {colors} = state;
const insets = useSafeAreaInsets();
const noTextMode = DDS.isTab && !DDS.isSmallTab;
function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
let newColors = setColorScheme(colors, accent);
dispatch({type: Actions.THEME, colors: newColors});
}
function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) { React.useEffect(() => {
let newColors = setColorScheme(colors, accent); console.log('rerendering drawer');
dispatch({type: Actions.THEME, colors: newColors}); });
}
const BottomItemsList = [ const BottomItemsList = [
{ {
name: 'Night mode', name: 'Night mode',
icon: 'theme-light-dark', icon: 'theme-light-dark',
func: () => { func: () => {
if (!colors.night) { if (!colors.night) {
MMKV.setStringAsync('theme', JSON.stringify({night: true})); MMKV.setStringAsync('theme', JSON.stringify({night: true}));
changeColorScheme(COLOR_SCHEME_DARK); changeColorScheme(COLOR_SCHEME_DARK);
} else { } else {
MMKV.setStringAsync('theme', JSON.stringify({night: false})); MMKV.setStringAsync('theme', JSON.stringify({night: false}));
changeColorScheme(COLOR_SCHEME_LIGHT); changeColorScheme(COLOR_SCHEME_LIGHT);
} }
},
switch: true,
on: !!colors.night,
close: false,
}, },
switch: true, {
on: !!colors.night, name: 'Settings',
close: false, icon: 'cog-outline',
}, close: true,
{ },
name: 'Settings', ];
icon: 'cog-outline',
close: true,
},
];
return (
<View
style={{
height: '100%',
opacity: hide ? 0 : 1,
width: '100%',
backgroundColor: colors.bg,
paddingTop: insets.top,
borderRightWidth: 1,
borderRightColor: colors.nav,
}}>
<ScrollView
alwaysBounceVertical={false}
contentContainerStyle={{
minHeight: '50%',
}}
showsVerticalScrollIndicator={false}>
return (
<View
style={{
height: '100%',
width: '100%',
backgroundColor: colors.bg,
paddingTop: insets.top,
borderRightWidth: 1,
borderRightColor: colors.nav,
}}>
<ScrollView
alwaysBounceVertical={false}
contentContainerStyle={{
minHeight: '50%',
flexGrow: 1,
}}
showsVerticalScrollIndicator={false}>
{MenuItemsList.map((item, index) => ( {MenuItemsList.map((item, index) => (
<MenuListItem <MenuListItem
testID={item.name} testID={item.name}
@@ -80,37 +88,57 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
/> />
))} ))}
{noTextMode ? null : <TagsSection />} {noTextMode ? null : <TagsSection />}
<ColorSection noTextMode={noTextMode} /> <ColorSection noTextMode={noTextMode} />
</ScrollView> <View
style={{
justifyContent: 'center',
alignItems: 'center',
flexGrow: 1,
paddingHorizontal: '10%',
}}>
<Heading style={{marginBottom: 2.5}} size={SIZE.sm}>
Your Pins
</Heading>
<Paragraph
style={{textAlign: 'center'}}
color={colors.icon}
size={SIZE.xs}>
You have not pinned anything yet. You can pin notebook topics and
tags here.
</Paragraph>
</View>
</ScrollView>
<View
style={{
width: '100%',
justifyContent: noTextMode ? 'center' : 'center',
alignItems: 'center',
alignSelf: 'center',
marginBottom: 15,
}}>
<View <View
style={{ style={{
width: '100%', width: '100%',
justifyContent: noTextMode ? 'center' : 'center',
alignItems: 'center',
alignSelf: 'center',
marginBottom: 15,
}}> }}>
{BottomItemsList.map((item, index) => ( <View
<MenuListItem style={{
testID={item.name == 'Night mode' ? 'night_mode' : item.name} width: '100%',
key={item.name} }}>
item={item} {BottomItemsList.map((item, index) => (
index={index} <MenuListItem
ignore={true} testID={item.name == 'Night mode' ? 'night_mode' : item.name}
noTextMode={noTextMode} key={item.name}
/> item={item}
))} index={index}
</View> ignore={true}
<Seperator half /> noTextMode={noTextMode}
/>
))}
</View>
<Seperator half />
<UserSection noTextMode={noTextMode} /> <UserSection noTextMode={noTextMode} />
</View>
</View> </View>
</View> );
); },
}; () => true,
);

114
apps/mobile/src/navigation/Drawer.js
View File

@@ -1,68 +1,66 @@
import * as React from "react"; import * as React from 'react';
import {eSubscribeEvent, eUnSubscribeEvent} from "../services/EventManager"; import {eSubscribeEvent, eUnSubscribeEvent} from '../services/EventManager';
import {eCloseSideMenu, eOpenSideMenu} from "../utils/Events"; import {eCloseSideMenu, eOpenSideMenu} from '../utils/Events';
import {NavigationContainer} from "@react-navigation/native"; import {NavigationContainer} from '@react-navigation/native';
import {sideMenuRef} from "../utils/Refs"; import {sideMenuRef} from '../utils/Refs';
import {Dimensions} from "react-native"; import {Dimensions} from 'react-native';
import {NavigatorStack} from "./NavigatorStack"; import {NavigatorStack} from './NavigatorStack';
import {Menu} from "../components/Menu"; import {Menu} from '../components/Menu';
import NavigationService from "../services/Navigation"; import NavigationService from '../services/Navigation';
import {createDrawerNavigator} from '@react-navigation/drawer'; import {createDrawerNavigator} from '@react-navigation/drawer';
import {DDS} from "../services/DeviceDetection"; import {DDS} from '../services/DeviceDetection';
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
export const NavigationStack = ({component = NavigatorStack}) => { export const NavigationStack = ({component = NavigatorStack}) => {
const [locked, setLocked] = React.useState(false); const [locked, setLocked] = React.useState(false);
const setGestureDisabled = () => { const setGestureDisabled = () => {
setLocked(true); setLocked(true);
};
const setGestureEnabled = () => {
setLocked(false);
};
React.useEffect(() => {
eSubscribeEvent(eOpenSideMenu, setGestureEnabled);
eSubscribeEvent(eCloseSideMenu, setGestureDisabled);
return () => {
eUnSubscribeEvent(eOpenSideMenu, setGestureEnabled);
eUnSubscribeEvent(eCloseSideMenu, setGestureDisabled);
}; };
}, []);
const setGestureEnabled = () => { return (
setLocked(false); <NavigationContainer ref={sideMenuRef}>
}; <Drawer.Navigator
screenOptions={{
React.useEffect(() => { swipeEnabled: locked ? false : true,
eSubscribeEvent(eOpenSideMenu, setGestureEnabled); }}
eSubscribeEvent(eCloseSideMenu, setGestureDisabled); drawerStyle={{
return () => { width:
eUnSubscribeEvent(eOpenSideMenu, setGestureEnabled); DDS.isTab && !DDS.isSmallTab
eUnSubscribeEvent(eCloseSideMenu, setGestureDisabled); ? Dimensions.get('window').width * 0.05
}; : DDS.isSmallTab
}, []); ? '40%'
: Dimensions.get('window').width * 0.65,
return ( borderRightWidth: 0,
<NavigationContainer ref={sideMenuRef}> }}
<Drawer.Navigator edgeWidth={200}
screenOptions={{ drawerType={DDS.isTab || DDS.isSmallTab ? 'permanent' : 'slide'}
swipeEnabled: locked ? false : true, drawerContent={DrawerComponent}
}} initialRouteName="Main">
drawerStyle={{ <Drawer.Screen name="Main" component={component} />
width: DDS.isTab && !DDS.isSmallTab </Drawer.Navigator>
? Dimensions.get('window').width * 0.05 </NavigationContainer>
: DDS.isSmallTab );
? '40%'
: Dimensions.get('window').width * 0.65,
borderRightWidth: 0,
}}
edgeWidth={200}
drawerType={DDS.isTab || DDS.isSmallTab ? 'permanent' : 'slide'}
drawerContent={DrawerComponent}
initialRouteName="Main">
<Drawer.Screen name="Main" component={component}/>
</Drawer.Navigator>
</NavigationContainer>
);
}; };
const DrawerComponent = (props) => {
return (
<Menu const DrawerComponent = () => {
menuProps={props} return (
hide={false} <Menu/>
noTextMode={DDS.isTab && !DDS.isSmallTab} );
close={() => NavigationService.closeDrawer()} };
/>
);
};