refactor(components): enhance component structure and add forwardRef support
- 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.
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { Tooltip, TooltipProps } from 'antd';
|
||||
|
||||
interface TooltipWrapperProps extends Omit<TooltipProps, 'children'> {
|
||||
children: React.ReactElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* TooltipWrapper - A wrapper component that helps avoid findDOMNode warnings in React StrictMode
|
||||
*
|
||||
* This component ensures that the child element can properly receive refs from Ant Design's Tooltip
|
||||
* by wrapping it in a div with a ref when necessary.
|
||||
*/
|
||||
const TooltipWrapper = React.forwardRef<HTMLDivElement, TooltipWrapperProps>(
|
||||
({ children, ...tooltipProps }, ref) => {
|
||||
return (
|
||||
<Tooltip {...tooltipProps}>
|
||||
<div ref={ref} style={{ display: 'inline-block' }}>
|
||||
{children}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
TooltipWrapper.displayName = 'TooltipWrapper';
|
||||
|
||||
export default TooltipWrapper;
|
||||
Reference in New Issue
Block a user