commit
0aedb54ec8
|
@ -45,7 +45,6 @@
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-bootstrap": "^1.3.0",
|
"react-bootstrap": "^1.3.0",
|
||||||
"react-burger-menu": "^3.0.4",
|
"react-burger-menu": "^3.0.4",
|
||||||
"react-collapse": "^5.1.0",
|
|
||||||
"react-datepicker": "^4.3.0",
|
"react-datepicker": "^4.3.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-dropzone": "^11.2.4",
|
"react-dropzone": "^11.2.4",
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
import ExpandLess from 'components/icons/ExpandLess';
|
import ExpandLess from 'components/icons/ExpandLess';
|
||||||
import ExpandMore from 'components/icons/ExpandMore';
|
import ExpandMore from 'components/icons/ExpandMore';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Button, Modal, ProgressBar } from 'react-bootstrap';
|
import { Accordion, Button, Modal, ProgressBar } from 'react-bootstrap';
|
||||||
import { FileRejection } from 'react-dropzone';
|
import { FileRejection } from 'react-dropzone';
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
|
import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import { Collapse } from 'react-collapse';
|
|
||||||
import { ButtonVariant, getVariantColor } from './LinkButton';
|
import { ButtonVariant, getVariantColor } from './LinkButton';
|
||||||
import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
|
import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
|
||||||
|
|
||||||
|
@ -50,9 +49,6 @@ const SectionTitle = styled.div`
|
||||||
|
|
||||||
const Section = styled.div`
|
const Section = styled.div`
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
& > .ReactCollapse--collapse {
|
|
||||||
transition: height 200ms;
|
|
||||||
}
|
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
`;
|
`;
|
||||||
|
@ -61,7 +57,7 @@ const SectionInfo = styled.div`
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Content = styled.div`
|
const SectionContent = styled.div`
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -87,24 +83,30 @@ const ResultSection = (props: ResultSectionProps) => {
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
<Accordion defaultActiveKey="1">
|
||||||
<Section>
|
<Section>
|
||||||
|
<Accordion.Toggle eventKey="0" as="div">
|
||||||
<SectionTitle onClick={() => setListView(!listView)}>
|
<SectionTitle onClick={() => setListView(!listView)}>
|
||||||
{props.sectionTitle}
|
{props.sectionTitle}
|
||||||
{listView ? <ExpandLess /> : <ExpandMore />}
|
{listView ? <ExpandLess /> : <ExpandMore />}
|
||||||
</SectionTitle>
|
</SectionTitle>
|
||||||
<Collapse isOpened={listView}>
|
</Accordion.Toggle>
|
||||||
<Content>
|
<Accordion.Collapse eventKey="0">
|
||||||
|
<SectionContent>
|
||||||
{props.sectionInfo && (
|
{props.sectionInfo && (
|
||||||
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
||||||
)}
|
)}
|
||||||
<FileList>
|
<FileList>
|
||||||
{fileList.map((fileID) => (
|
{fileList.map((fileID) => (
|
||||||
<li key={fileID}>{props.filenames.get(fileID)}</li>
|
<li key={fileID}>
|
||||||
|
{props.filenames.get(fileID)}
|
||||||
|
</li>
|
||||||
))}
|
))}
|
||||||
</FileList>
|
</FileList>
|
||||||
</Content>
|
</SectionContent>
|
||||||
</Collapse>
|
</Accordion.Collapse>
|
||||||
</Section>
|
</Section>
|
||||||
|
</Accordion>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -117,20 +119,18 @@ interface InProgressProps {
|
||||||
const InProgressSection = (props: InProgressProps) => {
|
const InProgressSection = (props: InProgressProps) => {
|
||||||
const [listView, setListView] = useState(true);
|
const [listView, setListView] = useState(true);
|
||||||
const fileList = props.fileProgressStatuses;
|
const fileList = props.fileProgressStatuses;
|
||||||
if (!fileList?.length) {
|
|
||||||
return <></>;
|
|
||||||
}
|
|
||||||
if (!fileList?.length) {
|
|
||||||
return <></>;
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
|
<Accordion defaultActiveKey="0">
|
||||||
<Section>
|
<Section>
|
||||||
|
<Accordion.Toggle eventKey="0" as="div">
|
||||||
<SectionTitle onClick={() => setListView(!listView)}>
|
<SectionTitle onClick={() => setListView(!listView)}>
|
||||||
{props.sectionTitle}
|
{props.sectionTitle}
|
||||||
{listView ? <ExpandLess /> : <ExpandMore />}
|
{listView ? <ExpandLess /> : <ExpandMore />}
|
||||||
</SectionTitle>
|
</SectionTitle>
|
||||||
<Collapse isOpened={listView}>
|
</Accordion.Toggle>
|
||||||
<Content>
|
<Accordion.Collapse eventKey="0">
|
||||||
|
<SectionContent>
|
||||||
{props.sectionInfo && (
|
{props.sectionInfo && (
|
||||||
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
||||||
)}
|
)}
|
||||||
|
@ -143,9 +143,10 @@ const InProgressSection = (props: InProgressProps) => {
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</FileList>
|
</FileList>
|
||||||
</Content>
|
</SectionContent>
|
||||||
</Collapse>
|
</Accordion.Collapse>
|
||||||
</Section>
|
</Section>
|
||||||
|
</Accordion>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -217,12 +218,14 @@ export default function UploadProgress(props: Props) {
|
||||||
variant="upload-progress-bar"
|
variant="upload-progress-bar"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{props.uploadStage === UPLOAD_STAGES.UPLOADING && (
|
||||||
<InProgressSection
|
<InProgressSection
|
||||||
filenames={props.filenames}
|
filenames={props.filenames}
|
||||||
fileProgressStatuses={fileProgressStatuses}
|
fileProgressStatuses={fileProgressStatuses}
|
||||||
sectionTitle={constants.INPROGRESS_UPLOADS}
|
sectionTitle={constants.INPROGRESS_UPLOADS}
|
||||||
sectionInfo={sectionInfo}
|
sectionInfo={sectionInfo}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<ResultSection
|
<ResultSection
|
||||||
filenames={props.filenames}
|
filenames={props.filenames}
|
||||||
|
|
|
@ -14,6 +14,7 @@ import { FileUploadResults, MAX_FILE_SIZE_SUPPORTED } from 'constants/upload';
|
||||||
import { FileWithCollection, BackupedFile, UploadFile } from 'types/upload';
|
import { FileWithCollection, BackupedFile, UploadFile } from 'types/upload';
|
||||||
import { logUploadInfo } from 'utils/upload';
|
import { logUploadInfo } from 'utils/upload';
|
||||||
import { convertToHumanReadable } from 'utils/billing';
|
import { convertToHumanReadable } from 'utils/billing';
|
||||||
|
import { sleep } from 'utils/common';
|
||||||
|
|
||||||
interface UploadResponse {
|
interface UploadResponse {
|
||||||
fileUploadResult: FileUploadResults;
|
fileUploadResult: FileUploadResults;
|
||||||
|
@ -33,6 +34,7 @@ export default async function uploader(
|
||||||
|
|
||||||
logUploadInfo(`uploader called for ${fileNameSize}`);
|
logUploadInfo(`uploader called for ${fileNameSize}`);
|
||||||
UIService.setFileProgress(localID, 0);
|
UIService.setFileProgress(localID, 0);
|
||||||
|
await sleep(0);
|
||||||
const { fileTypeInfo, metadata } =
|
const { fileTypeInfo, metadata } =
|
||||||
UploadService.getFileMetadataAndFileTypeInfo(localID);
|
UploadService.getFileMetadataAndFileTypeInfo(localID);
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -4583,11 +4583,6 @@ react-burger-menu@^3.0.4:
|
||||||
prop-types "^15.7.2"
|
prop-types "^15.7.2"
|
||||||
snapsvg-cjs "0.0.6"
|
snapsvg-cjs "0.0.6"
|
||||||
|
|
||||||
react-collapse@^5.1.0:
|
|
||||||
version "5.1.0"
|
|
||||||
resolved "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.0.tgz"
|
|
||||||
integrity sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q==
|
|
||||||
|
|
||||||
react-datepicker@^4.3.0:
|
react-datepicker@^4.3.0:
|
||||||
version "4.3.0"
|
version "4.3.0"
|
||||||
resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.3.0.tgz"
|
resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.3.0.tgz"
|
||||||
|
|
Loading…
Reference in a new issue