2021-01-05 02:30:43 +00:00
|
|
|
import React from 'react';
|
|
|
|
import Dropzone from 'react-dropzone';
|
|
|
|
import styled from 'styled-components';
|
2021-01-08 03:52:51 +00:00
|
|
|
import UploadService from 'services/uploadService';
|
2021-01-07 10:50:21 +00:00
|
|
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
2021-01-05 02:30:43 +00:00
|
|
|
|
|
|
|
const getColor = (props) => {
|
2021-01-08 03:52:51 +00:00
|
|
|
if (props.isDragAccept) {
|
|
|
|
return '#00e676';
|
|
|
|
}
|
|
|
|
if (props.isDragReject) {
|
|
|
|
return '#ff1744';
|
|
|
|
}
|
|
|
|
if (props.isDragActive) {
|
|
|
|
return '#2196f3';
|
|
|
|
}
|
2021-01-05 02:30:43 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
|
|
|
|
|
|
|
|
const DropDiv = styled.div`
|
2021-01-06 17:54:06 +00:00
|
|
|
width:33%;
|
2021-01-05 02:30:43 +00:00
|
|
|
border-width: 2px;
|
|
|
|
border-radius: 2px;
|
|
|
|
border-color: ${(props) => getColor(props)};
|
|
|
|
border-style: ${(props) => enableBorder(props)};
|
|
|
|
outline: none;
|
|
|
|
transition: border 0.24s ease-in-out;
|
|
|
|
`;
|
|
|
|
|
2021-01-06 07:17:56 +00:00
|
|
|
const CollectionDropZone = ({
|
2021-01-08 03:52:51 +00:00
|
|
|
children,
|
|
|
|
closeModal,
|
|
|
|
collectionLatestFile,
|
|
|
|
noDragEventsBubbling,
|
|
|
|
showProgress,
|
2021-01-08 07:46:57 +00:00
|
|
|
token
|
2021-01-05 05:25:58 +00:00
|
|
|
}) => {
|
2021-01-08 03:52:51 +00:00
|
|
|
|
|
|
|
const upload = async (acceptedFiles) => {
|
2021-01-08 03:08:50 +00:00
|
|
|
closeModal();
|
|
|
|
showProgress();
|
2021-01-08 07:46:57 +00:00
|
|
|
await UploadService.uploadFiles(acceptedFiles, collectionLatestFile, token);
|
2021-01-08 03:52:51 +00:00
|
|
|
}
|
|
|
|
return (
|
|
|
|
<Dropzone
|
2021-01-08 13:11:48 +00:00
|
|
|
onDropAccepted={upload}
|
|
|
|
onDropRejected={closeModal}
|
2021-01-08 03:52:51 +00:00
|
|
|
noDragEventsBubbling={noDragEventsBubbling}
|
2021-01-08 13:11:48 +00:00
|
|
|
accept="image/*, video/* "
|
2021-01-08 03:52:51 +00:00
|
|
|
>
|
|
|
|
{({
|
|
|
|
getRootProps,
|
|
|
|
getInputProps,
|
|
|
|
isDragActive,
|
|
|
|
isDragAccept,
|
|
|
|
isDragReject,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<DropDiv
|
|
|
|
{...getRootProps({
|
|
|
|
isDragActive,
|
|
|
|
isDragAccept,
|
|
|
|
isDragReject,
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<input {...getInputProps()} />
|
|
|
|
{children}
|
|
|
|
</DropDiv>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</Dropzone>
|
|
|
|
);
|
2021-01-05 02:30:43 +00:00
|
|
|
};
|
|
|
|
|
2021-01-06 07:17:56 +00:00
|
|
|
export default CollectionDropZone;
|