imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

render history items in own component

Browse source 
including:
- respect 12/24 hour setting
- pillify
This commit is contained in:
Bruno Windels 2019-06-24 17:45:57 +02:00
parent c9aa7efe54
commit e7fc84d5da
2 changed files with 12 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/views/dialogs/MessageEditHistoryDialog.js
View file

@ -19,8 +19,8 @@ import PropTypes from 'prop-types';
import MatrixClientPeg from "../../../MatrixClientPeg"; import MatrixClientPeg from "../../../MatrixClientPeg";
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import sdk from "../../../index"; import sdk from "../../../index";
import * as HtmlUtils from '../../../HtmlUtils'; import {wantsDateSeparator} from '../../../DateUtils';
import {wantsDateSeparator, formatTime} from '../../../DateUtils'; import SettingsStore from '../../../settings/SettingsStore';
export default class MessageEditHistoryDialog extends React.Component { export default class MessageEditHistoryDialog extends React.Component {
static propTypes = { static propTypes = {
@ -28,7 +28,11 @@ export default class MessageEditHistoryDialog extends React.Component {
}; };
componentWillMount() { componentWillMount() {
this.setState({edits: [this.props.mxEvent], isLoading: true}); this.setState({
edits: [this.props.mxEvent],
isLoading: true,
isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"),
});
} }
async componentDidMount() { async componentDidMount() {
@ -41,13 +45,8 @@ export default class MessageEditHistoryDialog extends React.Component {
this.setState({edits, isLoading: false}); this.setState({edits, isLoading: false});
} }
_renderEdit(event) {
const timestamp = formatTime(new Date(event.getTs()), true);
const content = event.event.content["m.new_content"] || event.event.content;
return <li className="edit" key={event.getId()}><strong>{timestamp}</strong><p>{HtmlUtils.bodyToHtml(content)}</p></li>;
}
_renderEdits() { _renderEdits() {
const EditHistoryMessage = sdk.getComponent('elements.EditHistoryMessage');
const DateSeparator = sdk.getComponent('messages.DateSeparator'); const DateSeparator = sdk.getComponent('messages.DateSeparator');
const nodes = []; const nodes = [];
let lastEvent; let lastEvent;
@ -55,7 +54,7 @@ export default class MessageEditHistoryDialog extends React.Component {
if (!lastEvent || wantsDateSeparator(lastEvent.getDate(), e.getDate())) { if (!lastEvent || wantsDateSeparator(lastEvent.getDate(), e.getDate())) {
nodes.push(<li key={e.getTs() + "~"}><DateSeparator ts={e.getTs()} /></li>); nodes.push(<li key={e.getTs() + "~"}><DateSeparator ts={e.getTs()} /></li>);
} }
nodes.push(this._renderEdit(e)); nodes.push(<EditHistoryMessage key={e.getId()} mxEvent={e} isTwelveHour={this.state.isTwelveHour} />);
lastEvent = e; lastEvent = e;
}); });
return nodes; return nodes;

6
src/components/views/elements/EditHistoryMessage.js
View file

@ -41,10 +41,10 @@ export default class EditHistoryMessage extends React.Component {
render() { render() {
const event = this.props.mxEvent; const event = this.props.mxEvent;
const timestamp = formatTime(new Date(event.getTs()), true); const timestamp = formatTime(new Date(event.getTs()), this.props.isTwelveHour);
const content = event.event.content["m.new_content"] || event.event.content; const content = event.event.content["m.new_content"] || event.event.content;
return <li className="edit" key={event.getId()}> return <li className="edit mx_EventTile_content">
<strong>{timestamp}</strong> <span className="mx_MessageTimestamp">{timestamp}</span>
<p ref="content">{HtmlUtils.bodyToHtml(content)}</p> <p ref="content">{HtmlUtils.bodyToHtml(content)}</p>
</li>; </li>;
} }