Convert reaction button from materialui to custom popover component

react/features/chat/components/web/ReactButton.tsx

@@ -1,11 +1,11 @@
 import { Theme } from '@mui/material';
-import Popover from '@mui/material/Popover';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { IconFaceSmile } from '../../../base/icons/svg';
+import Popover from '../../../base/popover/components/Popover.web.tsx';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.any';
 import { sendReaction } from '../../actions.any';
@@ -26,18 +26,11 @@ const useStyles = makeStyles()((theme: Theme) => {
             position: 'relative',
             display: 'inline-block'
         },
-        popoverPaper: {
+        popoverContent: {
             backgroundColor: theme.palette.background.paper,
             borderRadius: theme.shape.borderRadius,
             boxShadow: theme.shadows[3],
             overflow: 'hidden'
-        },
-
-        popover: {
-            '& .MuiPaper-root': {
-                backgroundColor: 'transparent',
-                boxShadow: 'none'
-            }
         }
     };
 });
@@ -51,53 +44,43 @@ const ReactButton = ({ messageId, receiverId }: IProps) => {
         dispatch(sendReaction(emoji, messageId, receiverId));
     }, [ dispatch, messageId, receiverId ]);
 
-    const [ anchorEl, setAnchorEl ] = useState<null | HTMLElement>(null);
+    const [ isPopoverOpen, setIsPopoverOpen ] = useState(false);
 
-    const handleReactClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
-        setAnchorEl(event.currentTarget);
+    const handleReactClick = useCallback(() => {
+        setIsPopoverOpen(true);
     }, []);
 
     const handleClose = useCallback(() => {
-        setAnchorEl(null);
+        setIsPopoverOpen(false);
     }, []);
 
     const handleEmojiSelect = useCallback((emoji: string) => {
         onSendReaction(emoji);
         handleClose();
     }, [ onSendReaction, handleClose ]);
 
-    const open = Boolean(anchorEl);
-    const id = open ? 'react-popover' : undefined;
+    const popoverContent = (
+        <div className = { classes.popoverContent }>
+            <EmojiSelector onSelect = { handleEmojiSelect } />
+        </div>
+    );
 
     return (
-        <div className = { classes.reactionPanelContainer }>
-            <Button
-                accessibilityLabel = { t('toolbar.accessibilityLabel.react') }
-                className = { classes.reactButton }
-                icon = { IconFaceSmile }
-                onClick = { handleReactClick }
-                type = { BUTTON_TYPES.TERTIARY } />
-            <Popover
-                PaperProps = {{
-                    className: classes.popoverPaper
-                }}
-                anchorEl = { anchorEl }
-                anchorOrigin = {{
-                    vertical: 'top',
-                    horizontal: 'center'
-                }}
-                className = { classes.popover }
-                id = { id }
-                onClose = { handleClose }
-                open = { open }
-                transformOrigin = {{
-                    vertical: 'bottom',
-                    horizontal: 'center'
-                }}>
-                <EmojiSelector
-                    onSelect = { handleEmojiSelect } />
-            </Popover>
-        </div>
+        <Popover
+            content = { popoverContent }
+            onPopoverClose = { handleClose }
+            position = 'top'
+            trigger = 'click'
+            visible = { isPopoverOpen }>
+            <div className = { classes.reactionPanelContainer }>
+                <Button
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.react') }
+                    className = { classes.reactButton }
+                    icon = { IconFaceSmile }
+                    onClick = { handleReactClick }
+                    type = { BUTTON_TYPES.TERTIARY } />
+            </div>
+        </Popover>
     );
 };