Remove create-react-class

src/components/views/messages/TextualBody.js

@@ -19,7 +19,6 @@ limitations under the License.
 import React, {createRef} from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import highlight from 'highlight.js';
 import * as HtmlUtils from '../../../HtmlUtils';
 import {formatDate} from '../../../DateUtils';
@@ -37,10 +36,8 @@ import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext} from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
-export default createReactClass({
-    displayName: 'TextualBody',
-
-    propTypes: {
+export default class TextualBody extends React.Component {
+    static propTypes = {
         /* the MatrixEvent to show */
         mxEvent: PropTypes.object.isRequired,
 
@@ -58,10 +55,14 @@ export default createReactClass({
 
         /* the shape of the tile, used */
         tileShape: PropTypes.string,
-    },
+    };
 
-    getInitialState: function() {
-        return {
+    constructor(props) {
+        super(props);
+
+        this._content = createRef();
+
+        this.state = {
             // the URLs (if any) to be previewed with a LinkPreviewWidget
             // inside this TextualBody.
             links: [],
@@ -69,20 +70,15 @@ export default createReactClass({
             // track whether the preview widget is hidden
             widgetHidden: false,
         };
-    },
+    }
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
-        this._content = createRef();
-    },
-
-    componentDidMount: function() {
+    componentDidMount() {
         this._unmounted = false;
         this._pills = [];
         if (!this.props.editState) {
             this._applyFormatting();
         }
-    },
+    }
 
     _applyFormatting() {
         this.activateSpoilers([this._content.current]);
@@ -119,9 +115,9 @@ export default createReactClass({
             }
             this._addCodeCopyButton();
         }
-    },
+    }
 
-    componentDidUpdate: function(prevProps) {
+    componentDidUpdate(prevProps) {
         if (!this.props.editState) {
             const stoppedEditing = prevProps.editState && !this.props.editState;
             const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
@@ -129,14 +125,14 @@ export default createReactClass({
                 this._applyFormatting();
             }
         }
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         this._unmounted = true;
         unmountPills(this._pills);
-    },
+    }
 
-    shouldComponentUpdate: function(nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState) {
         //console.info("shouldComponentUpdate: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
 
         // exploit that events are immutable :)
@@ -148,9 +144,9 @@ export default createReactClass({
                 nextProps.editState !== this.props.editState ||
                 nextState.links !== this.state.links ||
                 nextState.widgetHidden !== this.state.widgetHidden);
-    },
+    }
 
-    calculateUrlPreview: function() {
+    calculateUrlPreview() {
         //console.info("calculateUrlPreview: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
 
         if (this.props.showUrlPreview) {
@@ -176,9 +172,9 @@ export default createReactClass({
                 this.setState({ links: [] });
             }
         }
-    },
+    }
 
-    activateSpoilers: function(nodes) {
+    activateSpoilers(nodes) {
         let node = nodes[0];
         while (node) {
             if (node.tagName === "SPAN" && typeof node.getAttribute("data-mx-spoiler") === "string") {
@@ -204,9 +200,9 @@ export default createReactClass({
 
             node = node.nextSibling;
         }
-    },
+    }
 
-    findLinks: function(nodes) {
+    findLinks(nodes) {
         let links = [];
 
         for (let i = 0; i < nodes.length; i++) {
@@ -223,9 +219,9 @@ export default createReactClass({
             }
         }
         return links;
-    },
+    }
 
-    isLinkPreviewable: function(node) {
+    isLinkPreviewable(node) {
         // don't try to preview relative links
         if (!node.getAttribute("href").startsWith("http://") &&
             !node.getAttribute("href").startsWith("https://")) {
@@ -256,7 +252,7 @@ export default createReactClass({
                 return true;
             }
         }
-    },
+    }
 
     _addCodeCopyButton() {
         // Add 'copy' buttons to pre blocks
@@ -288,41 +284,39 @@ export default createReactClass({
             div.appendChild(p);
             div.appendChild(button);
         });
-    },
+    }
 
-    onCancelClick: function(event) {
+    onCancelClick = event => {
         this.setState({ widgetHidden: true });
         // FIXME: persist this somewhere smarter than local storage
         if (global.localStorage) {
             global.localStorage.setItem("hide_preview_" + this.props.mxEvent.getId(), "1");
         }
         this.forceUpdate();
-    },
+    };
 
-    onEmoteSenderClick: function(event) {
+    onEmoteSenderClick = event => {
         const mxEvent = this.props.mxEvent;
         dis.dispatch({
             action: 'insert_mention',
             user_id: mxEvent.getSender(),
         });
-    },
+    };
 
-    getEventTileOps: function() {
-        return {
-            isWidgetHidden: () => {
-                return this.state.widgetHidden;
-            },
+    getEventTileOps = () => ({
+        isWidgetHidden: () => {
+            return this.state.widgetHidden;
+        },
 
-            unhideWidget: () => {
-                this.setState({ widgetHidden: false });
-                if (global.localStorage) {
-                    global.localStorage.removeItem("hide_preview_" + this.props.mxEvent.getId());
-                }
-            },
-        };
-    },
+        unhideWidget: () => {
+            this.setState({widgetHidden: false});
+            if (global.localStorage) {
+                global.localStorage.removeItem("hide_preview_" + this.props.mxEvent.getId());
+            }
+        },
+    });
 
-    onStarterLinkClick: function(starterLink, ev) {
+    onStarterLinkClick = (starterLink, ev) => {
         ev.preventDefault();
         // We need to add on our scalar token to the starter link, but we may not have one!
         // In addition, we can't fetch one on click and then go to it immediately as that
@@ -353,7 +347,7 @@ export default createReactClass({
                             "Do you wish to continue?", { integrationsUrl: integrationsUrl }) }
                     </div>,
                 button: _t("Continue"),
-                onFinished: function(confirmed) {
+                onFinished(confirmed) {
                     if (!confirmed) {
                         return;
                     }
@@ -367,14 +361,14 @@ export default createReactClass({
                 },
             });
         });
-    },
+    };
 
-    _openHistoryDialog: async function() {
+    _openHistoryDialog = async () => {
         const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog");
         Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent});
-    },
+    };
 
-    _renderEditedMarker: function() {
+    _renderEditedMarker() {
         const date = this.props.mxEvent.replacingEventDate();
         const dateString = date && formatDate(date);
 
@@ -397,9 +391,9 @@ export default createReactClass({
                 <span>{`(${_t("edited")})`}</span>
             </AccessibleTooltipButton>
         );
-    },
+    }
 
-    render: function() {
+    render() {
         if (this.props.editState) {
             const EditMessageComposer = sdk.getComponent('rooms.EditMessageComposer');
             return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
@@ -468,5 +462,5 @@ export default createReactClass({
                     </span>
                 );
         }
-    },
-});
+    }
+}