Merge pull request #256 from abhinavkrin/new/menu-component

new menu component
RocketChat · Oct 5, 2023 · 7f9c328 · 7f9c328
2 parents 6010681 + 8ba4440
commit 7f9c328
Show file tree

Hide file tree

Showing 8 changed files with 318 additions and 126 deletions.
diff --git a/packages/react/.eslintrc.json b/packages/react/.eslintrc.json
@@ -7,6 +7,7 @@
   "extends": [
     "airbnb",
     "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "prettier",
     "plugin:storybook/recommended"
   ],

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -93,6 +93,7 @@
     "@rocket.chat/ui-kit": "^0.31.25",
     "@rollup/plugin-json": "^6.0.0",
     "color": "^4.2.3",
+    "color-alpha": "^1.1.3",
     "date-fns": "^2.30.0",
     "dompurify": "^3.0.3",
     "emoji-picker-react": "^4.4.9",

diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -1,5 +1,4 @@
-import { Menu } from '@rocket.chat/fuselage';
-import React, { useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import stylesSheet from './ChatHeader.module.css';
@@ -16,6 +15,7 @@ import { Box } from '../Box';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
+import { Menu } from '../Menu';
 
 const ChatHeader = ({
   isClosable,
@@ -54,45 +54,45 @@ const ChatHeader = ({
   const showMembers = useMemberStore((state) => state.showMembers);
   const setShowSearch = useSearchMessageStore((state) => state.setShowSearch);
 
-  const handleLogout = async () => {
+  const handleLogout = useCallback(async () => {
     try {
       await RCInstance.logout();
     } catch (e) {
       console.error(e);
     } finally {
       setIsUserAuthenticated(false);
     }
-  };
+  }, [RCInstance, setIsUserAuthenticated]);
 
-  const showStarredMessage = async () => {
+  const showStarredMessage = useCallback(async () => {
     const { messages } = await RCInstance.getStarredMessages();
     setMessages(messages);
     setFilter(true);
-  };
+  }, [RCInstance, setMessages, setFilter]);
 
-  const showPinnedMessage = async () => {
+  const showPinnedMessage = useCallback(async () => {
     const { messages } = await RCInstance.getPinnedMessages();
     setMessages(messages);
     setFilter(true);
-  };
+  }, [RCInstance, setMessages, setFilter]);
 
-  const showChannelMembers = async () => {
+  const showChannelMembers = useCallback(async () => {
     const { members = [] } = await RCInstance.getChannelMembers();
     setMembersHandler(members);
     toggleShowMembers();
     setShowSearch(false);
-  };
+  }, [RCInstance, setMembersHandler, toggleShowMembers, setShowSearch]);
 
-  const showSearchMessage = async () => {
+  const showSearchMessage = useCallback(() => {
     setShowSearch(true);
     if (showMembers) toggleShowMembers();
-  };
+  }, [setShowSearch, showMembers, toggleShowMembers]);
 
-  const showChannelinformation = async () => {
+  const showChannelinformation = useCallback(async () => {
     setShowChannelinfo(true);
     setShowSearch(false);
     if (showMembers) toggleShowMembers();
-  };
+  }, [setShowChannelinfo, setShowSearch, showMembers, toggleShowMembers]);
 
   useEffect(() => {
     const getChannelInfo = async () => {
@@ -104,117 +104,83 @@ const ChatHeader = ({
     if (isUserAuthenticated) {
       getChannelInfo();
     }
-  }, [isUserAuthenticated, RCInstance]);
+  }, [isUserAuthenticated, RCInstance, setChannelInfo]);
 
-  const menuOptions = () => ({
-    ...(fullScreen && {
-      minimize: {
+  const menuOptions = useMemo(() => {
+    const options = [];
+    if (fullScreen) {
+      options.push({
+        id: 'minimize',
         action: () => setFullScreen((prev) => !prev),
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }}>
-            <Icon
-              style={{ marginInlineEnd: '0.4rem' }}
-              name="mobile"
-              size="1em"
-            />
-            Minimize
-          </Box>
-        ),
-      },
-    }),
-    ...(moreOpts && {
-      threads: {
-        action: function noRefCheck() {},
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }}>
-            <Icon
-              style={{ marginInlineEnd: '0.4rem' }}
-              name="thread"
-              size="1em"
-            />
-            Threads
-          </Box>
-        ),
-      },
-      members: {
-        action: showChannelMembers,
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }}>
-            <Icon
-              style={{ marginInlineEnd: '0.4rem' }}
-              name="members"
-              size="1em"
-            />
-            Members
-          </Box>
-        ),
-      },
-      starred: {
-        action: showStarredMessage,
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }}>
-            <Icon
-              style={{ marginInlineEnd: '0.4rem' }}
-              name="star"
-              size="1em"
-            />
-            Starred
-          </Box>
-        ),
-      },
-      pinned: {
-        action: showPinnedMessage,
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }}>
-            <Icon style={{ marginInlineEnd: '0.4rem' }} name="pin" size="1em" />
-            Pinned
-          </Box>
-        ),
-      },
-      search: {
-        action: showSearchMessage,
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }}>
-            <Icon
-              style={{ marginInlineEnd: '0.4rem' }}
-              name="magnifier"
-              size="1em"
-            />
-            Search
-          </Box>
-        ),
-      },
-      roominfo: {
-        action: showChannelinformation,
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }}>
-            <Icon
-              style={{ marginInlineEnd: '0.4rem' }}
-              name="info"
-              size="1em"
-            />
-            Room Information
-          </Box>
-        ),
-      },
-    }),
-    ...(isUserAuthenticated && {
-      logout: {
+        icon: 'mobile',
+        label: 'Minimize',
+      });
+    }
+    if (moreOpts) {
+      options.push(
+        ...[
+          {
+            id: 'thread',
+            action: function noRefCheck() {},
+            label: 'Threads',
+            icon: 'thread',
+          },
+          {
+            id: 'members',
+            action: showChannelMembers,
+            label: 'Members',
+            icon: 'members',
+          },
+          {
+            id: 'starred',
+            action: showStarredMessage,
+            label: 'Starred',
+            icon: 'star',
+          },
+          {
+            id: 'pinned',
+            action: showPinnedMessage,
+            label: 'Pinned',
+            icon: 'pin',
+          },
+          {
+            id: 'search',
+            action: showSearchMessage,
+            label: 'Search',
+            icon: 'magnifier',
+          },
+          {
+            id: 'rInfo',
+            action: showChannelinformation,
+            label: 'Room Information',
+            icon: 'info',
+          },
+        ]
+      );
+    }
+    if (isUserAuthenticated) {
+      options.push({
+        id: 'logout',
         action: handleLogout,
-        label: (
-          <Box style={{ alignItems: 'center', display: 'flex' }} color="danger">
-            <Icon
-              style={{ marginInlineEnd: '0.4rem' }}
-              name="reply-directly"
-              size="1em"
-            />
-            Logout
-          </Box>
-        ),
-      },
-    }),
-  });
-
+        label: 'Logout',
+        icon: 'reply-directly',
+        color: 'error',
+      });
+    }
+    return options;
+  }, [
+    fullScreen,
+    handleLogout,
+    isUserAuthenticated,
+    moreOpts,
+    setFullScreen,
+    showChannelMembers,
+    showChannelinformation,
+    showPinnedMessage,
+    showSearchMessage,
+    showStarredMessage,
+  ]);
+  console.log(menuOptions);
   return (
     <Box
       css={css`
@@ -286,7 +252,7 @@ const ChatHeader = ({
             <img width="20px" height="20px" src={avatarUrl} alt="avatar" />
           )}
           {fullScreen ? (
-            <Menu margin="0 4px" display="inline" options={menuOptions()} />
+            <Menu options={menuOptions} />
           ) : (
             <>
               <ActionButton
@@ -300,7 +266,7 @@ const ChatHeader = ({
               >
                 <Icon name="computer" size="1.25rem" />
               </ActionButton>
-              <Menu margin="0 4px" display="inline" options={menuOptions()} />
+              <Menu options={menuOptions} />
             </>
           )}
           {isClosable && (