Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2850 | Rev 2892 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2850 Rev 2891
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState, useCallback } from 'react'
2 
import { Typography } from '@mui/material'
 2 
import { Typography } from '@mui/material'
3 
import parse from 'html-react-parser'
 - 
 
Línea -... Línea 3...
- 
 
 3 
 
- 
 
 4 
import { parseText } from '@utils'
4 
 
 5 
 
5 
export default function FeedDescription({ description }) {
 6 
export default function FeedDescription({ text = '' }) {
6 
  const [showMore, setShowMore] = useState(false)
 7 
  const [showMore, setShowMore] = useState(false)
Línea -... Línea 8...
- 
 
 8 
  const maxLength = 300
7 
  const text = description.replace(/<\/?p>/g, '')
 9 
 
- 
 
 10 
  const parsedText = useCallback(parseText(text), [text])
Línea 8... Línea 11...
8 
 
 11 
  const truncatedText = parsedText.slice(0, maxLength)
9 
  const toggleShowMore = () => setShowMore(!showMore)
 - 
 
10 
 
 - 
 
11 
  if (description.length > 120) {
 12 
  const isTruncated = parsedText.length > maxLength
- 
 
 13 
 
- 
 
 14 
  const toggleShowMore = useCallback(
Línea -... Línea 15...
- 
 
 15 
    () => setShowMore((prevState) => !prevState),
12 
    return (
 16 
    []
13 
      <Typography onClickCapture={toggleShowMore}>
 17 
  )
14 
        {parse(showMore ? text : text.slice(0, 120))}
 - 
 
15 
 
 - 
 
16 
        <Typography variant='body2' sx={{ cursor: 'pointer' }}>
 - 
 
17 
          {showMore ? ' ver menos' : '... ver más'}
 - 
 
Línea -... Línea 18...
- 
 
 18 
 
- 
 
 19 
  return (
- 
 
 20 
    <Typography onClick={toggleShowMore}>
- 
 
 21 
      {showMore ? parsedText : truncatedText}
- 
 
 22 
 
- 
 
 23 
      {isTruncated && (
- 
 
 24 
        <Typography
- 
 
 25 
          onClick={toggleShowMore}
- 
 
 26 
          variant='body2'
18 
        </Typography>
 27 
          color='primary'
- 
 
 28 
          sx={{ cursor: 'pointer' }}
- 
 
 29 
          aria-expanded={showMore}
- 
 
 30 
        >
19 
      </Typography>
 31 
          {showMore ? ' Mostrar menos' : '... Mostrar más'}