[react] TypoComponent

Typo를 관리하는 컴포넌트.

 

테마에 지정해놓은 Typo의 값을 사용하는 것에만 집중했다.

 

import React from "react";
import { WithChildrenAndStyle } from "../../../interfaces";
import { styled } from "../../../styles/Themes";

export interface Props extends WithChildrenAndStyle {
  ellipse?: boolean;
  type?: "body" | "head";
  dp?: "block" | "inline" | "inline-block" | "flex";
  ws?: "pre" | "no-wrap" | "pre-wrap";
  s?: string;
  c?: string;
}

const getTypo = (props: any) => {
  const { type, s: size } = props;
  switch (type) {
    case "body":
      return props.theme.typo.body[size];
    case "head":
      return props.theme.typo.heading[size];
    default:
      return props.theme.typo.body[size];
  }
};

const TypoComponent = styled.span<any>`
  ${(props) => props.dp && `display: ${props.dp};`};
  ${(props) => props.ws && `white-space: ${props.ws};`};

  ${(props) =>
    props.ellipse &&
    `white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;`};

  ${(props) =>
    props.c && `color:${props.theme.common.colors[props.c]} !important`};
  ${(props) => getTypo(props)};
`;

const Typo: React.FC<Props> = (props: Props) => {
  const { children, ...rest } = props;
  return <TypoComponent {...rest}>{children}</TypoComponent>;
};

Typo.defaultProps = {
  type: "body",
  dp: "inline-block",
  ws: "pre-wrap",
  ellipse: false,
  c: "grey1",
  s: "r5",
};

export default Typo;

 

만들고 나서 혹시나 하고 typo component 키워드로 찾아보니 material-ui에서도 typography 컴포넌트를 사용하고 있었다.

 

허튼 생각은 아니었던 것 같아서 다행이다.

 

React Typography component - Material-UI