Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

fix: wrap the UserAvatar component in forwardRef (#8461)

Browse Source 
This fixes another one of the warnings we have in our tests and is
probably a sane change to make anyway.
This commit is contained in:
Thomas Heartman 2024-10-16 14:58:34 +02:00 committed by GitHub
parent fe09ae214f
commit cb0a26941b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 77 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
View File

@ -1,8 +1,16 @@
import { styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import type { IGroupUser } from 'interfaces/group';
import { useMemo } from 'react';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; // usage
import {
type ForwardRefExoticComponent,
type FunctionComponent,
type RefAttributes,
useMemo,
} from 'react';
import {
type IUserAvatarProps,
UserAvatar,
} from 'component/common/UserAvatar/UserAvatar';
import { objectId } from 'utils/objectId';
import millify from 'millify';
@ -14,6 +22,12 @@ const StyledAvatars = styled('div')(({ theme }) => ({
justifyContent: 'start',
}));
export type AvatarComponentType =
| FunctionComponent<IUserAvatarProps>
| ForwardRefExoticComponent<
IUserAvatarProps & RefAttributes<HTMLDivElement>
>;
export const AvatarComponent = styled(UserAvatar)(({ theme }) => ({
outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
margin: 0,
@ -21,7 +35,7 @@ export const AvatarComponent = styled(UserAvatar)(({ theme }) => ({
'&:hover': {
outlineColor: theme.palette.primary.main,
},
}));
})) as AvatarComponentType;
type User = {
name: string;
@ -32,7 +46,7 @@ type User = {
type AvatarGroupProps = {
users: User[];
avatarLimit?: number;
AvatarComponent?: typeof UserAvatar;
AvatarComponent?: AvatarComponentType;
className?: string;
};
@ -44,7 +58,7 @@ export const AvatarGroup = ({ ...props }: AvatarGroupProps) => (
);
type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
AvatarComponent: typeof UserAvatar;
AvatarComponent: AvatarComponentType;
};
const MAX_OVERFLOW_DISPLAY_NUMBER = 99;

8
frontend/src/component/common/AvatarGroupFromOwners/AvatarGroupFromOwners.tsx
View File

@ -1,12 +1,14 @@
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import type { ProjectSchemaOwners } from 'openapi';
import type { UserAvatar } from '../UserAvatar/UserAvatar';
import { AvatarGroup } from '../AvatarGroup/AvatarGroup';
import {
type AvatarComponentType,
AvatarGroup,
} from '../AvatarGroup/AvatarGroup';
type Props = {
users: ProjectSchemaOwners;
avatarLimit?: number;
AvatarComponent?: typeof UserAvatar;
AvatarComponent?: AvatarComponentType;
className?: string;
};
export const AvatarGroupFromOwners: React.FC<Props> = ({ users, ...props }) => {

109
frontend/src/component/common/UserAvatar/UserAvatar.tsx
View File

@ -6,7 +6,7 @@ import {
type Theme,
} from '@mui/material';
import type { IUser } from 'interfaces/user';
import type { FC } from 'react';
import { forwardRef } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HtmlTooltip } from '../HtmlTooltip/HtmlTooltip';
const StyledAvatar = styled(Avatar)(({ theme }) => ({
@ -60,63 +60,60 @@ const TooltipMainContent = styled('div')(({ theme }) => ({
fontSize: theme.typography.body1.fontSize,
}));
export const UserAvatar: FC<IUserAvatarProps> = ({
user,
src,
className,
sx,
children,
disableTooltip,
...props
}) => {
let fallback: string | undefined;
if (!children && user) {
fallback = user?.name || user?.email || user?.username;
if (fallback?.includes(' ')) {
fallback = `${fallback.split(' ')[0][0]}${
fallback.split(' ')[1][0]
}`.toUpperCase();
} else if (fallback) {
fallback = fallback[0].toUpperCase();
export const UserAvatar = forwardRef<HTMLDivElement, IUserAvatarProps>(
({ user, src, className, sx, children, disableTooltip, ...props }, ref) => {
let fallback: string | undefined;
if (!children && user) {
fallback = user?.name || user?.email || user?.username;
if (fallback?.includes(' ')) {
fallback = `${fallback.split(' ')[0][0]}${
fallback.split(' ')[1][0]
}`.toUpperCase();
} else if (fallback) {
fallback = fallback[0].toUpperCase();
}
}
}
const Avatar = (
<StyledAvatar
className={className}
sx={sx}
{...props}
data-loading
alt={user?.name || user?.email || user?.username || 'Gravatar'}
src={src || user?.imageUrl}
>
<ConditionallyRender
condition={Boolean(fallback)}
show={fallback}
elseShow={children}
/>
</StyledAvatar>
);
const tooltip = disableTooltip ? undefined : tooltipContent(user);
if (tooltip) {
return (
<HtmlTooltip
arrow
describeChild
title={
<>
<TooltipSecondaryContent>
{tooltip.secondary}
</TooltipSecondaryContent>
<TooltipMainContent>{tooltip.main}</TooltipMainContent>
</>
}
const Avatar = (
<StyledAvatar
ref={ref}
className={className}
sx={sx}
{...props}
data-loading
alt={user?.name || user?.email || user?.username || 'Gravatar'}
src={src || user?.imageUrl}
>
{Avatar}
</HtmlTooltip>
<ConditionallyRender
condition={Boolean(fallback)}
show={fallback}
elseShow={children}
/>
</StyledAvatar>
);
}
return Avatar;
};
const tooltip = disableTooltip ? undefined : tooltipContent(user);
if (tooltip) {
return (
<HtmlTooltip
arrow
describeChild
title={
<>
<TooltipSecondaryContent>
{tooltip.secondary}
</TooltipSecondaryContent>
<TooltipMainContent>
{tooltip.main}
</TooltipMainContent>
</>
}
>
{Avatar}
</HtmlTooltip>
);
}
return Avatar;
},
);