diff --git a/app/components/channel_drawer/channel_drawer.js b/app/components/channel_drawer/channel_drawer.js index 929231cfd..78f07a32f 100644 --- a/app/components/channel_drawer/channel_drawer.js +++ b/app/components/channel_drawer/channel_drawer.js @@ -7,6 +7,7 @@ import { BackHandler, InteractionManager, Keyboard, + Platform, StyleSheet, View } from 'react-native'; @@ -401,6 +402,8 @@ export default class ChannelDrawer extends Component { tweenDuration={100} tweenHandler={this.handleDrawerTween} elevation={-5} + bottomPanOffset={Platform.OS === 'ios' ? 46 : 64} + topPanOffset={Platform.OS === 'ios' ? 64 : 46} styles={{ main: { shadowColor: '#000000', diff --git a/app/components/drawer.js b/app/components/drawer.js index 86228cb73..644e6500c 100644 --- a/app/components/drawer.js +++ b/app/components/drawer.js @@ -1,6 +1,7 @@ // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import {Keyboard, Dimensions} from 'react-native'; import PropTypes from 'prop-types'; import BaseDrawer from 'react-native-drawer'; @@ -8,20 +9,49 @@ import BaseDrawer from 'react-native-drawer'; export default class Drawer extends BaseDrawer { static propTypes = { ...BaseDrawer.propTypes, - onRequestClose: PropTypes.func.isRequired + onRequestClose: PropTypes.func.isRequired, + bottomPanOffset: PropTypes.number, + topPanOffset: PropTypes.number }; - // To fix the android onLayout issue give this a value of 100% as it does not need another one + constructor(props) { + super(props); + + this.keyboardHeight = 0; + } + + componentDidMount() { + this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow); + this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide); + } + + componentWillUnmount() { + this.keyboardDidShowListener.remove(); + this.keyboardDidHideListener.remove(); + } + getMainHeight = () => '100%'; + keyboardDidShow = (e) => { + this.keyboardHeight = e.endCoordinates.height; + }; + + keyboardDidHide = () => { + this.keyboardHeight = 0; + }; + + isOpened = () => { + return this._open; //eslint-disable-line no-underscore-dangle + }; + processTapGestures = () => { // Note that we explicitly don't support tap to open or double tap because I didn't copy them over - if (this._activeTween) { // eslint-disable-line no-underscore-dangle + if (this._activeTween) { //eslint-disable-line no-underscore-dangle return false; } - if (this.props.tapToClose && this._open) { // eslint-disable-line no-underscore-dangle + if (this.props.tapToClose && this._open) { //eslint-disable-line no-underscore-dangle this.props.onRequestClose(); return true; @@ -30,7 +60,40 @@ export default class Drawer extends BaseDrawer { return false; }; - isOpened = () => { - return this._open; // eslint-disable-line no-underscore-dangle - } + testPanResponderMask = (e) => { + if (this.props.disabled) { + return false; + } + + // Disable if parent or child drawer exist and are open + if (this.context.drawer && this.context.drawer._open) { //eslint-disable-line no-underscore-dangle + return false; + } + + if (this._childDrawer && this._childDrawer._open) { //eslint-disable-line no-underscore-dangle + return false; + } + + const topPanOffset = this.props.topPanOffset || 0; + const bottomPanOffset = this.props.bottomPanOffset || 0; + const height = Dimensions.get('window').height; + if ((this.props.topPanOffset && e.nativeEvent.pageY < topPanOffset) || + (this.props.bottomPanOffset && e.nativeEvent.pageY > (height - (bottomPanOffset + this.keyboardHeight)))) { + return false; + } + + const pos0 = this.isLeftOrRightSide() ? e.nativeEvent.pageX : e.nativeEvent.pageY; + const deltaOpen = this.isLeftOrTopSide() ? this.getDeviceLength() - pos0 : pos0; + const deltaClose = this.isLeftOrTopSide() ? pos0 : this.getDeviceLength() - pos0; + + if (this._open && deltaOpen > this.getOpenMask()) { //eslint-disable-line no-underscore-dangle + return false; + } + + if (!this._open && deltaClose > this.getClosedMask()) { //eslint-disable-line no-underscore-dangle + return false; + } + + return true; + }; } diff --git a/yarn.lock b/yarn.lock index 95da0c295..c9a49d530 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3878,7 +3878,7 @@ makeerror@1.0.x: mattermost-redux@mattermost/mattermost-redux#master: version "0.0.1" - resolved "https://codeload.github.com/mattermost/mattermost-redux/tar.gz/1f64d99a0df42cf6513c12be6af965065eb1374f" + resolved "https://codeload.github.com/mattermost/mattermost-redux/tar.gz/18fa0a2dc2d0648d0346e01f71f096aa835096ac" dependencies: deep-equal "1.0.1" harmony-reflect "1.5.1"