Rocket.Chat/client/sidebar/Item/Extended.js

import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
import React, { memo, useState } from 'react';

import { useShortTimeAgo } from '../../hooks/useTimeAgo';

const Extended = ({
	icon,
	title = '',
	avatar,
	actions,
	href,
	time,
	menu,
	menuOptions,
	subtitle = '',
	badges,
	threadUnread,
	unread,
	selected,
	...props
}) => {
	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}</Sidebar.Item.Avatar>}
			<Sidebar.Item.Content>
				<Sidebar.Item.Wrapper>
					{icon}
					<Sidebar.Item.Title
						data-qa='sidebar-item-title'
						className={unread && 'rcx-sidebar-item--highlighted'}
					>
						{title}
					</Sidebar.Item.Title>
					{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
				</Sidebar.Item.Wrapper>
				<Sidebar.Item.Wrapper>
					<Sidebar.Item.Subtitle
						tabIndex='-1'
						className={unread && 'rcx-sidebar-item--highlighted'}
					>
						{subtitle}
					</Sidebar.Item.Subtitle>
					<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
					{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>
					{<Sidebar.Item.Actions>{actions}</Sidebar.Item.Actions>}
				</Sidebar.Item.Container>
			)}
		</Sidebar.Item>
	);
};

export default memo(Extended);