diff options
Diffstat (limited to 'src/components/ui/Select.js')
-rw-r--r-- | src/components/ui/Select.js | 44 |
1 files changed, 42 insertions, 2 deletions
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js index da52243ca..b4511433c 100644 --- a/src/components/ui/Select.js +++ b/src/components/ui/Select.js | |||
@@ -10,22 +10,60 @@ export default @observer class Select extends Component { | |||
10 | className: PropTypes.string, | 10 | className: PropTypes.string, |
11 | showLabel: PropTypes.bool, | 11 | showLabel: PropTypes.bool, |
12 | disabled: PropTypes.bool, | 12 | disabled: PropTypes.bool, |
13 | multiple: PropTypes.bool, | ||
13 | }; | 14 | }; |
14 | 15 | ||
15 | static defaultProps = { | 16 | static defaultProps = { |
16 | className: null, | 17 | className: null, |
17 | showLabel: true, | 18 | showLabel: true, |
18 | disabled: false, | 19 | disabled: false, |
20 | multiple: false, | ||
19 | }; | 21 | }; |
20 | 22 | ||
23 | constructor(props) { | ||
24 | super(props); | ||
25 | |||
26 | this.element = React.createRef(); | ||
27 | } | ||
28 | |||
29 | multipleChange() { | ||
30 | const element = this.element.current; | ||
31 | |||
32 | const result = []; | ||
33 | const options = element && element.options; | ||
34 | |||
35 | for (const option of options) { | ||
36 | if (option.selected) { | ||
37 | result.push(option.value || option.text); | ||
38 | } | ||
39 | } | ||
40 | |||
41 | const { field } = this.props; | ||
42 | field.value = result; | ||
43 | } | ||
44 | |||
21 | render() { | 45 | render() { |
22 | const { | 46 | const { |
23 | field, | 47 | field, |
24 | className, | 48 | className, |
25 | showLabel, | 49 | showLabel, |
26 | disabled, | 50 | disabled, |
51 | multiple, | ||
27 | } = this.props; | 52 | } = this.props; |
28 | 53 | ||
54 | let selected = field.value; | ||
55 | |||
56 | if (multiple) { | ||
57 | if (typeof field.value === 'string' && field.value.substr(0, 1) === '[') { | ||
58 | // Value is JSON encoded | ||
59 | selected = JSON.parse(field.value); | ||
60 | } else if (typeof field.value === 'object') { | ||
61 | selected = field.value; | ||
62 | } else { | ||
63 | selected = [field.value]; | ||
64 | } | ||
65 | } | ||
66 | |||
29 | return ( | 67 | return ( |
30 | <div | 68 | <div |
31 | className={classnames({ | 69 | className={classnames({ |
@@ -44,11 +82,13 @@ export default @observer class Select extends Component { | |||
44 | </label> | 82 | </label> |
45 | )} | 83 | )} |
46 | <select | 84 | <select |
47 | onChange={field.onChange} | 85 | onChange={multiple ? e => this.multipleChange(e) : field.onChange} |
48 | id={field.id} | 86 | id={field.id} |
49 | defaultValue={field.value} | 87 | defaultValue={selected} |
50 | className="franz-form__select" | 88 | className="franz-form__select" |
51 | disabled={field.disabled || disabled} | 89 | disabled={field.disabled || disabled} |
90 | multiple={multiple} | ||
91 | ref={this.element} | ||
52 | > | 92 | > |
53 | {field.options.map(type => ( | 93 | {field.options.map(type => ( |
54 | <option | 94 | <option |