diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.tsx similarity index 88% rename from src/components/views/messages/MStickerBody.js rename to src/components/views/messages/MStickerBody.tsx index 31af66baf5..61be246ed9 100644 --- a/src/components/views/messages/MStickerBody.js +++ b/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 ``, 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 ; } // 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; } }