You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.1 KiB
43 lines
1.1 KiB
1 year ago
|
import { Box as MuiBox } from '@mui/material';
|
||
|
|
import { FC } from 'react';
|
||
|
|
|
||
|
|
import { ProgressBar } from '../Bars';
|
||
|
|
import FlexBox from '../FlexBox';
|
||
|
|
import { BodyText } from '../Text';
|
||
|
|
|
||
|
|
const UploadFileProgress: FC<UploadFileProgressProps> = (props) => {
|
||
|
|
const { uploads } = props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FlexBox columnSpacing=".2em">
|
||
|
|
{Object.values(uploads).map(({ name, progress, uuid }) => (
|
||
|
|
<MuiBox
|
||
|
|
key={`upload-${uuid}`}
|
||
|
|
sx={{
|
||
|
|
alignItems: { md: 'center' },
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: { xs: 'column', md: 'row' },
|
||
|
|
|
||
|
|
'& > :first-child': {
|
||
|
|
minWidth: 100,
|
||
|
|
overflow: 'hidden',
|
||
|
|
overflowWrap: 'normal',
|
||
|
|
textOverflow: 'ellipsis',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
width: { xs: '100%', md: 200 },
|
||
|
|
wordBreak: 'keep-all',
|
||
|
|
},
|
||
|
|
|
||
|
|
'& > :last-child': { flexGrow: 1 },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<BodyText>{name}</BodyText>
|
||
|
|
<ProgressBar progressPercentage={progress} />
|
||
|
|
</MuiBox>
|
||
|
|
))}
|
||
|
|
</FlexBox>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default UploadFileProgress;
|