2021-12-04 07:25:47 +01:00
|
|
|
import { FC, useMemo } from 'react';
|
|
|
|
import { Base, BaseProps } from './Base';
|
|
|
|
import { ColorVariantType } from './types/ColorVariantType';
|
2021-12-09 06:36:35 +01:00
|
|
|
import { FontSizeType } from './types/FontSizeType';
|
2021-12-04 07:25:47 +01:00
|
|
|
import { FontWeightType } from './types/FontWeightType';
|
|
|
|
|
|
|
|
export interface TextProps extends BaseProps<HTMLDivElement>
|
|
|
|
{
|
|
|
|
variant?: ColorVariantType;
|
|
|
|
fontWeight?: FontWeightType;
|
2021-12-09 06:36:35 +01:00
|
|
|
fontSize?: FontSizeType;
|
2021-12-04 07:25:47 +01:00
|
|
|
underline?: boolean;
|
2021-12-09 06:36:35 +01:00
|
|
|
truncate?: boolean;
|
2021-12-04 07:25:47 +01:00
|
|
|
center?: boolean;
|
2022-01-06 03:59:46 +01:00
|
|
|
textEnd?: boolean;
|
2021-12-04 07:25:47 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const Text: FC<TextProps> = props =>
|
|
|
|
{
|
2022-01-06 03:59:46 +01:00
|
|
|
const { variant = 'black', fontWeight = null, fontSize = 0, underline = false, truncate = false, center = false, textEnd = false, ...rest } = props;
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
const getClassNames = useMemo(() =>
|
|
|
|
{
|
|
|
|
const newClassNames: string[] = [ 'd-inline' ];
|
|
|
|
|
|
|
|
if(variant) newClassNames.push('text-' + variant);
|
|
|
|
|
|
|
|
if(fontWeight) newClassNames.push('fw-' + fontWeight);
|
|
|
|
|
2021-12-09 06:36:35 +01:00
|
|
|
if(fontSize) newClassNames.push('fs-' + fontSize);
|
|
|
|
|
2021-12-04 07:25:47 +01:00
|
|
|
if(underline) newClassNames.push('text-decoration-underline');
|
|
|
|
|
2021-12-09 06:36:35 +01:00
|
|
|
if(truncate) newClassNames.push('text-truncate');
|
|
|
|
|
2021-12-04 07:25:47 +01:00
|
|
|
if(center) newClassNames.push('text-center');
|
|
|
|
|
2022-01-06 03:59:46 +01:00
|
|
|
if(textEnd) newClassNames.push('text-end');
|
|
|
|
|
2021-12-04 07:25:47 +01:00
|
|
|
return newClassNames;
|
2022-01-06 03:59:46 +01:00
|
|
|
}, [ variant, fontWeight, fontSize, underline, truncate, center, textEnd ]);
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
return <Base classNames={ getClassNames } { ...rest } />;
|
|
|
|
}
|