2020-08-26 08:34:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { useDropzone } from "react-dropzone";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
|
2021-02-10 07:29:18 +00:00
|
|
|
import StyledDragAndDrop from "./styled-drag-and-drop";
|
2020-08-26 08:34:01 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const DragAndDrop = (props) => {
|
2020-08-26 08:34:01 +00:00
|
|
|
const { isDropZone, children, dragging, className, ...rest } = props;
|
|
|
|
const classNameProp = className ? className : "";
|
|
|
|
|
2020-10-12 12:28:36 +00:00
|
|
|
const onDrop = (acceptedFiles, array) => {
|
|
|
|
acceptedFiles.length && props.onDrop && props.onDrop(acceptedFiles);
|
2020-08-26 08:34:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const { getRootProps, isDragActive } = useDropzone({
|
|
|
|
noDragEventsBubbling: !isDropZone,
|
2020-10-16 13:16:01 +00:00
|
|
|
onDrop,
|
2020-08-26 08:34:01 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledDragAndDrop
|
|
|
|
{...rest}
|
2020-10-08 14:54:04 +00:00
|
|
|
className={`drag-and-drop ${classNameProp}`}
|
2020-08-26 08:34:01 +00:00
|
|
|
dragging={dragging}
|
|
|
|
isDragAccept={isDragActive}
|
|
|
|
drag={isDragActive && isDropZone}
|
|
|
|
{...getRootProps()}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</StyledDragAndDrop>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
DragAndDrop.propTypes = {
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Children elements */
|
2020-08-26 08:34:01 +00:00
|
|
|
children: PropTypes.any,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts class */
|
2020-08-26 08:34:01 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Sets the component as a dropzone */
|
2020-08-26 08:34:01 +00:00
|
|
|
isDropZone: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Show that the item is being dragged now. */
|
2020-08-26 08:34:01 +00:00
|
|
|
dragging: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Occurs when the mouse button is pressed */
|
2020-08-26 08:34:01 +00:00
|
|
|
onMouseDown: PropTypes.func,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Occurs when the dragged element is dropped on the drop target */
|
2020-10-16 13:16:01 +00:00
|
|
|
onDrop: PropTypes.func,
|
2020-08-26 08:34:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default DragAndDrop;
|