From 7d84caab67cee71d69d25b2f277af84483cae5c5 Mon Sep 17 00:00:00 2001
From: Martin Schoeler <martin.schoeler@rocket.chat>
Date: Sat, 21 Nov 2020 00:05:01 -0300
Subject: [PATCH] [FIX] Channel actions not working when reduce motion is
 active (#19638)

---
 client/sidebar/Item/Condensed.js                | 8 +++++++-
 client/sidebar/Item/Extended.js                 | 7 ++++++-
 client/sidebar/Item/Medium.js                   | 8 +++++++-
 client/sidebar/hooks/usePrefersReducedMotion.js | 4 ++++
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 client/sidebar/hooks/usePrefersReducedMotion.js

diff --git a/client/sidebar/Item/Condensed.js b/client/sidebar/Item/Condensed.js
index 4f07bb8cb09..c3d98a8c10b 100644
--- a/client/sidebar/Item/Condensed.js
+++ b/client/sidebar/Item/Condensed.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
+import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion';
+
 const Condensed = React.memo(({
 	icon,
 	title = '',
@@ -17,9 +19,13 @@ const Condensed = React.memo(({
 }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+
 	const handleMenu = useMutableCallback((e) => {
 		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
 	});
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu };
+
 	return <Sidebar.Item {...props} href={href} clickable={!!href}>
 		{avatar && <Sidebar.Item.Avatar>
 			{ avatar }
@@ -28,7 +34,7 @@ const Condensed = React.memo(({
 			{ icon }
 			<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>{title}</Sidebar.Item.Title>
 			{badges}
-			{menu && <Sidebar.Item.Menu onTransitionEnd={handleMenu}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
+			{menu && <Sidebar.Item.Menu {...handleMenuEvent}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
 		</Sidebar.Item.Content>
 		{ actions && <Sidebar.Item.Container>
 			{<Sidebar.Item.Actions>
diff --git a/client/sidebar/Item/Extended.js b/client/sidebar/Item/Extended.js
index 853450cdb5c..3ddd2644dc4 100644
--- a/client/sidebar/Item/Extended.js
+++ b/client/sidebar/Item/Extended.js
@@ -3,6 +3,7 @@ import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
+import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion';
 
 const Extended = React.memo(({
 	icon,
@@ -23,10 +24,14 @@ const Extended = React.memo(({
 	const formatDate = useShortTimeAgo();
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+
 	const handleMenu = useMutableCallback((e) => {
 		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
 	});
 
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu };
+
 	return <Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} href={href} clickable={!!href}>
 		{ avatar && <Sidebar.Item.Avatar>
 			{ avatar }
@@ -44,7 +49,7 @@ const Extended = React.memo(({
 					{ subtitle }
 				</Sidebar.Item.Subtitle>
 				<Sidebar.Item.Badge>{ badges }</Sidebar.Item.Badge>
-				{menu && <Sidebar.Item.Menu onTransitionEnd={handleMenu}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
+				{menu && <Sidebar.Item.Menu {...handleMenuEvent}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
 			</Sidebar.Item.Wrapper>
 		</Sidebar.Item.Content>
 		{ actions && <Sidebar.Item.Container>
diff --git a/client/sidebar/Item/Medium.js b/client/sidebar/Item/Medium.js
index 68220a03ade..803d2ddc498 100644
--- a/client/sidebar/Item/Medium.js
+++ b/client/sidebar/Item/Medium.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
+import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion';
+
 const Medium = React.memo(({
 	icon,
 	title = '',
@@ -17,9 +19,13 @@ const Medium = React.memo(({
 }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+
 	const handleMenu = useMutableCallback((e) => {
 		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
 	});
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu };
+
 	return <Sidebar.Item {...props} href={href} clickable={!!href}>
 		{avatar && <Sidebar.Item.Avatar>
 			{ avatar }
@@ -28,7 +34,7 @@ const Medium = React.memo(({
 			{ icon }
 			<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>{title}</Sidebar.Item.Title>
 			{badges}
-			{menu && <Sidebar.Item.Menu onTransitionEnd={handleMenu}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
+			{menu && <Sidebar.Item.Menu {...handleMenuEvent}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
 		</Sidebar.Item.Content>
 		{ actions && <Sidebar.Item.Container>
 			{<Sidebar.Item.Actions>
diff --git a/client/sidebar/hooks/usePrefersReducedMotion.js b/client/sidebar/hooks/usePrefersReducedMotion.js
new file mode 100644
index 00000000000..6f078578e08
--- /dev/null
+++ b/client/sidebar/hooks/usePrefersReducedMotion.js
@@ -0,0 +1,4 @@
+import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
+
+
+export const usePrefersReducedMotion = () => useMediaQueries('(prefers-reduced-motion: reduce)')[0];