@lunit/oui
Version:
Lunit Oncology UI components
85 lines (84 loc) • 6.79 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Grow, Typography, Box } from '@mui/material';
import { ArrowUp, Close, Success, Warning16, RefreshLeft } from '../../icons';
import { useState, Fragment, useMemo } from 'react';
import { Divider } from '../Divider';
import { Button } from '../Button';
import { LinearProgress } from '../Progress';
import { Tooltip } from '../Tooltip';
import theme from '../../theme';
import { StyledPaper, StyledToolbar, StyledToolbarButtonContainer, StyledCollapse, StyledUploadFile, } from './UploadManager.styled';
/**
* Component used inside the UploadManager to display a file
*/
const UploadFile = ({ file, onCancel, onRetry }) => {
const [mouseOnErrorIconButton, setMouseOnErrorIconButton] = useState(false);
const progress = useMemo(() => {
if (file.meta?.calculatedProgress) {
// return calculated progress for mrxs files
return file.meta.calculatedProgress;
}
return file.progress?.percentage || 0;
}, [file.meta, file.progress?.percentage]);
const fileFormatConverting = useMemo(() => {
if (file.extension === 'isyntax') {
return 'iSyntax';
}
if (file.extension === 'i2syntax') {
return 'i2Syntax';
}
return '';
}, [file]);
return (_jsxs(_Fragment, { children: [_jsxs(StyledUploadFile, { children: [!file.meta?.errorMessage && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body5", sx: {
overflow: 'hidden',
textOverflow: 'ellipsis',
}, children: file.name }), progress < 100 && (_jsx(Tooltip, { title: "Cancel", children: _jsx(Box, { children: _jsx(Button, { onClick: () => onCancel && onCancel(file.id), variant: "ghost", color: "secondary", icon: _jsx(Close, { style: { color: theme.palette.neutralGrey[40] } }) }) }) })), progress === 100 && file.meta.postProcessComplete && (_jsx(Tooltip, { title: "Done", children: _jsx(Box, { children: _jsx(Button, { variant: "ghost", icon: _jsx(Success, {}) }) }) }))] })), file.meta?.errorMessage && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body5", sx: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
flexShrink: 6,
}, children: file.name }), _jsx(Typography, { color: "error", variant: "body4", sx: {
marginRight: '30px',
flexGrow: 3,
flexShrink: 0,
flexBasis: 'auto',
textAlign: 'right',
maxWidth: '290px',
whiteSpace: 'pre-wrap',
}, children: file.meta?.errorMessage }), _jsx(Tooltip, { title: file.meta.retry ? 'Retry' : 'Retry by dragging and dropping the file again.', placement: "top", children: _jsx(Box, { children: _jsx(Button, { onMouseEnter: () => file.meta.retry && setMouseOnErrorIconButton(true), onMouseLeave: () => file.meta.retry && setMouseOnErrorIconButton(false), onClick: () => {
if (file.meta.retry) {
setMouseOnErrorIconButton(false);
if (onRetry)
onRetry(file.id);
}
}, icon: mouseOnErrorIconButton ? (_jsx(RefreshLeft, { style: { color: theme.palette.neutralGrey[0] } })) : (_jsx(Warning16, { style: { color: theme.palette.red[5] } })), variant: "ghost", color: "secondary", sx: {
cursor: file.meta.retry ? 'pointer' : 'default',
} }) }) })] })), !file.meta?.errorMessage && file.meta?.postProcessConverting && (_jsxs(Typography, { variant: "body5", sx: {
marginRight: '30px',
flexGrow: 3,
flexShrink: 0,
flexBasis: 'auto',
textAlign: 'right',
maxWidth: '290px',
whiteSpace: 'pre-wrap',
}, children: ["Converting ", fileFormatConverting, " file..."] }))] }), !file.meta?.errorMessage && (_jsx(_Fragment, { children: file.progress?.uploadStarted > 0 && (_jsxs(_Fragment, { children: [progress < 100 && (_jsx(LinearProgress, { variant: "determinate", value: progress })), progress >= 100 && !file.meta?.postProcessComplete && _jsx(LinearProgress, {})] })) }))] }));
};
/**
* Component used to display a list of files
*/
const UploadManager = ({ title, subTitle, files, onClose, onCancel, onRetry, }) => {
const [expanded, setExpanded] = useState(true);
const handleExpandClick = () => {
setExpanded((exp) => !exp);
};
return (_jsx(Grow, { in: true,
// Should this be configurable?
style: {
position: 'absolute',
bottom: '20px',
right: '20px',
}, children: _jsxs(StyledPaper, { elevation: 1, children: [_jsxs(StyledToolbar, { children: [_jsx(Typography, { variant: "h9", children: title }), _jsx(Typography, { variant: "body1", sx: { marginLeft: '8px' }, children: subTitle }), _jsxs(StyledToolbarButtonContainer, { children: [_jsx(Tooltip, { title: expanded ? 'Minimize' : 'Maximize', children: _jsx(Box, { children: _jsx(Button, { onClick: handleExpandClick, variant: "ghost", color: "secondary", icon: _jsx(ArrowUp, { style: { color: theme.palette.neutralGrey[40] } }), size: "small", sx: {
transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
} }) }) }), _jsx(Tooltip, { title: "Close", children: _jsx(Box, { children: _jsx(Button, { onClick: onClose, variant: "ghost", color: "secondary", icon: _jsx(Close, { style: { color: theme.palette.neutralGrey[40] } }), size: "small" }) }) })] })] }), expanded && _jsx(Divider, { orientation: "horizontal" }), _jsx(StyledCollapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: files.map((download, index) => (_jsxs(Fragment, { children: [_jsx(UploadFile, { file: download, onCancel: onCancel, onRetry: onRetry }), index !== files.length - 1 && _jsx(Divider, { orientation: "horizontal" })] }, download.id))) })] }) }));
};
export default UploadManager;