Migrate MStickerBody to TypeScript

src/components/views/messages/MStickerBody.tsx

@@ -23,16 +23,16 @@ import { BLURHASH_FIELD } from "../../../ContentMessages";
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
     // Mostly empty to prevent default behaviour of MImageBody
-    onClick(ev) {
+    protected onClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         if (!this.state.showImage) {
             this.showImage();
         }
-    }
+    };
 
     // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
     // which is added by mx_MStickerBody_wrapper
-    wrapImage(contentUrl, children) {
+    protected wrapImage(contentUrl: string, children: React.ReactNode): JSX.Element {
         let onClick = null;
         if (!this.state.showImage) {
             onClick = this.onClick;
@@ -42,13 +42,13 @@ export default class MStickerBody extends MImageBody {
 
     // Placeholder to show in place of the sticker image if
     // img onLoad hasn't fired yet.
-    getPlaceholder(width, height) {
+    protected getPlaceholder(width: number, height: number): JSX.Element {
         if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }
 
     // Tooltip to show on mouse over
-    getTooltip() {
+    protected getTooltip(): JSX.Element {
         const content = this.props.mxEvent && this.props.mxEvent.getContent();
 
         if (!content || !content.body || !content.info || !content.info.w) return null;
@@ -60,7 +60,7 @@ export default class MStickerBody extends MImageBody {
     }
 
     // Don't show "Download this_file.png ..."
-    getFileBody() {
+    protected getFileBody() {
         return null;
     }
 }