Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3610 Rev 3634
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { Box, Avatar, Typography, IconButton, Menu, MenuItem } from '@mui/material';
 2 
import { Box, Avatar, Typography } from '@mui/material';
3 
import { MoreVert, Report } from '@mui/icons-material';
 3 
import { Report } from '@mui/icons-material';
Línea 4... Línea 4...
4 
 
 4 
 
5 
export const MessageItem = ({ message, onReport }) => {
 - 
 
6 
  const [anchorEl, setAnchorEl] = React.useState(null);
 5 
import { Menu } from '@shared/components';
7 
  const open = Boolean(anchorEl);
 - 
 
8 
 
 - 
 
9 
  const handleClick = (event) => {
 - 
 
10 
    setAnchorEl(event.currentTarget);
 - 
 
11 
  };
 - 
 
12 
 
 - 
 
13 
  const handleClose = () => {
 - 
 
14 
    setAnchorEl(null);
 - 
 
15 
  };
 - 
 
16 
 
 - 
 
17 
  const handleReport = () => {
 - 
 
18 
    if (message.url_abuse_report) {
 - 
 
19 
      onReport({ url: message.url_abuse_report, id: message.uuid });
 - 
 
20 
    }
 - 
 
21 
    handleClose();
 - 
 
Línea -... Línea 6...
- 
 
 6 
import colors from '@styles/config/colors';
22 
  };
 7 
 
23 
 
 8 
export const MessageItem = ({ message, onReport }) => {
24 
  const renderMessageContent = () => {
 9 
  const renderMessageContent = () => {
25 
    switch (message.type) {
 10 
    switch (message.type) {
26 
      case 'text':
 11 
      case 'text':
Línea 96... Línea 81...
96 
          </Box>
 81 
          </Box>
97 
        )}
 82 
        )}
Línea 98... Línea 83...
98 
 
 83 
 
99 
        <Box
 84 
        <Box
- 
 
 85 
          sx={{
100 
          sx={{
 86 
            backgroundColor:
- 
 
 87 
              message.side === 'right'
- 
 
 88 
                ? colors.button.background.primary
- 
 
 89 
                : colors.button.background.secondary,
101 
            backgroundColor: message.side === 'right' ? 'primary.main' : 'grey.100',
 90 
            color:
102 
            color: message.side === 'right' ? 'white' : 'text.primary',
 91 
              message.side === 'right' ? colors.button.text.primary : colors.button.text.secondary,
103 
            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
 92 
            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
104 
            padding: 1.5,
 93 
            padding: 0.625,
105 
            position: 'relative',
 94 
            position: 'relative',
106 
            '&:hover .message-actions': {
 95 
            '&:hover .message-actions': {
107 
              opacity: 1
 96 
              opacity: 1
108 
            }
 97 
            }
109 
          }}
 98 
          }}
110 
        >
 99 
        >
Línea 111... Línea -...
111 
          {renderMessageContent()}
 - 
 
112 
 
 - 
 
113 
          <Box
 - 
 
114 
            sx={{
 - 
 
115 
              display: 'flex',
 100 
          {renderMessageContent()}
116 
              justifyContent: 'space-between',
 - 
 
117 
              alignItems: 'center',
 - 
 
118 
              mt: 0.5,
 - 
 
119 
              gap: 1
 - 
 
120 
            }}
 101 
 
121 
          >
 - 
 
122 
            <Typography variant='caption' color='text.secondary'>
 - 
 
Línea 123... Línea 102...
123 
              {message.date}
 102 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginTop: 1 }}>
124 
            </Typography>
 - 
 
125 
 
 - 
 
126 
            {message.url_abuse_report && (
 - 
 
127 
              <IconButton
 103 
            <Typography variant='caption'>{message.date}</Typography>
128 
                size='small'
 - 
 
129 
                onClick={handleClick}
 104 
 
130 
                className='message-actions'
 105 
            {message.abuse_report_url && (
131 
                sx={{
 106 
              <Menu className='message-actions'>
132 
                  opacity: 0,
 107 
                <Menu.Item onClick={() => onReport(message.abuse_report_url)}>
133 
                  transition: 'opacity 0.2s',
 108 
                  <Report sx={{ mr: 1 }} />
134 
                  color: 'inherit'
 - 
 
135 
                }}
 - 
 
136 
              >
 109 
                  Reportar mensaje
137 
                <MoreVert fontSize='small' />
 110 
                </Menu.Item>
138 
              </IconButton>
 111 
              </Menu>
139 
            )}
 112 
            )}
140 
          </Box>
 - 
 
141 
        </Box>
 - 
 
142 
      </Box>
 - 
 
143 
 
 - 
 
144 
      <Menu
 - 
 
145 
        anchorEl={anchorEl}
 - 
 
146 
        open={open}
 - 
 
147 
        onClose={handleClose}
 - 
 
148 
        anchorOrigin={{
 - 
 
149 
          vertical: 'top',
 - 
 
150 
          horizontal: 'right'
 - 
 
151 
        }}
 - 
 
152 
        transformOrigin={{
 - 
 
153 
          vertical: 'top',
 - 
 
154 
          horizontal: 'left'
 - 
 
155 
        }}
 - 
 
156 
      >
 - 
 
157 
        <MenuItem onClick={handleReport}>
 - 
 
158 
          <Report fontSize='small' sx={{ mr: 1 }} />
 - 
 
159 
          Reportar mensaje
 113 
          </Box>
160 
        </MenuItem>
 114 
        </Box>
161 
      </Menu>
 115 
      </Box>