2021-12-04 07:25:47 +01:00
|
|
|
import { FC, useMemo } from 'react';
|
|
|
|
import { Base, BaseProps } from './Base';
|
2022-02-09 04:25:01 +01:00
|
|
|
import { ColorVariantType, FontSizeType, FontWeightType } from './types';
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
export interface TextProps extends BaseProps<HTMLDivElement>
|
|
|
|
{
|
|
|
|
variant?: ColorVariantType;
|
|
|
|
fontWeight?: FontWeightType;
|
2021-12-09 06:36:35 +01:00
|
|
|
fontSize?: FontSizeType;
|
2022-01-07 22:43:11 +01:00
|
|
|
bold?: boolean;
|
2021-12-04 07:25:47 +01:00
|
|
|
underline?: boolean;
|
2022-01-07 22:43:11 +01:00
|
|
|
italics?: 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;
|
2022-01-07 22:43:11 +01:00
|
|
|
small?: boolean;
|
2021-12-04 07:25:47 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const Text: FC<TextProps> = props =>
|
|
|
|
{
|
2022-01-07 22:43:11 +01:00
|
|
|
const { variant = 'black', fontWeight = null, fontSize = 0, bold = false, underline = false, italics = false, truncate = false, center = false, textEnd = false, small = 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);
|
|
|
|
|
2022-01-07 22:43:11 +01:00
|
|
|
if(bold) newClassNames.push('fw-bold');
|
|
|
|
|
2021-12-04 07:25:47 +01:00
|
|
|
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');
|
|
|
|
|
2022-01-07 22:43:11 +01:00
|
|
|
if(italics) newClassNames.push('fst-italic');
|
|
|
|
|
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');
|
|
|
|
|
2022-01-07 22:43:11 +01:00
|
|
|
if(small) newClassNames.push('small');
|
|
|
|
|
2021-12-04 07:25:47 +01:00
|
|
|
return newClassNames;
|
2022-01-07 22:43:11 +01:00
|
|
|
}, [ variant, fontWeight, fontSize, bold, underline, italics, truncate, center, textEnd, small ]);
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
return <Base classNames={ getClassNames } { ...rest } />;
|
|
|
|
}
|