combine M{Text,Notice,Emote}Message into a generic TextualMessage component

src/components/views/messages/MEmoteMessage.js

@@ -1,44 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var linkify = require('linkifyjs');
-var linkifyElement = require('linkifyjs/element');
-var linkifyMatrix = require('../../../linkify-matrix');
-
-linkifyMatrix(linkify);
-
-module.exports = React.createClass({
-    displayName: 'MEmoteMessage',
-
-    componentDidMount: function() {
-        linkifyElement(this.refs.content, linkifyMatrix.options);
-    },
-
-    render: function() {
-        var mxEvent = this.props.mxEvent;
-        var content = mxEvent.getContent();
-        var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
-        return (
-            <span ref="content" className="mx_MEmoteTile mx_MessageTile_content">
-                * {name} {content.body}
-            </span>
-        );
-    },
-});
-

src/components/views/messages/MNoticeMessage.js

@@ -1,59 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-var linkify = require('linkifyjs');
-var linkifyElement = require('linkifyjs/element');
-var linkifyMatrix = require('../../../linkify-matrix.js');
-linkifyMatrix(linkify);
-var HtmlUtils = require('../../../HtmlUtils');
-
-module.exports = React.createClass({
-    displayName: 'MNoticeMessage',
-
-    componentDidMount: function() {
-        linkifyElement(this.refs.content, linkifyMatrix.options);
-
-        if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
-            HtmlUtils.highlightDom(this.getDOMNode());
-    },
-
-    componentDidUpdate: function() {
-        if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
-            HtmlUtils.highlightDom(this.getDOMNode());
-    },
-
-    shouldComponentUpdate: function(nextProps) {
-        // exploit that events are immutable :)
-        return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
-                nextProps.searchTerm !== this.props.searchTerm);
-    },
-
-    // XXX: fix horrible duplication with MTextTile
-    render: function() {
-        var content = this.props.mxEvent.getContent();
-        var body = HtmlUtils.bodyToHtml(content, this.props.searchTerm);
-
-        return (
-            <span ref="content" className="mx_MNoticeTile mx_MessageTile_content">
-                { body }
-            </span>
-        );
-    },
-});
-

src/components/views/messages/Message.js

@@ -32,9 +32,9 @@ module.exports = React.createClass({
         var UnknownMessageTile = sdk.getComponent('messages.UnknownMessage');
 
         var tileTypes = {
-            'm.text': sdk.getComponent('messages.MTextMessage'),
+            'm.text': sdk.getComponent('messages.TextualMessage'),
-            'm.notice': sdk.getComponent('messages.MNoticeMessage'),
+            'm.notice': sdk.getComponent('messages.TextualMessage'),
-            'm.emote': sdk.getComponent('messages.MEmoteMessage'),
+            'm.emote': sdk.getComponent('messages.TextualMessage'),
             'm.image': sdk.getComponent('messages.MImageMessage'),
             'm.file': sdk.getComponent('messages.MFileMessage'),
             'm.video': sdk.getComponent('messages.MVideoMessage')

src/components/views/messages/TextualMessage.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var HtmlUtils = require('../../../HtmlUtils');
 var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
@@ -25,18 +26,18 @@ var linkifyMatrix = require('../../../linkify-matrix');
 linkifyMatrix(linkify);
 
 module.exports = React.createClass({
-    displayName: 'MTextMessage',
+    displayName: 'TextualMessage',
 
     componentDidMount: function() {
         linkifyElement(this.refs.content, linkifyMatrix.options);
 
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
-            HtmlUtils.highlightDom(this.getDOMNode());
+            HtmlUtils.highlightDom(ReactDOM.findDOMNode(this));
     },
 
     componentDidUpdate: function() {
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
-            HtmlUtils.highlightDom(this.getDOMNode());
+            HtmlUtils.highlightDom(ReactDOM.findDOMNode(this));
     },
 
     shouldComponentUpdate: function(nextProps) {
@@ -46,14 +47,31 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var content = this.props.mxEvent.getContent();
+        var mxEvent = this.props.mxEvent;
+        var content = mxEvent.getContent();
         var body = HtmlUtils.bodyToHtml(content, this.props.searchTerm);
 
-        return (
+        switch (content.msgtype) {
-            <span ref="content" className="mx_MTextTile mx_MessageTile_content">
+            case "m.emote":
-                { body }
+                var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
-            </span>
+                return (
-        );
+                    <span ref="content" className="mx_MEmoteTile mx_MessageTile_content">
+                        * {name} {content.body}
+                    </span>
+                );
+            case "m.notice":
+                return (
+                    <span ref="content" className="mx_MNoticeTile mx_MessageTile_content">
+                        { body }
+                    </span>
+                );
+            default: // including "m.text"
+                return (
+                    <span ref="content" className="mx_MTextTile mx_MessageTile_content">
+                        { body }
+                    </span>
+                );
+        }
     },
 });