0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'collection-ops' into file-loading-single-update

Browse source
This commit is contained in:
Abhinav-grd 2021-02-03 13:45:47 +05:30
commit 42aca0ca00
3 changed files with 79 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/pages/gallery/components/AddCollection.tsx
View file

@ -1,9 +1,8 @@
import React, { useState } from "react";
import { Card } from "react-bootstrap";
import Dropzone from "react-dropzone";
import styled from "styled-components";
import { DropDiv } from "./CollectionDropZone";
import CreateCollection from "./CreateCollection";
import DropzoneWrapper from "./DropzoneWrapper";
const ImageContainer = styled.div`
min-height: 192px;
@ -24,46 +23,26 @@ export default function AddCollection(props) {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>();
const [createCollectionView, setCreateCollectionView] = useState(false);
const { children, closeUploadModal, showUploadModal, ...rest } = props;
const { closeUploadModal, showUploadModal, ...rest } = props;
const createCollection = (acceptedFiles) => {
setAcceptedFiles(acceptedFiles);
setCreateCollectionView(true);
};
const children = (
<StyledCard>
<ImageContainer>+</ImageContainer>
<Card.Text style={{ textAlign: "center" }}>Create New Album</Card.Text>
</StyledCard>
);
return (
<>
<Dropzone
<DropzoneWrapper
onDropAccepted={createCollection}
onDropRejected={closeUploadModal}
onDragOver={showUploadModal}
noDragEventsBubbling
accept="image/*, video/*"
>
{({
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject,
}) => {
return (
<DropDiv
{...getRootProps({
isDragActive,
isDragAccept,
isDragReject,
})}
>
<input {...getInputProps()} />
<StyledCard>
<ImageContainer>+</ImageContainer>
<Card.Text style={{ textAlign: "center" }}>Create New Album</Card.Text>
</StyledCard>
</DropDiv>
);
}}
</Dropzone>
children={children}
/>
<CreateCollection
{...rest}
modalView={createCollectionView}

57
src/pages/gallery/components/CollectionDropZone.tsx
View file

@ -1,35 +1,8 @@
import React from 'react';
import Dropzone from 'react-dropzone';
import styled from 'styled-components';
import UploadService from 'services/uploadService';
import { getToken } from 'utils/common/key';
import DropzoneWrapper from './DropzoneWrapper';
export const getColor = (props) => {
if (props.isDragAccept) {
return '#00e676';
}
if (props.isDragReject) {
return '#ff1744';
}
if (props.isDragActive) {
return '#2196f3';
}
};
export const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
export const DropDiv = styled.div`
width:200px;
margin:5px;
height:230px;
color:black;
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;
`;
function CollectionDropZone({
children,
@ -53,34 +26,12 @@ function CollectionDropZone({
setProgressView(false);
}
return (
<Dropzone
<DropzoneWrapper
children={children}
onDropAccepted={upload}
onDragOver={showModal}
onDropRejected={closeModal}
noDragEventsBubbling
accept="image/*, video/*, application/json, "
>
{({
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject,
}) => {
return (
<DropDiv
{...getRootProps({
isDragActive,
isDragAccept,
isDragReject,
})}
>
<input {...getInputProps()} />
{children}
</DropDiv>
);
}}
</Dropzone>
/>
);
};

64
src/pages/gallery/components/DropzoneWrapper.tsx Normal file
View file

@ -0,0 +1,64 @@
import React from 'react';
import Dropzone from 'react-dropzone';
import styled from 'styled-components';
export const getColor = (props) => {
if (props.isDragAccept) {
return '#00e676';
}
if (props.isDragReject) {
return '#ff1744';
}
if (props.isDragActive) {
return '#2196f3';
}
};
export const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
export const DropDiv = styled.div`
width:200px;
margin:5px;
height:230px;
color:black;
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;
`;
export function DropzoneWrapper(props) {
const { children, ...callbackProps } = props
return (
<Dropzone
noDragEventsBubbling
accept="image/*, video/*, application/json, "
{...callbackProps}
>
{({
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject,
}) => {
return (
<DropDiv
{...getRootProps({
isDragActive,
isDragAccept,
isDragReject,
})}
>
<input {...getInputProps()} />
{children}
</DropDiv>
);
}}
</Dropzone>
);
};
export default DropzoneWrapper;