/
SimpleFileUpload.story.tsx
60 lines (54 loc) · 1.45 KB
/
SimpleFileUpload.story.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React from 'react';
import Button from '@material-ui/core/Button';
import { Formik, Field, Form } from 'formik';
import { action } from '@storybook/addon-actions';
import { withStyles, Theme } from '@material-ui/core';
import * as Yup from 'yup';
import Wrapper from './Wrapper';
import FormValues from './FormValues';
import { SimpleFileUpload } from '../src/main';
// 10 Megs
const MAX_FILE_SIZE = 10485760;
const schema = Yup.object().shape({
file: Yup.mixed()
.required('Required')
.test(
'file',
'File must be less than 10MB',
value => value == null || value.size < MAX_FILE_SIZE
),
});
const styles = (theme: Theme) => ({
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
},
});
interface Values {
file: '' | File;
}
export default withStyles(styles)(() => (
<Wrapper title="File Upload">
<Formik<Values>
validationSchema={schema}
initialValues={{ file: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
action('submit')(values);
}, 2000);
}}
render={({ submitForm, values }) => (
<Form>
<Field component={SimpleFileUpload} name="file" />
<br />
<Button variant="contained" color="primary" onClick={submitForm}>
Submit
</Button>
<br />
<FormValues values={values} />
</Form>
)}
/>
</Wrapper>
));