Proyectos de Subversion LeadersLinked - SPA

import React, { useCallback, useState } from 'react'

import { useSelector } from 'react-redux'

import parse from 'html-react-parser'

import styled from 'styled-components'

const StyledParaphase = styled.p`

  color: ${(props) => props.theme.font.color.primary};

  font-size: 14px;

  line-height: 1.2;

`

const StyledViewMore = styled.span`

  cursor: pointer;

  color: #00a6ff;

  margin-left: 5px;

`

const Paraphrase = ({ children, ...rest }) => {

  const [isReadMoreActive, setIsReadMoreActive] = useState(false)

  const { read_less, read_more } = useSelector(({ intl }) => intl.labels)

  const readMore = () => {

    setIsReadMoreActive(!isReadMoreActive)

  }

  const htmlParsedText = useCallback(

    (fullStringText = '') => {

      if (typeof fullStringText !== 'string') {

        return 'Children prop must be a string'

      }

      if (fullStringText.length > 500) {

        const shortenedString = fullStringText.substring(0, 500)

        const shortenedText = `${shortenedString}...`

        return (

          <>

            {isReadMoreActive ? parse(fullStringText) : parse(shortenedText)}

            <StyledViewMore onClick={readMore}>

              {isReadMoreActive ? read_less : read_more}

            </StyledViewMore>

          </>

        )

      }

      return parse(fullStringText)

    },

    [isReadMoreActive]

  )

  return <StyledParaphase {...rest}>{htmlParsedText(children)}</StyledParaphase>

}

export default Paraphrase