diff --git a/packages/react/src/components/CommandList/CommandsList.js b/packages/react/src/components/CommandList/CommandsList.js index 2fbf2ef44..4be7a4579 100644 --- a/packages/react/src/components/CommandList/CommandsList.js +++ b/packages/react/src/components/CommandList/CommandsList.js @@ -1,8 +1,8 @@ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { useEffect } from 'react'; import { css } from '@emotion/react'; +import PropTypes from 'prop-types'; import { Box } from '../Box'; import useComponentOverrides from '../../theme/useComponentOverrides'; @@ -15,14 +15,71 @@ function CommandsList({ ...props }) { const { classNames, styleOverrides } = useComponentOverrides('CommandsList'); - const classNameCommandsList = css` + + const listStyle = css` + margin-bottom: 5px; display: block; max-height: 10rem; overflow: scroll; + overflow-x: hidden; + max-height: 145px; + scrollbar-width: thin; + scrollbar-color: #e0e0e1 transparent; + &::-webkit-scrollbar { + width: 4px; + } + &::-webkit-scrollbar-thumb { + background-color: #e0e0e1; + border-radius: 4px; + } + &::-webkit-scrollbar-thumb:hover { + background-color: #e0e0e1; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + `; + + const listItemStyle = css` + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 0; + padding-right: 2px; + + &:hover { + background-color: #dddddd; + } `; + + const handleCommandClick = (command) => { + if (execCommand) { + execCommand(command); + } + if (onCommandClick) { + onCommandClick(command); + } + }; + + useEffect(() => { + const handleKeyPress = (event) => { + if (event.key === 'Enter') { + const selectedItem = filteredCommands[0]; + handleCommandClick(selectedItem); + } + }; + + document.addEventListener('keydown', handleKeyPress); + + return () => { + document.removeEventListener('keydown', handleKeyPress); + }; + }, [filteredCommands, handleCommandClick]); + return ( {filteredCommands.map((command) => (
  • { - if (execCommand) { - execCommand(command); - } - if (onCommandClick) { - onCommandClick(command); - } - }} key={command.command} + css={listItemStyle} + onClick={() => handleCommandClick(command)} > - {command.command} + + {command.command} +     + {command.params} + + {command.description}
    • ))} diff --git a/packages/react/src/components/Icon/icons/Copy.js b/packages/react/src/components/Icon/icons/Copy.js new file mode 100644 index 000000000..6e621d958 --- /dev/null +++ b/packages/react/src/components/Icon/icons/Copy.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const Copy = (props) => ( + + + +); + +export default Copy; diff --git a/packages/react/src/components/Icon/icons/index.js b/packages/react/src/components/Icon/icons/index.js index 3239ea60b..60aed7b64 100644 --- a/packages/react/src/components/Icon/icons/index.js +++ b/packages/react/src/components/Icon/icons/index.js @@ -38,6 +38,7 @@ import ArrowDown from './ArrowDown'; import PinFilled from './PinFilled'; import VideoRecorder from './VideoRecoder'; import DisabledRecorder from './DisableRecorder'; +import Copy from './Copy'; import Clipboard from './Clipboard'; import Download from './Download'; import At from './At'; @@ -54,6 +55,7 @@ const icons = { hash: Hash, computer: Computer, cross: Cross, + copy: Copy, mic: Mic, 'video-recorder': VideoRecorder, 'disabled-recorder': DisabledRecorder, diff --git a/packages/react/src/components/RoomMembers/RoomMember.js b/packages/react/src/components/RoomMembers/RoomMember.js index 4c37bb47d..ae0d9440b 100644 --- a/packages/react/src/components/RoomMembers/RoomMember.js +++ b/packages/react/src/components/RoomMembers/RoomMember.js @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import RoomMemberItem from './RoomMemberItem'; import classes from './RoomMember.module.css'; @@ -20,6 +20,24 @@ const RoomMembers = ({ members }) => { const toggleInviteView = useInviteStore((state) => state.toggleInviteView); const showInvite = useInviteStore((state) => state.showInvite); + const [userInfo, setUserInfo] = useState(null); + + useEffect(() => { + const getUserInfo = async () => { + try { + const res = await RCInstance.me(); + setUserInfo(res); + } catch (error) { + console.error('Error fetching user info:', error); + } + }; + + getUserInfo(); + }, [RCInstance]); + + const roles = userInfo && userInfo.roles ? userInfo.roles : []; + const isAdmin = roles.includes('admin'); + const [inviteData, setInviteData] = useState(null); if (showInvite) return ; @@ -44,16 +62,18 @@ const RoomMembers = ({ members }) => { ))}     - + {isAdmin && ( + + )} ); }; diff --git a/packages/react/src/components/RoomMembers/inviteMembers/InviteMembers.js b/packages/react/src/components/RoomMembers/inviteMembers/InviteMembers.js index c09de515a..ec2bac803 100644 --- a/packages/react/src/components/RoomMembers/inviteMembers/InviteMembers.js +++ b/packages/react/src/components/RoomMembers/inviteMembers/InviteMembers.js @@ -1,8 +1,9 @@ -import React, { useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import classes from '../RoomMember.module.css'; import useInviteStore from '../../../store/inviteStore'; +import { useToastBarDispatch } from '../../../hooks/useToastBarDispatch'; import { Box } from '../../Box'; import { Icon } from '../../Icon'; import { Input } from '../../Input'; @@ -10,10 +11,22 @@ import { ActionButton } from '../../ActionButton'; const InviteMembers = ({ inviteData }) => { const toggleInviteView = useInviteStore((state) => state.toggleInviteView); - const [isCopied, setIsCopied] = useState(false); - const copyToClipboard = (url) => { - navigator.clipboard.writeText(url); - setIsCopied(true); + const dispatchToastMessage = useToastBarDispatch(); + + const copyToClipboard = () => { + if (inviteData && inviteData.url) { + navigator.clipboard + .writeText(inviteData.url) + .then(() => { + dispatchToastMessage({ + type: 'success', + message: 'Copied to clipboard', + }); + }) + .catch((error) => { + console.error('Error copying to clipboard:', error); + }); + } }; return ( @@ -21,15 +34,14 @@ const InviteMembers = ({ inviteData }) => {

    - - toggleInviteView()} ghost size="small"> - - - + { > Invite Members + toggleInviteView()} ghost size="small"> + +

    - - - Invite Link - + {inviteData && ( - - copyToClipboard(inviteData.url)} - ghost - size="small" + > + + Invite Link + + + + + + + + )} +
    + {inviteData && ( +

    - - - - - - Your invite link will expire on{' '} - {new Date(inviteData.expires).toString().split('GMT')[0]} - + + Your invite link will expire on{' '} + {new Date(inviteData.expires).toString().split('GMT')[0]} + +

    + )} +
    ); };