Remove visible property from modal and library components

src/components/library/library.jsx

@@ -43,13 +43,11 @@ class LibraryComponent extends React.Component {
             dataItem.name.toLowerCase().indexOf(this.state.filterQuery.toLowerCase()) !== -1);
     }
     render () {
-        if (!this.props.visible) return null;
         return (
             <ModalComponent
                 className={styles.modalContent}
                 contentLabel={this.props.title}
                 filterQuery={this.state.filterQuery}
-                visible={this.props.visible}
                 onFilterChange={this.handleFilterChange}
                 onFilterClear={this.handleFilterClear}
                 onRequestClose={this.props.onRequestClose}
@@ -93,8 +91,7 @@ LibraryComponent.propTypes = {
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,
     onRequestClose: PropTypes.func,
-    title: PropTypes.string.isRequired,
-    visible: PropTypes.bool.isRequired
+    title: PropTypes.string.isRequired
 };
 
 export default LibraryComponent;

src/components/modal/modal.jsx

@@ -13,9 +13,9 @@ class ModalComponent extends React.Component {
     render () {
         return (
             <ReactModal
+                isOpen
                 className={classNames(styles.modalContent, this.props.className)}
                 contentLabel={this.props.contentLabel}
-                isOpen={this.props.visible}
                 overlayClassName={styles.modalOverlay}
                 ref={m => (this.modal = m)}
                 onRequestClose={this.props.onRequestClose}
@@ -68,8 +68,7 @@ ModalComponent.propTypes = {
     filterQuery: PropTypes.string,
     onFilterChange: PropTypes.func,
     onFilterClear: PropTypes.func,
-    onRequestClose: PropTypes.func,
-    visible: PropTypes.bool.isRequired
+    onRequestClose: PropTypes.func
 };
 
 export default ModalComponent;

src/components/prompt/prompt.jsx

@@ -7,7 +7,6 @@ import styles from './prompt.css';
 
 const PromptComponent = props => (
     <Modal
-        visible
         className={styles.modalContent}
         contentLabel={props.title}
         onRequestClose={props.onCancel}

src/components/record-modal/record-modal.jsx

@@ -8,7 +8,6 @@ import styles from './record-modal.css';
 
 const RecordModal = props => (
     <Modal
-        visible
         className={styles.modalContent}
         contentLabel={'Record Sound'}
         onRequestClose={props.onCancel}

src/containers/backdrop-library.jsx

@@ -27,7 +27,6 @@ class BackdropLibrary extends React.Component {
     render () {
         return (
             <LibraryComponent
-                visible
                 data={backdropLibraryContent}
                 title="Backdrop Library"
                 onItemSelected={this.handleItemSelect}

src/containers/costume-library.jsx

@@ -27,7 +27,6 @@ class CostumeLibrary extends React.PureComponent {
     render () {
         return (
             <LibraryComponent
-                visible
                 data={costumeLibraryContent}
                 title="Costume Library"
                 onItemSelected={this.handleItemSelected}

src/containers/record-modal.jsx

@@ -130,7 +130,6 @@ RecordModal.propTypes = {
 };
 
 const mapStateToProps = state => ({
-    visible: state.modals.soundRecorder,
     vm: state.vm
 });
 

src/containers/sound-library.jsx

@@ -22,9 +22,8 @@ class SoundLibrary extends React.PureComponent {
         this.audioEngine = new AudioEngine();
         this.player = this.audioEngine.createPlayer();
     }
-    componentWillReceiveProps (newProps) {
-        // Stop playing sounds if the library closes without a mouseleave (e.g. by using the escape key)
-        if (this.player && !newProps.visible) this.player.stopAllSounds();
+    componentWillUnmount () {
+        this.player.stopAllSounds();
     }
     handleItemMouseEnter (soundItem) {
         const md5ext = soundItem._md5;
@@ -74,7 +73,6 @@ class SoundLibrary extends React.PureComponent {
 
         return (
             <LibraryComponent
-                visible
                 data={soundLibraryThumbnailData}
                 title="Sound Library"
                 onItemMouseEnter={this.handleItemMouseEnter}

src/containers/sprite-library.jsx

@@ -24,8 +24,8 @@ class SpriteLibrary extends React.PureComponent {
             sprites: spriteLibraryContent
         };
     }
-    componentWillReceiveProps (newProps) {
-        if (!newProps.visible) clearInterval(this.intervalId);
+    componentWillUnmount () {
+        clearInterval(this.intervalId);
     }
     handleItemSelect (item) {
         this.props.vm.addSprite2(JSON.stringify(item.json));
@@ -64,7 +64,6 @@ class SpriteLibrary extends React.PureComponent {
     render () {
         return (
             <LibraryComponent
-                visible
                 data={this.state.sprites}
                 title="Sprite Library"
                 onItemMouseEnter={this.handleMouseEnter}