Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 7427 Rev 15267
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable no-mixed-spaces-and-tabs */
1 
import React, { useState, useCallback, useEffect } from "react";
 2 
import React, { useState, useCallback, useEffect } from 'react'
2 
import { useDropzone } from "react-dropzone";
 3 
import { useDropzone } from 'react-dropzone'
3 
import { baseStyle, imgStyle, thumbsContainerStyle } from "../../assets/styles/js-styles/Dropzone";
 4 
import { baseStyle, imgStyle, thumbsContainerStyle } from '../../assets/styles/js-styles/Dropzone'
4 
import FilePreview from "./FilePreview";
 5 
import FilePreview from './FilePreview'
5 
 
 6 
 
6 
const DropzoneComponent = React.memo(({
 7 
const DropzoneComponent = ({
7 
    modalType,
 8 
	modalType,
8 
    onUploaded,
 9 
	onUploaded,
9 
    settedFile,
 10 
	settedFile,
10 
    recomendationText
 11 
	recomendationText
11 
}) => {
 12 
}) => {
Línea 12... Línea 13...
12 
 
 13 
 
13 
    const [errors, setErrors] = useState([]);
 14 
	const [errors, setErrors] = useState([])
Línea 14... Línea 15...
14 
    const [files, setFiles] = useState([]);
 15 
	const [files, setFiles] = useState([])
15 
 
 16 
 
16 
    const onDropRejected = useCallback((rejectedFiles) => {
 17 
	const onDropRejected = useCallback((rejectedFiles) => {
17 
        rejectedFiles.map((fileRejection) => {
 18 
		rejectedFiles.map((fileRejection) => {
18 
            switch (fileRejection.errors[0].code) {
 19 
			switch (fileRejection.errors[0].code) {
19 
                case "too-many-files":
 20 
			case 'too-many-files':
20 
                    setErrors([...errors, "solo puedes agregar 1 archivo"]);
 21 
				setErrors([...errors, 'solo puedes agregar 1 archivo'])
21 
                    break;
 22 
				break
22 
                case "file-invalid-type":
 23 
			case 'file-invalid-type':
23 
                    setErrors([...errors, "por favor seleccione un archivo valido"]);
 24 
				setErrors([...errors, 'por favor seleccione un archivo valido'])
24 
                    break;
 25 
				break
25 
                default:
 26 
			default:
26 
                    setErrors(errors);
 27 
				setErrors(errors)
27 
                    break;
 28 
				break
28 
            }
 29 
			}
29 
        });
 30 
		})
30 
    }, []);
 31 
	}, [])
31 
 
 32 
 
32 
    useEffect(() => {
 33 
	useEffect(() => {
33 
        if (settedFile) setFiles([settedFile]);
 34 
		if (settedFile) setFiles([settedFile])
34 
    }, [settedFile]);
 35 
	}, [settedFile])
35 
 
 36 
 
36 
    const acceptedMimeTypes = {
 37 
	const acceptedMimeTypes = {
37 
        IMAGE: "image/jpeg, image/png, image/jpg",
 38 
		IMAGE: 'image/jpeg, image/png, image/jpg',
38 
        FILE: "application/pdf",
 39 
		FILE: 'application/pdf',
39 
        VIDEO: "video/mp4, video/mpeg, video/webm",
 40 
		VIDEO: 'video/mp4, video/mpeg, video/webm',
40 
        CHAT: "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg"
 41 
		CHAT: 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
41 
    }
 42 
	}
42 
 
 43 
 
43 
    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
 44 
	const { getRootProps, getInputProps } = useDropzone({
44 
        accept: acceptedMimeTypes[modalType],
 45 
		accept: acceptedMimeTypes[modalType],
45 
        multiple: false,
 46 
		multiple: false,
46 
        onDrop: (accepted) => {
 47 
		onDrop: (accepted) => {
47 
            onUploaded(accepted[0]);
 48 
			onUploaded(accepted[0])
48 
            setFiles(accepted[0]);
 49 
			setFiles(accepted[0])
49 
        },
 50 
		},
50 
        onDropRejected,
 51 
		onDropRejected,
51 
        onDropAccepted: () => {
 52 
		onDropAccepted: () => {
52 
            setErrors([]);
 53 
			setErrors([])
53 
        },
 54 
		},
54 
        maxFiles: 1,
 55 
		maxFiles: 1,
55 
    })
 56 
	})
56 
 
 57 
 
57 
 
 58 
 
58 
    const onDeleteFileHandler = (id) => {
 59 
	const onDeleteFileHandler = (id) => {
59 
        onUploaded('');
 60 
		onUploaded('')
60 
        setFiles(files.filter(file => file !== id));
 61 
		setFiles(files.filter(file => file !== id))
61 
    };
 62 
	}
62 
 
 63 
 
63 
    const filePreviewOptions = (modalType, file) => {
 64 
	const filePreviewOptions = (modalType, file) => {
64 
        const options = {
 65 
		const options = {
65 
            IMAGE: <img src={URL.createObjectURL(file)} style={imgStyle} />,
 66 
			IMAGE: <img src={URL.createObjectURL(file)} style={imgStyle} />,
66 
            FILE: <object data={URL.createObjectURL(file)} type="application/pdf" width="400" height="200" />,
 67 
			FILE: <object data={URL.createObjectURL(file)} type="application/pdf" width="400" height="200" />,
67 
            VIDEO: <video src={URL.createObjectURL(file)} width="400" height="300" controls autoPlay muted />
 68 
			VIDEO: <video src={URL.createObjectURL(file)} width="400" height="300" controls autoPlay muted />
68 
        }
 69 
		}
69 
 
 70 
 
70 
        return options[modalType]
 71 
		return options[modalType]
71 
    }
 72 
	}
72 
 
 73 
 
73 
    return (
 - 
 
74 
        <div>
 74 
	return (
75 
            {
 - 
 
76 
                !files.length
 75 
		<div>
77 
                &&
 76 
			{!files.length &&
78 
                <div {...getRootProps({ className: "dropzone", style: baseStyle })}>
 77 
                <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
79 
                    <input {...getInputProps()} />
 78 
                	<input {...getInputProps()} />
80 
                    <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
 79 
                	<p>Arrastra el archivo aqui, o haga click para seleccionar</p>
81 
                    {recomendationText}
 80 
                	{recomendationText}
82 
                </div>
 81 
                </div>
83 
            }
 82 
			}
84 
            <aside>
 - 
 
85 
                <div style={thumbsContainerStyle}>
 83 
			<aside>
86 
                    {
 84 
				<div style={thumbsContainerStyle}>
87 
                        files.map((file, index) =>
 85 
					{files.map((file, index) =>
88 
                            <FilePreview
 86 
						<FilePreview
89 
                                onDeleteFileHandler={() => onDeleteFileHandler(file)}
 87 
							onDeleteFileHandler={() => onDeleteFileHandler(file)}
90 
                                key={index}
 88 
							key={index}
91 
                            >
 89 
						>
92 
                                {filePreviewOptions(modalType, file)}
 - 
 
93 
                            </FilePreview>
 90 
							{filePreviewOptions(modalType, file)}
94 
                        )
 91 
						</FilePreview>
95 
                    }
 92 
					)}
96 
                </div>
 93 
				</div>
97 
            </aside>
 94 
			</aside>
98 
        </div>
 95 
		</div>
Línea 99... Línea -...
99 
    );
 - 
 
100 
});
 96 
	)
- 
 
 97 
}
101 
 
 98