refactor SideMenu

This commit is contained in:
ammarahm-ed
2020-11-20 16:43:24 +05:00
parent 38d889a5d9
commit dc35e3c03e
3 changed files with 10 additions and 77 deletions

View File

@@ -1,5 +1,3 @@
// @flow
import PropTypes from 'prop-types';
import React from 'react';
import {
@@ -9,7 +7,6 @@ import {
View,
} from 'react-native';
import Animated, {Easing} from 'react-native-reanimated';
import styles from './styles';
const deviceScreen = Dimensions.get('window');
@@ -19,6 +16,14 @@ function shouldOpenMenu(dx) {
return dx > barrierForward;
}
/**
* @typedef {SideMenu.propTypes} propTypes
*/
/**
* @param {propTypes} props
* @extends {React.Component<propTypes, {}>}}
*/
export default class SideMenu extends React.Component {
constructor(props) {
super(props);
@@ -60,12 +65,8 @@ export default class SideMenu extends React.Component {
hiddenMenuOffset: deviceScreen.width * hiddenMenuOffsetPercentage,
left,
};
}
onLayoutChange(e) {
const {width, height} = e.nativeEvent.layout;
const openMenuOffset = width * this.state.openOffsetMenuPercentage;
@@ -85,8 +86,8 @@ export default class SideMenu extends React.Component {
const style = [
styles.frontView,
{width, height},
this.props.animationStyle(this.state.left),
this.props.containerStyle
this.props.animationStyle(this.state.left),
this.props.containerStyle,
];
return (
@@ -240,13 +241,6 @@ export default class SideMenu extends React.Component {
});
}
componentDidMount() {
//eSubscribeEvent(eSendSideMenuOverlayRef, this._getOverlayViewRef);
}
componentWillUnmount() {
//eUnSubscribeEvent(eSendSideMenuOverlayRef, this._getOverlayViewRef);
}
_getOverlayViewRef = (data) => {
//this.overlayViewRef = data.ref;
};

View File

@@ -1,61 +0,0 @@
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import * as React from 'react';
import {Menu} from '../components/Menu';
import {DDS} from '../services/DeviceDetection';
import {eSubscribeEvent, eUnSubscribeEvent} from '../services/EventManager';
import {eCloseSideMenu, eOpenSideMenu} from '../utils/Events';
import {sideMenuRef} from '../utils/Refs';
import {NavigatorStack} from './NavigatorStack';
const Drawer = createDrawerNavigator();
export const NavigationStack = ({component = NavigatorStack}) => {
const [locked, setLocked] = React.useState(false);
const setGestureDisabled = () => {
setLocked(true);
};
const setGestureEnabled = () => {
setLocked(false);
};
React.useEffect(() => {
eSubscribeEvent(eOpenSideMenu, setGestureEnabled);
eSubscribeEvent(eCloseSideMenu, setGestureDisabled);
return () => {
eUnSubscribeEvent(eOpenSideMenu, setGestureEnabled);
eUnSubscribeEvent(eCloseSideMenu, setGestureDisabled);
};
}, []);
return (
<NavigationContainer ref={sideMenuRef}>
<Drawer.Navigator
screenOptions={{
swipeEnabled: locked ? false : true,
}}
drawerStyle={{
width: DDS.isLargeTablet()
? DDS.width * 0.15
: DDS.isSmallTab
? '30%'
: '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 = () => {
return <Menu />;
};