PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use a ref instead of that ugly thing

Browse source 
Sometimes I do really weird things and don't know why :D

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-04-26 13:11:41 +02:00
parent 0e312977e3
commit c1a4204ad3
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/elements/ImageView.tsx
View file

@ -42,7 +42,6 @@ const ZOOM_STEP = 0.10;
const ZOOM_COEFFICIENT = 0.0025;
// If we have moved only this much we can zoom
const ZOOM_DISTANCE = 10;
const IMAGE_WRAPPER_CLASS = "mx_ImageView_image_wrapper";
interface IProps {
src: string, // the source of the image being displayed
@ -91,6 +90,7 @@ export default class ImageView extends React.Component<IProps, IState> {
// XXX: Refs to functional components
private contextMenuButton = createRef<any>();
private focusLock = createRef<any>();
private imageWrapper = createRef<HTMLDivElement>();
private initX = 0;
private initY = 0;
@ -114,7 +114,7 @@ export default class ImageView extends React.Component<IProps, IState> {
private calculateZoom = () => {
// TODO: What if we don't have width and height props?
const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0];
const imageWrapper = this.imageWrapper.current;
const zoomX = imageWrapper.clientWidth / this.props.width;
const zoomY = imageWrapper.clientHeight / this.props.height;
@ -447,7 +447,9 @@ export default class ImageView extends React.Component<IProps, IState> {
{this.renderContextMenu()}
</div>
</div>
<div className={IMAGE_WRAPPER_CLASS}>
<div
className="mx_ImageView_image_wrapper"
ref={this.imageWrapper}>
<img
src={this.props.src}
title={this.props.name}