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.
42 lines
1.1 KiB
42 lines
1.1 KiB
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;
|
|
|