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.

PresenceLabel.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /* @flow */
  2. import React, { Component } from 'react';
  3. import { translate } from '../../base/i18n';
  4. import { getParticipantById } from '../../base/participants';
  5. import { Text } from '../../base/react';
  6. import { connect } from '../../base/redux';
  7. import { STATUS_TO_I18N_KEY } from '../constants';
  8. import { presenceStatusDisabled } from '../functions';
  9. /**
  10. * The type of the React {@code Component} props of {@link PresenceLabel}.
  11. */
  12. type Props = {
  13. /**
  14. * The current present status associated with the passed in participantID
  15. * prop.
  16. */
  17. _presence: string,
  18. /**
  19. * Class name for the presence label.
  20. */
  21. className: string,
  22. /**
  23. * Default presence status that will be displayed if user's presence status
  24. * is not available.
  25. */
  26. defaultPresence: string,
  27. /**
  28. * The ID of the participant whose presence status should display.
  29. */
  30. participantID: string,
  31. /**
  32. * Styles for the presence label.
  33. */
  34. style: Object,
  35. /**
  36. * Invoked to obtain translated strings.
  37. */
  38. t: Function
  39. };
  40. /**
  41. * React {@code Component} for displaying the current presence status of a
  42. * participant.
  43. *
  44. * @extends Component
  45. */
  46. class PresenceLabel extends Component<Props> {
  47. /**
  48. * The default values for {@code PresenceLabel} component's property types.
  49. *
  50. * @static
  51. */
  52. static defaultProps = {
  53. _presence: ''
  54. };
  55. /**
  56. * Implements React's {@link Component#render()}.
  57. *
  58. * @inheritdoc
  59. * @returns {ReactElement}
  60. */
  61. render() {
  62. const text = this._getPresenceText();
  63. if (text === null) {
  64. return null;
  65. }
  66. const { style, className } = this.props;
  67. return (
  68. <Text
  69. className = { className }
  70. { ...style }>
  71. { text }
  72. </Text>);
  73. }
  74. /**
  75. * Returns the text associated with the current presence status.
  76. *
  77. * @returns {string}
  78. */
  79. _getPresenceText() {
  80. const { _presence, t } = this.props;
  81. if (!_presence) {
  82. return null;
  83. }
  84. const i18nKey = STATUS_TO_I18N_KEY[_presence];
  85. if (!i18nKey) { // fallback to status value
  86. return _presence;
  87. }
  88. return t(i18nKey);
  89. }
  90. }
  91. /**
  92. * Maps (parts of) the Redux state to the associated {@code PresenceLabel}'s
  93. * props.
  94. *
  95. * @param {Object} state - The Redux state.
  96. * @param {Object} ownProps - The React Component props passed to the associated
  97. * instance of {@code PresenceLabel}.
  98. * @private
  99. * @returns {{
  100. * _presence: (string|undefined)
  101. * }}
  102. */
  103. function _mapStateToProps(state, ownProps) {
  104. const participant = getParticipantById(state, ownProps.participantID);
  105. return {
  106. _presence: presenceStatusDisabled() ? ''
  107. : participant?.presence || ownProps.defaultPresence
  108. };
  109. }
  110. export default translate(connect(_mapStateToProps)(PresenceLabel));