diff --git a/package.json b/package.json
index b782c96b647bb8f5156d46166fab2831c216f6fc..eba4aacc8f82244fa0c0f8b1f4c5dd657cb58cbc 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
"gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
"html-webpack-plugin": "^2.30.0",
"immutable": "3.8.1",
- "jest": "^20.0.4",
+ "jest": "^21.0.0",
"lodash.bindall": "4.4.0",
"lodash.debounce": "4.0.8",
"lodash.defaultsdeep": "4.6.0",
@@ -69,13 +69,13 @@
"react-contextmenu": "2.6.5",
"react-dom": "15.6.1",
"react-draggable": "3.0.3",
- "react-intl": "2.3.0",
+ "react-intl": "2.4.0",
"react-intl-redux": "0.6.0",
- "react-modal": "2.2.4",
+ "react-modal": "2.3.1",
"react-redux": "5.0.6",
"react-responsive": "1.3.4",
"react-style-proptype": "3.0.0",
- "react-tabs": "1.1.0",
+ "react-tabs": "2.0.0",
"react-test-renderer": "^15.5.4",
"redux": "3.7.0",
"redux-mock-store": "^1.2.3",
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 1eb0e65054565751b964170a6cc989b46869364a..9b45665a61f00fcdfa9cf678be69d17b96fe9e7d 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -79,10 +79,10 @@ const GUIComponent = props => {
</Box>
</TabPanel>
<TabPanel className={tabClassNames.tabPanel}>
- <CostumeTab vm={vm} />
+ {tabIndex === 1 ? <CostumeTab vm={vm} /> : null}
</TabPanel>
<TabPanel className={tabClassNames.tabPanel}>
- <SoundTab vm={vm} />
+ {tabIndex === 2 ? <SoundTab vm={vm} /> : null}
</TabPanel>
</Tabs>
</Box>
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index f5c0ae30cf4522811a57c9a275f56237467c9868..165716e5b59b6537ce453bd849024ed96bbd36c7 100644
--- a/src/components/library/library.jsx
+++ b/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;
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 4b2711f514aa1078e619ee46466a9e856b7c62dd..3573e684cf6d32722dcc851709d921095d2f92bc 100644
--- a/src/components/modal/modal.jsx
+++ b/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;
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
index d43002b41a06f51a82ccd4a6038a441c59cfed7d..4fca4cb4a6c476350bad74c8ad43c60603bd48fd 100644
--- a/src/components/prompt/prompt.jsx
+++ b/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}
diff --git a/src/components/record-modal/record-modal.jsx b/src/components/record-modal/record-modal.jsx
index 7cdf2efa5d64b7c3c750e57cc1c4538194397f21..675d3e887c20c24ff0babaf611b8b5298394993f 100644
--- a/src/components/record-modal/record-modal.jsx
+++ b/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}
diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index a88a994a0cc5229426e80ac1285bfa044268051d..4175cbdb7b77fca49bd15bf2bbe6ca7096d6f453 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/src/components/target-pane/target-pane.jsx
@@ -3,7 +3,6 @@ import React from 'react';
import VM from 'scratch-vm';
-import Box from '../box/box.jsx';
import BackdropLibrary from '../../containers/backdrop-library.jsx';
import CostumeLibrary from '../../containers/costume-library.jsx';
import SoundLibrary from '../../containers/sound-library.jsx';
@@ -43,7 +42,7 @@ const TargetPane = ({
vm,
...componentProps
}) => (
- <Box
+ <div
className={styles.targetPane}
{...componentProps}
>
@@ -61,7 +60,7 @@ const TargetPane = ({
onNewSpriteClick={onNewSpriteClick}
onSelectSprite={onSelectSprite}
/>
- <Box className={styles.stageSelectorWrapper}>
+ <div className={styles.stageSelectorWrapper}>
{stage.id && <StageSelector
assetId={
stage.costume &&
@@ -72,30 +71,35 @@ const TargetPane = ({
selected={stage.id === editingTarget}
onSelect={onSelectSprite}
/>}
- <Box>
- <SpriteLibrary
- visible={spriteLibraryVisible}
- vm={vm}
- onRequestClose={onRequestCloseSpriteLibrary}
- />
- <CostumeLibrary
- visible={costumeLibraryVisible}
- vm={vm}
- onRequestClose={onRequestCloseCostumeLibrary}
- />
- <SoundLibrary
- visible={soundLibraryVisible}
- vm={vm}
- onRequestClose={onRequestCloseSoundLibrary}
- />
- <BackdropLibrary
- visible={backdropLibraryVisible}
- vm={vm}
- onRequestClose={onRequestCloseBackdropLibrary}
- />
- </Box>
- </Box>
- </Box>
+ <div>
+ {spriteLibraryVisible ? (
+ <SpriteLibrary
+ vm={vm}
+ onRequestClose={onRequestCloseSpriteLibrary}
+ />
+ ) : null}
+ {costumeLibraryVisible ? (
+ <CostumeLibrary
+ vm={vm}
+ onRequestClose={onRequestCloseCostumeLibrary}
+ />
+ ) : null}
+ {soundLibraryVisible ? (
+ <SoundLibrary
+ vm={vm}
+ onRequestClose={onRequestCloseSoundLibrary}
+ />
+ ) : null}
+ {backdropLibraryVisible ? (
+ <BackdropLibrary
+ vm={vm}
+ onRequestClose={onRequestCloseBackdropLibrary}
+ />
+ ) : null}
+
+ </div>
+ </div>
+ </div>
);
const spriteShape = PropTypes.shape({
diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx
index e455a0a259f54ae24ecbf710192520e9fc3a8eab..21eb3825ada784b44a06050285e5d4cf5b549098 100644
--- a/src/containers/backdrop-library.jsx
+++ b/src/containers/backdrop-library.jsx
@@ -29,7 +29,6 @@ class BackdropLibrary extends React.Component {
<LibraryComponent
data={backdropLibraryContent}
title="Backdrop Library"
- visible={this.props.visible}
onItemSelected={this.handleItemSelect}
onRequestClose={this.props.onRequestClose}
/>
@@ -39,7 +38,6 @@ class BackdropLibrary extends React.Component {
BackdropLibrary.propTypes = {
onRequestClose: PropTypes.func,
- visible: PropTypes.bool,
vm: PropTypes.instanceOf(VM).isRequired
};
diff --git a/src/containers/costume-library.jsx b/src/containers/costume-library.jsx
index ee5526752ea6361250895e0b54773414a3cedb24..7272bb95d0f3a5a3de4eb030cf6e94969262d2a7 100644
--- a/src/containers/costume-library.jsx
+++ b/src/containers/costume-library.jsx
@@ -29,7 +29,6 @@ class CostumeLibrary extends React.PureComponent {
<LibraryComponent
data={costumeLibraryContent}
title="Costume Library"
- visible={this.props.visible}
onItemSelected={this.handleItemSelected}
onRequestClose={this.props.onRequestClose}
/>
@@ -39,7 +38,6 @@ class CostumeLibrary extends React.PureComponent {
CostumeLibrary.propTypes = {
onRequestClose: PropTypes.func,
- visible: PropTypes.bool,
vm: PropTypes.instanceOf(VM).isRequired
};
diff --git a/src/containers/record-modal.jsx b/src/containers/record-modal.jsx
index fd5647c4967722b94806dcf93b5e3d16e5ff928c..fa619805a4881882c92df9457b15c4c68f8cc098 100644
--- a/src/containers/record-modal.jsx
+++ b/src/containers/record-modal.jsx
@@ -130,7 +130,6 @@ RecordModal.propTypes = {
};
const mapStateToProps = state => ({
- visible: state.modals.soundRecorder,
vm: state.vm
});
diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx
index 8fe3f97bd093365182507796afb5dc2a67f7445c..3949103bbc4ac5b02f395815f7cb190607eb9b16 100644
--- a/src/containers/sound-library.jsx
+++ b/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;
@@ -76,7 +75,6 @@ class SoundLibrary extends React.PureComponent {
<LibraryComponent
data={soundLibraryThumbnailData}
title="Sound Library"
- visible={this.props.visible}
onItemMouseEnter={this.handleItemMouseEnter}
onItemMouseLeave={this.handleItemMouseLeave}
onItemSelected={this.handleItemSelected}
@@ -88,7 +86,6 @@ class SoundLibrary extends React.PureComponent {
SoundLibrary.propTypes = {
onRequestClose: PropTypes.func,
- visible: PropTypes.bool,
vm: PropTypes.instanceOf(VM).isRequired
};
diff --git a/src/containers/sprite-library.jsx b/src/containers/sprite-library.jsx
index cb11264205b38bd48333a629897059c0703ae212..6062e02a9d7c47308ed6697f4461e4ea14c088b3 100644
--- a/src/containers/sprite-library.jsx
+++ b/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));
@@ -66,7 +66,6 @@ class SpriteLibrary extends React.PureComponent {
<LibraryComponent
data={this.state.sprites}
title="Sprite Library"
- visible={this.props.visible}
onItemMouseEnter={this.handleMouseEnter}
onItemMouseLeave={this.handleMouseLeave}
onItemSelected={this.handleItemSelect}
@@ -78,7 +77,6 @@ class SpriteLibrary extends React.PureComponent {
SpriteLibrary.propTypes = {
onRequestClose: PropTypes.func,
- visible: PropTypes.bool,
vm: PropTypes.instanceOf(VM).isRequired
};