Close sidebar on resizing from non-mobile to mobile sizes.

The layout component had to be refactored to be a class instead of a function.
WordPress · Nov 3, 2017 · 51328dc · 51328dc
1 parent 4da6c0f
commit 51328dc
Showing 1 changed file with 69 additions and 24 deletions.
diff --git a/editor/layout/index.js b/editor/layout/index.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { NoticeList, Popover, navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -21,39 +22,83 @@ import VisualEditor from '../modes/visual-editor';
 import UnsavedChangesWarning from '../unsaved-changes-warning';
 import DocumentTitle from '../document-title';
 import AutosaveMonitor from '../autosave-monitor';
-import { removeNotice } from '../actions';
+import { removeNotice, toggleSidebar } from '../actions';
 import MetaBoxes from '../meta-boxes';
 import {
 	getEditorMode,
 	isEditorSidebarOpened,
 	getNotices,
 } from '../selectors';
 
-function Layout( { mode, isSidebarOpened, notices, ...props } ) {
-	const className = classnames( 'editor-layout', {
-		'is-sidebar-opened': isSidebarOpened,
-	} );
+const MOBILE_WIDTH = 762;
 
-	return (
-		<div className={ className }>
-			<DocumentTitle />
-			<NoticeList onRemove={ props.removeNotice } notices={ notices } />
-			<UnsavedChangesWarning />
-			<AutosaveMonitor />
-			<Header />
-			<div className="editor-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
-				<div className="editor-layout__editor">
-					{ mode === 'text' && <TextEditor /> }
-					{ mode === 'visual' && <VisualEditor /> }
-				</div>
-				<div className="editor-layout__metaboxes">
-					<MetaBoxes location="normal" />
+class Layout extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onUpdateDimensions = this.onUpdateDimensions.bind( this );
+		this.saveLastWindowWidth = this.saveLastWindowWidth.bind( this );
+		this.state = {
+			lastWindowWidth: null,
+		};
+	}
+
+	saveLastWindowWidth() {
+		this.setState( {
+			lastWindowWidth: window.innerWidth,
+		} );
+	}
+
+	onUpdateDimensions() {
+		if ( this.props.isSidebarOpened &&
+			this.state.lastWindowWidth > MOBILE_WIDTH &&
+			window.innerWidth < MOBILE_WIDTH
+		) {
+			this.props.toggleSidebar();
+		}
+		this.saveLastWindowWidth();
+	}
+
+	componentDidMount() {
+		if ( window ) {
+			if ( ! this.state.lastWindowWidth ) {
+				this.saveLastWindowWidth();
+			}
+			window.addEventListener( 'resize', this.onUpdateDimensions );
+		}
+	}
+
+	componentWillUnmount() {
+		if ( window ) {
+			window.removeEventListener( 'resize', this.onUpdateDimensions );
+		}
+	}
+
+	render() {
+		const { mode, isSidebarOpened, notices } = this.props;
+		const className = classnames( 'editor-layout', {
+			'is-sidebar-opened': isSidebarOpened,
+		} );
+		return (
+			<div className={ className }>
+				<DocumentTitle />
+				<NoticeList onRemove={ this.props.removeNotice } notices={ notices } />
+				<UnsavedChangesWarning />
+				<AutosaveMonitor />
+				<Header />
+				<div className="editor-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
+					<div className="editor-layout__editor">
+						{ mode === 'text' && <TextEditor /> }
+						{ mode === 'visual' && <VisualEditor /> }
+					</div>
+					<div className="editor-layout__metaboxes">
+						<MetaBoxes location="normal" />
+					</div>
 				</div>
+				{ isSidebarOpened && <Sidebar /> }
+				<Popover.Slot />
 			</div>
-			{ isSidebarOpened && <Sidebar /> }
-			<Popover.Slot />
-		</div>
-	);
+		);
+	}
 }
 
 export default connect(
@@ -62,5 +107,5 @@ export default connect(
 		isSidebarOpened: isEditorSidebarOpened( state ),
 		notices: getNotices( state ),
 	} ),
-	{ removeNotice }
+	{ removeNotice, toggleSidebar }
 )( navigateRegions( Layout ) );