diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-01-17 10:34:22 +0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-01-17 10:34:22 +0400 |
commit | 81b49fba430959ec4e0946f905dc182d2733831c (patch) | |
tree | a1979dafda41ac804986ef57a68912a868cb5ac7 /src/components/ui | |
parent | Remove idle timer dependency (diff) | |
parent | Merge branch 'develop' of github.com:meetfranz/franz into develop (diff) | |
download | ferdium-app-81b49fba430959ec4e0946f905dc182d2733831c.tar.gz ferdium-app-81b49fba430959ec4e0946f905dc182d2733831c.tar.zst ferdium-app-81b49fba430959ec4e0946f905dc182d2733831c.zip |
Merge branch 'develop' into feature/remove-miner
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ImageUpload.js | 108 | ||||
-rw-r--r-- | src/components/ui/SearchInput.js | 48 |
2 files changed, 126 insertions, 30 deletions
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js new file mode 100644 index 000000000..81c3b8da6 --- /dev/null +++ b/src/components/ui/ImageUpload.js | |||
@@ -0,0 +1,108 @@ | |||
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 | textDelete: PropTypes.string.isRequired, | ||
16 | textUpload: PropTypes.string.isRequired, | ||
17 | }; | ||
18 | |||
19 | static defaultProps = { | ||
20 | className: null, | ||
21 | multiple: false, | ||
22 | }; | ||
23 | |||
24 | state = { | ||
25 | path: null, | ||
26 | } | ||
27 | |||
28 | onDrop(acceptedFiles) { | ||
29 | const { field } = this.props; | ||
30 | |||
31 | acceptedFiles.forEach((file) => { | ||
32 | this.setState({ | ||
33 | path: file.path, | ||
34 | }); | ||
35 | this.props.field.onDrop(file); | ||
36 | }); | ||
37 | |||
38 | field.set(''); | ||
39 | } | ||
40 | |||
41 | dropzoneRef = null; | ||
42 | |||
43 | render() { | ||
44 | const { | ||
45 | field, | ||
46 | className, | ||
47 | multiple, | ||
48 | textDelete, | ||
49 | textUpload, | ||
50 | } = this.props; | ||
51 | |||
52 | const cssClasses = classnames({ | ||
53 | 'image-upload__dropzone': true, | ||
54 | [`${className}`]: className, | ||
55 | }); | ||
56 | |||
57 | return ( | ||
58 | <div className="image-upload-wrapper"> | ||
59 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> | ||
60 | <div className="image-upload"> | ||
61 | {(field.value && field.value !== 'delete') || this.state.path ? ( | ||
62 | <div> | ||
63 | <div | ||
64 | className="image-upload__preview" | ||
65 | style={({ | ||
66 | backgroundImage: `url("${this.state.path || field.value}")`, | ||
67 | })} | ||
68 | /> | ||
69 | <div className="image-upload__action"> | ||
70 | <button | ||
71 | type="button" | ||
72 | onClick={() => { | ||
73 | if (field.value) { | ||
74 | field.set('delete'); | ||
75 | } else { | ||
76 | this.setState({ | ||
77 | path: null, | ||
78 | }); | ||
79 | } | ||
80 | }} | ||
81 | > | ||
82 | <i className="mdi mdi-delete" /> | ||
83 | <p> | ||
84 | {textDelete} | ||
85 | </p> | ||
86 | </button> | ||
87 | <div className="image-upload__action-background" /> | ||
88 | </div> | ||
89 | </div> | ||
90 | ) : ( | ||
91 | <Dropzone | ||
92 | ref={(node) => { this.dropzoneRef = node; }} | ||
93 | onDrop={this.onDrop.bind(this)} | ||
94 | className={cssClasses} | ||
95 | multiple={multiple} | ||
96 | accept="image/jpeg, image/png" | ||
97 | > | ||
98 | <i className="mdi mdi-file-image" /> | ||
99 | <p> | ||
100 | {textUpload} | ||
101 | </p> | ||
102 | </Dropzone> | ||
103 | )} | ||
104 | </div> | ||
105 | </div> | ||
106 | ); | ||
107 | } | ||
108 | } | ||
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js index bca412cef..a94cde201 100644 --- a/src/components/ui/SearchInput.js +++ b/src/components/ui/SearchInput.js | |||
@@ -9,36 +9,46 @@ import { debounce } from 'lodash'; | |||
9 | export default class SearchInput extends Component { | 9 | export default class SearchInput extends Component { |
10 | static propTypes = { | 10 | static propTypes = { |
11 | value: PropTypes.string, | 11 | value: PropTypes.string, |
12 | defaultValue: PropTypes.string, | 12 | placeholder: PropTypes.string, |
13 | className: PropTypes.string, | 13 | className: PropTypes.string, |
14 | onChange: PropTypes.func, | 14 | onChange: PropTypes.func, |
15 | onReset: PropTypes.func, | 15 | onReset: PropTypes.func, |
16 | name: PropTypes.string, | 16 | name: PropTypes.string, |
17 | throttle: PropTypes.bool, | 17 | throttle: PropTypes.bool, |
18 | throttleDelay: PropTypes.number, | 18 | throttleDelay: PropTypes.number, |
19 | autoFocus: PropTypes.bool, | ||
19 | }; | 20 | }; |
20 | 21 | ||
21 | static defaultProps = { | 22 | static defaultProps = { |
22 | value: '', | 23 | value: '', |
23 | defaultValue: '', | 24 | placeholder: '', |
24 | className: '', | 25 | className: '', |
25 | name: uuidv1(), | 26 | name: uuidv1(), |
26 | throttle: false, | 27 | throttle: false, |
27 | throttleDelay: 250, | 28 | throttleDelay: 250, |
28 | onChange: () => null, | 29 | onChange: () => null, |
29 | onReset: () => null, | 30 | onReset: () => null, |
31 | autoFocus: false, | ||
30 | } | 32 | } |
31 | 33 | ||
32 | constructor(props) { | 34 | constructor(props) { |
33 | super(props); | 35 | super(props); |
34 | 36 | ||
35 | this.state = { | 37 | this.state = { |
36 | value: props.value || props.defaultValue, | 38 | value: props.value, |
37 | }; | 39 | }; |
38 | 40 | ||
39 | this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay); | 41 | this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay); |
40 | } | 42 | } |
41 | 43 | ||
44 | componentDidMount() { | ||
45 | const { autoFocus } = this.props; | ||
46 | |||
47 | if (autoFocus) { | ||
48 | this.input.focus(); | ||
49 | } | ||
50 | } | ||
51 | |||
42 | onChange(e) { | 52 | onChange(e) { |
43 | const { throttle, onChange } = this.props; | 53 | const { throttle, onChange } = this.props; |
44 | const { value } = e.target; | 54 | const { value } = e.target; |
@@ -52,26 +62,6 @@ export default class SearchInput extends Component { | |||
52 | } | 62 | } |
53 | } | 63 | } |
54 | 64 | ||
55 | onClick() { | ||
56 | const { defaultValue } = this.props; | ||
57 | const { value } = this.state; | ||
58 | |||
59 | if (value === defaultValue) { | ||
60 | this.setState({ value: '' }); | ||
61 | } | ||
62 | |||
63 | this.input.focus(); | ||
64 | } | ||
65 | |||
66 | onBlur() { | ||
67 | const { defaultValue } = this.props; | ||
68 | const { value } = this.state; | ||
69 | |||
70 | if (value === '') { | ||
71 | this.setState({ value: defaultValue }); | ||
72 | } | ||
73 | } | ||
74 | |||
75 | throttledOnChange(e) { | 65 | throttledOnChange(e) { |
76 | const { onChange } = this.props; | 66 | const { onChange } = this.props; |
77 | 67 | ||
@@ -79,8 +69,8 @@ export default class SearchInput extends Component { | |||
79 | } | 69 | } |
80 | 70 | ||
81 | reset() { | 71 | reset() { |
82 | const { defaultValue, onReset } = this.props; | 72 | const { onReset } = this.props; |
83 | this.setState({ value: defaultValue }); | 73 | this.setState({ value: '' }); |
84 | 74 | ||
85 | onReset(); | 75 | onReset(); |
86 | } | 76 | } |
@@ -88,7 +78,7 @@ export default class SearchInput extends Component { | |||
88 | input = null; | 78 | input = null; |
89 | 79 | ||
90 | render() { | 80 | render() { |
91 | const { className, name, defaultValue } = this.props; | 81 | const { className, name, placeholder } = this.props; |
92 | const { value } = this.state; | 82 | const { value } = this.state; |
93 | 83 | ||
94 | return ( | 84 | return ( |
@@ -101,18 +91,16 @@ export default class SearchInput extends Component { | |||
101 | <label | 91 | <label |
102 | htmlFor={name} | 92 | htmlFor={name} |
103 | className="mdi mdi-magnify" | 93 | className="mdi mdi-magnify" |
104 | onClick={() => this.onClick()} | ||
105 | /> | 94 | /> |
106 | <input | 95 | <input |
107 | name={name} | 96 | name={name} |
108 | type="text" | 97 | type="text" |
98 | placeholder={placeholder} | ||
109 | value={value} | 99 | value={value} |
110 | onChange={e => this.onChange(e)} | 100 | onChange={e => this.onChange(e)} |
111 | onClick={() => this.onClick()} | ||
112 | onBlur={() => this.onBlur()} | ||
113 | ref={(ref) => { this.input = ref; }} | 101 | ref={(ref) => { this.input = ref; }} |
114 | /> | 102 | /> |
115 | {value !== defaultValue && value.length > 0 && ( | 103 | {value.length > 0 && ( |
116 | <span | 104 | <span |
117 | className="mdi mdi-close-circle-outline" | 105 | className="mdi mdi-close-circle-outline" |
118 | onClick={() => this.reset()} | 106 | onClick={() => this.reset()} |