aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input')
-rw-r--r--openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx7
-rw-r--r--openecomp-ui/src/nfvo-components/input/ToggleInput.jsx9
-rw-r--r--openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx17
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Form.jsx37
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Input.jsx18
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx39
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx10
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx3
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx15
9 files changed, 86 insertions, 69 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index eab1d45ef4..82fbe1deed 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -14,6 +14,7 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
@@ -76,9 +77,9 @@ class ExpandableInputOpened extends React.Component {
class ExpandableInput extends React.Component {
static propTypes = {
- iconType: React.PropTypes.string,
- onChange: React.PropTypes.func,
- value: React.PropTypes.string
+ iconType: PropTypes.string,
+ onChange: PropTypes.func,
+ value: PropTypes.string
};
state = {showInput: false};
diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
index 23af72a26a..31a8a66d86 100644
--- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
@@ -14,15 +14,16 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
export default
class ToggleInput extends React.Component {
static propTypes = {
- label: React.PropTypes.node,
- value: React.PropTypes.bool,
- onChange: React.PropTypes.func,
- disabled: React.PropTypes.bool
+ label: PropTypes.node,
+ value: PropTypes.bool,
+ onChange: PropTypes.func,
+ disabled: PropTypes.bool
}
static defaultProps = {
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index a3be363ba4..a689c50778 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -14,6 +14,7 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
@@ -21,17 +22,17 @@ class DualListboxView extends React.Component {
static propTypes = {
- availableList: React.PropTypes.arrayOf(React.PropTypes.shape({
- id: React.PropTypes.string.isRequired,
- name: React.PropTypes.string.isRequired
+ availableList: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
})),
- filterTitle: React.PropTypes.shape({
- left: React.PropTypes.string,
- right: React.PropTypes.string
+ filterTitle: PropTypes.shape({
+ left: PropTypes.string,
+ right: PropTypes.string
}),
- selectedValuesList: React.PropTypes.arrayOf(React.PropTypes.string),
+ selectedValuesList: PropTypes.arrayOf(PropTypes.string),
- onChange: React.PropTypes.func.isRequired
+ onChange: PropTypes.func.isRequired
};
static defaultProps = {
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 8d53322587..6df0bf9009 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -15,6 +15,7 @@
*/
import React from 'react';
+import PropTypes from 'prop-types';
import ValidationButtons from './ValidationButtons.jsx';
class Form extends React.Component {
@@ -31,18 +32,18 @@ class Form extends React.Component {
};
static propTypes = {
- isValid : React.PropTypes.bool,
- formReady : React.PropTypes.bool,
- isReadOnlyMode : React.PropTypes.bool,
- hasButtons : React.PropTypes.bool,
- onSubmit : React.PropTypes.func,
- onReset : React.PropTypes.func,
- labledButtons: React.PropTypes.bool,
- submitButtonText: React.PropTypes.string,
- cancelButtonText: React.PropTypes.string,
- onValidChange : React.PropTypes.func,
- onValidityChanged: React.PropTypes.func,
- onValidateForm: React.PropTypes.func
+ isValid : PropTypes.bool,
+ formReady : PropTypes.bool,
+ isReadOnlyMode : PropTypes.bool,
+ hasButtons : PropTypes.bool,
+ onSubmit : PropTypes.func,
+ onReset : PropTypes.func,
+ labledButtons: PropTypes.bool,
+ submitButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string,
+ onValidChange : PropTypes.func,
+ onValidityChanged: PropTypes.func,
+ onValidateForm: PropTypes.func
};
constructor(props) {
@@ -124,13 +125,21 @@ class Form extends React.Component {
export class TabsForm extends Form {
render() {
// eslint-disable-next-line no-unused-vars
- let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
+ let {submitButtonText, cancelButtonText, isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children,
+ ...formProps} = this.props;
return (
<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
<div className='validation-form-content'>
{children}
</div>
- {hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
+ {hasButtons &&
+ <ValidationButtons
+ labledButtons={labledButtons}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ ref={buttons => this.buttons = buttons}
+ isReadOnlyMode={isReadOnlyMode}/>
+ }
</form>
);
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index eef8fee1ce..9f0e9acca8 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -17,7 +17,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import Checkbox from 'react-bootstrap/lib/Checkbox.js';
-import Radio from 'react-bootstrap/lib/Radio.js';
+import Radio from 'sdc-ui/lib/react/Radio.js';
import FormGroup from 'react-bootstrap/lib/FormGroup.js';
import FormControl from 'react-bootstrap/lib/FormControl.js';
import Overlay from 'react-bootstrap/lib/Overlay.js';
@@ -85,7 +85,7 @@ class Input extends React.Component {
className={classNames({'required' : isRequired , 'has-error' : !isValid})}
onChange={(e)=>this.onChangeCheckBox(e)}
disabled={isReadOnlyMode || Boolean(disabled)}
- checked={value}
+ checked={checked}
data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
{type === 'radio' &&
@@ -93,9 +93,10 @@ class Input extends React.Component {
checked={checked}
disabled={isReadOnlyMode || Boolean(disabled)}
value={value}
- onChange={(e)=>this.onChangeRadio(e)}
+ onChange={(isChecked)=>this.onChangeRadio(isChecked)}
inputRef={(input) => this.input = input}
- data-test-id={this.props['data-test-id']}>{label}</Radio>}
+ label={label}
+ data-test-id={this.props['data-test-id']} />}
{type === 'select' &&
<FormControl onClick={ (e) => this.optionSelect(e) }
componentClass={type}
@@ -156,16 +157,17 @@ class Input extends React.Component {
onChangeCheckBox(e) {
let {onChange} = this.props;
+ let checked = e.target.checked;
this.setState({
- checked: e.target.checked
+ checked
});
- onChange(e.target.checked);
+ onChange(checked);
}
- onChangeRadio(e) {
+ onChangeRadio(isChecked) {
let {onChange} = this.props;
this.setState({
- checked: e.target.checked
+ checked: isChecked
});
onChange(this.state.value);
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
index 9b11d27c2b..11b07ba9da 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
@@ -14,6 +14,7 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import i18n from 'nfvo-utils/i18n/i18n.js';
import classNames from 'classnames';
@@ -26,27 +27,27 @@ export const other = {OTHER: 'Other'};
class InputOptions extends React.Component {
static propTypes = {
- values: React.PropTypes.arrayOf(React.PropTypes.shape({
- enum: React.PropTypes.string,
- title: React.PropTypes.string
+ values: PropTypes.arrayOf(PropTypes.shape({
+ enum: PropTypes.string,
+ title: PropTypes.string
})),
- isEnabledOther: React.PropTypes.bool,
- label: React.PropTypes.string,
- selectedValue: React.PropTypes.string,
- multiSelectedEnum: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.array
+ isEnabledOther: PropTypes.bool,
+ label: PropTypes.string,
+ selectedValue: PropTypes.string,
+ multiSelectedEnum: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.array
]),
- selectedEnum: React.PropTypes.string,
- otherValue: React.PropTypes.string,
- overlayPos: React.PropTypes.string,
- onEnumChange: React.PropTypes.func,
- onOtherChange: React.PropTypes.func,
- onBlur: React.PropTypes.func,
- isRequired: React.PropTypes.bool,
- isMultiSelect: React.PropTypes.bool,
- isValid: React.PropTypes.bool,
- disabled: React.PropTypes.bool
+ selectedEnum: PropTypes.string,
+ otherValue: PropTypes.string,
+ overlayPos: PropTypes.string,
+ onEnumChange: PropTypes.func,
+ onOtherChange: PropTypes.func,
+ onBlur: PropTypes.func,
+ isRequired: PropTypes.bool,
+ isMultiSelect: PropTypes.bool,
+ isValid: PropTypes.bool,
+ disabled: PropTypes.bool
};
state = {
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index 6c8115deee..e440fcda69 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -17,7 +17,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import Checkbox from 'react-bootstrap/lib/Checkbox.js';
-import Radio from 'react-bootstrap/lib/Radio.js';
+import Radio from 'sdc-ui/lib/react/Radio.js';
import FormGroup from 'react-bootstrap/lib/FormGroup.js';
import FormControl from 'react-bootstrap/lib/FormControl.js';
@@ -72,8 +72,8 @@ class InputWrapper extends React.Component {
disabled={isReadOnlyMode || Boolean(disabled)}
value={value}
ref={(input) => this.inputWrapper = input}
- onChange={(e)=>this.onChangeRadio(e)}
- data-test-id={this.props['data-test-id']}>{label}</Radio>}
+ onChange={(isChecked)=>this.onChangeRadio(isChecked)} label={label}
+ data-test-id={this.props['data-test-id']} />}
{type === 'select' &&
<FormControl onClick={ (e) => this.optionSelect(e) }
componentClass={type}
@@ -119,10 +119,10 @@ class InputWrapper extends React.Component {
onChange(e.target.checked);
}
- onChangeRadio(e) {
+ onChangeRadio(isChecked) {
let {onChange} = this.props;
this.setState({
- checked: e.target.checked
+ checked: isChecked
});
onChange(this.state.value);
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
index 6f33536b04..0982c133e6 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
@@ -14,6 +14,7 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js';
import Overlay from 'react-bootstrap/lib/Overlay.js';
@@ -25,7 +26,7 @@ export default
class Tabs extends React.Component {
static propTypes = {
- children: React.PropTypes.node
+ children: PropTypes.node
};
cloneTab(element) {
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index c3808dd2c3..151d3fe859 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -21,6 +21,7 @@
* labledButtons - whether or not to use labeled buttons or icons only
*/
import React from 'react';
+import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Button from 'sdc-ui/lib/react/Button.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
@@ -28,10 +29,10 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
class ValidationButtons extends React.Component {
static propTypes = {
- labledButtons: React.PropTypes.bool.isRequired,
- isReadOnlyMode: React.PropTypes.bool,
- submitButtonText: React.PropTypes.string,
- cancelButtonText: React.PropTypes.string
+ labledButtons: PropTypes.bool.isRequired,
+ isReadOnlyMode: PropTypes.bool,
+ submitButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
};
state = {
@@ -45,10 +46,10 @@ class ValidationButtons extends React.Component {
<div className='validation-buttons'>
{!this.props.isReadOnlyMode ?
<div>
- <Button type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
- <Button btnType='outline' type='reset'>{closeBtn}</Button>
+ <Button type='submit' data-test-id='form-submit-button' disabled={!this.state.isValid}>{submitBtn}</Button>
+ <Button btnType='outline' type='reset' data-test-id='form-close-button'>{closeBtn}</Button>
</div>
- : <Button btnType='outline' type='reset'>{i18n('Close')}</Button>
+ : <Button btnType='outline' type='reset' data-test-id='form-close-button'>{i18n('Close')}</Button>
}
</div>
);