diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index ef909136f8..9960758afa 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import React from 'react'; import NotificationsContainer from './containers/notifications_container'; import PropTypes from 'prop-types'; @@ -84,10 +85,93 @@ const keyMap = { goToMuted: 'g m', }; +class SwitchingColumnsArea extends React.PureComponent { + + static propTypes = { + children: PropTypes.node, + location: PropTypes.object, + onLayoutChange: PropTypes.func.isRequired, + }; + + state = { + mobile: isMobile(window.innerWidth), + }; + + componentWillMount () { + window.addEventListener('resize', this.handleResize, { passive: true }); + } + + componentDidUpdate (prevProps) { + if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) { + this.node.handleChildrenContentChange(); + } + } + + componentWillUnmount () { + window.removeEventListener('resize', this.handleResize); + } + + handleResize = debounce(() => { + // The cached heights are no longer accurate, invalidate + this.props.onLayoutChange(); + + this.setState({ mobile: isMobile(window.innerWidth) }); + }, 500, { + trailing: true, + }); + + setRef = c => { + this.node = c.getWrappedInstance().getWrappedInstance(); + } + + render () { + const { children } = this.props; + const { mobile } = this.state; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } + +} + @connect(mapStateToProps) @injectIntl @withRouter -export default class UI extends React.Component { +export default class UI extends React.PureComponent { static contextTypes = { router: PropTypes.object.isRequired, @@ -103,7 +187,6 @@ export default class UI extends React.Component { }; state = { - width: window.innerWidth, draggingOver: false, }; @@ -118,14 +201,10 @@ export default class UI extends React.Component { } } - handleResize = debounce(() => { + handleLayoutChange = () => { // The cached heights are no longer accurate, invalidate this.props.dispatch(clearHeight()); - - this.setState({ width: window.innerWidth }); - }, 500, { - trailing: true, - }); + } handleDragEnter = (e) => { e.preventDefault(); @@ -193,7 +272,6 @@ export default class UI extends React.Component { componentWillMount () { window.addEventListener('beforeunload', this.handleBeforeUnload, false); - window.addEventListener('resize', this.handleResize, { passive: true }); document.addEventListener('dragenter', this.handleDragEnter, false); document.addEventListener('dragover', this.handleDragOver, false); document.addEventListener('drop', this.handleDrop, false); @@ -214,28 +292,8 @@ export default class UI extends React.Component { }; } - shouldComponentUpdate (nextProps) { - if (nextProps.isComposing !== this.props.isComposing) { - // Avoid expensive update just to toggle a class - this.node.classList.toggle('is-composing', nextProps.isComposing); - - return false; - } - - // Why isn't this working?!? - // return super.shouldComponentUpdate(nextProps, nextState); - return true; - } - - componentDidUpdate (prevProps) { - if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) { - this.columnsAreaNode.handleChildrenContentChange(); - } - } - componentWillUnmount () { window.removeEventListener('beforeunload', this.handleBeforeUnload); - window.removeEventListener('resize', this.handleResize); document.removeEventListener('dragenter', this.handleDragEnter); document.removeEventListener('dragover', this.handleDragOver); document.removeEventListener('drop', this.handleDrop); @@ -247,10 +305,6 @@ export default class UI extends React.Component { this.node = c; } - setColumnsAreaRef = c => { - this.columnsAreaNode = c.getWrappedInstance().getWrappedInstance(); - } - handleHotkeyNew = e => { e.preventDefault(); @@ -350,8 +404,8 @@ export default class UI extends React.Component { } render () { - const { width, draggingOver } = this.state; - const { children } = this.props; + const { draggingOver } = this.state; + const { children, isComposing, location } = this.props; const handlers = { help: this.handleHotkeyToggleHelp, @@ -374,43 +428,12 @@ export default class UI extends React.Component { return ( -
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + {children} +