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

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