Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3644 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3644 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React, { useState } from 'react';
2 
import { IconButton } from '@mui/material';
 2 
import { Box, IconButton } from '@mui/material';
3 
import { AttachFile, SendRounded } from '@mui/icons-material';
 3 
import { AttachFile, EmojiEmotions, SendRounded } from '@mui/icons-material';
- 
 
 4 
import EmojiPicker from 'emoji-picker-react';
4 
 
 5 
 
5 
import { FileModal, Form, FormInput } from '@shared/components';
 6 
import { useModal } from '@shared/hooks';
- 
 
 7 
 
6 
import { useModal } from '@shared/hooks';
 8 
import { FileModal, Input, Menu } from '@shared/components';
7 
 
 9 
 
8 
export const ChatForm = ({ onSubmit }) => {
 10 
export const ChatForm = ({ onSubmit }) => {
- 
 
 11 
  const [message, setMessage] = useState('');
9 
  const [files, setFiles] = useState([]);
 12 
  const [file, setFile] = useState(null);
- 
 
 13 
 
10 
  const { showModal, closeModal } = useModal();
 14 
  const { showModal, closeModal } = useModal();
11 
 
 15 
 
12 
  const handleSubmit = (data) => {
 16 
  const handleInputChange = ({ target }) => {
13 
    onSubmit({ ...data, file: files[0] });
 17 
    setMessage(target.value);
- 
 
 18 
  };
- 
 
 19 
 
- 
 
 20 
  const onEmojiClick = (emojiObject) => {
- 
 
 21 
    setMessage((prevInput) => prevInput + emojiObject.emoji);
14 
  };
 22 
  };
15 
 
 23 
 
16 
  const attachFile = () => {
 24 
  const attachFile = () => {
17 
    showModal(
 25 
    showModal(
18 
      'Elegir archivo',
 26 
      'Elegir archivo',
19 
      <FileModal
 27 
      <FileModal
20 
        onSubmit={(data) => {
 28 
        onSubmit={(data) => {
21 
          setFiles(data);
 29 
          setFile(data);
22 
          closeModal();
 30 
          closeModal();
23 
        }}
 31 
        }}
24 
      />
 32 
      />
25 
    );
 33 
    );
26 
  };
 34 
  };
- 
 
 35 
 
- 
 
 36 
  const handleSubmit = () => {
- 
 
 37 
    if (!message.trim()) return;
- 
 
 38 
    onSubmit({ message, file });
- 
 
 39 
    setMessage('');
27 
  return (
 40 
    setFile(null);
28 
    <Form
 41 
  };
- 
 
 42 
 
29 
      defaultValues={{ message: '' }}
 43 
  const handleKeyDown = (e) => {
30 
      reset
 44 
    if (e.key === 'Enter') {
31 
      onSubmit={handleSubmit}
 45 
      handleSubmit();
- 
 
 46 
    }
- 
 
 47 
  };
- 
 
 48 
 
- 
 
 49 
  return (
32 
      style={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}
 50 
    <Box style={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>
- 
 
 51 
      <Menu icon={<EmojiEmotions />}>
- 
 
 52 
        <Menu.Item>
- 
 
 53 
          <EmojiPicker onEmojiClick={onEmojiClick} />
- 
 
 54 
        </Menu.Item>
33 
    >
 55 
      </Menu>
- 
 
 56 
 
34 
      <IconButton onClick={attachFile}>
 57 
      <IconButton onClick={attachFile}>
35 
        <AttachFile />
 58 
        <AttachFile />
36 
      </IconButton>
 59 
      </IconButton>
37 
      <FormInput
 60 
      <Input
38 
        name='message'
 61 
        name='message'
39 
        placeholder='Escribe un mensaje'
 62 
        placeholder='Escribe un mensaje'
- 
 
 63 
        onChange={handleInputChange}
40 
        autoComplete='off'
 64 
        value={message}
41 
        rules={{ required: 'No puede enviar un mensaje vacío' }}
 65 
        onKeyDown={handleKeyDown}
42 
        endAdornment={
 66 
        endAdornment={
43 
          <IconButton type='submit' sx={{ padding: 0.4 }}>
 67 
          <IconButton type='submit' sx={{ padding: 0.4 }} onClick={handleSubmit}>
44 
            <SendRounded />
 68 
            <SendRounded />
45 
          </IconButton>
 69 
          </IconButton>
46 
        }
 70 
        }
47 
      />
 71 
      />
48 
    </Form>
 72 
    </Box>
49 
  );
 73 
  );
50 
};
 74 
};