aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ui/Select.js
diff options
context:
space:
mode:
authorLibravatar muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>2022-11-01 06:42:12 +0530
committerLibravatar GitHub <noreply@github.com>2022-11-01 01:12:12 +0000
commit85d1aac4cd70e79d5ab64684dea09e92b17ed2c2 (patch)
treea006a2eb5c58b9351219d8a85d57a04c5c73787a /src/components/ui/Select.js
parentrefactor: convert global app to typescript (#723) (diff)
downloadferdium-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.js101
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 @@
1import { createRef, Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react';
4import { Field } from 'mobx-react-form';
5import classnames from 'classnames';
6
7// Can this file be merged into the './select/index.tsx' file?
8class 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
101export default observer(Select);