2021-12-04 07:25:47 +01:00
|
|
|
import { FC, useMemo } from 'react';
|
|
|
|
import { Base, BaseProps } from './Base';
|
2022-02-21 05:28:33 +01:00
|
|
|
import { ColorVariantType, FontSizeType, FontWeightType, TextAlignType } 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-02-21 05:28:33 +01:00
|
|
|
align?: TextAlignType;
|
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;
|
2022-02-21 05:28:33 +01:00
|
|
|
wrap?: boolean;
|
2022-02-21 17:52:25 +01:00
|
|
|
noWrap?: boolean;
|
2022-02-21 05:28:33 +01:00
|
|
|
textBreak?: boolean;
|
2021-12-04 07:25:47 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const Text: FC<TextProps> = props =>
|
|
|
|
{
|
2022-02-21 17:52:25 +01:00
|
|
|
const { variant = 'black', fontWeight = null, fontSize = 0, align = null, bold = false, underline = false, italics = false, truncate = false, center = false, textEnd = false, small = false, wrap = false, noWrap = false, textBreak = 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);
|
|
|
|
|
2022-02-21 05:28:33 +01:00
|
|
|
if(align) newClassNames.push('text-' + align);
|
|
|
|
|
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');
|
|
|
|
|
2022-02-21 05:28:33 +01:00
|
|
|
if(wrap) newClassNames.push('text-wrap');
|
|
|
|
|
2022-02-21 17:52:25 +01:00
|
|
|
if(noWrap) newClassNames.push('text-nowrap');
|
|
|
|
|
2022-02-21 05:28:33 +01:00
|
|
|
if(textBreak) newClassNames.push('text-break');
|
|
|
|
|
2021-12-04 07:25:47 +01:00
|
|
|
return newClassNames;
|
2022-02-21 17:52:25 +01:00
|
|
|
}, [ variant, fontWeight, fontSize, align, bold, underline, italics, truncate, center, textEnd, small, wrap, noWrap, textBreak ]);
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
return <Base classNames={ getClassNames } { ...rest } />;
|
|
|
|
}
|