98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
import * as React from "react";
|
|
import { Text, Classes } from "@blueprintjs/core";
|
|
import styled from "styled-components";
|
|
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
|
|
import { TextStyle } from "widgets/TextWidget";
|
|
import Interweave from "interweave";
|
|
import { UrlMatcher, EmailMatcher } from "interweave-autolink";
|
|
import { labelStyle } from "constants/DefaultTheme";
|
|
type TextStyleProps = {
|
|
accent: "primary" | "secondary" | "error";
|
|
};
|
|
|
|
export const BaseText = styled(Text)<TextStyleProps>``;
|
|
|
|
/*
|
|
Note:
|
|
-webkit-line-clamp may seem like a wierd way to doing this
|
|
however, it is getting more and more useful with more browser support.
|
|
It suffices for our target browsers
|
|
More info: https://css-tricks.com/line-clampin/
|
|
*/
|
|
|
|
export const TextContainer = styled.div`
|
|
&& {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
`;
|
|
export const StyledText = styled(Text)<{ scroll: boolean }>`
|
|
height: 100%;
|
|
overflow-y: ${props => (props.scroll ? "auto" : "hidden")};
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
align-items: ${props => (props.scroll ? "flex-start" : "center")};
|
|
&.bp3-heading {
|
|
font-weight: ${props => props.theme.fontWeights[3]};
|
|
font-size: ${props => props.theme.fontSizes[4]}px;
|
|
}
|
|
&.bp3-ui-text {
|
|
${labelStyle}
|
|
}
|
|
`;
|
|
|
|
export interface TextComponentProps extends ComponentProps {
|
|
text?: string;
|
|
ellipsize?: boolean;
|
|
textStyle?: TextStyle;
|
|
isLoading: boolean;
|
|
shouldScroll?: boolean;
|
|
}
|
|
|
|
class TextComponent extends React.Component<TextComponentProps> {
|
|
getTextClass(textStyle?: TextStyle) {
|
|
const className = [];
|
|
|
|
if (this.props.isLoading) {
|
|
className.push("bp3-skeleton");
|
|
}
|
|
switch (textStyle) {
|
|
case "HEADING":
|
|
className.push(Classes.HEADING);
|
|
break;
|
|
case "BODY":
|
|
className.push(Classes.RUNNING_TEXT);
|
|
break;
|
|
case "LABEL":
|
|
className.push(Classes.UI_TEXT);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
return className.join(" ");
|
|
}
|
|
|
|
render() {
|
|
const { textStyle, text, ellipsize } = this.props;
|
|
return (
|
|
<TextContainer>
|
|
<StyledText
|
|
scroll={!!this.props.shouldScroll}
|
|
className={this.getTextClass(textStyle)}
|
|
ellipsize={ellipsize}
|
|
>
|
|
<Interweave
|
|
content={text}
|
|
matchers={[new UrlMatcher("url"), new EmailMatcher("email")]}
|
|
/>
|
|
</StyledText>
|
|
</TextContainer>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default TextComponent;
|