feat(reactions) Added Reactions (#9465)

* Created desktop reactions menu Moved raise hand functionality to reactions menu * Added reactions to chat * Added animations * Added reactions to the web mobile version Redesigned the overflow menu. Added the reactions menu and reactions animations * Make toolbar visible on animation start * Bug fix * Cleanup * Fixed overflow menu desktop * Revert mobile menu changes * Removed unused CSS * Fixed iOS safari issue * Fixed overflow issue on mobile * Added keyboard shortcuts for reactions * Disabled double tap zoom on reaction buttons * Refactored actions * Updated option symbol for keyboard shortcuts * Actions refactor * Refactor * Fixed linting errors * Updated BottomSheet * Added reactions on native * Code cleanup * Code review refactor * Color fix * Hide reactions on one participant * Removed console log * Lang fix * Update schortcuts
2026-05-18 02:27:47 +00:00 · 2021-07-13 09:50:08 +03:00
parent 8db3a341b3
commit 601ee219e7
50 changed files with 2233 additions and 363 deletions
--- a/react/features/reactions/components/native/ReactionButton.js
+++ b/react/features/reactions/components/native/ReactionButton.js
@@ -0,0 +1,96 @@
+// @flow
+
+import React from 'react';
+import { Text, TouchableHighlight } from 'react-native';
+import { useDispatch } from 'react-redux';
+
+import { translate } from '../../../base/i18n';
+import type { StyleType } from '../../../base/styles';
+import { sendReaction } from '../../actions.any';
+import { REACTIONS } from '../../constants';
+
+
+export type ReactionStyles = {
+
+    /**
+     * Style for the button.
+     */
+    style: StyleType,
+
+    /**
+     * Underlay color for the button.
+     */
+    underlayColor: StyleType,
+
+    /**
+     * Style for the emoji text on the button.
+     */
+    emoji: StyleType,
+
+    /**
+     * Style for the label text on the button.
+     */
+    text?: StyleType,
+
+    /**
+     * Style for text container. Used on raise hand button.
+     */
+    container?: StyleType
+
+}
+
+/**
+ * The type of the React {@code Component} props of {@link ReactionButton}.
+ */
+type Props = {
+
+    /**
+     * Collection of styles for the button.
+     */
+    styles: ReactionStyles,
+
+    /**
+     * The reaction to be sent
+     */
+    reaction: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * An implementation of a button to send a reaction.
+ *
+ * @returns {ReactElement}
+ */
+function ReactionButton({
+    styles,
+    reaction,
+    t
+}: Props) {
+    const dispatch = useDispatch();
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @returns {void}
+     */
+    function _onClick() {
+        dispatch(sendReaction(reaction));
+    }
+
+    return (
+        <TouchableHighlight
+            accessibilityLabel = { t(`toolbar.accessibilityLabel.${reaction}`) }
+            accessibilityRole = 'button'
+            onPress = { _onClick }
+            style = { styles.style }
+            underlayColor = { styles.underlayColor }>
+            <Text style = { styles.emoji }>{REACTIONS[reaction].emoji}</Text>
+        </TouchableHighlight>
+    );
+}
+
+export default translate(ReactionButton);