Merge remote-tracking branch 'origin/develop' into dbkr/email_notifs

README.md

@@ -25,9 +25,14 @@ You can use matrix-react-sdk directly, but to do this you would have to provide
 How to customise the SDK
 ========================
 
-The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
+The SDK formerly used the 'atomic' design pattern as seen at http://patternlab.io to
 encourage a very modular and reusable architecture, making it easy to
 customise and use UI widgets independently of the rest of the SDK and your app.
+
+So unfortunately at the moment this document does not describe how to customize your UI!
+
+###This is the old description for the atomic design pattern:
+
 In practice this means:
 
  * The UI of the app is strictly split up into a hierarchy of components.

src/components/structures/MessagePanel.js

@@ -85,6 +85,12 @@ module.exports = React.createClass({
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
         // to manage its animations
         this._readReceiptMap = {};
+
+        this._isMounted = true;
+    },
+
+    componentWillUnmount: function() {
+        this._isMounted = false;
     },
 
     /* get the DOM node representing the given event */
@@ -201,6 +207,10 @@ module.exports = React.createClass({
         }
     },
 
+    _isUnmounting: function() {
+        return !this._isMounted;
+    },
+
     _getEventTiles: function() {
         var EventTile = sdk.getComponent('rooms.EventTile');
 
@@ -351,6 +361,7 @@ module.exports = React.createClass({
                         onWidgetLoad={this._onWidgetLoad}
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
+                        checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.status}
                         last={last} isSelectedEvent={highlight}/>
                 </li>

src/components/views/rooms/EventTile.js

@@ -116,6 +116,12 @@ module.exports = React.createClass({
          */
         readReceiptMap: React.PropTypes.object,
 
+        /* A function which is used to check if the parent panel is being
+         * unmounted, to avoid unnecessary work. Should return true if we
+         * are being unmounted.
+         */
+        checkUnmounting: React.PropTypes.func,
+
         /* the status of this event - ie, mxEvent.status. Denormalised to here so
          * that we can tell when it changes. */
         eventSendStatus: React.PropTypes.string,
@@ -261,6 +267,7 @@ module.exports = React.createClass({
                 <ReadReceiptMarker key={userId} member={member}
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
+                    checkUnmounting={this.props.checkUnmounting}
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                 />

src/components/views/rooms/ReadReceiptMarker.js

@@ -53,6 +53,11 @@ module.exports = React.createClass({
         // this room
         readReceiptInfo: React.PropTypes.object,
 
+        // A function which is used to check if the parent panel is being
+        // unmounted, to avoid unnecessary work. Should return true if we
+        // are being unmounted.
+        checkUnmounting: React.PropTypes.func,
+
         // callback for clicks on this RR
         onClick: React.PropTypes.func,
     },
@@ -81,6 +86,13 @@ module.exports = React.createClass({
             return;
         }
 
+        // checking the DOM properties can force a re-layout, which can be
+        // quite expensive; so if the parent messagepanel is being unmounted,
+        // then don't bother with this.
+        if (this.props.checkUnmounting && this.props.checkUnmounting()) {
+            return;
+        }
+
         var avatarNode = ReactDOM.findDOMNode(this);
         rrInfo.top = avatarNode.offsetTop;
         rrInfo.left = avatarNode.offsetLeft;

src/components/views/rooms/RoomPreviewBar.js

@@ -97,7 +97,7 @@ module.exports = React.createClass({
                             </div>
                             <div className="mx_RoomPreviewBar_warningText">
                                 This invitation was sent to <b><span className="email">{this.props.invitedEmail}</span></b>, which is not associated with this account.<br/>
-                                You may wish to login with a different account, or add this email to your this account.
+                                You may wish to login with a different account, or add this email to this account.
                             </div>
                         </div>
                 }