Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1706 stevensc 1 
import React, { useMemo } from 'react'
1684 stevensc 2 
import { Box, styled } from '@mui/material'
3 
import { Check } from '@mui/icons-material'
4 
import parse from 'html-react-parser'
5 
 
6 
import Options from '../UI/Option'
7 
 
8 
const MessageTemplate = styled(Box)`
9 
  box-shadow: var(--light-shadow);
10 
  display: inline-flex;
11 
  flex-direction: column;
12 
  gap: 0.5rem;
13 
  margin-bottom: 0.5rem;
14 
  max-width: 70%;
15 
  min-width: 4rem;
16 
  padding: 0.5rem;
17 
  position: relative;
1685 stevensc 18 
  p {
1684 stevensc 19 
    color: var(--chat-color);
20 
    max-width: 100%;
21 
    overflow: hidden;
22 
    text-overflow: ellipsis;
23 
    word-break: break-word;
24 
  }
1685 stevensc 25 
  img,
26 
  video {
1684 stevensc 27 
    max-width: 250px;
28 
    max-height: 250px;
29 
    object-fit: contain;
30 
  }
1685 stevensc 31 
  svg,
32 
  small {
1684 stevensc 33 
    color: var(--subtitle-color);
34 
    font-size: 0.8rem;
35 
  }
1718 stevensc 36 
  .time {
37 
    display: inline-flex;
38 
    gap: 5px;
39 
  }
1684 stevensc 40 
  .emojione {
41 
    width: 1rem;
42 
    height: 1rem;
43 
  }
44 
`
45 
 
1699 stevensc 46 
export default function Message({ message, reportUrl, onReport }) {
1684 stevensc 47 
  const {
48 
    u,
49 
    type,
50 
    user_name,
51 
    not_received,
52 
    seen,
1701 stevensc 53 
    id,
1714 stevensc 54 
    content,
55 
    send,
56 
    contentType,
57 
    time
1684 stevensc 58 
  } = message
1706 stevensc 59 
  const options = useMemo(() => {
60 
    const actions = []
61 
    const reportAction = {
1714 stevensc 62 
      action: () => onReport({ url: reportUrl, id }),
1706 stevensc 63 
      label: 'Reportar'
64 
    }
65 
    if (reportUrl) actions.push(reportAction)
66 
    return actions
1714 stevensc 67 
  }, [reportUrl, id])
68 
 
1684 stevensc 69 
  const showName = type === 'group' && !u === 1
70 
 
71 
  const messagesContent = {
1714 stevensc 72 
    text: <p>{parse(emojione.shortnameToImage(content))}</p>,
73 
    image: <img src={content} alt='chat_image' />,
74 
    video: <video src={content} preload='none' controls />,
1684 stevensc 75 
    document: (
1714 stevensc 76 
      <a href={content} download>
1684 stevensc 77 
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
78 
      </a>
79 
    )
80 
  }
81 
 
82 
  return (
83 
    <>
84 
      {showName ? <span className='user_name'>{user_name}</span> : null}
85 
      <MessageTemplate
86 
        sx={
1714 stevensc 87 
          send
1684 stevensc 88 
            ? {
89 
                alignSelf: 'flex-end',
90 
                backgroundColor: '#eee',
91 
                borderRadius: '10px 0px 10px 10px',
92 
                marginRight: '0.5rem',
93 
                color: '#393939'
94 
              }
1685 stevensc 95 
            : {
96 
                alignSelf: 'flex-start',
97 
                backgroundColor: 'var(--chat-received)',
98 
                borderRadius: '0 10px 10px 10px',
99 
                marginLeft: '0.5rem'
100 
              }
1684 stevensc 101 
        }
102 
      >
1714 stevensc 103 
        {messagesContent[contentType]}
1684 stevensc 104 
 
105 
        <small className='time'>
106 
          <Check
107 
            sx={{
108 
              color: seen ? 'blue' : 'gray',
109 
              display: not_received ? 'none' : 'flex'
110 
            }}
111 
          />
1714 stevensc 112 
          {time}
1684 stevensc 113 
        </small>
114 
 
115 
        <Options options={options} right='-2.5rem' />
116 
      </MessageTemplate>
117 
    </>
118 
  )
119 
}