Files
bee-dashboard/src/components/AlertUploadSize.tsx
T
nugaon 2a13da1a6c feat: modularisation (#244)
* 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
2021-12-09 11:12:45 +01:00

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>
)
}