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.6KB

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