您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

RaiseHandButton.js 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // @flow
  2. import { translate } from '../../../base/i18n';
  3. import { IconRaisedHand } from '../../../base/icons';
  4. import { getLocalParticipant } from '../../../base/participants';
  5. import { connect } from '../../../base/redux';
  6. import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
  7. type Props = AbstractButtonProps & {
  8. /**
  9. * Whether or not the local participant's hand is raised.
  10. */
  11. _raisedHand: boolean,
  12. /**
  13. * External handler for click action.
  14. */
  15. handleClick: Function
  16. };
  17. /**
  18. * Implementation of a button for toggling raise hand functionality.
  19. */
  20. class RaiseHandButton extends AbstractButton<Props, *> {
  21. accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand';
  22. icon = IconRaisedHand
  23. label = 'toolbar.raiseYourHand';
  24. toggledLabel = 'toolbar.lowerYourHand'
  25. /**
  26. * Retrieves tooltip dynamically.
  27. */
  28. get tooltip() {
  29. return this.props._raisedHand ? 'toolbar.lowerYourHand' : 'toolbar.raiseYourHand';
  30. }
  31. /**
  32. * Required by linter due to AbstractButton overwritten prop being writable.
  33. *
  34. * @param {string} value - The value.
  35. */
  36. set tooltip(value) {
  37. return value;
  38. }
  39. /**
  40. * Handles clicking / pressing the button, and opens the appropriate dialog.
  41. *
  42. * @protected
  43. * @returns {void}
  44. */
  45. _handleClick() {
  46. this.props.handleClick();
  47. }
  48. /**
  49. * Indicates whether this button is in toggled state or not.
  50. *
  51. * @override
  52. * @protected
  53. * @returns {boolean}
  54. */
  55. _isToggled() {
  56. return this.props._raisedHand;
  57. }
  58. }
  59. /**
  60. * Function that maps parts of Redux state tree into component props.
  61. *
  62. * @param {Object} state - Redux state.
  63. * @returns {Object}
  64. */
  65. const mapStateToProps = state => {
  66. const localParticipant = getLocalParticipant(state);
  67. return {
  68. _raisedHand: localParticipant.raisedHand
  69. };
  70. };
  71. export default translate(connect(mapStateToProps)(RaiseHandButton));