diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input')
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> ); |