Convert Spoiler to TS
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>pull/21833/head
parent
9e2bc28c06
commit
96d1519ac5
|
@ -17,25 +17,34 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
reason?: string;
|
||||||
|
contentHtml: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IState {
|
||||||
|
visible: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
@replaceableComponent("views.elements.Spoiler")
|
@replaceableComponent("views.elements.Spoiler")
|
||||||
export default class Spoiler extends React.Component {
|
export default class Spoiler extends React.Component<IProps, IState> {
|
||||||
constructor(props) {
|
constructor(props: IProps) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
visible: false,
|
visible: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleVisible(e) {
|
private toggleVisible = (e: React.MouseEvent): void => {
|
||||||
if (!this.state.visible) {
|
if (!this.state.visible) {
|
||||||
// we are un-blurring, we don't want this click to propagate to potential child pills
|
// we are un-blurring, we don't want this click to propagate to potential child pills
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
this.setState({ visible: !this.state.visible });
|
this.setState({ visible: !this.state.visible });
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
public render(): JSX.Element {
|
||||||
const reason = this.props.reason ? (
|
const reason = this.props.reason ? (
|
||||||
<span className="mx_EventTile_spoiler_reason">{ "(" + this.props.reason + ")" }</span>
|
<span className="mx_EventTile_spoiler_reason">{ "(" + this.props.reason + ")" }</span>
|
||||||
) : null;
|
) : null;
|
||||||
|
@ -43,7 +52,7 @@ export default class Spoiler extends React.Component {
|
||||||
// as such, we pass the this.props.contentHtml instead and then set the raw
|
// as such, we pass the this.props.contentHtml instead and then set the raw
|
||||||
// HTML content. This is secure as the contents have already been parsed previously
|
// HTML content. This is secure as the contents have already been parsed previously
|
||||||
return (
|
return (
|
||||||
<span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible.bind(this)}>
|
<span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible}>
|
||||||
{ reason }
|
{ reason }
|
||||||
|
|
||||||
<span className="mx_EventTile_spoiler_content" dangerouslySetInnerHTML={{ __html: this.props.contentHtml }} />
|
<span className="mx_EventTile_spoiler_content" dangerouslySetInnerHTML={{ __html: this.props.contentHtml }} />
|
Loading…
Reference in New Issue