"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7309/react/features/reactions/components/web/ReactionEmoji.tsx" (31 May 2023, 1980 Bytes) of package /linux/misc/jitsi-meet-7309.tar.gz:

    1 import React, { Component } from 'react';
    2 import { connect } from 'react-redux';
    3 
    4 import { IStore } from '../../../app/types';
    5 import { removeReaction } from '../../actions.any';
    6 import { REACTIONS } from '../../constants';
    7 
    8 interface IProps {
    9 
   10     /**
   11      * Index of the reaction in the queue.
   12      */
   13     index: number;
   14 
   15     /**
   16      * Reaction to be displayed.
   17      */
   18     reaction: string;
   19 
   20     /**
   21      * Removes reaction from redux state.
   22      */
   23     reactionRemove: Function;
   24 
   25     /**
   26      * Id of the reaction.
   27      */
   28     uid: string;
   29 }
   30 
   31 interface IState {
   32 
   33     /**
   34      * Index of CSS animation. Number between 0-20.
   35      */
   36     index: number;
   37 }
   38 
   39 
   40 /**
   41  * Used to display animated reactions.
   42  *
   43  * @returns {ReactElement}
   44  */
   45 class ReactionEmoji extends Component<IProps, IState> {
   46     /**
   47      * Initializes a new {@code ReactionEmoji} instance.
   48      *
   49      * @param {IProps} props - The read-only React {@code Component} props with
   50      * which the new instance is to be initialized.
   51      */
   52     constructor(props: IProps) {
   53         super(props);
   54 
   55         this.state = {
   56             index: props.index % 21
   57         };
   58     }
   59 
   60     /**
   61      * Implements React Component's componentDidMount.
   62      *
   63      * @inheritdoc
   64      */
   65     componentDidMount() {
   66         setTimeout(() => this.props.reactionRemove(this.props.uid), 5000);
   67     }
   68 
   69     /**
   70      * Implements React's {@link Component#render}.
   71      *
   72      * @inheritdoc
   73      */
   74     render() {
   75         const { reaction, uid } = this.props;
   76         const { index } = this.state;
   77 
   78         return (
   79             <div
   80                 className = { `reaction-emoji reaction-${index}` }
   81                 id = { uid }>
   82                 { REACTIONS[reaction].emoji }
   83             </div>
   84         );
   85     }
   86 }
   87 
   88 const mapDispatchToProps = (dispatch: IStore['dispatch']) => {
   89     return {
   90         reactionRemove: (uid: string) => dispatch(removeReaction(uid))
   91     };
   92 };
   93 
   94 export default connect(undefined, mapDispatchToProps)(ReactionEmoji);