You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AbstractChatMessage.js 2.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. // @flow
  2. import { PureComponent } from 'react';
  3. import { getLocalizedDateFormatter } from '../../base/i18n';
  4. import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../constants';
  5. /**
  6. * Formatter string to display the message timestamp.
  7. */
  8. const TIMESTAMP_FORMAT = 'H:mm';
  9. /**
  10. * The type of the React {@code Component} props of {@code AbstractChatMessage}.
  11. */
  12. export type Props = {
  13. /**
  14. * The representation of a chat message.
  15. */
  16. message: Object,
  17. /**
  18. * Whether or not the avatar image of the participant which sent the message
  19. * should be displayed.
  20. */
  21. showAvatar: boolean,
  22. /**
  23. * Whether or not the name of the participant which sent the message should
  24. * be displayed.
  25. */
  26. showDisplayName: boolean,
  27. /**
  28. * Whether or not the time at which the message was sent should be
  29. * displayed.
  30. */
  31. showTimestamp: boolean,
  32. /**
  33. * Invoked to receive translated strings.
  34. */
  35. t: Function
  36. };
  37. /**
  38. * Abstract component to display a chat message.
  39. */
  40. export default class AbstractChatMessage<P: Props> extends PureComponent<P> {
  41. /**
  42. * Returns the timestamp to display for the message.
  43. *
  44. * @returns {string}
  45. */
  46. _getFormattedTimestamp() {
  47. return getLocalizedDateFormatter(new Date(this.props.message.timestamp))
  48. .format(TIMESTAMP_FORMAT);
  49. }
  50. /**
  51. * Generates the message text to be rendered in the component.
  52. *
  53. * @returns {string}
  54. */
  55. _getMessageText() {
  56. const { message } = this.props;
  57. return message.messageType === MESSAGE_TYPE_ERROR
  58. ? this.props.t('chat.error', {
  59. error: message.message
  60. })
  61. : message.message;
  62. }
  63. /**
  64. * Returns the message that is displayed as a notice for private messages.
  65. *
  66. * @returns {string}
  67. */
  68. _getPrivateNoticeMessage() {
  69. const { message, t } = this.props;
  70. return t('chat.privateNotice', {
  71. recipient: message.messageType === MESSAGE_TYPE_LOCAL ? message.recipient : t('chat.you')
  72. });
  73. }
  74. }