2a13da1a6c
* chore: gitignore for lib directory * build: packageing for webpack lib build * build: webpack config * feat: expose App component with beeApiUrl parameter * build: tsconfig for library build * build: main property of package json for tsc build * refactor: rename beeUrl option to beeApiUrl * refactor: manange config class instead of process.env calls * build: babelrc config * build: babel plugins and presets for webpack build * chore: serve.js chmod * build(refactor): webpack build * refactor: number notation * chore: webpack and package config change * build: add babel preset-env * chore: prepare script also builds component lib * feat: typegen * revert: set back prepare command * build: assets loader config * feat: beeDebugApiUrl * refactor: move test files to the test folder because of typegen * feat: locked api settings * chore: depcheck ignores * chore: types check script * ci: check types * ci: publish with library * chore: add webpack as devDep * chore: locked semver * chore: remove debug logging * style: webpack config * chore: react and react-dom as dependency * chore: package-lock * fix: clean package-lock init * refactor: fix versions in package.json
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import Collapse from '@material-ui/core/Collapse'
|
|
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
|
import { Alert, AlertTitle } from '@material-ui/lab'
|
|
import { ReactElement } from 'react'
|
|
|
|
const LIMIT = 100000000 // 100 megabytes
|
|
|
|
interface Props {
|
|
files: File[]
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
width: '100%',
|
|
marginTop: theme.spacing(2),
|
|
marginBottom: theme.spacing(2),
|
|
},
|
|
}),
|
|
)
|
|
|
|
export default function UploadSizeAlert(props: Props): ReactElement | null {
|
|
const classes = useStyles()
|
|
|
|
const totalSize = props.files.reduce((previous, current) => previous + current.size, 0)
|
|
|
|
const aboveLimit = totalSize >= LIMIT
|
|
|
|
return (
|
|
<Collapse in={aboveLimit}>
|
|
<div className={classes.root}>
|
|
<Alert severity="warning">
|
|
<AlertTitle>Warning</AlertTitle>
|
|
The files you are trying to upload are above the recommended size. The chunks may not be synchronised properly
|
|
over the network.
|
|
</Alert>
|
|
</div>
|
|
</Collapse>
|
|
)
|
|
}
|