diff options
author | 2022-11-01 06:42:12 +0530 | |
---|---|---|
committer | 2022-11-01 01:12:12 +0000 | |
commit | 85d1aac4cd70e79d5ab64684dea09e92b17ed2c2 (patch) | |
tree | a006a2eb5c58b9351219d8a85d57a04c5c73787a /src/components/ui/Select.js | |
parent | refactor: convert global app to typescript (#723) (diff) | |
download | ferdium-app-85d1aac4cd70e79d5ab64684dea09e92b17ed2c2.tar.gz ferdium-app-85d1aac4cd70e79d5ab64684dea09e92b17ed2c2.tar.zst ferdium-app-85d1aac4cd70e79d5ab64684dea09e92b17ed2c2.zip |
Transform ChangeServer components tree to typescript (#725)
Diffstat (limited to 'src/components/ui/Select.js')
-rw-r--r-- | src/components/ui/Select.js | 101 |
1 files changed, 0 insertions, 101 deletions
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js deleted file mode 100644 index ca5ec9964..000000000 --- a/src/components/ui/Select.js +++ /dev/null | |||
@@ -1,101 +0,0 @@ | |||
1 | import { createRef, Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { Field } from 'mobx-react-form'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | // Can this file be merged into the './select/index.tsx' file? | ||
8 | class Select extends Component { | ||
9 | static propTypes = { | ||
10 | field: PropTypes.instanceOf(Field).isRequired, | ||
11 | className: PropTypes.string, | ||
12 | showLabel: PropTypes.bool, | ||
13 | disabled: PropTypes.bool, | ||
14 | multiple: PropTypes.bool, | ||
15 | }; | ||
16 | |||
17 | static defaultProps = { | ||
18 | className: null, | ||
19 | showLabel: true, | ||
20 | disabled: false, | ||
21 | multiple: false, | ||
22 | }; | ||
23 | |||
24 | constructor(props) { | ||
25 | super(props); | ||
26 | |||
27 | this.element = createRef(); | ||
28 | } | ||
29 | |||
30 | multipleChange() { | ||
31 | const element = this.element.current; | ||
32 | |||
33 | const result = []; | ||
34 | const options = element && element.options; | ||
35 | |||
36 | for (const option of options) { | ||
37 | if (option.selected) { | ||
38 | result.push(option.value || option.text); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | const { field } = this.props; | ||
43 | field.value = result; | ||
44 | } | ||
45 | |||
46 | render() { | ||
47 | const { field, className, showLabel, disabled, multiple } = this.props; | ||
48 | |||
49 | let selected = field.value; | ||
50 | |||
51 | if (multiple) { | ||
52 | if (typeof field.value === 'string' && field.value.slice(0, 1) === '[') { | ||
53 | // Value is JSON encoded | ||
54 | selected = JSON.parse(field.value); | ||
55 | } else if (typeof field.value === 'object') { | ||
56 | selected = field.value; | ||
57 | } else { | ||
58 | selected = [field.value]; | ||
59 | } | ||
60 | } | ||
61 | |||
62 | return ( | ||
63 | <div | ||
64 | className={classnames({ | ||
65 | 'franz-form__field': true, | ||
66 | 'has-error': field.error, | ||
67 | 'is-disabled': disabled, | ||
68 | [`${className}`]: className, | ||
69 | })} | ||
70 | > | ||
71 | {field.label && showLabel && ( | ||
72 | <label className="franz-form__label" htmlFor={field.name}> | ||
73 | {field.label} | ||
74 | </label> | ||
75 | )} | ||
76 | <select | ||
77 | onChange={multiple ? e => this.multipleChange(e) : field.onChange} | ||
78 | id={field.id} | ||
79 | defaultValue={selected} | ||
80 | className="franz-form__select" | ||
81 | disabled={field.disabled || disabled} | ||
82 | multiple={multiple} | ||
83 | ref={this.element} | ||
84 | > | ||
85 | {field.options.map(type => ( | ||
86 | <option | ||
87 | key={type.value} | ||
88 | value={type.value} | ||
89 | disabled={type.disabled} | ||
90 | > | ||
91 | {type.label} | ||
92 | </option> | ||
93 | ))} | ||
94 | </select> | ||
95 | {field.error && <div className="franz-form__error">{field.error}</div>} | ||
96 | </div> | ||
97 | ); | ||
98 | } | ||
99 | } | ||
100 | |||
101 | export default observer(Select); | ||