81 lines
1.6 KiB
TypeScript
81 lines
1.6 KiB
TypeScript
|
/**
|
||
|
* @author Martin Karkowski
|
||
|
* @email m.karkowski@zema.de
|
||
|
* @create date 2021-04-20 18:51:42
|
||
|
* @modify date 2021-04-20 18:55:10
|
||
|
* @desc [description]
|
||
|
*/
|
||
|
|
||
|
import React from "react";
|
||
|
|
||
|
/**
|
||
|
* A Component, used to Render the Staus of a Host.
|
||
|
*
|
||
|
*/
|
||
|
export class CustomIFrame extends React.Component<
|
||
|
{
|
||
|
height?: number;
|
||
|
width?: number;
|
||
|
link: string;
|
||
|
altText?: string;
|
||
|
},
|
||
|
{
|
||
|
height: number;
|
||
|
width: number;
|
||
|
}
|
||
|
> {
|
||
|
ref: React.RefObject<HTMLDivElement>;
|
||
|
|
||
|
/**
|
||
|
* Create the Status to Render.
|
||
|
* @param props
|
||
|
*/
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.ref = React.createRef();
|
||
|
this.state = {
|
||
|
height: 200,
|
||
|
width: 500
|
||
|
};
|
||
|
}
|
||
|
|
||
|
protected _handleResize: () => void;
|
||
|
|
||
|
componentDidMount() {
|
||
|
const _this = this;
|
||
|
this._handleResize = () => {
|
||
|
setTimeout(() => {
|
||
|
const size = {
|
||
|
width:
|
||
|
_this.props.width |
|
||
|
(_this.ref.current.parentElement.clientWidth - 40),
|
||
|
height:
|
||
|
_this.props.height |
|
||
|
(_this.ref.current.parentElement.clientHeight - 40)
|
||
|
};
|
||
|
console.log(size, _this.ref);
|
||
|
_this.setState(size);
|
||
|
}, 200);
|
||
|
};
|
||
|
|
||
|
this._handleResize();
|
||
|
window.addEventListener("resize", this._handleResize);
|
||
|
}
|
||
|
|
||
|
componentWillUnmount() {
|
||
|
window.removeEventListener("resize", this._handleResize);
|
||
|
}
|
||
|
|
||
|
render(): JSX.Element {
|
||
|
return (
|
||
|
<div ref={this.ref}>
|
||
|
<iframe
|
||
|
src={this.props.link}
|
||
|
height={this.state.height}
|
||
|
width={this.state.width}
|
||
|
></iframe>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|