Chore: Convert sidebar/item

RocketChat · May 25, 2022 · 43abfa3 · 43abfa3
1 parent 574e82d
commit 43abfa3
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 23 deletions.
diff --git a/apps/meteor/client/sidebar/Item/Condensed.js → .../meteor/client/sidebar/Item/Condensed.tsx b/apps/meteor/client/sidebar/Item/Condensed.js → .../meteor/client/sidebar/Item/Condensed.tsx
@@ -1,8 +1,20 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { FC, memo, ReactElement, useState } from 'react';
 
-const Condensed = ({ icon, title = '', titleIcon, avatar, actions, href, menuOptions, unread, menu, badges, threadUnread, ...props }) => {
+type CondensedProps = {
+	title: ReactElement;
+	titleIcon?: ReactElement;
+	avatar: ReactElement | boolean;
+	icon?: IconProps['name'];
+	actions?: ReactElement;
+	href?: string;
+	unread?: boolean;
+	menu?: () => ReactElement;
+	badges?: ReactElement;
+};
+
+const Condensed: FC<CondensedProps> = ({ icon, title = '', avatar, actions, href, unread, menu, badges, ...props }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -20,7 +32,7 @@ const Condensed = ({ icon, title = '', titleIcon, avatar, actions, href, menuOpt
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Wrapper>
 					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+					<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 						{title}
 					</Sidebar.Item.Title>
 				</Sidebar.Item.Wrapper>

diff --git a/apps/meteor/client/sidebar/Item/Extended.js → apps/meteor/client/sidebar/Item/Extended.tsx b/apps/meteor/client/sidebar/Item/Extended.js → apps/meteor/client/sidebar/Item/Extended.tsx
@@ -1,6 +1,6 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { memo, useState, VFC } from 'react';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
 
@@ -21,19 +21,34 @@ import { useShortTimeAgo } from '../../hooks/useTimeAgo';
  * @param {any} props.unread
  * @param {any} props.selected
  */
-const Extended = ({
+
+type ExtendedProps = {
+	icon?: IconProps['name'];
+	title?: React.ReactNode;
+	titleIcon?: React.ReactNode;
+	avatar?: React.ReactNode | boolean;
+	actions?: React.ReactNode;
+	href?: string;
+	time?: any;
+	menu?: () => React.ReactNode;
+	menuOptions?: any;
+	subtitle?: React.ReactNode;
+	badges?: React.ReactNode;
+	threadUnread?: boolean;
+	unread?: boolean;
+	selected?: boolean;
+};
+
+const Extended: VFC<ExtendedProps> = ({
 	icon,
 	title = '',
 	avatar,
 	actions,
 	href,
 	time,
 	menu,
-	menuOptions,
 	subtitle = '',
-	titleIcon,
 	badges,
-	threadUnread,
 	unread,
 	selected,
 	...props
@@ -52,23 +67,21 @@ const Extended = ({
 	};
 
 	return (
-		<Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} href={href} clickable={!!href}>
+		aria-selected={selected} selected={selected} highlighted={unread} {...props} href={String(href)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Content>
 					<Sidebar.Item.Wrapper>
 						{icon}
-						<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+						<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 							{title}
 						</Sidebar.Item.Title>
 						{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
 					</Sidebar.Item.Wrapper>
 				</Sidebar.Item.Content>
 				<Sidebar.Item.Content>
 					<Sidebar.Item.Wrapper>
-						<Sidebar.Item.Subtitle tabIndex='-1' className={unread && 'rcx-sidebar-item--highlighted'}>
-							{subtitle}
-						</Sidebar.Item.Subtitle>
+						<Sidebar.Item.Subtitle className={(unread && 'rcx-sidebar-item--highlighted') as string}>{subtitle}</Sidebar.Item.Subtitle>
 						<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
 						{menu && (
 							<Sidebar.Item.Menu {...handleMenuEvent}>

diff --git a/...r/client/sidebar/Item/ExtendedSkeleton.js → .../client/sidebar/Item/ExtendedSkeleton.tsx b/...r/client/sidebar/Item/ExtendedSkeleton.js → .../client/sidebar/Item/ExtendedSkeleton.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import Extended from './Extended';
 
-const ExtendedSkeleton = ({ showAvatar }) => (
+const ExtendedSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x44'>
 		<Extended
 			title={<Skeleton width='100%' />}

diff --git a/apps/meteor/client/sidebar/Item/Medium.js → apps/meteor/client/sidebar/Item/Medium.tsx b/apps/meteor/client/sidebar/Item/Medium.js → apps/meteor/client/sidebar/Item/Medium.tsx
@@ -1,8 +1,20 @@
 import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { memo, useState, VFC } from 'react';
 
-const Medium = ({ icon, title = '', titleIcon, avatar, actions, href, menuOptions, badges, unread, threadUnread, menu, ...props }) => {
+type MediumProps = {
+	title: React.ReactNode;
+	titleIcon?: React.ReactNode;
+	avatar: React.ReactNode | boolean;
+	icon?: string;
+	actions?: React.ReactNode;
+	href?: string;
+	unread?: boolean;
+	menu?: () => React.ReactNode;
+	badges?: React.ReactNode;
+};
+
+const Medium: VFC<MediumProps> = ({ icon, title = '', avatar, actions, href, badges, unread, menu, ...props }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -20,7 +32,7 @@ const Medium = ({ icon, title = '', titleIcon, avatar, actions, href, menuOption
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Wrapper>
 					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+					<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 						{title}
 					</Sidebar.Item.Title>
 				</Sidebar.Item.Wrapper>

diff --git a/...debar/Item/skeletons/CondensedSkeleton.js → ...ebar/Item/skeletons/CondensedSkeleton.tsx b/...debar/Item/skeletons/CondensedSkeleton.js → ...ebar/Item/skeletons/CondensedSkeleton.tsx
@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Condensed from '../Condensed';
 
-const CondensedSkeleton = ({ showAvatar }) => (
+const CondensedSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x28'>
 		<Condensed
 			title={<Skeleton width='100%' />}

diff --git a/.../sidebar/Item/skeletons/MediumSkeleton.js → ...sidebar/Item/skeletons/MediumSkeleton.tsx b/.../sidebar/Item/skeletons/MediumSkeleton.js → ...sidebar/Item/skeletons/MediumSkeleton.tsx
@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Medium from '../Medium';
 
-const MediumSkeleton = ({ showAvatar }) => (
+const MediumSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x36'>
 		<Medium
 			title={<Skeleton width='100%' />}