Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2640 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3588 stevensc 1 
/* eslint-disable react/prop-types */
1 www 2 
import React, { useMemo } from "react";
3 
import { useDropzone } from "react-dropzone";
4 
 
5 
const baseStyle = {
6 
  flex: 1,
7 
  display: "flex",
8 
  flexDirection: "column",
9 
  alignItems: "center",
10 
  justifyContent: "center",
11 
  width: "100%",
12 
  height: "100%",
13 
  borderWidth: 2,
2640 stevensc 14 
  borderRadius: 10,
1 www 15 
  borderColor: "#eeeeee",
16 
  borderStyle: "dashed",
17 
  color: "#bdbdbd",
18 
  outline: "none",
19 
  transition: "border .24s ease-in-out",
20 
};
21 
 
22 
const activeStyle = {
23 
  borderColor: "#2196f3",
24 
};
25 
 
26 
const acceptStyle = {
27 
  borderColor: "#00e676",
28 
};
29 
 
30 
const rejectStyle = {
31 
  borderColor: "#ff1744",
32 
};
33 
 
34 
function MyDropzone(props) {
35 
  const { onDrop, onDropRejected } = props;
36 
 
37 
  const {
38 
    getRootProps,
39 
    getInputProps,
40 
    isDragActive,
41 
    isDragAccept,
42 
    isDragReject,
43 
  } = useDropzone({
44 
    multiple: false,
45 
    accept: "image/jpeg, image/png, image/jpg",
46 
    onDropAccepted: (acceptedFiles) => {
47 
      onDrop(acceptedFiles[0]);
48 
    },
49 
    onDropRejected: (acceptedFiles) => {
50 
      onDropRejected(acceptedFiles);
51 
    },
52 
  });
53 
 
54 
  const style = useMemo(
55 
    () => ({
56 
      ...baseStyle,
57 
      ...(isDragActive ? activeStyle : {}),
58 
      ...(isDragAccept ? acceptStyle : {}),
59 
      ...(isDragReject ? rejectStyle : {}),
60 
    }),
61 
    [isDragActive, isDragReject, isDragAccept]
62 
  );
63 
 
64 
  return (
65 
    <div {...getRootProps({ style })}>
66 
      <input {...getInputProps()} />
67 
      <p>Haz click o arrastra la imagen aqui</p>
68 
      Tamaño recomendado: 180x180
69 
    </div>
70 
  );
71 
}
72 
 
73 
export default MyDropzone;