diff options
Diffstat (limited to 'src/components/ui/Select.js')
-rw-r--r-- | src/components/ui/Select.js | 32 |
1 files changed, 10 insertions, 22 deletions
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js index e7a5eafa8..5ac7ddd6d 100644 --- a/src/components/ui/Select.js +++ b/src/components/ui/Select.js | |||
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react'; | |||
4 | import { Field } from 'mobx-react-form'; | 4 | import { Field } from 'mobx-react-form'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | 6 | ||
7 | export default @observer class Select extends Component { | 7 | @observer |
8 | class Select extends Component { | ||
8 | static propTypes = { | 9 | static propTypes = { |
9 | field: PropTypes.instanceOf(Field).isRequired, | 10 | field: PropTypes.instanceOf(Field).isRequired, |
10 | className: PropTypes.string, | 11 | className: PropTypes.string, |
@@ -43,18 +44,12 @@ export default @observer class Select extends Component { | |||
43 | } | 44 | } |
44 | 45 | ||
45 | render() { | 46 | render() { |
46 | const { | 47 | const { field, className, showLabel, disabled, multiple } = this.props; |
47 | field, | ||
48 | className, | ||
49 | showLabel, | ||
50 | disabled, | ||
51 | multiple, | ||
52 | } = this.props; | ||
53 | 48 | ||
54 | let selected = field.value; | 49 | let selected = field.value; |
55 | 50 | ||
56 | if (multiple) { | 51 | if (multiple) { |
57 | if (typeof field.value === 'string' && field.value.substr(0, 1) === '[') { | 52 | if (typeof field.value === 'string' && field.value.slice(0, 1) === '[') { |
58 | // Value is JSON encoded | 53 | // Value is JSON encoded |
59 | selected = JSON.parse(field.value); | 54 | selected = JSON.parse(field.value); |
60 | } else if (typeof field.value === 'object') { | 55 | } else if (typeof field.value === 'object') { |
@@ -74,15 +69,12 @@ export default @observer class Select extends Component { | |||
74 | })} | 69 | })} |
75 | > | 70 | > |
76 | {field.label && showLabel && ( | 71 | {field.label && showLabel && ( |
77 | <label | 72 | <label className="franz-form__label" htmlFor={field.name}> |
78 | className="franz-form__label" | ||
79 | htmlFor={field.name} | ||
80 | > | ||
81 | {field.label} | 73 | {field.label} |
82 | </label> | 74 | </label> |
83 | )} | 75 | )} |
84 | <select | 76 | <select |
85 | onChange={multiple ? (e) => this.multipleChange(e) : field.onChange} | 77 | onChange={multiple ? e => this.multipleChange(e) : field.onChange} |
86 | id={field.id} | 78 | id={field.id} |
87 | defaultValue={selected} | 79 | defaultValue={selected} |
88 | className="franz-form__select" | 80 | className="franz-form__select" |
@@ -90,7 +82,7 @@ export default @observer class Select extends Component { | |||
90 | multiple={multiple} | 82 | multiple={multiple} |
91 | ref={this.element} | 83 | ref={this.element} |
92 | > | 84 | > |
93 | {field.options.map((type) => ( | 85 | {field.options.map(type => ( |
94 | <option | 86 | <option |
95 | key={type.value} | 87 | key={type.value} |
96 | value={type.value} | 88 | value={type.value} |
@@ -100,14 +92,10 @@ export default @observer class Select extends Component { | |||
100 | </option> | 92 | </option> |
101 | ))} | 93 | ))} |
102 | </select> | 94 | </select> |
103 | {field.error && ( | 95 | {field.error && <div className="franz-form__error">{field.error}</div>} |
104 | <div | ||
105 | className="franz-form__error" | ||
106 | > | ||
107 | {field.error} | ||
108 | </div> | ||
109 | )} | ||
110 | </div> | 96 | </div> |
111 | ); | 97 | ); |
112 | } | 98 | } |
113 | } | 99 | } |
100 | |||
101 | export default Select; | ||