Skip to content
Snippets Groups Projects
Commit 45a52b77 authored by Ray Schamp's avatar Ray Schamp
Browse files

Remove shouldComponentUpdate from TargetPane 

It doesn't help anything. Doing a deep compare is unnecessary because the underlying components will do the necessary comparison themselves. Simply seeing if the sprite list has changed at all is enough.
parent 84901ebb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/target-pane/target-pane.jsx
+ 95
− 110
View file @ 45a52b77
const isEqual = require('lodash.isequal');
const omit = require('lodash.omit');
const classNames = require('classnames'); const classNames = require('classnames');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
...@@ -23,119 +21,106 @@ const addIcon = require('./icon--add.svg'); ...@@ -23,119 +21,106 @@ const addIcon = require('./icon--add.svg');
* @param {object} props Props for the component * @param {object} props Props for the component
* @returns {React.Component} rendered component * @returns {React.Component} rendered component
*/ */
class TargetPane extends React.Component { const TargetPane = ({
shouldComponentUpdate (nextProps) { editingTarget,
return ( backdropLibraryVisible,
// Do a normal shallow compare on all props except sprites costumeLibraryVisible,
Object.keys(omit(nextProps, ['sprites'])) soundLibraryVisible,
.reduce((all, k) => all || nextProps[k] !== this.props[k], false) || spriteLibraryVisible,
// Deep compare on sprites object onChangeSpriteDirection,
!isEqual(this.props.sprites, nextProps.sprites) onChangeSpriteName,
); onChangeSpriteRotationStyle,
} onChangeSpriteVisibility,
render () { onChangeSpriteX,
const { onChangeSpriteY,
editingTarget, onDeleteSprite,
backdropLibraryVisible, onNewSpriteClick,
costumeLibraryVisible, onNewBackdropClick,
soundLibraryVisible, onRequestCloseBackdropLibrary,
spriteLibraryVisible, onRequestCloseCostumeLibrary,
onChangeSpriteDirection, onRequestCloseSoundLibrary,
onChangeSpriteName, onRequestCloseSpriteLibrary,
onChangeSpriteRotationStyle, onSelectSprite,
onChangeSpriteVisibility, stage,
onChangeSpriteX, sprites,
onChangeSpriteY, vm,
onDeleteSprite, ...componentProps
onNewSpriteClick, }) => (
onNewBackdropClick, <Box
onRequestCloseBackdropLibrary, className={styles.targetPane}
onRequestCloseCostumeLibrary, {...componentProps}
onRequestCloseSoundLibrary, >
onRequestCloseSpriteLibrary,
onSelectSprite,
stage,
sprites,
vm,
...componentProps
} = this.props;
return (
<Box
className={styles.targetPane}
{...componentProps}
>
<SpriteSelectorComponent <SpriteSelectorComponent
selectedId={editingTarget} selectedId={editingTarget}
sprites={sprites} sprites={sprites}
onChangeSpriteDirection={onChangeSpriteDirection} onChangeSpriteDirection={onChangeSpriteDirection}
onChangeSpriteName={onChangeSpriteName} onChangeSpriteName={onChangeSpriteName}
onChangeSpriteRotationStyle={onChangeSpriteRotationStyle} onChangeSpriteRotationStyle={onChangeSpriteRotationStyle}
onChangeSpriteVisibility={onChangeSpriteVisibility} onChangeSpriteVisibility={onChangeSpriteVisibility}
onChangeSpriteX={onChangeSpriteX} onChangeSpriteX={onChangeSpriteX}
onChangeSpriteY={onChangeSpriteY} onChangeSpriteY={onChangeSpriteY}
onDeleteSprite={onDeleteSprite} onDeleteSprite={onDeleteSprite}
onSelectSprite={onSelectSprite} onSelectSprite={onSelectSprite}
/> />
<Box className={styles.stageSelectorWrapper}> <Box className={styles.stageSelectorWrapper}>
{stage.id && <StageSelector {stage.id && <StageSelector
backdropCount={stage.costumeCount} assetId={
id={stage.id} stage.costume &&
selected={stage.id === editingTarget} stage.costume.assetId
url={ }
stage.costume && backdropCount={stage.costumeCount}
stage.costume.url id={stage.id}
} selected={stage.id === editingTarget}
onSelect={onSelectSprite} onSelect={onSelectSprite}
/>} />}
<Box> <Box>
<button <button
className={classNames(styles.addButtonWrapper, styles.addButtonWrapperSprite)} className={classNames(styles.addButtonWrapper, styles.addButtonWrapperSprite)}
onClick={onNewSpriteClick} onClick={onNewSpriteClick}
> >
<img <img
className={styles.addButton} className={styles.addButton}
src={addIcon} src={addIcon}
/> />
</button> </button>
<button <button
className={classNames(styles.addButtonWrapper, styles.addButtonWrapperStage)} className={classNames(styles.addButtonWrapper, styles.addButtonWrapperStage)}
onClick={onNewBackdropClick} onClick={onNewBackdropClick}
> >
<img <img
className={styles.addButton} className={styles.addButton}
src={addIcon} src={addIcon}
/> />
</button> </button>
<SpriteLibrary <SpriteLibrary
visible={spriteLibraryVisible} visible={spriteLibraryVisible}
vm={vm} vm={vm}
onRequestClose={onRequestCloseSpriteLibrary} onRequestClose={onRequestCloseSpriteLibrary}
/> />
<CostumeLibrary <CostumeLibrary
visible={costumeLibraryVisible} visible={costumeLibraryVisible}
vm={vm} vm={vm}
onRequestClose={onRequestCloseCostumeLibrary} onRequestClose={onRequestCloseCostumeLibrary}
/> />
<SoundLibrary <SoundLibrary
visible={soundLibraryVisible} visible={soundLibraryVisible}
vm={vm} vm={vm}
onRequestClose={onRequestCloseSoundLibrary} onRequestClose={onRequestCloseSoundLibrary}
/> />
<BackdropLibrary <BackdropLibrary
visible={backdropLibraryVisible} visible={backdropLibraryVisible}
vm={vm} vm={vm}
onRequestClose={onRequestCloseBackdropLibrary} onRequestClose={onRequestCloseBackdropLibrary}
/> />
</Box>
</Box>
</Box> </Box>
); </Box>
} </Box>
} );
const spriteShape = PropTypes.shape({ const spriteShape = PropTypes.shape({
costume: PropTypes.shape({ costume: PropTypes.shape({
url: PropTypes.string, url: PropTypes.string,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment