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.

RaiseHandButton.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. // @flow
  2. import React, { Component } from 'react';
  3. import { Text, TouchableHighlight, View } from 'react-native';
  4. import { type Dispatch } from 'redux';
  5. import {
  6. createToolbarEvent,
  7. sendAnalytics
  8. } from '../../../analytics';
  9. import { ColorSchemeRegistry } from '../../../base/color-scheme';
  10. import { translate } from '../../../base/i18n';
  11. import {
  12. getLocalParticipant,
  13. raiseHand
  14. } from '../../../base/participants';
  15. import { connect } from '../../../base/redux';
  16. import { type AbstractButtonProps } from '../../../base/toolbox/components';
  17. import { type ReactionStyles } from './ReactionButton';
  18. /**
  19. * The type of the React {@code Component} props of {@link RaiseHandButton}.
  20. */
  21. type Props = AbstractButtonProps & {
  22. /**
  23. * The local participant.
  24. */
  25. _localParticipant: Object,
  26. /**
  27. * Whether the participant raused their hand or not.
  28. */
  29. _raisedHand: boolean,
  30. /**
  31. * The redux {@code dispatch} function.
  32. */
  33. dispatch: Dispatch<any>,
  34. /**
  35. * Used for translation
  36. */
  37. t: Function,
  38. /**
  39. * Used to close the overflow menu after raise hand is clicked.
  40. */
  41. onCancel: Function,
  42. /**
  43. * Styles for the button.
  44. */
  45. _styles: ReactionStyles
  46. };
  47. /**
  48. * An implementation of a button to raise or lower hand.
  49. */
  50. class RaiseHandButton extends Component<Props, *> {
  51. accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand';
  52. label = 'toolbar.raiseYourHand';
  53. toggledLabel = 'toolbar.lowerYourHand';
  54. /**
  55. * Initializes a new {@code RaiseHandButton} instance.
  56. *
  57. * @param {Props} props - The React {@code Component} props to initialize
  58. * the new {@code RaiseHandButton} instance with.
  59. */
  60. constructor(props: Props) {
  61. super(props);
  62. // Bind event handlers so they are only bound once per instance.
  63. this._onClick = this._onClick.bind(this);
  64. this._toggleRaisedHand = this._toggleRaisedHand.bind(this);
  65. this._getLabel = this._getLabel.bind(this);
  66. }
  67. _onClick: () => void;
  68. _toggleRaisedHand: () => void;
  69. _getLabel: () => string;
  70. /**
  71. * Handles clicking / pressing the button.
  72. *
  73. * @returns {void}
  74. */
  75. _onClick() {
  76. this._toggleRaisedHand();
  77. this.props.onCancel();
  78. }
  79. /**
  80. * Toggles the rased hand status of the local participant.
  81. *
  82. * @returns {void}
  83. */
  84. _toggleRaisedHand() {
  85. const enable = !this.props._raisedHand;
  86. sendAnalytics(createToolbarEvent('raise.hand', { enable }));
  87. this.props.dispatch(raiseHand(enable));
  88. }
  89. /**
  90. * Gets the current label, taking the toggled state into account. If no
  91. * toggled label is provided, the regular label will also be used in the
  92. * toggled state.
  93. *
  94. * @returns {string}
  95. */
  96. _getLabel() {
  97. const { _raisedHand, t } = this.props;
  98. return t(_raisedHand ? this.toggledLabel : this.label);
  99. }
  100. /**
  101. * Implements React's {@link Component#render()}.
  102. *
  103. * @inheritdoc
  104. * @returns {ReactElement}
  105. */
  106. render() {
  107. const { _styles, t } = this.props;
  108. return (
  109. <TouchableHighlight
  110. accessibilityLabel = { t(this.accessibilityLabel) }
  111. accessibilityRole = 'button'
  112. onPress = { this._onClick }
  113. style = { _styles.style }
  114. underlayColor = { _styles.underlayColor }>
  115. <View style = { _styles.container }>
  116. <Text style = { _styles.emoji }>✋</Text>
  117. <Text style = { _styles.text }>{this._getLabel()}</Text>
  118. </View>
  119. </TouchableHighlight>
  120. );
  121. }
  122. }
  123. /**
  124. * Maps part of the Redux state to the props of this component.
  125. *
  126. * @param {Object} state - The Redux state.
  127. * @private
  128. * @returns {Props}
  129. */
  130. function _mapStateToProps(state): Object {
  131. const _localParticipant = getLocalParticipant(state);
  132. return {
  133. _localParticipant,
  134. _raisedHand: _localParticipant.raisedHand,
  135. _styles: ColorSchemeRegistry.get(state, 'Toolbox').raiseHandButton
  136. };
  137. }
  138. export default translate(connect(_mapStateToProps)(RaiseHandButton));