Cacher is the code snippet organizer for pro developers

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.light {
  font-weight: 300;
}

.italic {
  font-style: italic;
}

import styles from "./index.module.css"

import React from "react"
import _ from "lodash"
import PropTypes from "prop-types"
import classnames from "classnames"

class Text extends React.PureComponent {
  static propTypes = {
    tagName: PropTypes.string,
    truncate: PropTypes.bool,
    light: PropTypes.bool,
    italic: PropTypes.bool,
    upperFirst: PropTypes.bool,
    classNames: PropTypes.string,
  }

  static defaultProps = {
    tagName: "span",
    truncate: false,
    light: false,
    italic: false,
    upperFirst: false,
    classNames: "",
  }

  render() {
    const {
      tagName,
      italic,
      light,
      truncate,
      upperFirst,
      className,
      children,
      ...rest
    } = this.props

    const mergedClassNames = classnames({
      [`${styles.light}`]: light,
      [`${styles.truncate}`]: truncate,
      [`${styles.italic}`]: italic,
      [`${className}`]: className !== "",
    })

    const Component = tagName

    const content = upperFirst ? _.upperFirst(children) : children

    return (
      <Component {...rest} className={mergedClassNames}>
        {content}
      </Component>
    )
  }
}

export default Text