47 lines
1.4 KiB
React
47 lines
1.4 KiB
React
// Received/read indicator.
|
|
import React from 'react';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
|
|
import Tinode from 'tinode-sdk';
|
|
|
|
import { shortDateFormat } from '../lib/strformat.js';
|
|
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'
|
|
}
|
|
});
|
|
|
|
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 = shortDateFormat(this.props.timestamp, this.props.intl.locale);
|
|
}
|
|
|
|
const icon = deliveryMarker(this.props.received);
|
|
const marker = icon ? <i className={'material-icons small ' + icon.color}>{icon.name}</i> : null;
|
|
|
|
return (
|
|
<span className="timestamp">
|
|
{timestamp}{'\u00a0'}{marker}
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default injectIntl(ReceivedMarker);
|