2024-08-11 14:25:10 +03:00
|
|
|
import clsx from 'clsx';
|
|
|
|
|
|
|
|
import { globals } from '@/utils/constants';
|
2024-08-19 19:16:29 +03:00
|
|
|
import { truncateToLastWord } from '@/utils/utils';
|
2024-08-11 14:25:10 +03:00
|
|
|
|
|
|
|
import { CProps } from '../props';
|
|
|
|
|
|
|
|
export interface TextContentProps extends CProps.Styling {
|
|
|
|
text: string;
|
|
|
|
maxLength?: number;
|
2024-09-02 18:34:18 +03:00
|
|
|
noTooltip?: boolean;
|
2024-08-11 14:25:10 +03:00
|
|
|
}
|
|
|
|
|
2024-09-02 18:34:18 +03:00
|
|
|
function TextContent({ className, text, maxLength, noTooltip, ...restProps }: TextContentProps) {
|
2024-08-19 19:16:29 +03:00
|
|
|
const truncated = maxLength ? truncateToLastWord(text, maxLength) : text;
|
2024-08-11 14:25:10 +03:00
|
|
|
const isTruncated = maxLength && text.length > maxLength;
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={clsx('text-xs text-pretty', className)}
|
2024-09-02 18:34:18 +03:00
|
|
|
data-tooltip-id={isTruncated && !noTooltip ? globals.value_tooltip : undefined}
|
|
|
|
data-tooltip-html={isTruncated && !noTooltip ? text : undefined}
|
2024-08-11 14:25:10 +03:00
|
|
|
{...restProps}
|
|
|
|
>
|
|
|
|
{truncated}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TextContent;
|