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

fix sidemenu overlay not hiding

Browse Source
This commit is contained in:
ammarahm-ed
2020-01-15 17:48:29 +05:00
parent 057e399c93
commit 3155541fa4
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,6 @@ import {
} from 'react-native'; } from 'react-native';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './styles'; import styles from './styles';
import * as Animatable from 'react-native-animatable';
const deviceScreen = Dimensions.get('window'); const deviceScreen = Dimensions.get('window');
const barrierForward = deviceScreen.width / 4; const barrierForward = deviceScreen.width / 4;
@@ -120,15 +119,19 @@ export default class SideMenu extends React.Component {
<TouchableWithoutFeedback onPress={() => this.openMenu(false)}> <TouchableWithoutFeedback onPress={() => this.openMenu(false)}>
<Animated.View <Animated.View
ref={ref => (this.overlay = ref)} ref={ref => (this.overlay = ref)}
onTouchStart={() => {
console.log('hello');
}}
style={{ style={{
display: 'none', display: 'none',
position: 'relative', position: 'relative',
top: 0, top: 0,
right: 0,
left: 0, left: 0,
bottom: 0, bottom: 0,
right: 0,
backgroundColor: 'black', backgroundColor: 'black',
opacity: this.opacity, opacity: this.opacity,
zIndex: 1,
}} }}
/> />
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
@@ -138,10 +141,12 @@ export default class SideMenu extends React.Component {
changeOpacity(opacity) { changeOpacity(opacity) {
if (opacity === 0.5) { if (opacity === 0.5) {
console.log('i am unset');
this.overlay.setNativeProps({ this.overlay.setNativeProps({
style: { style: {
display: 'flex', display: 'flex',
position: 'absolute', position: 'absolute',
zIndex: 1,
}, },
}); });
} }
@@ -150,11 +155,13 @@ export default class SideMenu extends React.Component {
duration: 400, duration: 400,
useNativeDriver: true, useNativeDriver: true,
}).start(() => { }).start(() => {
if (opacity === 0) { if (opacity < 0.5) {
console.log('i am set');
this.overlay.setNativeProps({ this.overlay.setNativeProps({
style: { style: {
display: 'none', display: 'none',
position: 'relative', position: 'relative',
zIndex: -1,
}, },
}); });
} }
@@ -176,7 +183,13 @@ export default class SideMenu extends React.Component {
handlePanResponderMove(e, gestureState) { handlePanResponderMove(e, gestureState) {
if (this.state.left.__getValue() * this.menuPositionMultiplier() >= 0) { if (this.state.left.__getValue() * this.menuPositionMultiplier() >= 0) {
let newLeft = this.prevLeft + gestureState.dx; let newLeft = this.prevLeft + gestureState.dx;
this.overlay.setNativeProps({
style: {
display: 'flex',
position: 'absolute',
zIndex: 1,
},
});
if ( if (
!this.props.bounceBackOnOverdraw && !this.props.bounceBackOnOverdraw &&
Math.abs(newLeft) > this.state.openMenuOffset Math.abs(newLeft) > this.state.openMenuOffset
@@ -210,12 +223,7 @@ export default class SideMenu extends React.Component {
if (this.isOpen) { if (this.isOpen) {
return touchMoved; return touchMoved;
} }
this.overlay.setNativeProps({
style: {
display: 'flex',
position: 'absolute',
},
});
const withinEdgeHitWidth = const withinEdgeHitWidth =
this.props.menuPosition === 'right' this.props.menuPosition === 'right'
? gestureState.moveX > deviceScreen.width - this.props.edgeHitWidth ? gestureState.moveX > deviceScreen.width - this.props.edgeHitWidth