aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 12:57:33 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 13:47:13 +0200
commitefa037d34be7b1570efdc767c79fad8d4005f10e (patch)
treecf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/src/nfvo-components/input/SelectInput.jsx
parentf5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff)
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/SelectInput.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/input/SelectInput.jsx52
1 files changed, 52 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
new file mode 100644
index 0000000000..1036ac41c3
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
@@ -0,0 +1,52 @@
+/**
+ * The HTML structure here is aligned with bootstrap HTML structure for form elements.
+ * In this way we have proper styling and it is aligned with other form elements on screen.
+ *
+ * Select and MultiSelect options:
+ *
+ * label - the label to be shown which paired with the input
+ *
+ * all other "react-select" props - as documented on
+ * http://jedwatson.github.io/react-select/
+ * or
+ * https://github.com/JedWatson/react-select
+ */
+import React, {Component} from 'react';
+import Select from 'react-select';
+
+class SelectInput extends Component {
+
+ inputValue = [];
+
+ render() {
+ let {label, value, ...other} = this.props;
+ return (
+ <div className='validation-input-wrapper dropdown-multi-select'>
+ <div className='form-group'>
+ {label && <label className='control-label'>{label}</label>}
+ <Select ref='_myInput' onChange={value => this.onSelectChanged(value)} {...other} value={value} />
+ </div>
+ </div>
+ );
+ }
+
+ getValue() {
+ return this.inputValue && this.inputValue.length ? this.inputValue : '';
+ }
+
+ onSelectChanged(value) {
+ this.props.onMultiSelectChanged(value);
+ }
+
+ componentDidMount() {
+ let {value} = this.props;
+ this.inputValue = value ? value : [];
+ }
+ componentDidUpdate() {
+ if (this.inputValue !== this.props.value) {
+ this.inputValue = this.props.value;
+ }
+ }
+}
+
+export default SelectInput;