Merge pull request #1858 from rschamp/feature/modal-back-button

Allow the back button to work with libraries

src/components/library/library.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import LibraryItem from '../library-item/library-item.jsx';
-import ModalComponent from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
@@ -85,9 +85,10 @@ class LibraryComponent extends React.Component {
     }
     render () {
         return (
-            <ModalComponent
+            <Modal
                 fullScreen
                 contentLabel={this.props.title}
+                id={this.props.id}
                 onRequestClose={this.props.onRequestClose}
             >
                 {(this.props.filterable || this.props.tags) && (
@@ -153,7 +154,7 @@ class LibraryComponent extends React.Component {
                         );
                     })}
                 </div>
-            </ModalComponent>
+            </Modal>
         );
     }
 }
@@ -171,6 +172,7 @@ LibraryComponent.propTypes = {
         /* eslint-enable react/no-unused-prop-types, lines-around-comment */
     ),
     filterable: PropTypes.bool,
+    id: PropTypes.string.isRequired,
     onItemMouseEnter: PropTypes.func,
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,

src/containers/backdrop-library.jsx

@@ -44,6 +44,7 @@ class BackdropLibrary extends React.Component {
         return (
             <LibraryComponent
                 data={backdropLibraryContent}
+                id="backdropLibrary"
                 tags={backdropTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemSelected={this.handleItemSelect}

src/containers/costume-library.jsx

@@ -44,6 +44,7 @@ class CostumeLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={costumeLibraryContent}
+                id="costumeLibrary"
                 tags={spriteTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemSelected={this.handleItemSelected}

src/containers/extension-library.jsx

@@ -46,6 +46,7 @@ class ExtensionLibrary extends React.PureComponent {
             <LibraryComponent
                 data={extensionLibraryThumbnailData}
                 filterable={false}
+                id="extensionLibrary"
                 title="Choose an Extension"
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}

src/containers/modal.jsx

@@ -0,0 +1,54 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import ModalComponent from '../components/modal/modal.jsx';
+
+class Modal extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'addEventListeners',
+            'removeEventListeners',
+            'handlePopState',
+            'pushHistory'
+        ]);
+        this.addEventListeners();
+    }
+    componentDidMount () {
+        // Add a history event only if it's not currently for our modal. This
+        // avoids polluting the history with many entries. We only need one.
+        this.pushHistory(this.id, history.state === null);
+    }
+    componentWillUnmount () {
+        this.removeEventListeners();
+    }
+    addEventListeners () {
+        window.addEventListener('popstate', this.handlePopState);
+    }
+    removeEventListeners () {
+        window.removeEventListener('popstate', this.handlePopState);
+    }
+    handlePopState () {
+        // Whenever someone navigates, we want to be closed
+        this.props.onRequestClose();
+    }
+    get id () {
+        return `modal-${this.props.id}`;
+    }
+    pushHistory (state, push) {
+        if (push) return history.pushState(state, this.id);
+        history.replaceState(state, this.id);
+    }
+    render () {
+        return <ModalComponent {...this.props} />;
+    }
+}
+
+Modal.propTypes = {
+    id: PropTypes.string.isRequired,
+    onRequestClose: PropTypes.func,
+    onRequestOpen: PropTypes.func
+};
+
+export default Modal;

src/containers/sound-library.jsx

@@ -93,6 +93,7 @@ class SoundLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={soundLibraryThumbnailData}
+                id="soundLibrary"
                 tags={soundTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleItemMouseEnter}

src/containers/sprite-library.jsx

@@ -81,6 +81,7 @@ class SpriteLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={this.state.sprites}
+                id="spriteLibrary"
                 tags={spriteTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleMouseEnter}