diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-10-14 23:32:05 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 03:02:05 +0530 |
commit | 137555821f172e4eadc7cf099d4270ae8fc1374e (patch) | |
tree | 693882bbf7a6b2a24b5a727091d09586d0371007 /src/components/ui/ImageUpload.tsx | |
parent | New translations en-US.json (Spanish) (#2072) (diff) | |
download | ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.gz ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.zst ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.zip |
chore: convert components to tsx (#2071)
Diffstat (limited to 'src/components/ui/ImageUpload.tsx')
-rw-r--r-- | src/components/ui/ImageUpload.tsx | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx new file mode 100644 index 000000000..4b25be502 --- /dev/null +++ b/src/components/ui/ImageUpload.tsx | |||
@@ -0,0 +1,108 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { Field } from 'mobx-react-form'; | ||
4 | import classnames from 'classnames'; | ||
5 | import Dropzone, { DropzoneRef } from 'react-dropzone'; | ||
6 | import { isWindows } from '../../environment'; | ||
7 | |||
8 | type Props = { | ||
9 | field: typeof Field; | ||
10 | className: string; | ||
11 | multiple: boolean; | ||
12 | textDelete: string; | ||
13 | textUpload: string; | ||
14 | }; | ||
15 | |||
16 | @observer | ||
17 | class ImageUpload extends Component<Props> { | ||
18 | static defaultProps = { | ||
19 | multiple: false, | ||
20 | }; | ||
21 | |||
22 | state = { | ||
23 | path: null, | ||
24 | }; | ||
25 | |||
26 | dropzoneRef: DropzoneRef | null = null; | ||
27 | |||
28 | onDrop(acceptedFiles) { | ||
29 | const { field } = this.props; | ||
30 | |||
31 | for (const file of acceptedFiles) { | ||
32 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; | ||
33 | this.setState({ | ||
34 | path: imgPath, | ||
35 | }); | ||
36 | |||
37 | this.props.field.onDrop(file); | ||
38 | } | ||
39 | |||
40 | field.set(''); | ||
41 | } | ||
42 | |||
43 | render() { | ||
44 | const { field, className, multiple, textDelete, textUpload } = this.props; | ||
45 | |||
46 | const cssClasses = classnames({ | ||
47 | 'image-upload__dropzone': true, | ||
48 | [`${className}`]: className, | ||
49 | }); | ||
50 | |||
51 | return ( | ||
52 | <div className="image-upload-wrapper"> | ||
53 | <label className="franz-form__label" htmlFor="iconUpload"> | ||
54 | {field.label} | ||
55 | </label> | ||
56 | <div className="image-upload"> | ||
57 | {(field.value && field.value !== 'delete') || this.state.path ? ( | ||
58 | <> | ||
59 | <div | ||
60 | className="image-upload__preview" | ||
61 | style={{ | ||
62 | backgroundImage: `url("${this.state.path || field.value}")`, | ||
63 | }} | ||
64 | /> | ||
65 | <div className="image-upload__action"> | ||
66 | <button | ||
67 | type="button" | ||
68 | onClick={() => { | ||
69 | if (field.value) { | ||
70 | field.set('delete'); | ||
71 | } else { | ||
72 | this.setState({ | ||
73 | path: null, | ||
74 | }); | ||
75 | } | ||
76 | }} | ||
77 | > | ||
78 | <i className="mdi mdi-delete" /> | ||
79 | <p>{textDelete}</p> | ||
80 | </button> | ||
81 | <div className="image-upload__action-background" /> | ||
82 | </div> | ||
83 | </> | ||
84 | ) : ( | ||
85 | <Dropzone | ||
86 | ref={node => { | ||
87 | this.dropzoneRef = node; | ||
88 | }} | ||
89 | onDrop={this.onDrop.bind(this)} | ||
90 | multiple={multiple} | ||
91 | accept="image/jpeg, image/png, image/svg+xml" | ||
92 | > | ||
93 | {({ getRootProps, getInputProps }) => ( | ||
94 | <div {...getRootProps()} className={cssClasses}> | ||
95 | <i className="mdi mdi-file-image" /> | ||
96 | <p>{textUpload}</p> | ||
97 | <input {...getInputProps()} /> | ||
98 | </div> | ||
99 | )} | ||
100 | </Dropzone> | ||
101 | )} | ||
102 | </div> | ||
103 | </div> | ||
104 | ); | ||
105 | } | ||
106 | } | ||
107 | |||
108 | export default ImageUpload; | ||