From caea794266f9b508f47fbfcfa6c56a7881f93224 Mon Sep 17 00:00:00 2001 From: Kunal Verma <67605729+Kunalvrm555@users.noreply.github.com> Date: Thu, 10 Mar 2022 23:12:05 +0530 Subject: [PATCH 1/4] Invisible to Offline --- client/components/UserStatusMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/UserStatusMenu.js b/client/components/UserStatusMenu.js index a95dda44fd58..dd704d5fc270 100644 --- a/client/components/UserStatusMenu.js +++ b/client/components/UserStatusMenu.js @@ -27,7 +27,7 @@ const UserStatusMenu = ({ onChange, optionWidth = undefined, initialStatus = 'of ]; if (allowInvisibleStatus) { - statuses.push(['offline', renderOption('offline', t('Invisible'))]); + statuses.push(['offline', renderOption('offline', t('Offline'))]); } return statuses; From 24f33c23f0851585d05c5a268acbea59600feec1 Mon Sep 17 00:00:00 2001 From: Kunal Verma <67605729+Kunalvrm555@users.noreply.github.com> Date: Thu, 12 May 2022 23:32:48 +0530 Subject: [PATCH 2/4] accomodate #25265 (Convert to tsx)+ --- client/components/UserStatusMenu.js | 47 ++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/client/components/UserStatusMenu.js b/client/components/UserStatusMenu.js index dd704d5fc270..5df7dd7c33cc 100644 --- a/client/components/UserStatusMenu.js +++ b/client/components/UserStatusMenu.js @@ -1,17 +1,32 @@ +import { UserStatus as UserStatusType } from '@rocket.chat/core-typings'; import { Button, PositionAnimated, Options, useCursor, Box } from '@rocket.chat/fuselage'; -import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react'; +import type { Placements } from '@rocket.chat/fuselage-hooks'; +import { useSetting, useTranslation } from '@rocket.chat/ui-contexts'; +import React, { ReactElement, ComponentProps, useRef, useCallback, useState, useMemo, useEffect } from 'react'; -import { useSetting } from '../contexts/SettingsContext'; -import { useTranslation } from '../contexts/TranslationContext'; import { UserStatus } from './UserStatus'; -const UserStatusMenu = ({ onChange, optionWidth = undefined, initialStatus = 'offline', placement = 'bottom-end', ...props }) => { +type UserStatusMenuProps = { + margin: ComponentProps['margin']; + onChange: (type: UserStatusType) => void; + initialStatus?: UserStatusType; + optionWidth?: ComponentProps['width']; + placement?: Placements; +}; + +const UserStatusMenu = ({ + margin, + onChange, + initialStatus = UserStatusType.OFFLINE, + optionWidth = undefined, + placement = 'bottom-end', +}: UserStatusMenuProps): ReactElement => { const t = useTranslation(); const [status, setStatus] = useState(initialStatus); - const allowInvisibleStatus = useSetting('Accounts_AllowInvisibleStatusOption'); + const allowInvisibleStatus = useSetting('Accounts_AllowInvisibleStatusOption') as boolean; const options = useMemo(() => { - const renderOption = (status, label) => ( + const renderOption = (status: UserStatusType, label: string): ReactElement => ( @@ -20,14 +35,14 @@ const UserStatusMenu = ({ onChange, optionWidth = undefined, initialStatus = 'of ); - const statuses = [ - ['online', renderOption('online', t('Online'))], - ['away', renderOption('away', t('Away'))], - ['busy', renderOption('busy', t('Busy'))], + const statuses: Array<[value: UserStatusType, label: ReactElement]> = [ + [UserStatusType.ONLINE, renderOption(UserStatusType.ONLINE, t('Online'))], + [UserStatusType.AWAY, renderOption(UserStatusType.AWAY, t('Away'))], + [UserStatusType.BUSY, renderOption(UserStatusType.BUSY, t('Busy'))], ]; if (allowInvisibleStatus) { - statuses.push(['offline', renderOption('offline', t('Offline'))]); + statuses.push([UserStatusType.OFFLINE, renderOption(UserStatusType.OFFLINE, t('Offline'))]); } return statuses; @@ -39,9 +54,13 @@ const UserStatusMenu = ({ onChange, optionWidth = undefined, initialStatus = 'of hide(); }); - const ref = useRef(); + const ref = useRef(null); const onClick = useCallback(() => { - ref.current.focus() & show(); + if (!ref?.current) { + return; + } + ref.current.focus(); + show(); ref.current.classList.add('focus-visible'); }, [show]); @@ -58,7 +77,7 @@ const UserStatusMenu = ({ onChange, optionWidth = undefined, initialStatus = 'of return ( <> - From ee90b972501161e2564fbaedce4f0e908a5e4cdb Mon Sep 17 00:00:00 2001 From: Kunal Verma <67605729+Kunalvrm555@users.noreply.github.com> Date: Thu, 12 May 2022 23:40:07 +0530 Subject: [PATCH 3/4] Rename UserStatusMenu.js to UserStatusMenu.tsx --- client/components/{UserStatusMenu.js => UserStatusMenu.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename client/components/{UserStatusMenu.js => UserStatusMenu.tsx} (100%) diff --git a/client/components/UserStatusMenu.js b/client/components/UserStatusMenu.tsx similarity index 100% rename from client/components/UserStatusMenu.js rename to client/components/UserStatusMenu.tsx From 8fc509b34bbff24365fe64efe3f7c3c152881435 Mon Sep 17 00:00:00 2001 From: Debdut Chakraborty Date: Thu, 12 May 2022 18:22:45 +0000 Subject: [PATCH 4/4] Use correct file path --- .../client/components/UserStatusMenu.tsx | 2 +- client/components/UserStatusMenu.tsx | 90 ------------------- 2 files changed, 1 insertion(+), 91 deletions(-) delete mode 100644 client/components/UserStatusMenu.tsx diff --git a/apps/meteor/client/components/UserStatusMenu.tsx b/apps/meteor/client/components/UserStatusMenu.tsx index c435f26cc8e1..5df7dd7c33cc 100644 --- a/apps/meteor/client/components/UserStatusMenu.tsx +++ b/apps/meteor/client/components/UserStatusMenu.tsx @@ -42,7 +42,7 @@ const UserStatusMenu = ({ ]; if (allowInvisibleStatus) { - statuses.push([UserStatusType.OFFLINE, renderOption(UserStatusType.OFFLINE, t('Invisible'))]); + statuses.push([UserStatusType.OFFLINE, renderOption(UserStatusType.OFFLINE, t('Offline'))]); } return statuses; diff --git a/client/components/UserStatusMenu.tsx b/client/components/UserStatusMenu.tsx deleted file mode 100644 index 5df7dd7c33cc..000000000000 --- a/client/components/UserStatusMenu.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { UserStatus as UserStatusType } from '@rocket.chat/core-typings'; -import { Button, PositionAnimated, Options, useCursor, Box } from '@rocket.chat/fuselage'; -import type { Placements } from '@rocket.chat/fuselage-hooks'; -import { useSetting, useTranslation } from '@rocket.chat/ui-contexts'; -import React, { ReactElement, ComponentProps, useRef, useCallback, useState, useMemo, useEffect } from 'react'; - -import { UserStatus } from './UserStatus'; - -type UserStatusMenuProps = { - margin: ComponentProps['margin']; - onChange: (type: UserStatusType) => void; - initialStatus?: UserStatusType; - optionWidth?: ComponentProps['width']; - placement?: Placements; -}; - -const UserStatusMenu = ({ - margin, - onChange, - initialStatus = UserStatusType.OFFLINE, - optionWidth = undefined, - placement = 'bottom-end', -}: UserStatusMenuProps): ReactElement => { - const t = useTranslation(); - const [status, setStatus] = useState(initialStatus); - const allowInvisibleStatus = useSetting('Accounts_AllowInvisibleStatusOption') as boolean; - - const options = useMemo(() => { - const renderOption = (status: UserStatusType, label: string): ReactElement => ( - - - - - {label} - - ); - - const statuses: Array<[value: UserStatusType, label: ReactElement]> = [ - [UserStatusType.ONLINE, renderOption(UserStatusType.ONLINE, t('Online'))], - [UserStatusType.AWAY, renderOption(UserStatusType.AWAY, t('Away'))], - [UserStatusType.BUSY, renderOption(UserStatusType.BUSY, t('Busy'))], - ]; - - if (allowInvisibleStatus) { - statuses.push([UserStatusType.OFFLINE, renderOption(UserStatusType.OFFLINE, t('Offline'))]); - } - - return statuses; - }, [t, allowInvisibleStatus]); - - const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = useCursor(-1, options, ([selected], [, hide]) => { - setStatus(selected); - reset(); - hide(); - }); - - const ref = useRef(null); - const onClick = useCallback(() => { - if (!ref?.current) { - return; - } - ref.current.focus(); - show(); - ref.current.classList.add('focus-visible'); - }, [show]); - - const handleSelection = useCallback( - ([selected]) => { - setStatus(selected); - reset(); - hide(); - }, - [hide, reset], - ); - - useEffect(() => onChange(status), [status, onChange]); - - return ( - <> - - - - - - ); -}; - -export default UserStatusMenu;