support redactions in edit history dialog
This commit is contained in:
parent
375976575b
commit
8468f7cdc3
3 changed files with 135 additions and 5 deletions
|
@ -22,6 +22,9 @@ import {MatrixEvent} from 'matrix-js-sdk';
|
|||
import {pillifyLinks} from '../../../utils/pillify';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import sdk from '../../../index';
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
import Modal from '../../../Modal';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default class EditHistoryMessage extends React.PureComponent {
|
||||
static propTypes = {
|
||||
|
@ -29,19 +32,46 @@ export default class EditHistoryMessage extends React.PureComponent {
|
|||
mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const cli = MatrixClientPeg.get();
|
||||
const {userId} = cli.credentials;
|
||||
const event = this.props.mxEvent;
|
||||
const room = cli.getRoom(event.getRoomId());
|
||||
const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
|
||||
this.state = {canRedact};
|
||||
}
|
||||
|
||||
_onRedactClick = async () => {
|
||||
const event = this.props.mxEvent;
|
||||
const cli = MatrixClientPeg.get();
|
||||
const ConfirmAndWaitRedactDialog = sdk.getComponent("dialogs.ConfirmAndWaitRedactDialog");
|
||||
|
||||
Modal.createTrackedDialog('Confirm Redact Dialog from edit history', '', ConfirmAndWaitRedactDialog, {
|
||||
redact: () => cli.redactEvent(event.getRoomId(), event.getId()),
|
||||
}, 'mx_Dialog_confirmredact');
|
||||
};
|
||||
|
||||
pillifyLinks() {
|
||||
// not present for redacted events
|
||||
if (this.refs.content) {
|
||||
pillifyLinks(this.refs.content.children, this.props.mxEvent);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
pillifyLinks(this.refs.content.children, this.props.mxEvent);
|
||||
this.pillifyLinks();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
pillifyLinks(this.refs.content.children, this.props.mxEvent);
|
||||
this.pillifyLinks();
|
||||
}
|
||||
|
||||
_renderActionBar() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
if (this.props.mxEvent.isRedacted()) {
|
||||
return null;
|
||||
}
|
||||
return (<div className="mx_MessageActionBar">
|
||||
<AccessibleButton onClick={this._onRedactClick} disabled={!this.state.canRedact}>{_t("Remove")}</AccessibleButton>
|
||||
</div>);
|
||||
|
@ -52,8 +82,12 @@ export default class EditHistoryMessage extends React.PureComponent {
|
|||
const originalContent = mxEvent.getOriginalContent();
|
||||
const content = originalContent["m.new_content"] || originalContent;
|
||||
const contentElements = HtmlUtils.bodyToHtml(content);
|
||||
const isRedacted = this.props.mxEvent.isRedacted();
|
||||
let contentContainer;
|
||||
if (mxEvent.getContent().msgtype === "m.emote") {
|
||||
if (isRedacted) {
|
||||
const UnknownBody = sdk.getComponent('messages.UnknownBody');
|
||||
contentContainer = (<UnknownBody mxEvent={this.props.mxEvent} />);
|
||||
} else if (mxEvent.getContent().msgtype === "m.emote") {
|
||||
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
||||
contentContainer = (<div className="mx_EventTile_content" ref="content">*
|
||||
<span className="mx_MEmoteBody_sender">{ name }</span>
|
||||
|
@ -63,7 +97,15 @@ export default class EditHistoryMessage extends React.PureComponent {
|
|||
contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
|
||||
}
|
||||
const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
|
||||
return <li className="mx_EventTile">
|
||||
const sendStatus = mxEvent.getAssociatedStatus();
|
||||
const isSending = (['sending', 'queued', 'encrypting'].indexOf(sendStatus) !== -1);
|
||||
const classes = classNames({
|
||||
"mx_EventTile": true,
|
||||
"mx_EventTile_redacted": isRedacted,
|
||||
"mx_EventTile_sending": isSending,
|
||||
"mx_EventTile_notSent": sendStatus === 'not_sent',
|
||||
});
|
||||
return <li className={classes}>
|
||||
<div className="mx_EventTile_line">
|
||||
<span className="mx_MessageTimestamp">{timestamp}</span>
|
||||
{ contentContainer }
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue