70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import styled, { css } from "styled-components";
|
|
|
|
import { Base } from "../../themes";
|
|
import { NoUserSelect } from "../../constants";
|
|
import { getCorrectTextAlign } from "../../utils";
|
|
import { StyledTextProps, TextProps } from "./Text.types";
|
|
|
|
const commonTextStyles = css<TextProps & StyledTextProps>`
|
|
font-family: ${(props) => props.theme.fontFamily};
|
|
text-align: ${(props) =>
|
|
getCorrectTextAlign(props.textAlign || "", props.theme.interfaceDirection)};
|
|
color: ${(props) =>
|
|
props.colorProp ? props.colorProp : props.theme.text.color};
|
|
${(props) =>
|
|
props.truncate &&
|
|
css`
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
`}
|
|
`;
|
|
|
|
const styleCss = css<TextProps & StyledTextProps>`
|
|
font-size: ${(props) => props.theme.getCorrectFontSize(props.fontSizeProp)};
|
|
outline: 0 !important;
|
|
margin: 0;
|
|
font-weight: ${(props) =>
|
|
props.fontWeightProp
|
|
? props.fontWeightProp
|
|
: props.isBold
|
|
? 700
|
|
: props.theme.text.fontWeight};
|
|
|
|
${(props) =>
|
|
props.isItalic &&
|
|
css`
|
|
font-style: italic;
|
|
`}
|
|
${(props) =>
|
|
props.backgroundColor &&
|
|
css`
|
|
background-color: ${props.backgroundColor};
|
|
`}
|
|
${(props) =>
|
|
props.isInline
|
|
? css`
|
|
display: inline-block;
|
|
`
|
|
: props.display &&
|
|
css`
|
|
display: ${props.display};
|
|
`}
|
|
${(props) =>
|
|
props.lineHeight &&
|
|
css`
|
|
line-height: ${props.lineHeight};
|
|
`}
|
|
`;
|
|
const StyledText = styled.p<TextProps & StyledTextProps>`
|
|
${styleCss};
|
|
|
|
${commonTextStyles};
|
|
|
|
${(props) => props.noSelect && NoUserSelect}
|
|
`;
|
|
|
|
StyledText.defaultProps = { theme: Base };
|
|
|
|
export default StyledText;
|