5d9e96033e
- Refactored CustomAvatar, CustomColordLabel, CustomNumberLabel, and ProjectStatusIcon components to utilize React.forwardRef for improved ref handling. - Introduced TooltipWrapper component to avoid findDOMNode warnings in React StrictMode, ensuring better compatibility with Ant Design's Tooltip. - Updated TaskRow component to enhance layout and tooltip functionality for task display names, improving user experience and accessibility.
38 lines
905 B
TypeScript
38 lines
905 B
TypeScript
import React from 'react';
|
|
import Tooltip from 'antd/es/tooltip';
|
|
import Avatar from 'antd/es/avatar';
|
|
|
|
import { AvatarNamesMap } from '../shared/constants';
|
|
|
|
interface CustomAvatarProps {
|
|
avatarName: string;
|
|
size?: number;
|
|
}
|
|
|
|
const CustomAvatar = React.forwardRef<HTMLDivElement, CustomAvatarProps>(
|
|
({ avatarName, size = 32 }, ref) => {
|
|
const avatarCharacter = avatarName[0].toUpperCase();
|
|
|
|
return (
|
|
<Tooltip title={avatarName}>
|
|
<div ref={ref} style={{ display: 'inline-block' }}>
|
|
<Avatar
|
|
style={{
|
|
backgroundColor: AvatarNamesMap[avatarCharacter],
|
|
verticalAlign: 'middle',
|
|
width: size,
|
|
height: size,
|
|
}}
|
|
>
|
|
{avatarCharacter}
|
|
</Avatar>
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
);
|
|
|
|
CustomAvatar.displayName = 'CustomAvatar';
|
|
|
|
export default CustomAvatar;
|