diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 11 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 113 |
2 files changed, 123 insertions, 1 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 4458c4c5a..ee69d53aa 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs'; | |||
13 | import Input from '../../ui/Input'; | 13 | import Input from '../../ui/Input'; |
14 | import Toggle from '../../ui/Toggle'; | 14 | import Toggle from '../../ui/Toggle'; |
15 | import Button from '../../ui/Button'; | 15 | import Button from '../../ui/Button'; |
16 | import ImageUpload from '../../ui/ImageUpload'; | ||
16 | 17 | ||
17 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
18 | saveService: { | 19 | saveService: { |
@@ -217,7 +218,15 @@ export default class EditServiceForm extends Component { | |||
217 | </div> | 218 | </div> |
218 | <div className="settings__body"> | 219 | <div className="settings__body"> |
219 | <form onSubmit={e => this.submit(e)} id="form"> | 220 | <form onSubmit={e => this.submit(e)} id="form"> |
220 | <Input field={form.$('name')} focus /> | 221 | <div className="service-flex-grid"> |
222 | <div className="service-name"> | ||
223 | <Input field={form.$('name')} focus /> | ||
224 | </div> | ||
225 | <div className="service-icon"> | ||
226 | {/* <Input field={form.$('name')} focus /> */} | ||
227 | <ImageUpload field={form.$('icon')} /> | ||
228 | </div> | ||
229 | </div> | ||
221 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 230 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
222 | <Tabs | 231 | <Tabs |
223 | active={activeTabIndex} | 232 | active={activeTabIndex} |
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js new file mode 100644 index 000000000..d07c3649c --- /dev/null +++ b/src/components/ui/ImageUpload.js | |||
@@ -0,0 +1,113 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { Field } from 'mobx-react-form'; | ||
5 | // import Loader from 'react-loader'; | ||
6 | import classnames from 'classnames'; | ||
7 | import Dropzone from 'react-dropzone'; | ||
8 | |||
9 | @observer | ||
10 | export default class ImageUpload extends Component { | ||
11 | static propTypes = { | ||
12 | field: PropTypes.instanceOf(Field).isRequired, | ||
13 | className: PropTypes.string, | ||
14 | multiple: PropTypes.bool, | ||
15 | // disabled: PropTypes.bool, | ||
16 | // onClick: PropTypes.func, | ||
17 | // type: PropTypes.string, | ||
18 | // buttonType: PropTypes.string, | ||
19 | // loaded: PropTypes.bool, | ||
20 | // htmlForm: PropTypes.string, | ||
21 | }; | ||
22 | |||
23 | static defaultProps = { | ||
24 | className: null, | ||
25 | multiple: false, | ||
26 | // disabled: false, | ||
27 | // onClick: () => {}, | ||
28 | // type: 'button', | ||
29 | // buttonType: '', | ||
30 | // loaded: true, | ||
31 | // htmlForm: '', | ||
32 | }; | ||
33 | |||
34 | dropzoneRef = null; | ||
35 | |||
36 | state = { | ||
37 | path: null, | ||
38 | } | ||
39 | |||
40 | onDrop(acceptedFiles) { | ||
41 | // const req = request.post('/upload'); | ||
42 | acceptedFiles.forEach((file) => { | ||
43 | console.log(file); | ||
44 | this.setState({ | ||
45 | path: file.path, | ||
46 | }); | ||
47 | // req.attach(file.name, file); | ||
48 | }); | ||
49 | // req.end(callback); | ||
50 | } | ||
51 | |||
52 | render() { | ||
53 | const { | ||
54 | field, | ||
55 | className, | ||
56 | multiple, | ||
57 | // disabled, | ||
58 | // onClick, | ||
59 | // type, | ||
60 | // buttonType, | ||
61 | // loaded, | ||
62 | // htmlForm, | ||
63 | } = this.props; | ||
64 | |||
65 | const cssClasses = classnames({ | ||
66 | 'franz-form__button': true, | ||
67 | // [`franz-form__button--${buttonType}`]: buttonType, | ||
68 | [`${className}`]: className, | ||
69 | }); | ||
70 | |||
71 | return ( | ||
72 | <div> | ||
73 | {field.label} | ||
74 | {this.state.path ? ( | ||
75 | <div | ||
76 | className="image-upload" | ||
77 | > | ||
78 | <div | ||
79 | className="image-upload__preview" | ||
80 | style={({ | ||
81 | backgroundImage: `url(${this.state.path})`, | ||
82 | })} | ||
83 | /> | ||
84 | <div className="image-upload__action"> | ||
85 | <button | ||
86 | type="button" | ||
87 | onClick={() => { | ||
88 | this.setState({ | ||
89 | path: null, | ||
90 | }); | ||
91 | }} | ||
92 | > | ||
93 | remove icon | ||
94 | |||
95 | </button> | ||
96 | <div className="image-upload__action-background" /> | ||
97 | </div> | ||
98 | </div> | ||
99 | ) : ( | ||
100 | <Dropzone | ||
101 | ref={(node) => { this.dropzoneRef = node; }} | ||
102 | onDrop={this.onDrop.bind(this)} | ||
103 | className={cssClasses} | ||
104 | multiple={multiple} | ||
105 | accept="image/jpeg, image/png" | ||
106 | > | ||
107 | <p>Try dropping some files here, or click to select files to upload.</p> | ||
108 | </Dropzone> | ||
109 | )} | ||
110 | </div> | ||
111 | ); | ||
112 | } | ||
113 | } | ||