From 19b9b053abae92afdfd9fbe1432b3785e2ee1232 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 16 Dec 2021 12:27:05 -0300 Subject: [PATCH 01/18] Replace UserDropdown Divider using Option.Divider --- client/sidebar/header/UserDropdown.tsx | 6 +-- package-lock.json | 56 +++++++++++++------------- package.json | 2 +- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/client/sidebar/header/UserDropdown.tsx b/client/sidebar/header/UserDropdown.tsx index cc8be04a3434..38e5645f5b3b 100644 --- a/client/sidebar/header/UserDropdown.tsx +++ b/client/sidebar/header/UserDropdown.tsx @@ -147,7 +147,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { - + {t('Status')} @@ -183,7 +183,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { {(accountBoxItems.length || showAdmin) && ( <> - + {showAdmin && ( @@ -213,7 +213,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { )} - + diff --git a/package-lock.json b/package-lock.json index 235a1d52bcd6..b029f32e315e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5379,58 +5379,58 @@ } }, "@rocket.chat/fuselage": { - "version": "0.6.3-dev.368", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.368.tgz", - "integrity": "sha512-sSTnYDpQXWSY6Q/ZxiXJPaRNzmrdC9U65bJ8067pcGBrafznjlknPl6L2yGH7b8slgKHxdDyPRpyfmCvPpY1/w==", - "requires": { - "@rocket.chat/css-in-js": "^0.6.3-dev.368+a3e8f4db", - "@rocket.chat/css-supports": "^0.6.3-dev.368+a3e8f4db", - "@rocket.chat/fuselage-tokens": "^0.6.3-dev.368+a3e8f4db", - "@rocket.chat/memo": "^0.6.3-dev.368+a3e8f4db", + "version": "0.6.3-dev.372", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.372.tgz", + "integrity": "sha512-7ne0jP+dHwpRQVlsyRc9jPcVe+ondqq6IasjVifRgWW3BJ5QmdUJl9q1t+adhSuAwAmtJdBeLD+XUpx9KB9FIg==", + "requires": { + "@rocket.chat/css-in-js": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/css-supports": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/fuselage-tokens": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/memo": "^0.6.3-dev.372+41d2b780", "invariant": "^2.2.4", "react-keyed-flatten-children": "^1.3.0" }, "dependencies": { "@rocket.chat/css-in-js": { - "version": "0.6.3-dev.368", - "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.368.tgz", - "integrity": "sha512-kWsQKBhPi7L0pxPvuY1NIw7eA+JfHXiXI3UotVr7uj6W1bN525gzVEhIyrtcVxTCpHCbj+BhXd/obLJzu8YlEQ==", + "version": "0.6.3-dev.372", + "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.372.tgz", + "integrity": "sha512-U8ZA9m1mCnp6V5IRfZuaSgSAXr7LyPEokEK+5mH831upxPxoh7mCgBd3NFX1ayW6zkQyCCtzQ8n0/RQla/qojw==", "requires": { "@emotion/hash": "^0.8.0", - "@rocket.chat/css-supports": "^0.6.3-dev.368+a3e8f4db", - "@rocket.chat/memo": "^0.6.3-dev.368+a3e8f4db", - "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.368+a3e8f4db", + "@rocket.chat/css-supports": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/memo": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.372+41d2b780", "stylis": "^4.0.10" } }, "@rocket.chat/css-supports": { - "version": "0.6.3-dev.368", - "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.368.tgz", - "integrity": "sha512-S5fz7R2UwG2pA07SooyNqPhH5MFeJCooZyhQm3NVLJU+YQMT/n71ZjE2ekRTQfQ90EsuP53ATltlxKPujsb7pQ==", + "version": "0.6.3-dev.372", + "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.372.tgz", + "integrity": "sha512-w88w/ZpUmlupT5ycFongH9OCJf6uNTV9wD1ei0kR2ehdXr8P1ruGlabZMiwPr27Iz7vcKKodBy82mpELE5IPTg==", "requires": { - "@rocket.chat/memo": "^0.6.3-dev.368+a3e8f4db", + "@rocket.chat/memo": "^0.6.3-dev.372+41d2b780", "tslib": "^2.3.1" } }, "@rocket.chat/fuselage-tokens": { - "version": "0.6.3-dev.368", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.368.tgz", - "integrity": "sha512-vEFqdg1L/W5qKP8oFuRgR7hLNkxYLwvonVzVlQLtFb5Byc2g+7I+IQz4AVdA16cQ3uU5c37uIpvL459IsroGEQ==" + "version": "0.6.3-dev.372", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.372.tgz", + "integrity": "sha512-IeAGhfW1e4XOhvzDY1DjY/NjnqN5H2DgfBxKNnihnlBVXjWR0q05vOaavnfsriX7GpAJk2zWJyvCZaCyrWf7aw==" }, "@rocket.chat/memo": { - "version": "0.6.3-dev.368", - "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.368.tgz", - "integrity": "sha512-sBorvHQp5go0g8L21+x4V7OWKtHVQlb9rsirgNYUkD6qEghg2qkrjQhbH1t6s9yLjg3qBW7LrMtRkA52zjmXnQ==", + "version": "0.6.3-dev.372", + "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.372.tgz", + "integrity": "sha512-WiET4ICdj1WcnSpdYRc+MDp6AiKk1pVFG0fqe/szQhC16L/eUiL6wsBiHX1XNdEAz20kbDxkKHHww3mn8syngQ==", "requires": { "tslib": "^2.3.1" } }, "@rocket.chat/stylis-logical-props-middleware": { - "version": "0.6.3-dev.368", - "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.368.tgz", - "integrity": "sha512-wZmZGKnxzyXktO/gwD17bYcs+Fx9Brv2ZFAQ2fC2kwHF5Tz/vzl9ZoR89SLLAZMwATt2HcJ7R1QL7DRU03HqzA==", + "version": "0.6.3-dev.372", + "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.372.tgz", + "integrity": "sha512-UYHiMVUBbl/2fzghMc3ohWEQ0sVBMwmnMyJ+xPXD7q/Qx2rvzk//bvnSVOjbqrJ0CMqGvy4HtHIiNUsyqXdc5w==", "requires": { - "@rocket.chat/css-supports": "^0.6.3-dev.368+a3e8f4db", + "@rocket.chat/css-supports": "^0.6.3-dev.372+41d2b780", "tslib": "^2.3.1" } }, diff --git a/package.json b/package.json index 3279834a429a..f59264a5bd13 100644 --- a/package.json +++ b/package.json @@ -176,7 +176,7 @@ "@rocket.chat/apps-engine": "^1.29.0-alpha.0.5607", "@rocket.chat/css-in-js": "^0.30.1", "@rocket.chat/emitter": "^0.30.1", - "@rocket.chat/fuselage": "^0.6.3-dev.368", + "@rocket.chat/fuselage": "^0.6.3-dev.372", "@rocket.chat/fuselage-hooks": "^0.6.3-dev.362", "@rocket.chat/fuselage-polyfills": "^0.30.1", "@rocket.chat/fuselage-tokens": "^0.6.3-dev.362", From 0eba9f0775a3de75579cd7ebb3409c6676b6c539 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 16 Dec 2021 12:33:32 -0300 Subject: [PATCH 02/18] Remove unused Divider import on UserDropdown --- client/sidebar/header/UserDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/sidebar/header/UserDropdown.tsx b/client/sidebar/header/UserDropdown.tsx index 38e5645f5b3b..93ea7cc17ee1 100644 --- a/client/sidebar/header/UserDropdown.tsx +++ b/client/sidebar/header/UserDropdown.tsx @@ -1,4 +1,4 @@ -import { Box, Margins, Divider, Option } from '@rocket.chat/fuselage'; +import { Box, Margins, Option } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { FlowRouter } from 'meteor/kadira:flow-router'; import React, { ReactElement } from 'react'; From 5d6b5ab5ab5afebe8c4a62b752c0b31a10f451fa Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 16 Dec 2021 18:46:24 -0300 Subject: [PATCH 03/18] Implement fuselage component Dropdown on UserAvatarButton --- client/sidebar/header/UserAvatarButton.js | 67 ++++++++----- client/sidebar/header/UserDropdown.tsx | 116 ++++++++++------------ 2 files changed, 92 insertions(+), 91 deletions(-) diff --git a/client/sidebar/header/UserAvatarButton.js b/client/sidebar/header/UserAvatarButton.js index 4e5aa554825b..2f93a3397c45 100644 --- a/client/sidebar/header/UserAvatarButton.js +++ b/client/sidebar/header/UserAvatarButton.js @@ -1,13 +1,15 @@ import { css } from '@rocket.chat/css-in-js'; -import { Box } from '@rocket.chat/fuselage'; +import { Box, Dropdown } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { Meteor } from 'meteor/meteor'; -import React, { memo } from 'react'; +import React, { memo, useRef } from 'react'; +import { createPortal } from 'react-dom'; import { popover } from '../../../app/ui-utils/client'; import { UserStatus } from '../../components/UserStatus'; import UserAvatar from '../../components/avatar/UserAvatar'; import { useSetting } from '../../contexts/SettingsContext'; +import UserDropdown from './UserDropdown'; const openDropdown = (e, user, onClose, allowAnonymousRead) => { if (!(Meteor.userId() == null && allowAnonymousRead)) { @@ -34,37 +36,48 @@ const UserAvatarButton = ({ user = {} }) => { (e) => uid && openDropdown(e, user, onClose, allowAnonymousRead), ); + const reference = useRef(null); + return ( - - + <> - + + + + - + {createPortal( + + + , + document.body, + )} + ); }; diff --git a/client/sidebar/header/UserDropdown.tsx b/client/sidebar/header/UserDropdown.tsx index 93ea7cc17ee1..2f0340dd634b 100644 --- a/client/sidebar/header/UserDropdown.tsx +++ b/client/sidebar/header/UserDropdown.tsx @@ -114,9 +114,9 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { const accountBoxItems = useReactiveValue(getItems); return ( - - - + + + { - - - {t('Status')} - - {Object.keys(userStatus.list) - .filter(filterInvisibleStatus) - .map((key, i) => { - const status = userStatus.list[key]; - const name = status.localizeName ? translateStatusName(t, status) : status.name; - const modifier = status.statusType || user.status; - - return ( - - ); - })} - + + {t('Status')} + {Object.keys(userStatus.list) + .filter(filterInvisibleStatus) + .map((key, i) => { + const status = userStatus.list[key]; + const name = status.localizeName ? translateStatusName(t, status) : status.name; + const modifier = status.statusType || user.status; + + return ( + + ); + })} + {(accountBoxItems.length || showAdmin) && ( <> - - {showAdmin && ( - - )} - {accountBoxItems.map((item, i) => { - let action; - - if (item.href || item.sideNav) { - action = (): void => { - if (item.href) { - FlowRouter.go(item.href); - popover.close(); - } - if (item.sideNav) { - SideNav.setFlex(item.sideNav); - SideNav.openFlex(); - popover.close(); - } - }; - } - - return ( - - ); - })} - + {showAdmin && ( + + )} + {accountBoxItems.map((item, i) => { + let action; + + if (item.href || item.sideNav) { + action = (): void => { + if (item.href) { + FlowRouter.go(item.href); + popover.close(); + } + if (item.sideNav) { + SideNav.setFlex(item.sideNav); + SideNav.openFlex(); + popover.close(); + } + }; + } + + return ; + })} )} - - - - + + ); }; From 0c0747f5d9ed066adadc2e75185169c3c3a90a1c Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 17 Dec 2021 02:00:26 -0300 Subject: [PATCH 04/18] Fix review --- app/user-status/client/lib/userStatus.ts | 2 +- client/contexts/UserContext.ts | 1 + client/hooks/useOutsideClick.js | 19 ----- client/hooks/useOutsideClick.ts | 21 +++++ client/sidebar/header/UserAvatarButton.js | 84 ------------------- client/sidebar/header/UserAvatarButton.tsx | 75 +++++++++++++++++ client/sidebar/header/UserDropdown.tsx | 53 ++++++------ client/sidebar/header/actions/Search.js | 6 +- .../header/hooks/useDropdownVisibility.ts | 46 ++++++++++ 9 files changed, 175 insertions(+), 132 deletions(-) delete mode 100644 client/hooks/useOutsideClick.js create mode 100644 client/hooks/useOutsideClick.ts delete mode 100644 client/sidebar/header/UserAvatarButton.js create mode 100644 client/sidebar/header/UserAvatarButton.tsx create mode 100644 client/sidebar/header/hooks/useDropdownVisibility.ts diff --git a/app/user-status/client/lib/userStatus.ts b/app/user-status/client/lib/userStatus.ts index 5dd788fb5e92..27acf20fb30f 100644 --- a/app/user-status/client/lib/userStatus.ts +++ b/app/user-status/client/lib/userStatus.ts @@ -49,4 +49,4 @@ export const userStatus: UserStatusTypes = { statusType: UserStatus.OFFLINE, }, }, -}; +} as const; diff --git a/client/contexts/UserContext.ts b/client/contexts/UserContext.ts index ad03abc595b5..b1e3b68b4878 100644 --- a/client/contexts/UserContext.ts +++ b/client/contexts/UserContext.ts @@ -82,6 +82,7 @@ export const UserContext = createContext({ export const useUserId = (): string | null => useContext(UserContext).userId; +// TODO: Use IUser instead export const useUser = (): Meteor.User | null => useContext(UserContext).user; export const useLoginWithPassword = (): (( diff --git a/client/hooks/useOutsideClick.js b/client/hooks/useOutsideClick.js deleted file mode 100644 index 9535d419b13a..000000000000 --- a/client/hooks/useOutsideClick.js +++ /dev/null @@ -1,19 +0,0 @@ -import { useRef, useEffect } from 'react'; - -export function useOutsideClick(cb) { - const ref = useRef(); - useEffect(() => { - function handleClickOutside(event) { - if (ref.current && !ref.current.contains(event.target)) { - cb(event); - } - } - - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [cb]); - - return ref; -} diff --git a/client/hooks/useOutsideClick.ts b/client/hooks/useOutsideClick.ts new file mode 100644 index 000000000000..d0b2e55fe851 --- /dev/null +++ b/client/hooks/useOutsideClick.ts @@ -0,0 +1,21 @@ +import { useEffect, RefObject } from 'react'; + +// TODO: fuselage + +export function useOutsideClick( + ref: RefObject, + cb: (e: MouseEvent) => void, +): void { + useEffect(() => { + function handleClickOutside(event: MouseEvent): void { + if (event && ref.current && !ref.current.contains(event.target as Node)) { + return cb(event); + } + } + + document.addEventListener('mousedown', handleClickOutside); + return (): void => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [cb, ref]); +} diff --git a/client/sidebar/header/UserAvatarButton.js b/client/sidebar/header/UserAvatarButton.js deleted file mode 100644 index 2f93a3397c45..000000000000 --- a/client/sidebar/header/UserAvatarButton.js +++ /dev/null @@ -1,84 +0,0 @@ -import { css } from '@rocket.chat/css-in-js'; -import { Box, Dropdown } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { Meteor } from 'meteor/meteor'; -import React, { memo, useRef } from 'react'; -import { createPortal } from 'react-dom'; - -import { popover } from '../../../app/ui-utils/client'; -import { UserStatus } from '../../components/UserStatus'; -import UserAvatar from '../../components/avatar/UserAvatar'; -import { useSetting } from '../../contexts/SettingsContext'; -import UserDropdown from './UserDropdown'; - -const openDropdown = (e, user, onClose, allowAnonymousRead) => { - if (!(Meteor.userId() == null && allowAnonymousRead)) { - popover.open({ - template: 'UserDropdown', - currentTarget: e.currentTarget, - data: { - user, - onClose, - }, - offsetVertical: e.currentTarget.clientHeight + 10, - }); - } -}; - -const UserAvatarButton = ({ user = {} }) => { - const { _id: uid, status = !uid && 'online', username = 'Anonymous', avatarETag } = user; - - const allowAnonymousRead = useSetting('Accounts_AllowAnonymousRead'); - - const onClose = useMutableCallback(() => popover.close()); - - const handleClick = useMutableCallback( - (e) => uid && openDropdown(e, user, onClose, allowAnonymousRead), - ); - - const reference = useRef(null); - - return ( - <> - - - - - - - {createPortal( - - - , - document.body, - )} - - ); -}; - -export default memo(UserAvatarButton); diff --git a/client/sidebar/header/UserAvatarButton.tsx b/client/sidebar/header/UserAvatarButton.tsx new file mode 100644 index 000000000000..86e30fd991bd --- /dev/null +++ b/client/sidebar/header/UserAvatarButton.tsx @@ -0,0 +1,75 @@ +import { css } from '@rocket.chat/css-in-js'; +import { Box, Dropdown } from '@rocket.chat/fuselage'; +import React, { memo, useRef, ReactElement } from 'react'; +import { createPortal } from 'react-dom'; + +import { IUser } from '../../../definition/IUser'; +import { UserStatus } from '../../components/UserStatus'; +import UserAvatar from '../../components/avatar/UserAvatar'; +import { useUser } from '../../contexts/UserContext'; +import UserDropdown from './UserDropdown'; +import { useDropdownVisibility } from './hooks/useDropdownVisibility'; + +const UserAvatarButton = function UserAvatarButton(): ReactElement { + const user = useUser() as Required | undefined; + const { + status = !user ? 'online' : 'offline', + username, + avatarETag, + } = user || { + _id: '', + username: 'Anonymous', + status: 'online', + }; + + // const allowAnonymousRead = useSetting('Accounts_AllowAnonymousRead'); + + const reference = useRef(null); + const target = useRef(null); + const { isVisible, toggle } = useDropdownVisibility({ reference, target }); + + return ( + <> + toggle()} + className={css` + cursor: pointer; + `} + data-qa='sidebar-avatar-button' + > + + + + + + {isVisible && + createPortal( + + toggle(false)} /> + , + document.body, + )} + + ); +}; + +export default memo(UserAvatarButton); diff --git a/client/sidebar/header/UserDropdown.tsx b/client/sidebar/header/UserDropdown.tsx index 2f0340dd634b..c79699553cc7 100644 --- a/client/sidebar/header/UserDropdown.tsx +++ b/client/sidebar/header/UserDropdown.tsx @@ -4,10 +4,11 @@ import { FlowRouter } from 'meteor/kadira:flow-router'; import React, { ReactElement } from 'react'; import { callbacks } from '../../../app/callbacks/lib/callbacks'; -import { popover, AccountBox, SideNav } from '../../../app/ui-utils/client'; +import { AccountBox, SideNav } from '../../../app/ui-utils/client'; import { userStatus } from '../../../app/user-status/client'; import { IUser } from '../../../definition/IUser'; import { UserStatus as UserStatusEnum } from '../../../definition/UserStatus'; +import { ValueOf } from '../../../definition/utils'; import MarkdownText from '../../components/MarkdownText'; import { UserStatus } from '../../components/UserStatus'; import UserAvatar from '../../components/avatar/UserAvatar'; @@ -81,7 +82,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { const displayName = useUserDisplayName(user); const filterInvisibleStatus = !useSetting('Accounts_AllowInvisibleStatusOption') - ? (key: keyof typeof userStatus['list']): boolean => userStatus.list[key].name !== 'invisible' + ? (status: ValueOf): boolean => status.name !== 'invisible' : (): boolean => true; const showAdmin = useAtLeastOnePermission(ADMIN_PERMISSIONS); @@ -97,18 +98,18 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { const handleMyAccount = useMutableCallback(() => { accountRoute.push({}); - popover.close(); + onClose(); }); const handleAdmin = useMutableCallback(() => { adminRoute.push({ group: 'info' }); sidebar.toggle(); - popover.close(); + onClose(); }); const handleLogout = useMutableCallback(() => { logout(); - popover.close(); + onClose(); }); const accountBoxItems = useReactiveValue(getItems); @@ -151,10 +152,9 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { {t('Status')} - {Object.keys(userStatus.list) + {Object.values(userStatus.list) .filter(filterInvisibleStatus) - .map((key, i) => { - const status = userStatus.list[key]; + .map((status, i) => { const name = status.localizeName ? translateStatusName(t, status) : status.name; const modifier = status.statusType || user.status; @@ -182,23 +182,26 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { )} {accountBoxItems.map((item, i) => { - let action; - - if (item.href || item.sideNav) { - action = (): void => { - if (item.href) { - FlowRouter.go(item.href); - popover.close(); - } - if (item.sideNav) { - SideNav.setFlex(item.sideNav); - SideNav.openFlex(); - popover.close(); - } - }; - } - - return ; + const action = (): void => { + if (item.href) { + FlowRouter.go(item.href); + onClose(); + } + if (item.sideNav) { + SideNav.setFlex(item.sideNav); + SideNav.openFlex(); + onClose(); + } + }; + + return ( + + ); })} )} diff --git a/client/sidebar/header/actions/Search.js b/client/sidebar/header/actions/Search.js index 94c8cd3b1dc1..36ef575308d1 100644 --- a/client/sidebar/header/actions/Search.js +++ b/client/sidebar/header/actions/Search.js @@ -1,6 +1,6 @@ import { Sidebar } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import tinykeys from 'tinykeys'; import { useOutsideClick } from '../../../hooks/useOutsideClick'; @@ -9,7 +9,7 @@ import SearchList from '../../search/SearchList'; const Search = (props) => { const [searchOpen, setSearchOpen] = useState(false); - // const viewRef = useRef(); + const ref = useRef(); const handleCloseSearch = useMutableCallback(() => { setSearchOpen(false); @@ -20,7 +20,7 @@ const Search = (props) => { setSearchOpen(true); }); - const ref = useOutsideClick(handleCloseSearch); + useOutsideClick(ref, handleCloseSearch); useEffect(() => { const unsubscribe = tinykeys(window, { diff --git a/client/sidebar/header/hooks/useDropdownVisibility.ts b/client/sidebar/header/hooks/useDropdownVisibility.ts new file mode 100644 index 000000000000..3b5f8abcf27a --- /dev/null +++ b/client/sidebar/header/hooks/useDropdownVisibility.ts @@ -0,0 +1,46 @@ +import { useToggle } from '@rocket.chat/fuselage-hooks'; +import { RefObject, useCallback } from 'react'; + +import { useOutsideClick } from '../../../hooks/useOutsideClick'; + +/** + * useDropdownVisibility + * is used to control the visibility of a dropdown + * also checks if the user clicked outside the dropdown, but ignores if the click was on the anchor + * @param {Object} props + * @param {Object} props.reference - The reference where the dropdown will be attached to + * @param {Object} props.target - The target, the dropdown itself + * @returns {Object} + * @returns {Boolean} isVisible - The visibility of the dropdown + * @returns {Function} toggle - The function to toggle the dropdown + */ + +export const useDropdownVisibility = ({ + reference, + target, +}: { + reference?: RefObject; + target: RefObject; +}): { + isVisible: boolean; + toggle: (state?: boolean) => void; +} => { + const [isVisible, toggle] = useToggle(false); + + useOutsideClick( + target, + useCallback( + (event: MouseEvent) => { + if (!reference || !reference.current || !reference.current.contains(event.target as Node)) { + toggle(false); + } + }, + [reference, toggle], + ), + ); + + return { + isVisible, + toggle, + }; +}; From 5692315c29f0a8a23e909b74b72c8ce3ee5f097c Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 17 Dec 2021 17:56:00 -0300 Subject: [PATCH 05/18] Adjust UserDropdown width for mobile --- client/sidebar/header/UserDropdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/sidebar/header/UserDropdown.tsx b/client/sidebar/header/UserDropdown.tsx index c79699553cc7..43a7d0598aac 100644 --- a/client/sidebar/header/UserDropdown.tsx +++ b/client/sidebar/header/UserDropdown.tsx @@ -75,7 +75,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { const accountRoute = useRoute('account'); const adminRoute = useRoute('admin'); const logout = useLogout(); - const { sidebar } = useLayout(); + const { sidebar, isMobile } = useLayout(); const { username, avatarETag, status, statusText } = user; @@ -115,7 +115,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => { const accountBoxItems = useReactiveValue(getItems); return ( - + From 105428ab9354ecfea149e90a748f2679f7576b7c Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 11:06:39 -0300 Subject: [PATCH 06/18] Dropdown component on SortList --- client/components/SortList/GroupingList.js | 4 +- client/components/SortList/SortList.js | 14 +++-- client/components/SortList/SortModeList.js | 4 +- client/components/SortList/ViewModeList.js | 4 +- client/sidebar/header/actions/Sort.js | 28 ++++++++-- client/sidebar/header/index.js | 5 +- package-lock.json | 62 +++++++++++----------- package.json | 4 +- 8 files changed, 73 insertions(+), 52 deletions(-) diff --git a/client/components/SortList/GroupingList.js b/client/components/SortList/GroupingList.js index 5749a8899148..46da6c0e081a 100644 --- a/client/components/SortList/GroupingList.js +++ b/client/components/SortList/GroupingList.js @@ -26,7 +26,7 @@ function GroupingList() { const t = useTranslation(); return ( - <> + {t('Group_by')} @@ -69,7 +69,7 @@ function GroupingList() { /> - + ); } diff --git a/client/components/SortList/SortList.js b/client/components/SortList/SortList.js index 3aaca9bd88ee..b948d18f9666 100644 --- a/client/components/SortList/SortList.js +++ b/client/components/SortList/SortList.js @@ -1,4 +1,4 @@ -import { Divider } from '@rocket.chat/fuselage'; +import { Option } from '@rocket.chat/fuselage'; import React from 'react'; import GroupingList from './GroupingList'; @@ -8,13 +8,11 @@ import ViewModeList from './ViewModeList'; function SortList() { return ( <> -
- - - - - -
+ + + + + ); } diff --git a/client/components/SortList/SortModeList.js b/client/components/SortList/SortModeList.js index 0f9521b8fcba..98bf8985b5b8 100644 --- a/client/components/SortList/SortModeList.js +++ b/client/components/SortList/SortModeList.js @@ -22,7 +22,7 @@ function SortModeList() { const setToActivity = useHandleChange('activity'); return ( - <> + {t('Sort_By')} @@ -54,7 +54,7 @@ function SortModeList() { /> - + ); } diff --git a/client/components/SortList/ViewModeList.js b/client/components/SortList/ViewModeList.js index 9d9cfd72a0ea..606f1212b9b7 100644 --- a/client/components/SortList/ViewModeList.js +++ b/client/components/SortList/ViewModeList.js @@ -31,7 +31,7 @@ function ViewModeList() { ); return ( - <> + {t('Display')} @@ -88,7 +88,7 @@ function ViewModeList() { /> - + ); } diff --git a/client/sidebar/header/actions/Sort.js b/client/sidebar/header/actions/Sort.js index d0da2e6451a1..2acb8ae86937 100644 --- a/client/sidebar/header/actions/Sort.js +++ b/client/sidebar/header/actions/Sort.js @@ -1,7 +1,10 @@ -import { Sidebar } from '@rocket.chat/fuselage'; -import React from 'react'; +import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage'; +import React, { useRef } from 'react'; +import { createPortal } from 'react-dom'; import { popover } from '../../../../app/ui-utils/client'; +import SortList from '../../../components/SortList'; +import { useDropdownVisibility } from '../hooks/useDropdownVisibility'; const config = (e) => ({ template: 'SortList', @@ -16,6 +19,25 @@ const onClick = (e) => { popover.open(config(e)); }; -const Sort = (props) => ; +const Sort = (props) => { + const reference = useRef(null); + const target = useRef(null); + const { isVisible, toggle } = useDropdownVisibility({ reference, target }); + + return ( + <> + + + + {isVisible && + createPortal( + + + , + document.body, + )} + + ); +}; export default Sort; diff --git a/client/sidebar/header/index.js b/client/sidebar/header/index.js index 4fab8f46f3cd..3cf672c3eb30 100644 --- a/client/sidebar/header/index.js +++ b/client/sidebar/header/index.js @@ -1,5 +1,5 @@ -import { Sidebar } from '@rocket.chat/fuselage'; -import React, { memo } from 'react'; +import { Box, Sidebar } from '@rocket.chat/fuselage'; +import React, { memo, useRef } from 'react'; import { useTranslation } from '../../contexts/TranslationContext'; import { useUser } from '../../contexts/UserContext'; @@ -16,6 +16,7 @@ const HeaderWithData = () => { const user = useUser(); const t = useTranslation(); useSidebarPaletteColor(); + return ( <> diff --git a/package-lock.json b/package-lock.json index 0413b8ecddfa..bb9805db6ccc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5379,58 +5379,58 @@ } }, "@rocket.chat/fuselage": { - "version": "0.6.3-dev.372", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.372.tgz", - "integrity": "sha512-7ne0jP+dHwpRQVlsyRc9jPcVe+ondqq6IasjVifRgWW3BJ5QmdUJl9q1t+adhSuAwAmtJdBeLD+XUpx9KB9FIg==", - "requires": { - "@rocket.chat/css-in-js": "^0.6.3-dev.372+41d2b780", - "@rocket.chat/css-supports": "^0.6.3-dev.372+41d2b780", - "@rocket.chat/fuselage-tokens": "^0.6.3-dev.372+41d2b780", - "@rocket.chat/memo": "^0.6.3-dev.372+41d2b780", + "version": "0.6.3-dev.377", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.377.tgz", + "integrity": "sha512-Wkk3zZsTweTyzjzw2Ckz1mkaeV4vDkt7NAa4EJIOPDWtypMeWTauMRrHerfE7Yu9gTk67S1syOq69O+zOU6dMQ==", + "requires": { + "@rocket.chat/css-in-js": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/css-supports": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/fuselage-tokens": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/memo": "^0.6.3-dev.377+b0a0182b", "invariant": "^2.2.4", "react-keyed-flatten-children": "^1.3.0" }, "dependencies": { "@rocket.chat/css-in-js": { - "version": "0.6.3-dev.372", - "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.372.tgz", - "integrity": "sha512-U8ZA9m1mCnp6V5IRfZuaSgSAXr7LyPEokEK+5mH831upxPxoh7mCgBd3NFX1ayW6zkQyCCtzQ8n0/RQla/qojw==", + "version": "0.6.3-dev.377", + "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.377.tgz", + "integrity": "sha512-5qs0xfgvR1tGdL/AGsQH/lcD89//Cmn8Wf4zWEJ4UJEshE9QpB6MWUFDzxQofouWXIz++DRCyVdd6WEm/6zMrA==", "requires": { "@emotion/hash": "^0.8.0", - "@rocket.chat/css-supports": "^0.6.3-dev.372+41d2b780", - "@rocket.chat/memo": "^0.6.3-dev.372+41d2b780", - "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/css-supports": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/memo": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.377+b0a0182b", "stylis": "^4.0.10" } }, "@rocket.chat/css-supports": { - "version": "0.6.3-dev.372", - "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.372.tgz", - "integrity": "sha512-w88w/ZpUmlupT5ycFongH9OCJf6uNTV9wD1ei0kR2ehdXr8P1ruGlabZMiwPr27Iz7vcKKodBy82mpELE5IPTg==", + "version": "0.6.3-dev.377", + "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.377.tgz", + "integrity": "sha512-ebMliGjHJ12d02rfThHMJtARjy3bKFLewpopEhK4bcokc2xUyPgKCw/IzhgMF89PrnZRvi41N7HmuHa739j2+w==", "requires": { - "@rocket.chat/memo": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/memo": "^0.6.3-dev.377+b0a0182b", "tslib": "^2.3.1" } }, "@rocket.chat/fuselage-tokens": { - "version": "0.6.3-dev.372", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.372.tgz", - "integrity": "sha512-IeAGhfW1e4XOhvzDY1DjY/NjnqN5H2DgfBxKNnihnlBVXjWR0q05vOaavnfsriX7GpAJk2zWJyvCZaCyrWf7aw==" + "version": "0.6.3-dev.377", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.377.tgz", + "integrity": "sha512-m5NwsU/YGkC/ekfHqi+DUGAE8Wd3nc0ZU3b1mLGjr58iPblCAiDP2CK0A92aaFOV+oKSX6K5mbvCQ/aYpAgpAA==" }, "@rocket.chat/memo": { - "version": "0.6.3-dev.372", - "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.372.tgz", - "integrity": "sha512-WiET4ICdj1WcnSpdYRc+MDp6AiKk1pVFG0fqe/szQhC16L/eUiL6wsBiHX1XNdEAz20kbDxkKHHww3mn8syngQ==", + "version": "0.6.3-dev.377", + "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.377.tgz", + "integrity": "sha512-WWGK1B388Rx/Pr6Wx+gigRgkBn2DW7B5oIGb4W0khD2dwx8BsnVY3zWK6CM5sFw6zsbgPnGuQdlB6DAq3fknLQ==", "requires": { "tslib": "^2.3.1" } }, "@rocket.chat/stylis-logical-props-middleware": { - "version": "0.6.3-dev.372", - "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.372.tgz", - "integrity": "sha512-UYHiMVUBbl/2fzghMc3ohWEQ0sVBMwmnMyJ+xPXD7q/Qx2rvzk//bvnSVOjbqrJ0CMqGvy4HtHIiNUsyqXdc5w==", + "version": "0.6.3-dev.377", + "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.377.tgz", + "integrity": "sha512-JumVCGKi1b1lRDkoO8morxKuoxWNRhxTb4Bj785SZqFRoKBtfhUH3UJZj24aMWfuOKuu7lfbGm4H1dpFKwUsyg==", "requires": { - "@rocket.chat/css-supports": "^0.6.3-dev.372+41d2b780", + "@rocket.chat/css-supports": "^0.6.3-dev.377+b0a0182b", "tslib": "^2.3.1" } }, @@ -5442,9 +5442,9 @@ } }, "@rocket.chat/fuselage-hooks": { - "version": "0.6.3-dev.362", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.362.tgz", - "integrity": "sha512-2gmNbRRLFMdbUBLZdOaczRG+5t95JskfzFYIxpkRnUkP8xqUu1a0eUFx1dDjvMHKX/k4NhytCNY/VOKemQC1mg==" + "version": "0.6.3-dev.377", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.377.tgz", + "integrity": "sha512-0114JxGUqilfC9L9yBrKdTjvA5asSZQ0NgLPoo3WlSDDEBDNrEWu1gDoN4MbivGKruFbiCZxvQSnMwVHQCR8Rw==" }, "@rocket.chat/fuselage-polyfills": { "version": "0.30.1", diff --git a/package.json b/package.json index a73de91f3ce8..13e76c59309d 100644 --- a/package.json +++ b/package.json @@ -176,8 +176,8 @@ "@rocket.chat/apps-engine": "^1.29.0-alpha.0.5706", "@rocket.chat/css-in-js": "^0.30.1", "@rocket.chat/emitter": "^0.30.1", - "@rocket.chat/fuselage": "^0.6.3-dev.372", - "@rocket.chat/fuselage-hooks": "^0.6.3-dev.362", + "@rocket.chat/fuselage": "^0.6.3-dev.377", + "@rocket.chat/fuselage-hooks": "^0.6.3-dev.377", "@rocket.chat/fuselage-polyfills": "^0.30.1", "@rocket.chat/fuselage-tokens": "^0.6.3-dev.362", "@rocket.chat/fuselage-ui-kit": "^0.30.1", From 422c4d3ee8b0aab2f2820e18d844514afd8a6ee0 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 11:11:21 -0300 Subject: [PATCH 07/18] Dropdown component on SortList --- client/sidebar/header/UserAvatarButton.tsx | 2 +- client/sidebar/header/actions/Sort.js | 14 -------------- client/sidebar/header/index.js | 4 ++-- 3 files changed, 3 insertions(+), 17 deletions(-) diff --git a/client/sidebar/header/UserAvatarButton.tsx b/client/sidebar/header/UserAvatarButton.tsx index 86e30fd991bd..ea7d3be9741a 100644 --- a/client/sidebar/header/UserAvatarButton.tsx +++ b/client/sidebar/header/UserAvatarButton.tsx @@ -33,7 +33,7 @@ const UserAvatarButton = function UserAvatarButton(): ReactElement { toggle()} + onClick={toggle} className={css` cursor: pointer; `} diff --git a/client/sidebar/header/actions/Sort.js b/client/sidebar/header/actions/Sort.js index 2acb8ae86937..5ed4b4eb6b7b 100644 --- a/client/sidebar/header/actions/Sort.js +++ b/client/sidebar/header/actions/Sort.js @@ -2,23 +2,9 @@ import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage'; import React, { useRef } from 'react'; import { createPortal } from 'react-dom'; -import { popover } from '../../../../app/ui-utils/client'; import SortList from '../../../components/SortList'; import { useDropdownVisibility } from '../hooks/useDropdownVisibility'; -const config = (e) => ({ - template: 'SortList', - currentTarget: e.currentTarget, - data: { - options: [], - }, - offsetVertical: e.currentTarget.clientHeight + 10, -}); - -const onClick = (e) => { - popover.open(config(e)); -}; - const Sort = (props) => { const reference = useRef(null); const target = useRef(null); diff --git a/client/sidebar/header/index.js b/client/sidebar/header/index.js index 3cf672c3eb30..524071d4e0e6 100644 --- a/client/sidebar/header/index.js +++ b/client/sidebar/header/index.js @@ -1,5 +1,5 @@ -import { Box, Sidebar } from '@rocket.chat/fuselage'; -import React, { memo, useRef } from 'react'; +import { Sidebar } from '@rocket.chat/fuselage'; +import React, { memo } from 'react'; import { useTranslation } from '../../contexts/TranslationContext'; import { useUser } from '../../contexts/UserContext'; From 1267d9bc294256800d1562a6f8d09aaad0f0325f Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 15:07:17 -0300 Subject: [PATCH 08/18] Dropdown component on CreateRoomList --- client/sidebar/header/actions/CreateRoom.js | 42 +++++++++++-------- .../sidebar/header/actions/CreateRoomList.js | 36 ++++++++++++---- 2 files changed, 54 insertions(+), 24 deletions(-) diff --git a/client/sidebar/header/actions/CreateRoom.js b/client/sidebar/header/actions/CreateRoom.js index 4cd1e1cc7f34..c3257734e12d 100644 --- a/client/sidebar/header/actions/CreateRoom.js +++ b/client/sidebar/header/actions/CreateRoom.js @@ -1,8 +1,11 @@ -import { Sidebar } from '@rocket.chat/fuselage'; -import React from 'react'; +import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage'; +import React, { useRef } from 'react'; +import { createPortal } from 'react-dom'; import { popover } from '../../../../app/ui-utils/client'; import { useAtLeastOnePermission } from '../../../contexts/AuthorizationContext'; +import { useDropdownVisibility } from '../hooks/useDropdownVisibility'; +import CreateRoomList from './CreateRoomList'; const CREATE_ROOM_PERMISSIONS = [ 'create-c', @@ -12,24 +15,29 @@ const CREATE_ROOM_PERMISSIONS = [ 'start-discussion-other-user', ]; -const config = (e) => ({ - template: 'CreateRoomList', - data: { - options: [], - }, - currentTarget: e.currentTarget, - offsetVertical: e.currentTarget.clientHeight + 10, -}); - const CreateRoom = (props) => { + const reference = useRef(null); + const target = useRef(null); + const { isVisible, toggle } = useDropdownVisibility({ reference, target }); + const showCreate = useAtLeastOnePermission(CREATE_ROOM_PERMISSIONS); - const onClick = (e) => { - popover.open(config(e)); - }; - return showCreate ? ( - - ) : null; + return ( + <> + {showCreate && ( + + + + )} + {isVisible && + createPortal( + + toggle(false)} /> + , + document.body, + )} + + ); }; export default CreateRoom; diff --git a/client/sidebar/header/actions/CreateRoomList.js b/client/sidebar/header/actions/CreateRoomList.js index 746f27a658e6..016c04b57648 100644 --- a/client/sidebar/header/actions/CreateRoomList.js +++ b/client/sidebar/header/actions/CreateRoomList.js @@ -38,7 +38,7 @@ const useReactModal = (Component) => { }); }; -function CreateRoomList() { +function CreateRoomList({ closeList }) { const t = useTranslation(); const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS); @@ -54,7 +54,7 @@ function CreateRoomList() { const discussionEnabled = useSetting('Discussion_enabled'); return ( -
+ {t('Create_new')} @@ -63,26 +63,48 @@ function CreateRoomList() {
    {canCreateChannel && ( - + { + createChannel(e); + closeList(); + }} + /> + )} + {canCreateTeam && ( + { + createTeam(e); + closeList(); + }} + /> )} - {canCreateTeam && } {canCreateDirectMessages && ( { + createDirectMessage(e); + closeList(); + }} /> )} {discussionEnabled && canCreateDiscussion && ( { + createDiscussion(e); + closeList(); + }} /> )}
-
+ ); } From 737c6a2dbb1c82c7e2f4a4384ed8958e58092595 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 15:10:58 -0300 Subject: [PATCH 09/18] Fix lint error --- client/sidebar/header/actions/CreateRoom.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/sidebar/header/actions/CreateRoom.js b/client/sidebar/header/actions/CreateRoom.js index c3257734e12d..1b5678e5823a 100644 --- a/client/sidebar/header/actions/CreateRoom.js +++ b/client/sidebar/header/actions/CreateRoom.js @@ -2,7 +2,6 @@ import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage'; import React, { useRef } from 'react'; import { createPortal } from 'react-dom'; -import { popover } from '../../../../app/ui-utils/client'; import { useAtLeastOnePermission } from '../../../contexts/AuthorizationContext'; import { useDropdownVisibility } from '../hooks/useDropdownVisibility'; import CreateRoomList from './CreateRoomList'; From 4ddefa61c8022fabbba7fa0ce282a1d9652a472a Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 17:18:26 -0300 Subject: [PATCH 10/18] Apply OptionTitle on CreateRoomList dropdown --- .../sidebar/header/actions/CreateRoomList.js | 102 +++++++++--------- 1 file changed, 50 insertions(+), 52 deletions(-) diff --git a/client/sidebar/header/actions/CreateRoomList.js b/client/sidebar/header/actions/CreateRoomList.js index 016c04b57648..f05856df48c0 100644 --- a/client/sidebar/header/actions/CreateRoomList.js +++ b/client/sidebar/header/actions/CreateRoomList.js @@ -1,4 +1,4 @@ -import { Box, Margins } from '@rocket.chat/fuselage'; +import { Box, Margins, OptionTitle } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import React from 'react'; @@ -54,57 +54,55 @@ function CreateRoomList({ closeList }) { const discussionEnabled = useSetting('Discussion_enabled'); return ( - - - - {t('Create_new')} - - -
    - - {canCreateChannel && ( - { - createChannel(e); - closeList(); - }} - /> - )} - {canCreateTeam && ( - { - createTeam(e); - closeList(); - }} - /> - )} - {canCreateDirectMessages && ( - { - createDirectMessage(e); - closeList(); - }} - /> - )} - {discussionEnabled && canCreateDiscussion && ( - { - createDiscussion(e); - closeList(); - }} - /> - )} - -
- + <> + {t('Create_new')} + +
    + + {canCreateChannel && ( + { + createChannel(e); + closeList(); + }} + /> + )} + {canCreateTeam && ( + { + createTeam(e); + closeList(); + }} + /> + )} + {canCreateDirectMessages && ( + { + createDirectMessage(e); + closeList(); + }} + /> + )} + {discussionEnabled && canCreateDiscussion && ( + { + createDiscussion(e); + closeList(); + }} + /> + )} + +
+ + ); } From c23c0a5ad226bf25a8559099d18db07b6f850c92 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 17:23:24 -0300 Subject: [PATCH 11/18] Apply OptionTitle on SortList dropdown --- client/components/SortList/GroupingList.js | 88 ++++++++-------- client/components/SortList/SortModeList.js | 66 ++++++------ client/components/SortList/ViewModeList.js | 116 ++++++++++----------- 3 files changed, 132 insertions(+), 138 deletions(-) diff --git a/client/components/SortList/GroupingList.js b/client/components/SortList/GroupingList.js index 46da6c0e081a..20678858e452 100644 --- a/client/components/SortList/GroupingList.js +++ b/client/components/SortList/GroupingList.js @@ -1,4 +1,4 @@ -import { Box, Margins, CheckBox } from '@rocket.chat/fuselage'; +import { Box, Margins, CheckBox, OptionTitle } from '@rocket.chat/fuselage'; import React, { useCallback } from 'react'; import { useMethod } from '../../contexts/ServerContext'; @@ -26,50 +26,48 @@ function GroupingList() { const t = useTranslation(); return ( - - - - {t('Group_by')} - - -
    - - - } - /> - - } - /> - - } - /> - -
- + <> + {t('Group_by')} + +
    + + + } + /> + + } + /> + + } + /> + +
+ + ); } diff --git a/client/components/SortList/SortModeList.js b/client/components/SortList/SortModeList.js index 98bf8985b5b8..7e69b9dc0ddf 100644 --- a/client/components/SortList/SortModeList.js +++ b/client/components/SortList/SortModeList.js @@ -1,4 +1,4 @@ -import { RadioButton, Box, Margins } from '@rocket.chat/fuselage'; +import { RadioButton, Box, Margins, OptionTitle } from '@rocket.chat/fuselage'; import React, { useCallback } from 'react'; import { useMethod } from '../../contexts/ServerContext'; @@ -22,39 +22,37 @@ function SortModeList() { const setToActivity = useHandleChange('activity'); return ( - - - - {t('Sort_By')} - - -
    - - - } - /> - - } - /> - -
- + <> + {t('Sort_By')} + +
    + + + } + /> + + } + /> + +
+ + ); } diff --git a/client/components/SortList/ViewModeList.js b/client/components/SortList/ViewModeList.js index 606f1212b9b7..991624437c7e 100644 --- a/client/components/SortList/ViewModeList.js +++ b/client/components/SortList/ViewModeList.js @@ -1,4 +1,4 @@ -import { ToggleSwitch, RadioButton, Box, Margins } from '@rocket.chat/fuselage'; +import { ToggleSwitch, RadioButton, Box, Margins, OptionTitle } from '@rocket.chat/fuselage'; import React, { useCallback } from 'react'; import { useMethod } from '../../contexts/ServerContext'; @@ -31,64 +31,62 @@ function ViewModeList() { ); return ( - - - - {t('Display')} - - -
    - - - } - /> - - } - /> - - } - /> - - } - /> - -
- + <> + {t('Display')} + +
    + + + } + /> + + } + /> + + } + /> + + } + /> + +
+ + ); } From d9e7eda588187e37534574ea5dc7a86b9186b241 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 17:48:20 -0300 Subject: [PATCH 12/18] Apply Option components on CreateRoomListItem dropdown --- .../sidebar/header/actions/CreateRoomList.js | 92 +++++++++---------- .../header/actions/CreateRoomListItem.js | 28 ++---- 2 files changed, 52 insertions(+), 68 deletions(-) diff --git a/client/sidebar/header/actions/CreateRoomList.js b/client/sidebar/header/actions/CreateRoomList.js index f05856df48c0..2f99d8228432 100644 --- a/client/sidebar/header/actions/CreateRoomList.js +++ b/client/sidebar/header/actions/CreateRoomList.js @@ -55,53 +55,51 @@ function CreateRoomList({ closeList }) { return ( <> - {t('Create_new')} - -
    - - {canCreateChannel && ( - { - createChannel(e); - closeList(); - }} - /> - )} - {canCreateTeam && ( - { - createTeam(e); - closeList(); - }} - /> - )} - {canCreateDirectMessages && ( - { - createDirectMessage(e); - closeList(); - }} - /> - )} - {discussionEnabled && canCreateDiscussion && ( - { - createDiscussion(e); - closeList(); - }} - /> - )} - -
- + + {t('Create_new')} + +
    + {canCreateChannel && ( + { + createChannel(e); + closeList(); + }} + /> + )} + {canCreateTeam && ( + { + createTeam(e); + closeList(); + }} + /> + )} + {canCreateDirectMessages && ( + { + createDirectMessage(e); + closeList(); + }} + /> + )} + {discussionEnabled && canCreateDiscussion && ( + { + createDiscussion(e); + closeList(); + }} + /> + )} +
); } diff --git a/client/sidebar/header/actions/CreateRoomListItem.js b/client/sidebar/header/actions/CreateRoomListItem.js index 8c42f2d3aff3..96256111e329 100644 --- a/client/sidebar/header/actions/CreateRoomListItem.js +++ b/client/sidebar/header/actions/CreateRoomListItem.js @@ -1,27 +1,13 @@ -import { Icon, Box, Flex, Margins } from '@rocket.chat/fuselage'; +import { Box, Option } from '@rocket.chat/fuselage'; import React from 'react'; export default function CreateRoomListItem({ text, icon, action }) { return ( - - - - - - - - - - - - - {text} - - - - - - - + + + ); } From af601a3e7211e5f241b54cad1667c04d1464ff89 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 18:10:44 -0300 Subject: [PATCH 13/18] Apply Option components on SortListItem --- client/components/SortList/GroupingList.js | 68 +++++++------- client/components/SortList/SortListItem.js | 32 ++----- client/components/SortList/SortModeList.js | 48 +++++----- client/components/SortList/ViewModeList.js | 94 +++++++++---------- .../sidebar/header/actions/CreateRoomList.js | 2 +- 5 files changed, 110 insertions(+), 134 deletions(-) diff --git a/client/components/SortList/GroupingList.js b/client/components/SortList/GroupingList.js index 20678858e452..fd20d66aed6f 100644 --- a/client/components/SortList/GroupingList.js +++ b/client/components/SortList/GroupingList.js @@ -28,45 +28,41 @@ function GroupingList() { return ( <> {t('Group_by')} - -
    - - - } +
      + - - } + } + /> + - - } + } + /> + - -
    - + } + /> +
); } diff --git a/client/components/SortList/SortListItem.js b/client/components/SortList/SortListItem.js index 99ae40572c8c..3f545beac31a 100644 --- a/client/components/SortList/SortListItem.js +++ b/client/components/SortList/SortListItem.js @@ -1,29 +1,17 @@ -import { Icon, Box, Flex, Margins } from '@rocket.chat/fuselage'; +import { Option, OptionColumn } from '@rocket.chat/fuselage'; import React from 'react'; +const style = { + 'padding-right': '24px', +}; + function SortListItem({ text, icon, input }) { return ( - - - - - - - - - - - - - {text} - - - - {input} - - - - + ); } diff --git a/client/components/SortList/SortModeList.js b/client/components/SortList/SortModeList.js index 7e69b9dc0ddf..bd00098abe1c 100644 --- a/client/components/SortList/SortModeList.js +++ b/client/components/SortList/SortModeList.js @@ -24,34 +24,30 @@ function SortModeList() { return ( <> {t('Sort_By')} - -
    - - - } +
      + - - } + } + /> + - -
    - + } + /> +
); } diff --git a/client/components/SortList/ViewModeList.js b/client/components/SortList/ViewModeList.js index 991624437c7e..69fe85af8031 100644 --- a/client/components/SortList/ViewModeList.js +++ b/client/components/SortList/ViewModeList.js @@ -33,59 +33,55 @@ function ViewModeList() { return ( <> {t('Display')} - -
    - - - } +
      + - - } + } + /> + - - } + } + /> + - - } + } + /> + - -
    - + } + /> +
); } diff --git a/client/sidebar/header/actions/CreateRoomList.js b/client/sidebar/header/actions/CreateRoomList.js index 2f99d8228432..c174728ec873 100644 --- a/client/sidebar/header/actions/CreateRoomList.js +++ b/client/sidebar/header/actions/CreateRoomList.js @@ -1,4 +1,4 @@ -import { Box, Margins, OptionTitle } from '@rocket.chat/fuselage'; +import { OptionTitle } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import React from 'react'; From e6dfde7cebe45fa60f697dd78061c759923914f3 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 19:08:00 -0300 Subject: [PATCH 14/18] Replace CreateListItem and SortListItem with component ListItem --- client/components/Sidebar/ListItem.js | 14 +++++++++++++ client/components/Sidebar/index.ts | 2 ++ client/components/SortList/GroupingList.js | 18 ++++++++++++----- client/components/SortList/SortListItem.js | 18 ----------------- client/components/SortList/SortModeList.js | 14 +++++++++---- client/components/SortList/ViewModeList.js | 20 +++++++++++++------ .../sidebar/header/actions/CreateRoomList.js | 10 +++++----- .../header/actions/CreateRoomListItem.js | 13 ------------ 8 files changed, 58 insertions(+), 51 deletions(-) create mode 100644 client/components/Sidebar/ListItem.js delete mode 100644 client/components/SortList/SortListItem.js delete mode 100644 client/sidebar/header/actions/CreateRoomListItem.js diff --git a/client/components/Sidebar/ListItem.js b/client/components/Sidebar/ListItem.js new file mode 100644 index 000000000000..703eef4cf806 --- /dev/null +++ b/client/components/Sidebar/ListItem.js @@ -0,0 +1,14 @@ +import { Option, OptionColumn } from '@rocket.chat/fuselage'; +import React from 'react'; + +function ListItem({ text, icon, input, action }) { + return ( + + ); +} + +export default ListItem; diff --git a/client/components/Sidebar/index.ts b/client/components/Sidebar/index.ts index 0d4689e06e0b..f4d4d03140e0 100644 --- a/client/components/Sidebar/index.ts +++ b/client/components/Sidebar/index.ts @@ -2,6 +2,7 @@ import Content from './Content'; import GenericItem from './GenericItem'; import Header from './Header'; import ItemsAssembler from './ItemsAssembler'; +import ListItem from './ListItem'; import NavigationItem from './NavigationItem'; import Sidebar from './Sidebar'; @@ -11,4 +12,5 @@ export default Object.assign(Sidebar, { GenericItem, NavigationItem, ItemsAssembler, + ListItem, }); diff --git a/client/components/SortList/GroupingList.js b/client/components/SortList/GroupingList.js index fd20d66aed6f..540747af0937 100644 --- a/client/components/SortList/GroupingList.js +++ b/client/components/SortList/GroupingList.js @@ -1,15 +1,19 @@ -import { Box, Margins, CheckBox, OptionTitle } from '@rocket.chat/fuselage'; +import { CheckBox, OptionTitle } from '@rocket.chat/fuselage'; import React, { useCallback } from 'react'; import { useMethod } from '../../contexts/ServerContext'; import { useTranslation } from '../../contexts/TranslationContext'; import { useUserPreference } from '../../contexts/UserContext'; -import SortListItem from './SortListItem'; +import ListItem from '../Sidebar/ListItem'; const style = { textTransform: 'uppercase', }; +const checkBoxStyle = { + 'padding-left': '24px', +}; + function GroupingList() { const sidebarGroupByType = useUserPreference('sidebarGroupByType'); const sidebarShowFavorites = useUserPreference('sidebarShowFavorites'); @@ -25,37 +29,41 @@ function GroupingList() { const handleChangeShowUnread = useHandleChange('sidebarShowUnread', !sidebarShowUnread); const t = useTranslation(); + return ( <> {t('Group_by')}
    - } /> - } /> - - - {text} - {input} - - ); -} - -export default SortListItem; diff --git a/client/components/SortList/SortModeList.js b/client/components/SortList/SortModeList.js index bd00098abe1c..547fc697c4f0 100644 --- a/client/components/SortList/SortModeList.js +++ b/client/components/SortList/SortModeList.js @@ -1,15 +1,19 @@ -import { RadioButton, Box, Margins, OptionTitle } from '@rocket.chat/fuselage'; +import { RadioButton, OptionTitle } from '@rocket.chat/fuselage'; import React, { useCallback } from 'react'; import { useMethod } from '../../contexts/ServerContext'; import { useTranslation } from '../../contexts/TranslationContext'; import { useUserPreference } from '../../contexts/UserContext'; -import SortListItem from './SortListItem'; +import ListItem from '../Sidebar/ListItem'; const style = { textTransform: 'uppercase', }; +const checkBoxStyle = { + 'padding-left': '24px', +}; + function SortModeList() { const t = useTranslation(); const saveUserPreferences = useMethod('saveUserPreferences'); @@ -25,22 +29,24 @@ function SortModeList() { <> {t('Sort_By')}
      - } /> - {t('Display')}
        - } /> - } /> - } /> -
          {canCreateChannel && ( - { @@ -70,7 +70,7 @@ function CreateRoomList({ closeList }) { /> )} {canCreateTeam && ( - { @@ -80,7 +80,7 @@ function CreateRoomList({ closeList }) { /> )} {canCreateDirectMessages && ( - { @@ -90,7 +90,7 @@ function CreateRoomList({ closeList }) { /> )} {discussionEnabled && canCreateDiscussion && ( - { diff --git a/client/sidebar/header/actions/CreateRoomListItem.js b/client/sidebar/header/actions/CreateRoomListItem.js deleted file mode 100644 index 96256111e329..000000000000 --- a/client/sidebar/header/actions/CreateRoomListItem.js +++ /dev/null @@ -1,13 +0,0 @@ -import { Box, Option } from '@rocket.chat/fuselage'; -import React from 'react'; - -export default function CreateRoomListItem({ text, icon, action }) { - return ( - - - - ); -} From b2b4c26caf4fef63b9dc0fc2f70910a900d5ce2c Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 19:35:14 -0300 Subject: [PATCH 15/18] Fix indentation --- client/components/SortList/SortModeList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/SortList/SortModeList.js b/client/components/SortList/SortModeList.js index 547fc697c4f0..c0f895972e3d 100644 --- a/client/components/SortList/SortModeList.js +++ b/client/components/SortList/SortModeList.js @@ -34,7 +34,7 @@ function SortModeList() { text={t('Activity')} input={ Date: Tue, 21 Dec 2021 19:57:44 -0300 Subject: [PATCH 16/18] Convert js to tsx --- client/components/Sidebar/ListItem.js | 14 -------------- client/components/Sidebar/ListItem.tsx | 19 +++++++++++++++++++ 2 files changed, 19 insertions(+), 14 deletions(-) delete mode 100644 client/components/Sidebar/ListItem.js create mode 100644 client/components/Sidebar/ListItem.tsx diff --git a/client/components/Sidebar/ListItem.js b/client/components/Sidebar/ListItem.js deleted file mode 100644 index 703eef4cf806..000000000000 --- a/client/components/Sidebar/ListItem.js +++ /dev/null @@ -1,14 +0,0 @@ -import { Option, OptionColumn } from '@rocket.chat/fuselage'; -import React from 'react'; - -function ListItem({ text, icon, input, action }) { - return ( - - ); -} - -export default ListItem; diff --git a/client/components/Sidebar/ListItem.tsx b/client/components/Sidebar/ListItem.tsx new file mode 100644 index 000000000000..813dc7cc10be --- /dev/null +++ b/client/components/Sidebar/ListItem.tsx @@ -0,0 +1,19 @@ +import { Option, OptionColumn } from '@rocket.chat/fuselage'; +import React, { ComponentProps, MouseEventHandler, ReactElement } from 'react'; + +type ListItemProps = { + text: string; + icon?: ComponentProps['name']; + input?: any; + action?: MouseEventHandler | undefined; +}; + +const ListItem = ({ text, icon, input, action }: ListItemProps): ReactElement => ( + +); + +export default ListItem; From 1ebf69b62b0688d3b681dd3ba195f148466eaa19 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 21 Dec 2021 20:37:11 -0300 Subject: [PATCH 17/18] Update fuselage, fix typechecks --- client/components/Sidebar/ListItem.tsx | 2 +- client/sidebar/header/UserAvatarButton.tsx | 2 +- package-lock.json | 74 +++++++++++----------- package.json | 4 +- 4 files changed, 40 insertions(+), 42 deletions(-) diff --git a/client/components/Sidebar/ListItem.tsx b/client/components/Sidebar/ListItem.tsx index 813dc7cc10be..e4e2514f34ec 100644 --- a/client/components/Sidebar/ListItem.tsx +++ b/client/components/Sidebar/ListItem.tsx @@ -10,7 +10,7 @@ type ListItemProps = { const ListItem = ({ text, icon, input, action }: ListItemProps): ReactElement => ( diff --git a/client/sidebar/header/UserAvatarButton.tsx b/client/sidebar/header/UserAvatarButton.tsx index ea7d3be9741a..86e30fd991bd 100644 --- a/client/sidebar/header/UserAvatarButton.tsx +++ b/client/sidebar/header/UserAvatarButton.tsx @@ -33,7 +33,7 @@ const UserAvatarButton = function UserAvatarButton(): ReactElement { toggle()} className={css` cursor: pointer; `} diff --git a/package-lock.json b/package-lock.json index bb9805db6ccc..629e2eec3ba6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5379,58 +5379,58 @@ } }, "@rocket.chat/fuselage": { - "version": "0.6.3-dev.377", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.377.tgz", - "integrity": "sha512-Wkk3zZsTweTyzjzw2Ckz1mkaeV4vDkt7NAa4EJIOPDWtypMeWTauMRrHerfE7Yu9gTk67S1syOq69O+zOU6dMQ==", - "requires": { - "@rocket.chat/css-in-js": "^0.6.3-dev.377+b0a0182b", - "@rocket.chat/css-supports": "^0.6.3-dev.377+b0a0182b", - "@rocket.chat/fuselage-tokens": "^0.6.3-dev.377+b0a0182b", - "@rocket.chat/memo": "^0.6.3-dev.377+b0a0182b", + "version": "0.6.3-dev.379", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.379.tgz", + "integrity": "sha512-bR2VcKDThch8nrpQzzhd3sGcTa5wF5AK5G6/btxrLOvshfwA9bu9ctLbBpGXQytd3eJuhQt0tYbZpe9pEVp+Pg==", + "requires": { + "@rocket.chat/css-in-js": "^0.6.3-dev.379+76ca6250", + "@rocket.chat/css-supports": "^0.6.3-dev.379+76ca6250", + "@rocket.chat/fuselage-tokens": "^0.6.3-dev.379+76ca6250", + "@rocket.chat/memo": "^0.6.3-dev.379+76ca6250", "invariant": "^2.2.4", "react-keyed-flatten-children": "^1.3.0" }, "dependencies": { "@rocket.chat/css-in-js": { - "version": "0.6.3-dev.377", - "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.377.tgz", - "integrity": "sha512-5qs0xfgvR1tGdL/AGsQH/lcD89//Cmn8Wf4zWEJ4UJEshE9QpB6MWUFDzxQofouWXIz++DRCyVdd6WEm/6zMrA==", + "version": "0.6.3-dev.379", + "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.379.tgz", + "integrity": "sha512-+pFiLmakn7BIGtWpNz7kY8qzxC6NN3ks9HHOsfEWeSgUW7N9MQO1cSuzcG/FTN47X62VvuomB8vQvUoLgBR2cw==", "requires": { "@emotion/hash": "^0.8.0", - "@rocket.chat/css-supports": "^0.6.3-dev.377+b0a0182b", - "@rocket.chat/memo": "^0.6.3-dev.377+b0a0182b", - "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/css-supports": "^0.6.3-dev.379+76ca6250", + "@rocket.chat/memo": "^0.6.3-dev.379+76ca6250", + "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.379+76ca6250", "stylis": "^4.0.10" } }, "@rocket.chat/css-supports": { - "version": "0.6.3-dev.377", - "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.377.tgz", - "integrity": "sha512-ebMliGjHJ12d02rfThHMJtARjy3bKFLewpopEhK4bcokc2xUyPgKCw/IzhgMF89PrnZRvi41N7HmuHa739j2+w==", + "version": "0.6.3-dev.379", + "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.379.tgz", + "integrity": "sha512-0az+QuGnbQK23n6i40L4Ge/5e/lsNGOaVUt3ywyTiyRU3EtZkszIuqp13MwoKeVyFpe13CbOJ9/PvFKuq7pb7A==", "requires": { - "@rocket.chat/memo": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/memo": "^0.6.3-dev.379+76ca6250", "tslib": "^2.3.1" } }, "@rocket.chat/fuselage-tokens": { - "version": "0.6.3-dev.377", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.377.tgz", - "integrity": "sha512-m5NwsU/YGkC/ekfHqi+DUGAE8Wd3nc0ZU3b1mLGjr58iPblCAiDP2CK0A92aaFOV+oKSX6K5mbvCQ/aYpAgpAA==" + "version": "0.6.3-dev.379", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.379.tgz", + "integrity": "sha512-fl4tJRKP82MWnpkiDERl7EBy9Ya/7q+mt10OAnTS6aK018HdPgfmiGeOvk3Lc3x3if/cbNRt6C7OONonCYOnZw==" }, "@rocket.chat/memo": { - "version": "0.6.3-dev.377", - "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.377.tgz", - "integrity": "sha512-WWGK1B388Rx/Pr6Wx+gigRgkBn2DW7B5oIGb4W0khD2dwx8BsnVY3zWK6CM5sFw6zsbgPnGuQdlB6DAq3fknLQ==", + "version": "0.6.3-dev.379", + "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.379.tgz", + "integrity": "sha512-jOv8fviX/y+ilScIe7nnnxfydFo0GlyXixU4ll9klTRXjRgZiD9aYixG2mcIxvOOs/mTEU7Eo35JZjG7nrgEng==", "requires": { "tslib": "^2.3.1" } }, "@rocket.chat/stylis-logical-props-middleware": { - "version": "0.6.3-dev.377", - "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.377.tgz", - "integrity": "sha512-JumVCGKi1b1lRDkoO8morxKuoxWNRhxTb4Bj785SZqFRoKBtfhUH3UJZj24aMWfuOKuu7lfbGm4H1dpFKwUsyg==", + "version": "0.6.3-dev.379", + "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.379.tgz", + "integrity": "sha512-JuETkf4LXuloP49jP92isJ1NPI4INQYFY61IixJZKg4GXYBU0ZJrgH9Eq12k7TeWkIXpHvKG7ABSB2ELMNoEFg==", "requires": { - "@rocket.chat/css-supports": "^0.6.3-dev.377+b0a0182b", + "@rocket.chat/css-supports": "^0.6.3-dev.379+76ca6250", "tslib": "^2.3.1" } }, @@ -5442,9 +5442,9 @@ } }, "@rocket.chat/fuselage-hooks": { - "version": "0.6.3-dev.377", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.377.tgz", - "integrity": "sha512-0114JxGUqilfC9L9yBrKdTjvA5asSZQ0NgLPoo3WlSDDEBDNrEWu1gDoN4MbivGKruFbiCZxvQSnMwVHQCR8Rw==" + "version": "0.6.3-dev.379", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.379.tgz", + "integrity": "sha512-piYqIFkx5Wznoa3iKEI44wQdWRNZaiKcV4MH84Oan0IrszCkOkRbDhIj77Y65xskpyRjIasVK26PfVSo3qoZLg==" }, "@rocket.chat/fuselage-polyfills": { "version": "0.30.1", @@ -5487,13 +5487,6 @@ "@rocket.chat/memo": "^0.30.0", "invariant": "^2.2.4", "react-keyed-flatten-children": "^1.3.0" - }, - "dependencies": { - "@rocket.chat/fuselage-tokens": { - "version": "0.30.1", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.30.1.tgz", - "integrity": "sha512-bnwuNahkG9+EHYjZ8IpKqjxRAHnWHpQGZWwLaLE0XKt7xP8B/ubEQeV7PLDYI0KPJ5oWJCkk8CSf4FGJ9gSyxg==" - } } }, "@rocket.chat/fuselage-hooks": { @@ -5501,6 +5494,11 @@ "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.30.1.tgz", "integrity": "sha512-9mfe8yx9MjgjYGDKctHqDkV5Byb5PuAXDter1sl37w/Y9gk8TB1tohU+bF88YthBYSLnqBaNWZMsO2zpKuTGiQ==" }, + "@rocket.chat/fuselage-tokens": { + "version": "0.30.1", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.30.1.tgz", + "integrity": "sha512-bnwuNahkG9+EHYjZ8IpKqjxRAHnWHpQGZWwLaLE0XKt7xP8B/ubEQeV7PLDYI0KPJ5oWJCkk8CSf4FGJ9gSyxg==" + }, "tslib": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", diff --git a/package.json b/package.json index 13e76c59309d..5adf02c03b03 100644 --- a/package.json +++ b/package.json @@ -176,8 +176,8 @@ "@rocket.chat/apps-engine": "^1.29.0-alpha.0.5706", "@rocket.chat/css-in-js": "^0.30.1", "@rocket.chat/emitter": "^0.30.1", - "@rocket.chat/fuselage": "^0.6.3-dev.377", - "@rocket.chat/fuselage-hooks": "^0.6.3-dev.377", + "@rocket.chat/fuselage": "^0.6.3-dev.379", + "@rocket.chat/fuselage-hooks": "^0.6.3-dev.379", "@rocket.chat/fuselage-polyfills": "^0.30.1", "@rocket.chat/fuselage-tokens": "^0.6.3-dev.362", "@rocket.chat/fuselage-ui-kit": "^0.30.1", From 9cece9dc711dcc2642a30a02eefed71abb8714d1 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 21 Dec 2021 22:59:49 -0300 Subject: [PATCH 18/18] Fix review --- client/components/Sidebar/ListItem.tsx | 4 ++-- client/components/SortList/GroupingList.js | 3 ++- client/components/SortList/SortModeList.js | 3 ++- client/components/SortList/ViewModeList.js | 3 ++- client/sidebar/header/UserAvatarButton.tsx | 7 ++++--- client/sidebar/header/UserDropdown.tsx | 2 +- 6 files changed, 13 insertions(+), 9 deletions(-) diff --git a/client/components/Sidebar/ListItem.tsx b/client/components/Sidebar/ListItem.tsx index e4e2514f34ec..ac6e9fd7c263 100644 --- a/client/components/Sidebar/ListItem.tsx +++ b/client/components/Sidebar/ListItem.tsx @@ -5,11 +5,11 @@ type ListItemProps = { text: string; icon?: ComponentProps['name']; input?: any; - action?: MouseEventHandler | undefined; + action?: MouseEventHandler; }; const ListItem = ({ text, icon, input, action }: ListItemProps): ReactElement => ( - - {isVisible && + {user && + isVisible && createPortal( - toggle(false)} /> + toggle(false)} /> , document.body, )} diff --git a/client/sidebar/header/UserDropdown.tsx b/client/sidebar/header/UserDropdown.tsx index 43a7d0598aac..84684944824b 100644 --- a/client/sidebar/header/UserDropdown.tsx +++ b/client/sidebar/header/UserDropdown.tsx @@ -66,7 +66,7 @@ const translateStatusName = ( }; type UserDropdownProps = { - user: IUser; + user: Pick; onClose: () => void; };