add the concept of eventTileOps for managing widget visibility based on vdh's PR feedback

src/components/views/messages/MessageEvent.js

@@ -42,11 +42,14 @@ module.exports = React.createClass({
         onWidgetLoad: React.PropTypes.func,
     },
 
+    getEventTileOps: function() {
+        return this.refs.body ? this.refs.body.getEventTileOps() : null;
+    },
 
     render: function() {
-        var UnknownMessageTile = sdk.getComponent('messages.UnknownBody');
+        var UnknownBody = sdk.getComponent('messages.UnknownBody');
 
-        var tileTypes = {
+        var bodyTypes = {
             'm.text': sdk.getComponent('messages.TextualBody'),
             'm.notice': sdk.getComponent('messages.TextualBody'),
             'm.emote': sdk.getComponent('messages.TextualBody'),
@@ -57,12 +60,12 @@ module.exports = React.createClass({
 
         var content = this.props.mxEvent.getContent();
         var msgtype = content.msgtype;
-        var TileType = UnknownMessageTile;
+        var BodyType = UnknownBody;
-        if (msgtype && tileTypes[msgtype]) {
+        if (msgtype && bodyTypes[msgtype]) {
-            TileType = tileTypes[msgtype];
+            BodyType = bodyTypes[msgtype];
         }
 
-        return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
+        return <BodyType ref="body" mxEvent={this.props.mxEvent} highlights={this.props.highlights}
                     highlightLink={this.props.highlightLink}
                     onWidgetLoad={this.props.onWidgetLoad} />;
     },

src/components/views/messages/TextualBody.js

@@ -50,10 +50,6 @@ module.exports = React.createClass({
             link: null,
 
             // track whether the preview widget is hidden
-            // we can't directly use mxEvent's widgetHidden property
-            // as shouldComponentUpdate needs to be able to do before & after
-            // comparisons of the property (and we don't pass it in as a top
-            // level prop to avoid bloating the number of props flying around)
             widgetHidden: false,
         };
     },
@@ -68,8 +64,6 @@ module.exports = React.createClass({
             // lazy-load the hidden state of the preview widget from localstorage
             if (global.localStorage) {
                 var hidden = global.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId());
-                // XXX: we're gutwrenching mxEvent here by setting our own custom property on it
-                this.props.mxEvent.widgetHidden = hidden;
                 this.setState({ widgetHidden: hidden });
             }
         }
@@ -84,11 +78,7 @@ module.exports = React.createClass({
                 nextProps.highlights !== this.props.highlights ||
                 nextProps.highlightLink !== this.props.highlightLink ||
                 nextState.link !== this.state.link ||
-                nextProps.mxEvent.widgetHidden !== this.state.widgetHidden);
+                nextState.widgetHidden !== this.state.widgetHidden);
-    },
-
-    componentWillUpdate: function(nextProps, nextState) {
-        this.setState({ widgetHidden: nextProps.mxEvent.widgetHidden });
     },
 
     findLink: function(nodes) {
@@ -104,8 +94,6 @@ module.exports = React.createClass({
     },
 
     onCancelClick: function(event) {
-        // XXX: we're gutwrenching mxEvent here by setting our own custom property on it
-        this.props.mxEvent.widgetHidden = true;
         this.setState({ widgetHidden: true });
         // FIXME: persist this somewhere smarter than local storage
         if (global.localStorage) {
@@ -114,6 +102,19 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
+    getEventTileOps: function() {
+        var self = this;
+        return {
+            isWidgetHidden: function() {
+                return self.state.widgetHidden;
+            },
+
+            unhideWidget: function() {
+                self.setState({ widgetHidden: false });
+            },
+        }
+    },
+
     render: function() {
         var mxEvent = this.props.mxEvent;
         var content = mxEvent.getContent();

src/components/views/rooms/EventTile.js

@@ -137,6 +137,7 @@ module.exports = React.createClass({
             mxEvent: this.props.mxEvent,
             left: x,
             top: y,
+            eventTileOps: this.refs.tile ? this.refs.tile.getEventTileOps() : undefined,
             onFinished: function() {
                 self.setState({menu: false});
             }
@@ -343,7 +344,7 @@ module.exports = React.createClass({
                 { avatar }
                 { sender }
                 <div className="mx_EventTile_line">
-                    <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights}
+                    <EventTileType ref="tile" mxEvent={this.props.mxEvent} highlights={this.props.highlights}
                           highlightLink={this.props.highlightLink}
                           onWidgetLoad={this.props.onWidgetLoad} />
                 </div>