Add shouldComponentUpdate to sprite-info for perf
This commit is contained in:
Ray Schamp committed
1 parent
f2592fa783
commit
d2edd3aaee
1 file changed
+147
-135
@@ -13,149 +13,161 @@ const notDraggableIcon = require('./icon--not-draggable.svg');
|
||||
|
||||
const ROTATION_STYLES = ['left-right', 'don\'t rotate', 'all around'];
|
||||
|
||||
const SpriteInfo = props => {
|
||||
const nameDisabled = typeof props.name === 'undefined';
|
||||
const xDisabled = typeof props.x === 'undefined';
|
||||
const yDisabled = typeof props.y === 'undefined';
|
||||
const visibleDisabled = typeof props.visible === 'undefined';
|
||||
const draggableDisabled = typeof props.draggable === 'undefined';
|
||||
const rotationStyleDisabled = typeof props.rotationStyle === 'undefined';
|
||||
return (
|
||||
<Box
|
||||
className={styles.spriteInfo}
|
||||
>
|
||||
<div className={styles.row}>
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabel}>Sprite</span>
|
||||
<input
|
||||
className={classNames(styles.inputForm, styles.inputFormSpriteName)}
|
||||
disabled={nameDisabled}
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
value={nameDisabled ? '' : props.name}
|
||||
onChange={props.onChangeName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<img
|
||||
className={classNames(styles.xIcon, styles.icon)}
|
||||
src={xIcon}
|
||||
/>
|
||||
<span className={styles.inputLabel}>x</span>
|
||||
<input
|
||||
className={classNames(styles.inputForm, styles.inputFormX)}
|
||||
disabled={xDisabled}
|
||||
placeholder="x"
|
||||
type="text"
|
||||
value={xDisabled ? '' : props.x}
|
||||
onChange={props.onChangeX}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<img
|
||||
className={classNames(styles.yIcon, styles.icon)}
|
||||
src={yIcon}
|
||||
/>
|
||||
<span className={styles.inputLabel}>y</span>
|
||||
<input
|
||||
className={classNames(styles.inputForm, styles.inputFormY)}
|
||||
disabled={yDisabled}
|
||||
placeholder="y"
|
||||
type="text"
|
||||
value={yDisabled ? '' : props.y}
|
||||
onChange={props.onChangeY}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabelSmall}>
|
||||
Show
|
||||
</span>
|
||||
<div className={classNames(styles.radioBox, {[styles.isDisabled]: visibleDisabled})}>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.showIcon,
|
||||
{
|
||||
[styles.isActive]: props.visible && !visibleDisabled
|
||||
}
|
||||
)}
|
||||
src={showIcon}
|
||||
onClick={props.onClickVisible}
|
||||
class SpriteInfo extends React.Component {
|
||||
shouldComponentUpdate (nextProps) {
|
||||
return (
|
||||
this.props.draggable !== nextProps.draggable ||
|
||||
this.props.name !== nextProps.name ||
|
||||
this.props.rotationStyle !== nextProps.rotationStyle ||
|
||||
this.props.visible !== nextProps.visible ||
|
||||
this.props.x !== nextProps.x ||
|
||||
this.props.y !== nextProps.y
|
||||
);
|
||||
}
|
||||
render () {
|
||||
const nameDisabled = typeof this.props.name === 'undefined';
|
||||
const xDisabled = typeof this.props.x === 'undefined';
|
||||
const yDisabled = typeof this.props.y === 'undefined';
|
||||
const visibleDisabled = typeof this.props.visible === 'undefined';
|
||||
const draggableDisabled = typeof this.props.draggable === 'undefined';
|
||||
const rotationStyleDisabled = typeof this.props.rotationStyle === 'undefined';
|
||||
return (
|
||||
<Box
|
||||
className={styles.spriteInfo}
|
||||
>
|
||||
<div className={styles.row}>
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabel}>Sprite</span>
|
||||
<input
|
||||
className={classNames(styles.inputForm, styles.inputFormSpriteName)}
|
||||
disabled={nameDisabled}
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
value={nameDisabled ? '' : this.props.name}
|
||||
onChange={this.props.onChangeName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.hideIcon,
|
||||
{
|
||||
[styles.isActive]: !props.visible && !visibleDisabled
|
||||
}
|
||||
)}
|
||||
src={hideIcon}
|
||||
onClick={props.onClickNotVisible}
|
||||
className={classNames(styles.xIcon, styles.icon)}
|
||||
src={xIcon}
|
||||
/>
|
||||
<span className={styles.inputLabel}>x</span>
|
||||
<input
|
||||
className={classNames(styles.inputForm, styles.inputFormX)}
|
||||
disabled={xDisabled}
|
||||
placeholder="x"
|
||||
type="text"
|
||||
value={xDisabled ? '' : this.props.x}
|
||||
onChange={this.props.onChangeX}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<img
|
||||
className={classNames(styles.yIcon, styles.icon)}
|
||||
src={yIcon}
|
||||
/>
|
||||
<span className={styles.inputLabel}>y</span>
|
||||
<input
|
||||
className={classNames(styles.inputForm, styles.inputFormY)}
|
||||
disabled={yDisabled}
|
||||
placeholder="y"
|
||||
type="text"
|
||||
value={yDisabled ? '' : this.props.y}
|
||||
onChange={this.props.onChangeY}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabelSmall}>
|
||||
Draggable
|
||||
</span>
|
||||
<div className={classNames(styles.radioBox, {[styles.isDisabled]: visibleDisabled})}>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.draggableIcon,
|
||||
{
|
||||
[styles.isActive]: props.draggable && !draggableDisabled
|
||||
}
|
||||
)}
|
||||
src={draggableIcon}
|
||||
onClick={props.onClickDraggable}
|
||||
/>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.notDraggableIcon,
|
||||
{
|
||||
[styles.isActive]: !props.draggable && !draggableDisabled
|
||||
}
|
||||
)}
|
||||
src={notDraggableIcon}
|
||||
onClick={props.onClickNotDraggable}
|
||||
/>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabelSmall}>
|
||||
Show
|
||||
</span>
|
||||
<div className={classNames(styles.radioBox, {[styles.isDisabled]: visibleDisabled})}>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.showIcon,
|
||||
{
|
||||
[styles.isActive]: this.props.visible && !visibleDisabled
|
||||
}
|
||||
)}
|
||||
src={showIcon}
|
||||
onClick={this.props.onClickVisible}
|
||||
/>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.hideIcon,
|
||||
{
|
||||
[styles.isActive]: !this.props.visible && !visibleDisabled
|
||||
}
|
||||
)}
|
||||
src={hideIcon}
|
||||
onClick={this.props.onClickNotVisible}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabelSmall}>
|
||||
Draggable
|
||||
</span>
|
||||
<div className={classNames(styles.radioBox, {[styles.isDisabled]: visibleDisabled})}>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.draggableIcon,
|
||||
{
|
||||
[styles.isActive]: this.props.draggable && !draggableDisabled
|
||||
}
|
||||
)}
|
||||
src={draggableIcon}
|
||||
onClick={this.props.onClickDraggable}
|
||||
/>
|
||||
<img
|
||||
className={classNames(
|
||||
styles.icon,
|
||||
styles.notDraggableIcon,
|
||||
{
|
||||
[styles.isActive]: !this.props.draggable && !draggableDisabled
|
||||
}
|
||||
)}
|
||||
src={notDraggableIcon}
|
||||
onClick={this.props.onClickNotDraggable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabelSmall}>
|
||||
Rotation
|
||||
</span>
|
||||
<select
|
||||
className={classNames(styles.selectForm, styles.inputFormRotationSelect)}
|
||||
disabled={rotationStyleDisabled}
|
||||
value={this.props.rotationStyle}
|
||||
onChange={this.props.onChangeRotationStyle}
|
||||
>
|
||||
{ROTATION_STYLES.map(style => (
|
||||
<option
|
||||
key={style}
|
||||
value={style}
|
||||
>
|
||||
{style}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<span className={styles.inputLabelSmall}>
|
||||
Rotation
|
||||
</span>
|
||||
<select
|
||||
className={classNames(styles.selectForm, styles.inputFormRotationSelect)}
|
||||
disabled={rotationStyleDisabled}
|
||||
value={props.rotationStyle}
|
||||
onChange={props.onChangeRotationStyle}
|
||||
>
|
||||
{ROTATION_STYLES.map(style => (
|
||||
<option
|
||||
key={style}
|
||||
value={style}
|
||||
>
|
||||
{style}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SpriteInfo.propTypes = {
|
||||
draggable: React.PropTypes.bool,
|
||||
|
||||
Reference in new issue
Block a user