INT-1160: CRUD Optimizations:

src/internal-packages/crud/lib/component/cancel-edit-button.jsx

@@ -31,6 +31,13 @@ class CancelEditButton extends React.Component {
       </button>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 CancelEditButton.displayName = 'CancelEditButton';

src/internal-packages/crud/lib/component/cancel-insert-button.jsx

@@ -31,6 +31,13 @@ class CancelInsertButton extends React.Component {
       </button>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 CancelInsertButton.displayName = 'CancelInsertButton';

src/internal-packages/crud/lib/component/clone-document-button.jsx

@@ -28,6 +28,13 @@ class CloneDocumentButton extends React.Component {
       </button>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 CloneDocumentButton.displayName = 'CloneDocumentButton';

src/internal-packages/crud/lib/component/delete-document-button.jsx

@@ -28,6 +28,13 @@ class DeleteDocumentButton extends React.Component {
       </button>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 DeleteDocumentButton.displayName = 'DeleteDocumentButton';

src/internal-packages/crud/lib/component/document.jsx

@@ -257,14 +257,15 @@ class Document extends React.Component {
    * @returns {Array} The editable elements.
    */
   editableElements() {
-    var elements = _.map(this.state.doc.elements, (element) => {
+    var components = _.map(this.state.doc.elements, (element) => {
       return (
         <EditableElement key={element.uuid} element={element} />
       );
     });
-    var lastElement = elements[elements.length - 1].props.element;
-    elements.push(<Hotspot key='hotspot' element={lastElement} />);
-    return elements;
+    var lastComponent = components[components.length - 1];
+    var lastElement = lastComponent ? lastComponent.props.element : null;
+    components.push(<Hotspot key='hotspot' doc={this.state.doc} element={lastElement} />);
+    return components;
   }
 
   /**

src/internal-packages/crud/lib/component/edit-document-button.jsx

@@ -28,6 +28,13 @@ class EditDocumentButton extends React.Component {
       </button>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 EditDocumentButton.displayName = 'EditDocumentButton';

src/internal-packages/crud/lib/component/editable-element.jsx

@@ -8,6 +8,7 @@ const RevertAction = require('./revert-action');
 const RemoveAction = require('./remove-action');
 const NoAction = require('./no-action');
 const Types = require('./types');
+const Hotspot = require('./hotspot');
 
 /**
  * The added constant.
@@ -167,9 +168,13 @@ class EditableElement extends React.Component {
    * @returns {Array} The components.
    */
   elementComponents() {
-    return _.map(this.element.elements, (element) => {
+    var components = _.map(this.element.elements, (element) => {
       return (<EditableElement key={element.uuid} element={element} />);
     });
+    var lastComponent = components[components.length - 1];
+    var lastElement = lastComponent ? lastComponent.props.element : null;
+    components.push(<Hotspot key='hotspot' doc={this.element} element={lastElement} />);
+    return components;
   }
 
   /**

src/internal-packages/crud/lib/component/editable-key.jsx

@@ -95,6 +95,7 @@ class EditableKey extends React.Component {
    */
   handleChange(evt) {
     var value = evt.target.value;
+    this._node.size = value.length;
     if (this.isEditable()) {
       if (this.element.isDuplicateKey(value)) {
         this.setState({ duplicate: true });

src/internal-packages/crud/lib/component/editable-value.jsx

@@ -41,6 +41,7 @@ class EditableValue extends React.Component {
       <input
         ref={(c) => this._node = c}
         type='text'
+        size={this.element.currentValue.length}
         className={this.style()}
         onBlur={this.handleBlur.bind(this)}
         onFocus={this.handleFocus.bind(this)}
@@ -70,6 +71,7 @@ class EditableValue extends React.Component {
    */
   handleChange(evt) {
     var value = evt.target.value;
+    this._node.size = value.length;
     var currentType = this.element.currentType;
     if (_.includes(TypeChecker.castableTypes(value), currentType)) {
       this.element.edit(TypeChecker.cast(value, currentType));

src/internal-packages/crud/lib/component/hotspot.jsx

@@ -39,6 +39,13 @@ class Hotspot extends React.Component {
       <div className='hotspot' onClick={this.handleClick.bind(this)}></div>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 Hotspot.displayName = 'Hotspot';

src/internal-packages/crud/lib/component/insert-button.jsx

@@ -31,6 +31,13 @@ class InsertButton extends React.Component {
       </button>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 InsertButton.displayName = 'InsertButton';

src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx

@@ -31,6 +31,13 @@ class OpenInsertDialogButton extends React.Component {
       </button>
     );
   }
+
+  /**
+   * Never needs to re-render.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
 }
 
 OpenInsertDialogButton.displayName = 'OpenInsertDialogButton';

src/internal-packages/crud/lib/component/sampling-message.jsx

@@ -22,17 +22,17 @@ class SamplingMessage extends React.Component {
    */
   componentDidMount() {
     this.unsubscribeReset = ResetDocumentListStore.listen(this.handleReset.bind(this));
-    this.unsubscribeRemove = RemoveDocumentStore.listen(this.handleRemove.bind(this));
-    this.unsibscribeInsert = InsertDocumentStore.listen(this.handleInsert.bind(this));
+    // this.unsubscribeRemove = RemoveDocumentStore.listen(this.handleRemove.bind(this));
+    // this.unsibscribeInsert = InsertDocumentStore.listen(this.handleInsert.bind(this));
   }
 
   /**
    * Unsibscribe from the document list store when unmounting.
    */
   componentWillUnmount() {
     this.unsubscribeReset();
-    this.unsubscribeRemove();
-    this.unsubscribeInsert();
+    // this.unsubscribeRemove();
+    // this.unsubscribeInsert();
   }
 
   /**
@@ -59,7 +59,7 @@ class SamplingMessage extends React.Component {
    * Handles removal of a document from the document list.
    */
   handleRemove() {
-    this.setState({ count: this.state.count - 1 });
+    // this.setState({ count: this.state.count - 1 });
   }
 
   /**
@@ -69,9 +69,9 @@ class SamplingMessage extends React.Component {
    * @param {Object} object - The new document or error.
    */
   handleInsert(success, object) {
-    if (success) {
-      this.setState({ count: this.state.count + 1 });
-    }
+    // if (success) {
+      // this.setState({ count: this.state.count + 1 });
+    // }
   }
 
   /**
@@ -97,6 +97,13 @@ class SamplingMessage extends React.Component {
       return (<OpenInsertDialogButton handler={this.props.insertHandler} />);
     }
   }
+
+  /**
+   * Only update when the count changes.
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextState.count !== this.state.count;
+  }
 }
 
 SamplingMessage.displayName = 'SamplingMessage';