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.
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Tooltip } from 'antd';
|
|
import { NumbersColorMap } from '@/shared/constants';
|
|
|
|
interface CustomNumberLabelProps {
|
|
labelList: string[];
|
|
namesString: string;
|
|
isDarkMode?: boolean;
|
|
color?: string; // Add color prop for label color
|
|
}
|
|
|
|
const CustomNumberLabel = React.forwardRef<HTMLSpanElement, CustomNumberLabelProps>(
|
|
({ labelList, namesString, isDarkMode = false, color }, ref) => {
|
|
// Use provided color, or fall back to NumbersColorMap based on first digit
|
|
const backgroundColor = color || (() => {
|
|
const firstDigit = namesString.match(/\d/)?.[0] || '0';
|
|
return NumbersColorMap[firstDigit] || NumbersColorMap['0'];
|
|
})();
|
|
|
|
return (
|
|
<Tooltip title={labelList.join(', ')}>
|
|
<span
|
|
ref={ref}
|
|
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white cursor-help"
|
|
style={{ backgroundColor }}
|
|
>
|
|
{namesString}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
);
|
|
|
|
CustomNumberLabel.displayName = 'CustomNumberLabel';
|
|
|
|
export default CustomNumberLabel;
|