seperate DropZone component for collections
This commit is contained in:
parent
87bf367c90
commit
b7e0ccd900
|
@ -19,24 +19,23 @@ const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
|
|||
const DropDiv = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
border-width: 2px;
|
||||
border-radius: 2px;
|
||||
height:10px;
|
||||
width:30%;
|
||||
border-color: ${(props) => getColor(props)};
|
||||
border-style: ${(props) => enableBorder(props)};
|
||||
outline: none;
|
||||
transition: border 0.24s ease-in-out;
|
||||
`;
|
||||
|
||||
const FileUpload = ({
|
||||
const CollectionDropZone = ({
|
||||
children,
|
||||
noClick = null,
|
||||
closeModal = null,
|
||||
showModal = null,
|
||||
collectionLatestFile = null,
|
||||
noDragEventsBubbling = null,
|
||||
showProgress = null,
|
||||
closeModal,
|
||||
collectionLatestFile,
|
||||
noDragEventsBubbling,
|
||||
showProgress,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
|
@ -46,9 +45,6 @@ const FileUpload = ({
|
|||
closeModal();
|
||||
showProgress();
|
||||
}}
|
||||
noClick={noClick}
|
||||
onDragOver={showModal}
|
||||
onDragLeave={closeModal}
|
||||
noDragEventsBubbling={noDragEventsBubbling}
|
||||
>
|
||||
{({
|
||||
|
@ -78,4 +74,4 @@ const FileUpload = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default FileUpload;
|
||||
export default CollectionDropZone;
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import { Button, Card, Col, Container, Modal, Row } from 'react-bootstrap';
|
||||
import FileUpload from './DragAndDropUpload';
|
||||
import { Button, Card, Modal } from 'react-bootstrap';
|
||||
import CollectionDropZone from './CollectionDropZone';
|
||||
|
||||
function CollectionSelector({
|
||||
modalView,
|
||||
|
@ -9,38 +9,19 @@ function CollectionSelector({
|
|||
showProgress,
|
||||
}) {
|
||||
const CollectionIcons = collectionLatestFile.map((item) => (
|
||||
<FileUpload
|
||||
<CollectionDropZone key={item.collectionID}
|
||||
closeModal={closeModal}
|
||||
collectionLatestFile={item}
|
||||
noDragEventsBubbling
|
||||
showProgress={showProgress}
|
||||
>
|
||||
<Card
|
||||
style={{
|
||||
margin: '5px',
|
||||
padding: '5px',
|
||||
width: '95%',
|
||||
height: '150px',
|
||||
position: 'relative',
|
||||
border: 'solid',
|
||||
float: 'left',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<Card.Img
|
||||
variant='top'
|
||||
src={item.thumb}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
/>
|
||||
<Card.Body
|
||||
style={{
|
||||
padding: '5px',
|
||||
}}
|
||||
>
|
||||
{item.collectionName}
|
||||
</Card.Body>{' '}
|
||||
<Card style={{ maxHeight: "20%", cursor: 'pointer', border: 'solid', flexWrap: "nowrap" }}>
|
||||
<Card.Img variant="top" src={item.thumb} />
|
||||
<Card.Body>
|
||||
<Card.Text>{item.collectionName}</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</FileUpload>
|
||||
</CollectionDropZone>
|
||||
));
|
||||
return (
|
||||
<Modal
|
||||
|
@ -54,10 +35,8 @@ function CollectionSelector({
|
|||
Select/Click on Collection to upload
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Container>
|
||||
<Row>{CollectionIcons}</Row>
|
||||
</Container>
|
||||
<Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
|
||||
{CollectionIcons}
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button onClick={closeModal}>Close</Button>
|
||||
|
|
|
@ -22,8 +22,6 @@ import AutoSizer from 'react-virtualized-auto-sizer';
|
|||
import { VariableSizeList as List } from 'react-window';
|
||||
import Collections from './components/Collections';
|
||||
import SadFace from 'components/SadFace';
|
||||
import FileUpload from './components/DragAndDropUpload';
|
||||
import UploadButton from 'pages/gallery/components/UploadButton';
|
||||
import CollectionSelector from './components/CollectionSelector';
|
||||
import UploadProgress from './components/UploadProgress';
|
||||
|
||||
|
@ -306,7 +304,6 @@ export default function Gallery(props) {
|
|||
<CollectionSelector
|
||||
modalView={props.modalView}
|
||||
closeModal={props.closeModal}
|
||||
showModal={props.showModal}
|
||||
collectionLatestFile={collectionLatestFile}
|
||||
showProgress={() => setProgressView(true)}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue