@lunit/oui
Version:
Lunit Oncology UI components
13 lines (12 loc) • 1.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Typography } from '@mui/material';
import { BaseFileDnDZone, DnDSection, DnDMainBox, FileDnDZoneContainer, } from './FileDnDZone.styled';
import theme from '../../theme';
import { DEFAULT_FILE_FORMATS } from './FileDnDZone.utils';
const FileDnDZone = ({ slidesUploaded, maxSlideLimit = 500, acceptedFileFormats = DEFAULT_FILE_FORMATS, disabled, WrapperProps, OuterBoxProps, InnerBoxProps, SectionBoxProps, }) => {
const disabledSX = {
opacity: 0.4,
};
return (_jsx(FileDnDZoneContainer, { sx: disabled ? disabledSX : {}, ...WrapperProps, children: _jsxs(BaseFileDnDZone, { ...OuterBoxProps, children: [_jsx(Typography, { variant: "h7", sx: { color: theme.palette.neutralGrey[25] }, children: "Drag and drop your slide files here" }), _jsxs(DnDMainBox, { ...InnerBoxProps, children: [_jsxs(DnDSection, { ...SectionBoxProps, children: [_jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[45] }, children: "Supported file formats" }), _jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[25], padding: '0 18px', textAlign: 'center' }, children: acceptedFileFormats })] }), _jsxs(DnDSection, { ...SectionBoxProps, children: [_jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[45] }, children: "Allowed number of slides" }), _jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[25] }, children: `You have uploaded ${slidesUploaded.toLocaleString()} slides on Lunit SCOPE.` }), _jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[25] }, children: `The number of slides cannot exceed ${maxSlideLimit.toLocaleString()}.` })] })] })] }) }));
};
export default FileDnDZone;