diff --git a/app/components/file_attachment_list/__snapshots__/file_attachment_list.test.js.snap b/app/components/file_attachment_list/__snapshots__/file_attachment_list.test.js.snap index 89f62d5a0c..60e6463707 100644 --- a/app/components/file_attachment_list/__snapshots__/file_attachment_list.test.js.snap +++ b/app/components/file_attachment_list/__snapshots__/file_attachment_list.test.js.snap @@ -13,7 +13,6 @@ exports[`PostAttachmentOpenGraph should match snapshot with a single image file > + {fileAttachmentComponent} { borderWidth: 1, borderColor: changeOpacity(theme.centerChannelColor, 0.2), borderRadius: 2, - maxWidth: 350, + width: 300, }, circularProgress: { width: '100%', diff --git a/app/components/file_attachment_list/file_attachment_list.js b/app/components/file_attachment_list/file_attachment_list.js index 80f7d463cb..c201a6ef69 100644 --- a/app/components/file_attachment_list/file_attachment_list.js +++ b/app/components/file_attachment_list/file_attachment_list.js @@ -25,8 +25,6 @@ export default class FileAttachmentList extends Component { showModalOverCurrentContext: PropTypes.func.isRequired, }).isRequired, canDownloadFiles: PropTypes.bool.isRequired, - deviceHeight: PropTypes.number.isRequired, - deviceWidth: PropTypes.number.isRequired, fileIds: PropTypes.array.isRequired, files: PropTypes.array, isFailed: PropTypes.bool, @@ -129,14 +127,13 @@ export default class FileAttachmentList extends Component { }); renderItems = () => { - const {canDownloadFiles, deviceWidth, fileIds, files} = this.props; + const {canDownloadFiles, fileIds, files} = this.props; if (!files.length && fileIds.length > 0) { return fileIds.map((id, idx) => ( { + const deviceWidth = parseFloat(window.width); + this.setState({ + deviceWidth, + threshold: deviceWidth / 2, + }); + }; + handleOpenValueChanged = ({ value }) => { const drawerShown = value > 0; const accessibilityViewIsModal = drawerShown; @@ -338,10 +359,11 @@ export default class DrawerLayout extends Component { return false; } - if (this.getDrawerPosition() === 'left') { - const overlayArea = DEVICE_WIDTH - - (DEVICE_WIDTH - this.props.drawerWidth); + const {deviceWidth} = this.state; + const overlayArea = deviceWidth - + (deviceWidth - this.props.drawerWidth); + if (this.getDrawerPosition() === 'left') { if (this._lastOpenValue === 1) { if ( (dx < 0 && Math.abs(dx) > Math.abs(dy) * 3) || @@ -360,8 +382,6 @@ export default class DrawerLayout extends Component { return false; } } else { - const overlayArea = DEVICE_WIDTH - this.props.drawerWidth; - if (this._lastOpenValue === 1) { if ( (dx > 0 && Math.abs(dx) > Math.abs(dy) * 3) || @@ -372,7 +392,7 @@ export default class DrawerLayout extends Component { return true; } } else { - if (moveX >= DEVICE_WIDTH - 35 && dx < 0) { + if (moveX >= deviceWidth - 35 && dx < 0) { this._isClosing = false; return true; } @@ -406,20 +426,21 @@ export default class DrawerLayout extends Component { e: EventType, { moveX, vx }: PanResponderEventType, ) => { + const {threshold} = this.state; const previouslyOpen = this._isClosing; const isWithinVelocityThreshold = vx < VX_MAX && vx > -VX_MAX; if (this.getDrawerPosition() === 'left') { if ( - (vx > 0 && moveX > THRESHOLD) || + (vx > 0 && moveX > threshold) || vx >= VX_MAX || (isWithinVelocityThreshold && previouslyOpen && - moveX > THRESHOLD) + moveX > threshold) ) { this.openDrawer({ velocity: vx }); } else if ( - (vx < 0 && moveX < THRESHOLD) || + (vx < 0 && moveX < threshold) || vx < -VX_MAX || (isWithinVelocityThreshold && !previouslyOpen) ) { @@ -431,15 +452,15 @@ export default class DrawerLayout extends Component { } } else { if ( - (vx < 0 && moveX < THRESHOLD) || + (vx < 0 && moveX < threshold) || vx <= -VX_MAX || (isWithinVelocityThreshold && previouslyOpen && - moveX < THRESHOLD) + moveX < threshold) ) { this.openDrawer({ velocity: (-1) * vx }); } else if ( - (vx > 0 && moveX > THRESHOLD) || + (vx > 0 && moveX > threshold) || vx > VX_MAX || (isWithinVelocityThreshold && !previouslyOpen) ) { @@ -464,13 +485,14 @@ export default class DrawerLayout extends Component { _getOpenValueForX(x: number): number { const { drawerWidth } = this.props; + const { deviceWidth } = this.state; if (this.getDrawerPosition() === 'left') { return x / drawerWidth; } // position === 'right' - return (DEVICE_WIDTH - x) / drawerWidth; + return (deviceWidth - x) / drawerWidth; } } diff --git a/app/components/sidebars/main/__snapshots__/main_sidebar.test.js.snap b/app/components/sidebars/main/__snapshots__/main_sidebar.test.js.snap index 418e1ebf4f..b055ce8d4e 100644 --- a/app/components/sidebars/main/__snapshots__/main_sidebar.test.js.snap +++ b/app/components/sidebars/main/__snapshots__/main_sidebar.test.js.snap @@ -3,7 +3,7 @@ exports[`MainSidebar should match, full snapshot 1`] = ` { @@ -132,7 +129,7 @@ export default class ChannelSidebar extends Component { openDrawerOffset = window.width * 0.5; } - this.setState({openDrawerOffset}); + this.setState({openDrawerOffset, deviceWidth: window.width}); } } }; @@ -400,8 +397,8 @@ export default class ChannelSidebar extends Component { }; render() { - const {children, deviceWidth} = this.props; - const {openDrawerOffset} = this.state; + const {children} = this.props; + const {deviceWidth, openDrawerOffset} = this.state; const isTablet = DeviceTypes.IS_TABLET && !this.state.isSplitView && this.state.permanentSidebar; const drawerWidth = DeviceTypes.IS_TABLET ? TABLET_WIDTH : (deviceWidth - openDrawerOffset); diff --git a/app/components/sidebars/settings/index.js b/app/components/sidebars/settings/index.js index 66406da3f7..57c408b265 100644 --- a/app/components/sidebars/settings/index.js +++ b/app/components/sidebars/settings/index.js @@ -14,8 +14,6 @@ import { dismissModal, } from 'app/actions/navigation'; -import {isLandscape, getDimensions} from 'app/selectors/device'; - import SettingsSidebar from './settings_sidebar'; function mapStateToProps(state) { @@ -23,8 +21,6 @@ function mapStateToProps(state) { const status = getStatusForUserId(state, currentUser.id); return { - ...getDimensions(state), - isLandscape: isLandscape(state), currentUser, status, theme: getTheme(state), diff --git a/app/components/sidebars/settings/settings_sidebar.js b/app/components/sidebars/settings/settings_sidebar.js index 41a76f970f..ea50c0678e 100644 --- a/app/components/sidebars/settings/settings_sidebar.js +++ b/app/components/sidebars/settings/settings_sidebar.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import {intlShape} from 'react-intl'; import { BackHandler, + Dimensions, InteractionManager, Keyboard, ScrollView, @@ -17,7 +18,7 @@ import {General} from 'mattermost-redux/constants'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; import SafeAreaView from 'app/components/safe_area_view'; -import DrawerLayout from 'app/components/sidebars/drawer_layout'; +import DrawerLayout, {DRAWER_INITIAL_OFFSET, TABLET_WIDTH} from 'app/components/sidebars/drawer_layout'; import UserStatus from 'app/components/user_status'; import {DeviceTypes, NavigationTypes} from 'app/constants'; import {confirmOutOfOfficeDisabled} from 'app/utils/status'; @@ -29,9 +30,6 @@ import DrawerItem from './drawer_item'; import UserInfo from './user_info'; import StatusLabel from './status_label'; -const DRAWER_INITIAL_OFFSET = 80; -const DRAWER_TABLET_WIDTH = 300; - export default class SettingsDrawer extends PureComponent { static propTypes = { actions: PropTypes.shape({ @@ -44,8 +42,6 @@ export default class SettingsDrawer extends PureComponent { blurPostTextBox: PropTypes.func.isRequired, children: PropTypes.node, currentUser: PropTypes.object.isRequired, - deviceWidth: PropTypes.number.isRequired, - isLandscape: PropTypes.bool.isRequired, status: PropTypes.string, theme: PropTypes.object.isRequired, }; @@ -65,18 +61,39 @@ export default class SettingsDrawer extends PureComponent { MaterialIcon.getImageSource('close', 20, props.theme.sidebarHeaderTextColor).then((source) => { this.closeButton = source; }); + + this.state = { + deviceWidth: Dimensions.get('window').width, + openDrawerOffset: DRAWER_INITIAL_OFFSET, + }; } componentDidMount() { + this.mounted = true; + this.handleDimensions({window: Dimensions.get('window')}); EventEmitter.on('close_settings_sidebar', this.closeSettingsSidebar); BackHandler.addEventListener('hardwareBackPress', this.handleAndroidBack); + Dimensions.addEventListener('change', this.handleDimensions); } componentWillUnmount() { + this.mounted = false; EventEmitter.off('close_settings_sidebar', this.closeSettingsSidebar); BackHandler.removeEventListener('hardwareBackPress', this.handleAndroidBack); + Dimensions.removeEventListener('change', this.handleDimensions); } + confirmReset = (status) => { + const {intl} = this.context; + confirmOutOfOfficeDisabled(intl, status, this.updateStatus); + }; + + closeSettingsSidebar = () => { + if (this.refs.drawer && this.drawerOpened) { + this.refs.drawer.closeDrawer(); + } + }; + handleAndroidBack = () => { if (this.refs.drawer && this.drawerOpened) { this.refs.drawer.closeDrawer(); @@ -86,20 +103,6 @@ export default class SettingsDrawer extends PureComponent { return false; }; - openSettingsSidebar = () => { - this.props.blurPostTextBox(); - - if (this.refs.drawer && !this.drawerOpened) { - this.refs.drawer.openDrawer(); - } - }; - - closeSettingsSidebar = () => { - if (this.refs.drawer && this.drawerOpened) { - this.refs.drawer.closeDrawer(); - } - }; - handleDrawerClose = () => { this.drawerOpened = false; Keyboard.dismiss(); @@ -110,6 +113,19 @@ export default class SettingsDrawer extends PureComponent { Keyboard.dismiss(); }; + handleDimensions = ({window}) => { + if (this.mounted) { + if (this.state.openDrawerOffset !== 0) { + let openDrawerOffset = DRAWER_INITIAL_OFFSET; + if ((window.width > window.height) || DeviceTypes.IS_TABLET) { + openDrawerOffset = window.width * 0.5; + } + + this.setState({openDrawerOffset, deviceWidth: window.width}); + } + } + }; + handleSetStatus = preventDoubleTap(() => { const {actions} = this.props; const items = [{ @@ -215,6 +231,14 @@ export default class SettingsDrawer extends PureComponent { }); }; + openSettingsSidebar = () => { + this.props.blurPostTextBox(); + + if (this.refs.drawer && !this.drawerOpened) { + this.refs.drawer.openDrawer(); + } + }; + renderUserStatusIcon = (userId) => { return ( { - const {intl} = this.context; - confirmOutOfOfficeDisabled(intl, status, this.updateStatus); - }; - updateStatus = (status) => { const {currentUser: {id: currentUserId}} = this.props; this.props.actions.setStatus({ @@ -348,8 +367,9 @@ export default class SettingsDrawer extends PureComponent { }; render() { - const {children, deviceWidth} = this.props; - const drawerWidth = DeviceTypes.IS_TABLET ? DRAWER_TABLET_WIDTH : (deviceWidth - DRAWER_INITIAL_OFFSET); + const {children} = this.props; + const {deviceWidth, openDrawerOffset} = this.state; + const drawerWidth = DeviceTypes.IS_TABLET ? TABLET_WIDTH : (deviceWidth - openDrawerOffset); return (