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/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..4cbc0e022af22b026df609d5b8ecfc9951bed080 100644 --- a/src/containers/backdrop-library.jsx +++ b/src/containers/backdrop-library.jsx @@ -27,9 +27,9 @@ class BackdropLibrary extends React.Component { render () { return ( <LibraryComponent + visible data={backdropLibraryContent} title="Backdrop Library" - visible={this.props.visible} onItemSelected={this.handleItemSelect} onRequestClose={this.props.onRequestClose} /> @@ -39,7 +39,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..6888a8cd74d1640e6b93dc49530260cc379c8612 100644 --- a/src/containers/costume-library.jsx +++ b/src/containers/costume-library.jsx @@ -27,9 +27,9 @@ class CostumeLibrary extends React.PureComponent { render () { return ( <LibraryComponent + visible data={costumeLibraryContent} title="Costume Library" - visible={this.props.visible} onItemSelected={this.handleItemSelected} onRequestClose={this.props.onRequestClose} /> @@ -39,7 +39,6 @@ class CostumeLibrary extends React.PureComponent { CostumeLibrary.propTypes = { onRequestClose: PropTypes.func, - visible: PropTypes.bool, vm: PropTypes.instanceOf(VM).isRequired }; diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx index 8fe3f97bd093365182507796afb5dc2a67f7445c..1a90b0e6ac4a7a28d3107dea06faf474118bb9d1 100644 --- a/src/containers/sound-library.jsx +++ b/src/containers/sound-library.jsx @@ -74,9 +74,9 @@ class SoundLibrary extends React.PureComponent { return ( <LibraryComponent + visible data={soundLibraryThumbnailData} title="Sound Library" - visible={this.props.visible} onItemMouseEnter={this.handleItemMouseEnter} onItemMouseLeave={this.handleItemMouseLeave} onItemSelected={this.handleItemSelected} @@ -88,7 +88,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..2fed6532834038201e0032da49bc4f755313d2cb 100644 --- a/src/containers/sprite-library.jsx +++ b/src/containers/sprite-library.jsx @@ -64,9 +64,9 @@ class SpriteLibrary extends React.PureComponent { render () { return ( <LibraryComponent + visible data={this.state.sprites} title="Sprite Library" - visible={this.props.visible} onItemMouseEnter={this.handleMouseEnter} onItemMouseLeave={this.handleMouseLeave} onItemSelected={this.handleItemSelect} @@ -78,7 +78,6 @@ class SpriteLibrary extends React.PureComponent { SpriteLibrary.propTypes = { onRequestClose: PropTypes.func, - visible: PropTypes.bool, vm: PropTypes.instanceOf(VM).isRequired };