added closeButton to dropZone and close on escape key press
This commit is contained in:
parent
221054227c
commit
989fb27ebe
|
@ -1,22 +1,16 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import constants from 'utils/strings/constants';
|
||||
import Container from './Container';
|
||||
import CrossIcon from './CrossIcon';
|
||||
|
||||
export const getColor = (props) => {
|
||||
if (props.isDragActive) {
|
||||
return '#00e676';
|
||||
}
|
||||
return '#191919';
|
||||
};
|
||||
|
||||
export const enableBorder = (props) => (props.isDragActive ? 'solid' : 'none');
|
||||
const DropDiv = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
const CloseButtonWrapper=styled.div`
|
||||
position: absolute;
|
||||
top:10px;
|
||||
right:10px;
|
||||
cursor:pointer;
|
||||
`;
|
||||
|
||||
const Overlay = styled.div<{ isDragActive: boolean }>`
|
||||
const Overlay = styled.div`
|
||||
border-width: 8px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
@ -32,7 +26,7 @@ const Overlay = styled.div<{ isDragActive: boolean }>`
|
|||
font-weight: 900;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
border-color: ${(props) => getColor(props)};
|
||||
border-color: #2dc262;
|
||||
border-style: solid;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
z-index: 3000;
|
||||
|
@ -48,10 +42,20 @@ export default function FullScreenDropZone(props: Props) {
|
|||
const [isDragActive, setIsDragActive] = useState(false);
|
||||
const onDragEnter = () => setIsDragActive(true);
|
||||
const onDragLeave = () => setIsDragActive(false);
|
||||
|
||||
useEffect(()=>{
|
||||
window.addEventListener('keydown', (event)=>{
|
||||
console .log(event.code);
|
||||
if (event.code==='Escape') {
|
||||
onDragLeave();
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<DropDiv
|
||||
<Container
|
||||
{...props.getRootProps({
|
||||
onDragEnter,
|
||||
onDragLeave,
|
||||
onDrop: (e) => {
|
||||
e.preventDefault();
|
||||
props.showCollectionSelector();
|
||||
|
@ -62,13 +66,14 @@ export default function FullScreenDropZone(props: Props) {
|
|||
{isDragActive && (
|
||||
<Overlay
|
||||
onDrop={onDragLeave}
|
||||
onDragLeave={onDragLeave}
|
||||
isDragActive={isDragActive}
|
||||
>
|
||||
<CloseButtonWrapper onClick={onDragLeave}>
|
||||
<CrossIcon/>
|
||||
</CloseButtonWrapper>
|
||||
{constants.UPLOAD_DROPZONE_MESSAGE}
|
||||
</Overlay>
|
||||
)}
|
||||
{props.children}
|
||||
</DropDiv>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue