From 71b0b42879abaf1d83a4b2299bd7be8f6cf01e3b Mon Sep 17 00:00:00 2001 From: Durran Jordan Date: Fri, 24 Jun 2016 14:17:05 -0400 Subject: [PATCH] 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. --- .../crud/lib/component/cancel-edit-button.jsx | 7 ++++++ .../lib/component/cancel-insert-button.jsx | 7 ++++++ .../lib/component/clone-document-button.jsx | 7 ++++++ .../lib/component/delete-document-button.jsx | 7 ++++++ .../crud/lib/component/document.jsx | 9 ++++---- .../lib/component/edit-document-button.jsx | 7 ++++++ .../crud/lib/component/editable-element.jsx | 7 +++++- .../crud/lib/component/editable-key.jsx | 1 + .../crud/lib/component/editable-value.jsx | 2 ++ .../crud/lib/component/hotspot.jsx | 7 ++++++ .../crud/lib/component/insert-button.jsx | 7 ++++++ .../component/open-insert-dialog-button.jsx | 7 ++++++ .../crud/lib/component/sampling-message.jsx | 23 ++++++++++++------- 13 files changed, 85 insertions(+), 13 deletions(-) diff --git a/src/internal-packages/crud/lib/component/cancel-edit-button.jsx b/src/internal-packages/crud/lib/component/cancel-edit-button.jsx index 4b4d4fd6181..d3b3288f589 100644 --- a/src/internal-packages/crud/lib/component/cancel-edit-button.jsx +++ b/src/internal-packages/crud/lib/component/cancel-edit-button.jsx @@ -31,6 +31,13 @@ class CancelEditButton extends React.Component { ); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } CancelEditButton.displayName = 'CancelEditButton'; diff --git a/src/internal-packages/crud/lib/component/cancel-insert-button.jsx b/src/internal-packages/crud/lib/component/cancel-insert-button.jsx index f971e79eb0b..482ed039f1d 100644 --- a/src/internal-packages/crud/lib/component/cancel-insert-button.jsx +++ b/src/internal-packages/crud/lib/component/cancel-insert-button.jsx @@ -31,6 +31,13 @@ class CancelInsertButton extends React.Component { ); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } CancelInsertButton.displayName = 'CancelInsertButton'; diff --git a/src/internal-packages/crud/lib/component/clone-document-button.jsx b/src/internal-packages/crud/lib/component/clone-document-button.jsx index 1d90ba60353..b5b5f381abe 100644 --- a/src/internal-packages/crud/lib/component/clone-document-button.jsx +++ b/src/internal-packages/crud/lib/component/clone-document-button.jsx @@ -28,6 +28,13 @@ class CloneDocumentButton extends React.Component { ); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } CloneDocumentButton.displayName = 'CloneDocumentButton'; diff --git a/src/internal-packages/crud/lib/component/delete-document-button.jsx b/src/internal-packages/crud/lib/component/delete-document-button.jsx index f91f549473c..f50693da916 100644 --- a/src/internal-packages/crud/lib/component/delete-document-button.jsx +++ b/src/internal-packages/crud/lib/component/delete-document-button.jsx @@ -28,6 +28,13 @@ class DeleteDocumentButton extends React.Component { ); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } DeleteDocumentButton.displayName = 'DeleteDocumentButton'; diff --git a/src/internal-packages/crud/lib/component/document.jsx b/src/internal-packages/crud/lib/component/document.jsx index 4b4a4f3a332..f2761c7de9d 100644 --- a/src/internal-packages/crud/lib/component/document.jsx +++ b/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 ( ); }); - var lastElement = elements[elements.length - 1].props.element; - elements.push(); - return elements; + var lastComponent = components[components.length - 1]; + var lastElement = lastComponent ? lastComponent.props.element : null; + components.push(); + return components; } /** diff --git a/src/internal-packages/crud/lib/component/edit-document-button.jsx b/src/internal-packages/crud/lib/component/edit-document-button.jsx index c356b7e59b4..a4253741def 100644 --- a/src/internal-packages/crud/lib/component/edit-document-button.jsx +++ b/src/internal-packages/crud/lib/component/edit-document-button.jsx @@ -28,6 +28,13 @@ class EditDocumentButton extends React.Component { ); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } EditDocumentButton.displayName = 'EditDocumentButton'; diff --git a/src/internal-packages/crud/lib/component/editable-element.jsx b/src/internal-packages/crud/lib/component/editable-element.jsx index 2e133f2824b..2de7ac86933 100644 --- a/src/internal-packages/crud/lib/component/editable-element.jsx +++ b/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 (); }); + var lastComponent = components[components.length - 1]; + var lastElement = lastComponent ? lastComponent.props.element : null; + components.push(); + return components; } /** diff --git a/src/internal-packages/crud/lib/component/editable-key.jsx b/src/internal-packages/crud/lib/component/editable-key.jsx index c08af915e99..b4713435280 100644 --- a/src/internal-packages/crud/lib/component/editable-key.jsx +++ b/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 }); diff --git a/src/internal-packages/crud/lib/component/editable-value.jsx b/src/internal-packages/crud/lib/component/editable-value.jsx index 5857e763d53..c903053ab22 100644 --- a/src/internal-packages/crud/lib/component/editable-value.jsx +++ b/src/internal-packages/crud/lib/component/editable-value.jsx @@ -41,6 +41,7 @@ class EditableValue extends React.Component { 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)); diff --git a/src/internal-packages/crud/lib/component/hotspot.jsx b/src/internal-packages/crud/lib/component/hotspot.jsx index ecdc70ec4d5..592b15a5e8e 100644 --- a/src/internal-packages/crud/lib/component/hotspot.jsx +++ b/src/internal-packages/crud/lib/component/hotspot.jsx @@ -39,6 +39,13 @@ class Hotspot extends React.Component {
); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } Hotspot.displayName = 'Hotspot'; diff --git a/src/internal-packages/crud/lib/component/insert-button.jsx b/src/internal-packages/crud/lib/component/insert-button.jsx index 86efe53ddef..eed2e480860 100644 --- a/src/internal-packages/crud/lib/component/insert-button.jsx +++ b/src/internal-packages/crud/lib/component/insert-button.jsx @@ -31,6 +31,13 @@ class InsertButton extends React.Component { ); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } InsertButton.displayName = 'InsertButton'; diff --git a/src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx b/src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx index c13261c1543..753c79f304a 100644 --- a/src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx +++ b/src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx @@ -31,6 +31,13 @@ class OpenInsertDialogButton extends React.Component { ); } + + /** + * Never needs to re-render. + */ + shouldComponentUpdate() { + return false; + } } OpenInsertDialogButton.displayName = 'OpenInsertDialogButton'; diff --git a/src/internal-packages/crud/lib/component/sampling-message.jsx b/src/internal-packages/crud/lib/component/sampling-message.jsx index 04cbd669622..bea12790e4d 100644 --- a/src/internal-packages/crud/lib/component/sampling-message.jsx +++ b/src/internal-packages/crud/lib/component/sampling-message.jsx @@ -22,8 +22,8 @@ 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)); } /** @@ -31,8 +31,8 @@ class SamplingMessage extends React.Component { */ 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 (); } } + + /** + * Only update when the count changes. + */ + shouldComponentUpdate(nextProps, nextState) { + return nextState.count !== this.state.count; + } } SamplingMessage.displayName = 'SamplingMessage';