temp
This commit is contained in:
Abhinav
parent
6870665ddc
commit
fcfb8654ec
|
|
@ -1,9 +1,13 @@
|
|||
import React from 'react';
|
||||
import FileList from 'components/FileList';
|
||||
import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, InProgressItemContainer } from './styledComponents';
|
||||
import { FileProgresses } from '.';
|
||||
import {
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
} from './section';
|
||||
|
||||
export interface InProgressProps {
|
||||
filenames: Map<number, string>;
|
||||
|
|
@ -15,11 +19,11 @@ export const InProgressSection = (props: InProgressProps) => {
|
|||
const fileList = props.fileProgressStatuses ?? [];
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<UploadProgressSection>
|
||||
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
|
||||
{props.sectionTitle}
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
</UploadProgressSectionTitle>
|
||||
<UploadProgressSectionContent>
|
||||
{props.sectionInfo && (
|
||||
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
||||
)}
|
||||
|
|
@ -32,7 +36,7 @@ export const InProgressSection = (props: InProgressProps) => {
|
|||
</InProgressItemContainer>
|
||||
))}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</UploadProgressSectionContent>
|
||||
</UploadProgressSection>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React from 'react';
|
||||
import FileList from 'components/FileList';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { Typography } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, ResultItemContainer } from './styledComponents';
|
||||
import { FileUploadResults } from 'constants/upload';
|
||||
import {
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
} from './section';
|
||||
|
||||
export interface ResultSectionProps {
|
||||
filenames: Map<number, string>;
|
||||
|
|
@ -23,11 +23,11 @@ export const ResultSection = (props: ResultSectionProps) => {
|
|||
return <></>;
|
||||
}
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<UploadProgressSection>
|
||||
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography> {props.sectionTitle}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
</UploadProgressSectionTitle>
|
||||
<UploadProgressSectionContent>
|
||||
{props.sectionInfo && (
|
||||
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
||||
)}
|
||||
|
|
@ -38,7 +38,7 @@ export const ResultSection = (props: ResultSectionProps) => {
|
|||
</ResultItemContainer>
|
||||
))}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</UploadProgressSectionContent>
|
||||
</UploadProgressSection>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Dialog, DialogContent } from '@mui/material';
|
||||
import { DialogContent } from '@mui/material';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { UPLOAD_STAGES, FileUploadResults } from 'constants/upload';
|
||||
import React from 'react';
|
||||
|
|
@ -8,6 +8,7 @@ import { InProgressSection } from './inProgressSection';
|
|||
import { ResultSection } from './resultSection';
|
||||
import { NotUploadSectionHeader } from './styledComponents';
|
||||
import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
|
||||
import DialogBoxBase from 'components/DialogBox/base';
|
||||
export function UploadProgressDialog({
|
||||
handleHideModal,
|
||||
setExpanded,
|
||||
|
|
@ -19,9 +20,8 @@ export function UploadProgressDialog({
|
|||
...props
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
<DialogBoxBase
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
open={props.show}
|
||||
onClose={handleHideModal}>
|
||||
<UploadProgressHeader
|
||||
|
|
@ -34,7 +34,7 @@ export function UploadProgressDialog({
|
|||
/>
|
||||
<DialogContent
|
||||
sx={{
|
||||
px: 0,
|
||||
'&&&': { px: 0 },
|
||||
}}>
|
||||
{props.uploadStage === UPLOAD_STAGES.UPLOADING && (
|
||||
<InProgressSection
|
||||
|
|
@ -108,14 +108,15 @@ export function UploadProgressDialog({
|
|||
/>
|
||||
</DialogContent>
|
||||
|
||||
{props.uploadStage === UPLOAD_STAGES.FINISH && (
|
||||
{props.uploadStage === UPLOAD_STAGES.FINISH ||
|
||||
(true && (
|
||||
<UploadProgressFooter
|
||||
uploadStage={props.uploadStage}
|
||||
retryFailed={props.retryFailed}
|
||||
closeModal={props.cancelUploads}
|
||||
fileUploadResultMap={fileUploadResultMap}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
))}
|
||||
</DialogBoxBase>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { Button, DialogActions } from '@mui/material';
|
||||
import { UPLOAD_STAGES, FileUploadResults } from 'constants/upload';
|
||||
import React from 'react';
|
||||
|
|
@ -10,19 +11,20 @@ export function UploadProgressFooter({
|
|||
}) {
|
||||
return (
|
||||
<DialogActions>
|
||||
{uploadStage === UPLOAD_STAGES.FINISH &&
|
||||
{/* {uploadStage === UPLOAD_STAGES.FINISH &&
|
||||
(fileUploadResultMap?.get(FileUploadResults.FAILED)?.length >
|
||||
0 ||
|
||||
fileUploadResultMap?.get(FileUploadResults.BLOCKED)?.length >
|
||||
0 ? (
|
||||
0 ? ( */}
|
||||
<Button variant="contained" fullWidth onClick={retryFailed}>
|
||||
{constants.RETRY_FAILED}
|
||||
</Button>
|
||||
) : (
|
||||
|
||||
{/* ) : (
|
||||
<Button variant="contained" fullWidth onClick={closeModal}>
|
||||
{constants.CLOSE}
|
||||
</Button>
|
||||
))}
|
||||
))} */}
|
||||
</DialogActions>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import React from 'react';
|
||||
import FileList from 'components/FileList';
|
||||
import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, InProgressItemContainer } from './styledComponents';
|
||||
import { FileProgresses } from '.';
|
||||
import {
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
} from './section';
|
||||
|
||||
export interface InProgressProps {
|
||||
filenames: Map<number, string>;
|
||||
|
|
@ -15,11 +19,11 @@ export const InProgressSection = (props: InProgressProps) => {
|
|||
const fileList = props.fileProgressStatuses ?? [];
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<UploadProgressSection>
|
||||
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
|
||||
{props.sectionTitle}
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
</UploadProgressSectionTitle>
|
||||
<UploadProgressSectionContent>
|
||||
{props.sectionInfo && (
|
||||
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
||||
)}
|
||||
|
|
@ -32,7 +36,7 @@ export const InProgressSection = (props: InProgressProps) => {
|
|||
</InProgressItemContainer>
|
||||
))}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</UploadProgressSectionContent>
|
||||
</UploadProgressSection>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React from 'react';
|
||||
import FileList from 'components/FileList';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { Typography } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { SectionInfo, ResultItemContainer } from './styledComponents';
|
||||
import { FileUploadResults } from 'constants/upload';
|
||||
import {
|
||||
UploadProgressSection,
|
||||
UploadProgressSectionContent,
|
||||
UploadProgressSectionTitle,
|
||||
} from './section';
|
||||
|
||||
export interface ResultSectionProps {
|
||||
filenames: Map<number, string>;
|
||||
|
|
@ -23,11 +23,11 @@ export const ResultSection = (props: ResultSectionProps) => {
|
|||
return <></>;
|
||||
}
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<UploadProgressSection>
|
||||
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography> {props.sectionTitle}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
</UploadProgressSectionTitle>
|
||||
<UploadProgressSectionContent>
|
||||
{props.sectionInfo && (
|
||||
<SectionInfo>{props.sectionInfo}</SectionInfo>
|
||||
)}
|
||||
|
|
@ -38,7 +38,7 @@ export const ResultSection = (props: ResultSectionProps) => {
|
|||
</ResultItemContainer>
|
||||
))}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</UploadProgressSectionContent>
|
||||
</UploadProgressSection>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
50
src/components/UploadProgress/section.tsx
Normal file
50
src/components/UploadProgress/section.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import * as React from 'react';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
|
||||
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
|
||||
import MuiAccordionSummary, {
|
||||
AccordionSummaryProps,
|
||||
} from '@mui/material/AccordionSummary';
|
||||
import MuiAccordionDetails from '@mui/material/AccordionDetails';
|
||||
|
||||
export const UploadProgressSection = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
))(({ theme }) => ({
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: 0,
|
||||
},
|
||||
'&:before': {
|
||||
display: 'none',
|
||||
},
|
||||
}));
|
||||
|
||||
export const UploadProgressSectionTitle = styled(
|
||||
(props: AccordionSummaryProps) => (
|
||||
<MuiAccordionSummary
|
||||
expandIcon={
|
||||
<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)(({ theme }) => ({
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, .05)'
|
||||
: 'rgba(0, 0, 0, .03)',
|
||||
flexDirection: 'row-reverse',
|
||||
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
'& .MuiAccordionSummary-content': {
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
export const UploadProgressSectionContent = styled(MuiAccordionDetails)(
|
||||
({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
})
|
||||
);
|
||||
Loading…
Reference in a new issue