Files
element-web/src/components/views/elements/Spoiler.tsx
David Langley 69ee8fd96a Change License: AGPL + Element Commercial (#28856)
* Add commercial licence and update config files

* Update license in headers

* Revert "Update license in headers"

This reverts commit 7ed7949485.

* Update only spdx id

* Remove LicenseRef- from package.json

LicenseRef- no longer allowed in npm v3 package.json
This fixes the warning in the logs and failing build check.
2025-01-06 11:18:54 +00:00

59 lines
1.7 KiB
TypeScript

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 Sorunome
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
interface IProps {
reason?: string;
contentHtml: string;
}
interface IState {
visible: boolean;
}
export default class Spoiler extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
this.state = {
visible: false,
};
}
private toggleVisible = (e: React.MouseEvent): void => {
if (!this.state.visible) {
// we are un-blurring, we don't want this click to propagate to potential child pills
e.preventDefault();
e.stopPropagation();
}
this.setState({ visible: !this.state.visible });
};
public render(): React.ReactNode {
const reason = this.props.reason ? (
<span className="mx_EventTile_spoiler_reason">{"(" + this.props.reason + ")"}</span>
) : null;
// react doesn't allow appending a DOM node as child.
// 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
return (
<button
className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")}
onClick={this.toggleVisible}
>
{reason}
&nbsp;
<span
className="mx_EventTile_spoiler_content"
dangerouslySetInnerHTML={{ __html: this.props.contentHtml }}
/>
</button>
);
}
}