d970cbb626
- Updated `CustomColordLabel` and `CustomNumberLabel` components to improve color handling by removing the alpha channel logic and implementing a dynamic text color based on background luminance. - Enhanced task management slice to preserve timer state when fetching tasks, ensuring active timers are maintained across updates. - Modified socket handlers to synchronize timer state between task slices, improving consistency in task time tracking. - Refactored `useTaskTimer` hook to streamline local and Redux state synchronization for timer management.
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-1.5 py-0.5 rounded text-xs font-medium cursor-help"
|
|
style={{ backgroundColor, color: 'white' }}
|
|
>
|
|
{namesString}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
);
|
|
|
|
CustomNumberLabel.displayName = 'CustomNumberLabel';
|
|
|
|
export default CustomNumberLabel;
|