INT-1160: CRUD Optimizations:

- Components that never need to re-render on state changes are flagged
  as such.
- Optimized sizing of input fields to match the length of the input.
- Allow empty embedded documents and empty arrays to have elements added
  to them via the click hotspot.
- Dont update sampling message to match old one.

Author: durran

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';