From d2edd3aaee705e27d8a21723210c69ba603ab904 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 1 Mar 2017 23:59:24 -0500
Subject: [PATCH] Add shouldComponentUpdate to sprite-info for perf

---
 src/components/sprite-info/sprite-info.jsx | 282 +++++++++++----------
 1 file changed, 147 insertions(+), 135 deletions(-)

diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 6244cfe02..2dcf84354 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -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,