2021-01-05 05:25:08 +00:00
|
|
|
import React from 'react';
|
2021-01-05 07:17:17 +00:00
|
|
|
import { Button, Card, Col, Container, Modal, Row } from 'react-bootstrap';
|
2021-01-05 07:36:35 +00:00
|
|
|
import FileUpload from './DragAndDropUpload';
|
2021-01-05 05:25:08 +00:00
|
|
|
|
2021-01-05 11:14:19 +00:00
|
|
|
function CollectionSelector({
|
|
|
|
modalView,
|
|
|
|
closeModal,
|
|
|
|
collectionLatestFile,
|
|
|
|
showProgress,
|
|
|
|
}) {
|
2021-01-05 10:32:13 +00:00
|
|
|
const CollectionIcons = collectionLatestFile.map((item) => (
|
|
|
|
<FileUpload
|
|
|
|
closeModal={closeModal}
|
|
|
|
collectionLatestFile={item}
|
|
|
|
noDragEventsBubbling
|
2021-01-05 11:14:19 +00:00
|
|
|
showProgress={showProgress}
|
2021-01-05 10:32:13 +00:00
|
|
|
>
|
2021-01-05 07:36:35 +00:00
|
|
|
<Card
|
|
|
|
style={{
|
|
|
|
margin: '5px',
|
|
|
|
padding: '5px',
|
2021-01-05 10:32:13 +00:00
|
|
|
width: '95%',
|
|
|
|
height: '150px',
|
2021-01-05 07:36:35 +00:00
|
|
|
position: 'relative',
|
|
|
|
border: 'solid',
|
|
|
|
float: 'left',
|
2021-01-05 07:48:13 +00:00
|
|
|
cursor: 'pointer',
|
2021-01-05 07:36:35 +00:00
|
|
|
}}
|
|
|
|
>
|
2021-01-05 10:32:13 +00:00
|
|
|
<Card.Img
|
|
|
|
variant='top'
|
|
|
|
src={item.thumb}
|
|
|
|
style={{ width: '100%', height: '100%' }}
|
|
|
|
/>
|
|
|
|
<Card.Body
|
|
|
|
style={{
|
|
|
|
padding: '5px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{item.collectionName}
|
|
|
|
</Card.Body>{' '}
|
2021-01-05 07:36:35 +00:00
|
|
|
</Card>
|
|
|
|
</FileUpload>
|
2021-01-05 07:17:17 +00:00
|
|
|
));
|
2021-01-05 05:25:08 +00:00
|
|
|
return (
|
2021-01-05 07:17:17 +00:00
|
|
|
<Modal
|
|
|
|
show={modalView}
|
|
|
|
aria-labelledby='contained-modal-title-vcenter'
|
|
|
|
centered
|
|
|
|
onHide={closeModal}
|
|
|
|
>
|
|
|
|
<Modal.Header closeButton>
|
|
|
|
<Modal.Title id='contained-modal-title-vcenter'>
|
2021-01-05 07:36:35 +00:00
|
|
|
Select/Click on Collection to upload
|
2021-01-05 07:17:17 +00:00
|
|
|
</Modal.Title>
|
|
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
|
|
<Container>
|
|
|
|
<Row>{CollectionIcons}</Row>
|
|
|
|
</Container>
|
|
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
|
|
|
<Button onClick={closeModal}>Close</Button>
|
|
|
|
</Modal.Footer>
|
|
|
|
</Modal>
|
2021-01-05 05:25:08 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default CollectionSelector;
|