52 lines
1.6 KiB
React
52 lines
1.6 KiB
React
// Received/read indicator.
|
|
import React from 'react';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
|
|
import { Tinode } from 'tinode-sdk';
|
|
|
|
import { deliveryMarker } from '../lib/utils.js';
|
|
|
|
const messages = defineMessages({
|
|
message_sending: {
|
|
id: 'message_sending',
|
|
defaultMessage: 'sending...',
|
|
description: 'Message being sent, in place of time stamp'
|
|
},
|
|
message_sending_failed: {
|
|
id: 'message_sending_failed',
|
|
defaultMessage: 'failed',
|
|
description: 'Failed to send message, in place of time stamp'
|
|
},
|
|
message_edited_marker: {
|
|
id: 'message_edited_marker',
|
|
defaultMessage: ', edited',
|
|
description: 'Marker indicating that the message was edited'
|
|
}
|
|
});
|
|
|
|
class ReceivedMarker extends React.PureComponent {
|
|
render() {
|
|
const {formatMessage} = this.props.intl;
|
|
let timestamp;
|
|
if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
|
|
timestamp = formatMessage(messages.message_sending);
|
|
} else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
|
|
timestamp = formatMessage(messages.message_sending_failed);
|
|
} else {
|
|
timestamp = this.props.timestamp.toLocaleTimeString(this.props.intl.locale, { timeStyle: 'short' });
|
|
}
|
|
|
|
const icon = deliveryMarker(this.props.received);
|
|
const marker = icon ? <i className={'material-icons small ' + icon.color}>{icon.name}</i> : null;
|
|
const edited = this.props.edited ? formatMessage(messages.message_edited_marker) : null;
|
|
|
|
return (
|
|
<span className="timestamp">
|
|
{timestamp}{edited}{'\u00a0'}{marker}
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default injectIntl(ReceivedMarker);
|