diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx index 5d8fc1915cd185125ad12104a80c341590406895..c779f274713413e13d62851dae45c54223caadaa 100644 --- a/src/components/target-pane/target-pane.jsx +++ b/src/components/target-pane/target-pane.jsx @@ -1,5 +1,3 @@ -const isEqual = require('lodash.isequal'); -const omit = require('lodash.omit'); const classNames = require('classnames'); const PropTypes = require('prop-types'); const React = require('react'); @@ -23,119 +21,106 @@ const addIcon = require('./icon--add.svg'); * @param {object} props Props for the component * @returns {React.Component} rendered component */ -class TargetPane extends React.Component { - shouldComponentUpdate (nextProps) { - return ( - // Do a normal shallow compare on all props except sprites - Object.keys(omit(nextProps, ['sprites'])) - .reduce((all, k) => all || nextProps[k] !== this.props[k], false) || - // Deep compare on sprites object - !isEqual(this.props.sprites, nextProps.sprites) - ); - } - render () { - const { - editingTarget, - backdropLibraryVisible, - costumeLibraryVisible, - soundLibraryVisible, - spriteLibraryVisible, - onChangeSpriteDirection, - onChangeSpriteName, - onChangeSpriteRotationStyle, - onChangeSpriteVisibility, - onChangeSpriteX, - onChangeSpriteY, - onDeleteSprite, - onNewSpriteClick, - onNewBackdropClick, - onRequestCloseBackdropLibrary, - onRequestCloseCostumeLibrary, - onRequestCloseSoundLibrary, - onRequestCloseSpriteLibrary, - onSelectSprite, - stage, - sprites, - vm, - ...componentProps - } = this.props; - return ( - <Box - className={styles.targetPane} - {...componentProps} - > +const TargetPane = ({ + editingTarget, + backdropLibraryVisible, + costumeLibraryVisible, + soundLibraryVisible, + spriteLibraryVisible, + onChangeSpriteDirection, + onChangeSpriteName, + onChangeSpriteRotationStyle, + onChangeSpriteVisibility, + onChangeSpriteX, + onChangeSpriteY, + onDeleteSprite, + onNewSpriteClick, + onNewBackdropClick, + onRequestCloseBackdropLibrary, + onRequestCloseCostumeLibrary, + onRequestCloseSoundLibrary, + onRequestCloseSpriteLibrary, + onSelectSprite, + stage, + sprites, + vm, + ...componentProps +}) => ( + <Box + className={styles.targetPane} + {...componentProps} + > - <SpriteSelectorComponent - selectedId={editingTarget} - sprites={sprites} - onChangeSpriteDirection={onChangeSpriteDirection} - onChangeSpriteName={onChangeSpriteName} - onChangeSpriteRotationStyle={onChangeSpriteRotationStyle} - onChangeSpriteVisibility={onChangeSpriteVisibility} - onChangeSpriteX={onChangeSpriteX} - onChangeSpriteY={onChangeSpriteY} - onDeleteSprite={onDeleteSprite} - onSelectSprite={onSelectSprite} - /> - <Box className={styles.stageSelectorWrapper}> - {stage.id && <StageSelector - backdropCount={stage.costumeCount} - id={stage.id} - selected={stage.id === editingTarget} - url={ - stage.costume && - stage.costume.url - } - onSelect={onSelectSprite} - />} - <Box> + <SpriteSelectorComponent + selectedId={editingTarget} + sprites={sprites} + onChangeSpriteDirection={onChangeSpriteDirection} + onChangeSpriteName={onChangeSpriteName} + onChangeSpriteRotationStyle={onChangeSpriteRotationStyle} + onChangeSpriteVisibility={onChangeSpriteVisibility} + onChangeSpriteX={onChangeSpriteX} + onChangeSpriteY={onChangeSpriteY} + onDeleteSprite={onDeleteSprite} + onSelectSprite={onSelectSprite} + /> + <Box className={styles.stageSelectorWrapper}> + {stage.id && <StageSelector + assetId={ + stage.costume && + stage.costume.assetId + } + backdropCount={stage.costumeCount} + id={stage.id} + selected={stage.id === editingTarget} + onSelect={onSelectSprite} + />} + <Box> - <button - className={classNames(styles.addButtonWrapper, styles.addButtonWrapperSprite)} - onClick={onNewSpriteClick} - > - <img - className={styles.addButton} - src={addIcon} - /> - </button> + <button + className={classNames(styles.addButtonWrapper, styles.addButtonWrapperSprite)} + onClick={onNewSpriteClick} + > + <img + className={styles.addButton} + src={addIcon} + /> + </button> - <button - className={classNames(styles.addButtonWrapper, styles.addButtonWrapperStage)} - onClick={onNewBackdropClick} - > - <img - className={styles.addButton} - src={addIcon} - /> - </button> + <button + className={classNames(styles.addButtonWrapper, styles.addButtonWrapperStage)} + onClick={onNewBackdropClick} + > + <img + className={styles.addButton} + src={addIcon} + /> + </button> - <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> + <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> +); + const spriteShape = PropTypes.shape({ costume: PropTypes.shape({ url: PropTypes.string,