summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input/validation
diff options
context:
space:
mode:
authorEinav Weiss Keidar <einavw@amdocs.com>2018-03-20 14:45:40 +0200
committerAvi Gaffa <avi.gaffa@amdocs.com>2018-03-20 13:52:31 +0000
commit7fdf733a64670fceefc3ded35cfa581e1c458179 (patch)
treeb3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src/nfvo-components/input/validation
parentc7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff)
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/validation')
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Form.jsx272
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Input.jsx404
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx545
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx255
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx116
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx81
6 files changed, 960 insertions, 713 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 6df0bf9009..62fc29a55c 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -19,130 +19,160 @@ import PropTypes from 'prop-types';
import ValidationButtons from './ValidationButtons.jsx';
class Form extends React.Component {
-
- static defaultProps = {
- hasButtons : true,
- onSubmit : null,
- onReset : null,
- labledButtons: true,
- onValidChange : null,
- isValid: true,
- submitButtonText: null,
- cancelButtonText: null
- };
-
- static propTypes = {
- 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) {
- super(props);
- }
-
-
- render() {
- // eslint-disable-next-line no-unused-vars
- let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
- cancelButtonText, children, ...formProps} = this.props;
- return (
- <form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
- <div className='validation-form-content'>
- <fieldset disabled={isReadOnlyMode}>
- {children}
- </fieldset>
- </div>
- {hasButtons &&
- <ValidationButtons
- labledButtons={labledButtons}
- submitButtonText={submitButtonText}
- cancelButtonText={cancelButtonText}
- ref={(buttons) => this.buttons = buttons}
- isReadOnlyMode={isReadOnlyMode}/>}
- </form>
- );
- }
-
- handleFormValidation(event) {
- event.preventDefault();
- if (this.props.onValidateForm && !this.props.formReady){
- return this.props.onValidateForm();
- } else {
- return this.handleFormSubmit(event);
- }
- }
- handleFormSubmit(event) {
- if (event) {
- event.preventDefault();
- }
- if(this.props.onSubmit) {
- return this.props.onSubmit(event);
- }
- }
-
- componentDidMount() {
- if (this.props.hasButtons) {
- this.buttons.setState({isValid: this.props.isValid});
- }
- }
-
-
-
- componentDidUpdate(prevProps) {
- // only handling this programatically if the validation of the form is done outside of the view
- // (example with a form that is dependent on the state of other forms)
- if (prevProps.isValid !== this.props.isValid) {
- if (this.props.hasButtons) {
- this.buttons.setState({isValid: this.props.isValid});
- }
- // callback in case form is part of bigger picture in view
- if (this.props.onValidChange) {
- this.props.onValidChange(this.props.isValid);
- }
-
- // TODO - maybe this has to be part of componentWillUpdate
- if(this.props.onValidityChanged) {
- this.props.onValidityChanged(this.props.isValid);
- }
- }
- if (this.props.formReady) { // if form validation succeeded -> continue with submit
- this.handleFormSubmit();
- }
- }
-
+ static defaultProps = {
+ hasButtons: true,
+ onSubmit: null,
+ onReset: null,
+ labledButtons: true,
+ onValidChange: null,
+ isValid: true,
+ submitButtonText: null,
+ cancelButtonText: null
+ };
+
+ static propTypes = {
+ 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) {
+ super(props);
+ }
+ render() {
+ /* eslint-disable no-unused-vars */
+ let {
+ isValid,
+ onValidChange,
+ onValidityChanged,
+ onDataChanged,
+ formReady,
+ onValidateForm,
+ isReadOnlyMode,
+ hasButtons,
+ onSubmit,
+ labledButtons,
+ submitButtonText,
+ cancelButtonText,
+ children,
+ ...formProps
+ } = this.props;
+ /* eslint-enable no-unused-vars */
+ return (
+ <form
+ {...formProps}
+ ref={form => (this.form = form)}
+ onSubmit={event => this.handleFormValidation(event)}>
+ <div className="validation-form-content">
+ <fieldset disabled={isReadOnlyMode}>{children}</fieldset>
+ </div>
+ {hasButtons && (
+ <ValidationButtons
+ labledButtons={labledButtons}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ ref={buttons => (this.buttons = buttons)}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </form>
+ );
+ }
+
+ handleFormValidation(event) {
+ event.preventDefault();
+ if (this.props.onValidateForm && !this.props.formReady) {
+ return this.props.onValidateForm();
+ } else {
+ return this.handleFormSubmit(event);
+ }
+ }
+ handleFormSubmit(event) {
+ if (event) {
+ event.preventDefault();
+ }
+ if (this.props.onSubmit) {
+ return this.props.onSubmit(event);
+ }
+ }
+
+ componentDidMount() {
+ if (this.props.hasButtons) {
+ this.buttons.setState({ isValid: this.props.isValid });
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ // only handling this programatically if the validation of the form is done outside of the view
+ // (example with a form that is dependent on the state of other forms)
+ if (prevProps.isValid !== this.props.isValid) {
+ if (this.props.hasButtons) {
+ this.buttons.setState({ isValid: this.props.isValid });
+ }
+ // callback in case form is part of bigger picture in view
+ if (this.props.onValidChange) {
+ this.props.onValidChange(this.props.isValid);
+ }
+
+ // TODO - maybe this has to be part of componentWillUpdate
+ if (this.props.onValidityChanged) {
+ this.props.onValidityChanged(this.props.isValid);
+ }
+ }
+ if (this.props.formReady) {
+ // if form validation succeeded -> continue with submit
+ this.handleFormSubmit();
+ }
+ }
}
export class TabsForm extends Form {
- render() {
- // eslint-disable-next-line no-unused-vars
- 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}
- submitButtonText={submitButtonText}
- cancelButtonText={cancelButtonText}
- ref={buttons => this.buttons = buttons}
- isReadOnlyMode={isReadOnlyMode}/>
- }
- </form>
- );
- }
+ render() {
+ /* eslint-disable no-unused-vars */
+ let {
+ submitButtonText,
+ cancelButtonText,
+ isValid,
+ formReady,
+ onValidateForm,
+ isReadOnlyMode,
+ hasButtons,
+ onSubmit,
+ labledButtons,
+ onValidChange,
+ onValidityChanged,
+ onDataChanged,
+ children,
+ ...formProps
+ } = this.props;
+ /* eslint-enable no-unused-vars */
+ return (
+ <form
+ {...formProps}
+ ref={form => (this.form = form)}
+ onSubmit={event => this.handleFormValidation(event)}>
+ <div className="validation-form-content">{children}</div>
+ {hasButtons && (
+ <ValidationButtons
+ labledButtons={labledButtons}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ ref={buttons => (this.buttons = buttons)}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </form>
+ );
+ }
}
export default Form;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index 33cea933b5..a5d6f4fd7a 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -25,191 +25,249 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx';
class Input extends React.Component {
+ state = {
+ value: this.props.value,
+ checked: this.props.checked,
+ selectedValues: []
+ };
- state = {
- value: this.props.value,
- checked: this.props.checked,
- selectedValues: []
- };
+ render() {
+ /* eslint-disable no-unused-vars */
+ const {
+ label,
+ isReadOnlyMode,
+ value,
+ onBlur,
+ onKeyDown,
+ type,
+ disabled,
+ checked,
+ name
+ } = this.props;
+ const {
+ groupClassName,
+ isValid = true,
+ errorText,
+ isRequired,
+ overlayPos,
+ ...inputProps
+ } = this.props;
+ const {
+ dateFormat,
+ startDate,
+ endDate,
+ selectsStart,
+ selectsEnd
+ } = this.props; // Date Props
+ /* eslint-enable no-unused-vars */
+ let wrapperClassName =
+ type !== 'radio'
+ ? 'validation-input-wrapper'
+ : 'validation-radio-wrapper';
+ if (disabled) {
+ wrapperClassName += ' disabled';
+ }
+ return (
+ <div className={wrapperClassName}>
+ <FormGroup
+ className={classNames('form-group', [groupClassName], {
+ required: isRequired,
+ 'has-error': !isValid
+ })}>
+ {label &&
+ (type !== 'checkbox' && type !== 'radio') && (
+ <label className="control-label">{label}</label>
+ )}
+ {type === 'text' && (
+ <FormControl
+ bsClass={'form-control input-options-other'}
+ onChange={e => this.onChange(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ value={value || ''}
+ inputRef={input => (this.input = input)}
+ type={type}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ {type === 'number' && (
+ <FormControl
+ bsClass={'form-control input-options-other'}
+ onChange={e => this.onChange(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ value={value !== undefined ? value : ''}
+ inputRef={input => (this.input = input)}
+ type={type}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
- render() {
- const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
- // eslint-disable-next-line no-unused-vars
- const {groupClassName, isValid = true, errorText, isRequired, overlayPos, ...inputProps} = this.props;
- const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props
- let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper';
- if (disabled) {
- wrapperClassName += ' disabled';
- }
- return(
- <div className={wrapperClassName}>
- <FormGroup className={classNames('form-group', [groupClassName], {'required' : isRequired , 'has-error' : !isValid})} >
- {(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
- {type === 'text' &&
- <FormControl
- bsClass={'form-control input-options-other'}
- onChange={(e) => this.onChange(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- value={value || ''}
- inputRef={(input) => this.input = input}
- type={type}
- data-test-id={this.props['data-test-id']}/>}
- {type === 'number' &&
- <FormControl
- bsClass={'form-control input-options-other'}
- onChange={(e) => this.onChange(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- value={(value !== undefined) ? value : ''}
- inputRef={(input) => this.input = input}
- type={type}
- data-test-id={this.props['data-test-id']}/>}
+ {type === 'textarea' && (
+ <FormControl
+ className="form-control input-options-other"
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value || ''}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ componentClass={type}
+ onChange={e => this.onChange(e)}
+ inputRef={input => (this.input = input)}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
- {type === 'textarea' &&
- <FormControl
- className='form-control input-options-other'
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value || ''}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- componentClass={type}
- onChange={(e) => this.onChange(e)}
- inputRef={(input) => this.input = input}
- data-test-id={this.props['data-test-id']}/>}
+ {type === 'checkbox' && (
+ <Checkbox
+ className={classNames({
+ required: isRequired,
+ 'has-error': !isValid
+ })}
+ onChange={e => this.onChangeCheckBox(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ checked={checked}
+ data-test-id={this.props['data-test-id']}>
+ {label}
+ </Checkbox>
+ )}
- {type === 'checkbox' &&
- <Checkbox
- className={classNames({'required' : isRequired , 'has-error' : !isValid})}
- onChange={(e)=>this.onChangeCheckBox(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- checked={checked}
- data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
+ {type === 'radio' && (
+ <Radio
+ name={name}
+ checked={checked}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value}
+ onChange={isChecked =>
+ this.onChangeRadio(isChecked)
+ }
+ inputRef={input => (this.input = input)}
+ label={label}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ {type === 'select' && (
+ <FormControl
+ onClick={e => this.optionSelect(e)}
+ className="custom-select"
+ componentClass={type}
+ inputRef={input => (this.input = input)}
+ name={name}
+ {...inputProps}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ {type === 'date' && (
+ <Datepicker
+ date={value}
+ format={dateFormat}
+ startDate={startDate}
+ endDate={endDate}
+ inputRef={input => (this.input = input)}
+ onChange={this.props.onChange}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ data-test-id={this.props['data-test-id']}
+ selectsStart={selectsStart}
+ selectsEnd={selectsEnd}
+ />
+ )}
+ </FormGroup>
+ {this.renderErrorOverlay()}
+ </div>
+ );
+ }
- {type === 'radio' &&
- <Radio name={name}
- checked={checked}
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value}
- onChange={(isChecked)=>this.onChangeRadio(isChecked)}
- inputRef={(input) => this.input = input}
- label={label}
- data-test-id={this.props['data-test-id']} />}
- {type === 'select' &&
- <FormControl onClick={ (e) => this.optionSelect(e) }
- className='custom-select'
- componentClass={type}
- inputRef={(input) => this.input = input}
- name={name} {...inputProps}
- data-test-id={this.props['data-test-id']}/>}
- {type === 'date' &&
- <Datepicker
- date={value}
- format={dateFormat}
- startDate={startDate}
- endDate={endDate}
- inputRef={(input) => this.input = input}
- onChange={this.props.onChange}
- disabled={isReadOnlyMode || Boolean(disabled)}
- data-test-id={this.props['data-test-id']}
- selectsStart={selectsStart}
- selectsEnd={selectsEnd} />}
- </FormGroup>
- { this.renderErrorOverlay() }
- </div>
- );
- }
+ getValue() {
+ return this.props.type !== 'select'
+ ? this.state.value
+ : this.state.selectedValues;
+ }
- getValue() {
- return this.props.type !== 'select' ? this.state.value : this.state.selectedValues;
- }
+ getChecked() {
+ return this.state.checked;
+ }
- getChecked() {
- return this.state.checked;
- }
+ optionSelect(e) {
+ let selectedValues = [];
+ if (e.target.value) {
+ selectedValues.push(e.target.value);
+ }
+ this.setState({
+ selectedValues
+ });
+ }
- optionSelect(e) {
- let selectedValues = [];
- if (e.target.value) {
- selectedValues.push(e.target.value);
- }
- this.setState({
- selectedValues
- });
- }
+ onChange(e) {
+ const { onChange, type } = this.props;
+ let value = e.target.value;
+ if (type === 'number') {
+ if (value === '') {
+ value = undefined;
+ } else {
+ value = Number(value);
+ }
+ }
+ this.setState({
+ value
+ });
+ onChange(value);
+ }
- onChange(e) {
- const {onChange, type} = this.props;
- let value = e.target.value;
- if (type === 'number') {
- if (value === '') {
- value = undefined;
- } else {
- value = Number(value);
- }
- }
- this.setState({
- value
- });
- onChange(value);
- }
+ onChangeCheckBox(e) {
+ let { onChange } = this.props;
+ let checked = e.target.checked;
+ this.setState({
+ checked
+ });
+ onChange(checked);
+ }
- onChangeCheckBox(e) {
- let {onChange} = this.props;
- let checked = e.target.checked;
- this.setState({
- checked
- });
- onChange(checked);
- }
+ onChangeRadio(isChecked) {
+ let { onChange } = this.props;
+ this.setState({
+ checked: isChecked
+ });
+ onChange(this.state.value);
+ }
- onChangeRadio(isChecked) {
- let {onChange} = this.props;
- this.setState({
- checked: isChecked
- });
- onChange(this.state.value);
- }
+ focus() {
+ ReactDOM.findDOMNode(this.input).focus();
+ }
- focus() {
- ReactDOM.findDOMNode(this.input).focus();
- }
+ renderErrorOverlay() {
+ let position = 'right';
+ const { errorText = '', isValid = true, type, overlayPos } = this.props;
- renderErrorOverlay() {
- let position = 'right';
- const {errorText = '', isValid = true, type, overlayPos} = this.props;
-
- if (overlayPos) {
- position = overlayPos;
- }
- else if (type === 'text'
- || type === 'email'
- || type === 'number'
- || type === 'radio'
- || type === 'password'
- || type === 'date') {
- position = 'bottom';
- }
-
- return (
- <Overlay
- show={!isValid}
- placement={position}
- target={() => {
- let target = ReactDOM.findDOMNode(this.input);
- return target.offsetParent ? target : undefined;
- }}
- container={this}>
- <Tooltip
- id={`error-${errorText.replace(' ', '-')}`}
- className='validation-error-message'>
- {errorText}
- </Tooltip>
- </Overlay>
- );
- }
+ if (overlayPos) {
+ position = overlayPos;
+ } else if (
+ type === 'text' ||
+ type === 'email' ||
+ type === 'number' ||
+ type === 'radio' ||
+ type === 'password' ||
+ type === 'date'
+ ) {
+ position = 'bottom';
+ }
+ return (
+ <Overlay
+ show={!isValid}
+ placement={position}
+ target={() => {
+ let target = ReactDOM.findDOMNode(this.input);
+ return target.offsetParent ? target : undefined;
+ }}
+ container={this}>
+ <Tooltip
+ id={`error-${errorText.replace(' ', '-')}`}
+ className="validation-error-message">
+ {errorText}
+ </Tooltip>
+ </Overlay>
+ );
+ }
}
-export default Input;
+export default Input;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
index 11b07ba9da..019b6a5c70 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
@@ -22,260 +22,341 @@ import Select from 'nfvo-components/input/SelectInput.jsx';
import Overlay from 'react-bootstrap/lib/Overlay.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
-export const other = {OTHER: 'Other'};
+export const other = { OTHER: 'Other' };
class InputOptions extends React.Component {
+ static propTypes = {
+ values: PropTypes.arrayOf(
+ PropTypes.shape({
+ enum: PropTypes.string,
+ title: PropTypes.string
+ })
+ ),
+ isEnabledOther: PropTypes.bool,
+ label: PropTypes.string,
+ selectedValue: PropTypes.string,
+ multiSelectedEnum: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.array
+ ]),
+ 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
+ };
- static propTypes = {
- values: PropTypes.arrayOf(PropTypes.shape({
- enum: PropTypes.string,
- title: PropTypes.string
- })),
- isEnabledOther: PropTypes.bool,
- label: PropTypes.string,
- selectedValue: PropTypes.string,
- multiSelectedEnum: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.array
- ]),
- 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 = {
+ otherInputDisabled: !this.props.otherValue
+ };
- state = {
- otherInputDisabled: !this.props.otherValue
- };
+ oldProps = {
+ selectedEnum: '',
+ otherValue: '',
+ multiSelectedEnum: []
+ };
- oldProps = {
- selectedEnum: '',
- otherValue: '',
- multiSelectedEnum: []
- };
+ render() {
+ let {
+ label,
+ isRequired,
+ values,
+ otherValue,
+ onOtherChange,
+ isMultiSelect,
+ onBlur,
+ multiSelectedEnum,
+ selectedEnum,
+ isValid,
+ children,
+ isReadOnlyMode
+ } = this.props;
+ const dataTestId = this.props['data-test-id']
+ ? { 'data-test-id': this.props['data-test-id'] }
+ : {};
+ let currentMultiSelectedEnum = [];
+ let currentSelectedEnum = '';
+ let otherInputDisabled =
+ (isMultiSelect &&
+ (multiSelectedEnum === undefined ||
+ multiSelectedEnum.length === 0 ||
+ multiSelectedEnum[0] !== other.OTHER)) ||
+ (!isMultiSelect &&
+ (selectedEnum === undefined || selectedEnum !== other.OTHER));
+ if (isMultiSelect) {
+ currentMultiSelectedEnum = multiSelectedEnum;
+ if (!otherInputDisabled) {
+ currentSelectedEnum = multiSelectedEnum
+ ? multiSelectedEnum.toString()
+ : undefined;
+ }
+ } else if (selectedEnum) {
+ currentSelectedEnum = selectedEnum;
+ }
+ if (!onBlur) {
+ onBlur = () => {};
+ }
- render() {
- let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, isValid, children, isReadOnlyMode} = this.props;
- const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {};
- let currentMultiSelectedEnum = [];
- let currentSelectedEnum = '';
- let otherInputDisabled = (isMultiSelect && (multiSelectedEnum === undefined || multiSelectedEnum.length === 0 || multiSelectedEnum[0] !== other.OTHER))
- || (!isMultiSelect && (selectedEnum === undefined || selectedEnum !== other.OTHER));
- if (isMultiSelect) {
- currentMultiSelectedEnum = multiSelectedEnum;
- if(!otherInputDisabled) {
- currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
- }
- }
- else if(selectedEnum){
- currentSelectedEnum = selectedEnum;
- }
- if (!onBlur) {
- onBlur = () => {};
- }
+ return (
+ <div className="validation-input-wrapper">
+ <div
+ className={classNames('form-group', {
+ required: isRequired,
+ 'has-error': !isValid
+ })}>
+ {label && <label className="control-label">{label}</label>}
+ {isMultiSelect && otherInputDisabled ? (
+ <Select
+ {...dataTestId}
+ ref={input => (this.input = input)}
+ value={currentMultiSelectedEnum}
+ className="options-input"
+ clearable={false}
+ required={isRequired}
+ disabled={
+ isReadOnlyMode || Boolean(this.props.disabled)
+ }
+ onBlur={() => onBlur()}
+ onMultiSelectChanged={value =>
+ this.multiSelectEnumChanged(value)
+ }
+ options={this.renderMultiSelectOptions(values)}
+ multi
+ />
+ ) : (
+ <div
+ className={classNames('input-options', {
+ 'has-error': !isValid
+ })}>
+ <select
+ {...dataTestId}
+ ref={input => (this.input = input)}
+ label={label}
+ className="form-control input-options-select"
+ value={currentSelectedEnum}
+ style={{
+ width: otherInputDisabled ? '100%' : '100px'
+ }}
+ onBlur={() => onBlur()}
+ disabled={
+ isReadOnlyMode ||
+ Boolean(this.props.disabled)
+ }
+ onChange={value => this.enumChanged(value)}
+ type="select">
+ {children ||
+ (values &&
+ values.length &&
+ values.map((val, index) =>
+ this.renderOptions(val, index)
+ ))}
+ {onOtherChange && (
+ <option key="other" value={other.OTHER}>
+ {i18n(other.OTHER)}
+ </option>
+ )}
+ </select>
- return(
- <div className='validation-input-wrapper' >
- <div className={classNames('form-group', {'required' : isRequired, 'has-error' : !isValid})} >
- {label && <label className='control-label'>{label}</label>}
- {isMultiSelect && otherInputDisabled ?
- <Select
- {...dataTestId}
- ref={(input) => this.input = input}
- value={currentMultiSelectedEnum}
- className='options-input'
- clearable={false}
- required={isRequired}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- onBlur={() => onBlur()}
- onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
- options={this.renderMultiSelectOptions(values)}
- multi/> :
- <div className={classNames('input-options',{'has-error' : !isValid})} >
- <select
- {...dataTestId}
- ref={(input) => this.input = input}
- label={label}
- className='form-control input-options-select'
- value={currentSelectedEnum}
- style={{'width' : otherInputDisabled ? '100%' : '100px'}}
- onBlur={() => onBlur()}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- onChange={ value => this.enumChanged(value)}
- type='select'>
- {children || (values && values.length && values.map((val, index) => this.renderOptions(val, index)))}
- {onOtherChange && <option key='other' value={other.OTHER}>{i18n(other.OTHER)}</option>}
- </select>
+ {!otherInputDisabled && (
+ <div className="input-options-separator" />
+ )}
+ <input
+ className="form-control input-options-other"
+ placeholder={i18n('other')}
+ ref={otherValue =>
+ (this.otherValue = otherValue)
+ }
+ style={{
+ display: otherInputDisabled
+ ? 'none'
+ : 'block'
+ }}
+ disabled={
+ isReadOnlyMode ||
+ Boolean(this.props.disabled)
+ }
+ value={otherValue || ''}
+ onBlur={() => onBlur()}
+ onChange={() => this.changedOtherInput()}
+ />
+ </div>
+ )}
+ </div>
+ {this.renderErrorOverlay()}
+ </div>
+ );
+ }
- {!otherInputDisabled && <div className='input-options-separator'/>}
- <input
- className='form-control input-options-other'
- placeholder={i18n('other')}
- ref={(otherValue) => this.otherValue = otherValue}
- style={{'display' : otherInputDisabled ? 'none' : 'block'}}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- value={otherValue || ''}
- onBlur={() => onBlur()}
- onChange={() => this.changedOtherInput()}/>
- </div>
- }
- </div>
- { this.renderErrorOverlay() }
- </div>
- );
- }
+ renderOptions(val, index) {
+ return (
+ <option key={index} value={val.enum}>
+ {val.title}
+ </option>
+ );
+ }
- renderOptions(val, index){
- return (
- <option key={index} value={val.enum}>{val.title}</option>
- );
- }
+ renderMultiSelectOptions(values) {
+ let { onOtherChange } = this.props;
+ let optionsList = [];
+ if (onOtherChange) {
+ optionsList = values
+ .map(option => {
+ return {
+ label: option.title,
+ value: option.enum
+ };
+ })
+ .concat([
+ {
+ label: i18n(other.OTHER),
+ value: i18n(other.OTHER)
+ }
+ ]);
+ } else {
+ optionsList = values.map(option => {
+ return {
+ label: option.title,
+ value: option.enum
+ };
+ });
+ }
+ if (optionsList.length > 0 && optionsList[0].value === '') {
+ optionsList.shift();
+ }
+ return optionsList;
+ }
+ renderErrorOverlay() {
+ let position = 'right';
+ const { errorText = '', isValid = true, type, overlayPos } = this.props;
- renderMultiSelectOptions(values) {
- let {onOtherChange} = this.props;
- let optionsList = [];
- if (onOtherChange) {
- optionsList = values.map(option => {
- return {
- label: option.title,
- value: option.enum,
- };
- }).concat([{
- label: i18n(other.OTHER),
- value: i18n(other.OTHER),
- }]);
- }
- else {
- optionsList = values.map(option => {
- return {
- label: option.title,
- value: option.enum,
- };
- });
- }
- if (optionsList.length > 0 && optionsList[0].value === '') {
- optionsList.shift();
- }
- return optionsList;
- }
+ if (overlayPos) {
+ position = overlayPos;
+ } else if (
+ type === 'text' ||
+ type === 'email' ||
+ type === 'number' ||
+ type === 'password'
+ ) {
+ position = 'bottom';
+ }
- renderErrorOverlay() {
- let position = 'right';
- const {errorText = '', isValid = true, type, overlayPos} = this.props;
+ return (
+ <Overlay
+ show={!isValid}
+ placement={position}
+ target={() => {
+ let { otherInputDisabled } = this.state;
+ let target = otherInputDisabled
+ ? ReactDOM.findDOMNode(this.input)
+ : ReactDOM.findDOMNode(this.otherValue);
+ return target.offsetParent ? target : undefined;
+ }}
+ container={this}>
+ <Tooltip
+ id={`error-${errorText.replace(' ', '-')}`}
+ className="validation-error-message">
+ {errorText}
+ </Tooltip>
+ </Overlay>
+ );
+ }
- if (overlayPos) {
- position = overlayPos;
- }
- else if (type === 'text'
- || type === 'email'
- || type === 'number'
- || type === 'password') {
- position = 'bottom';
- }
+ getValue() {
+ let res = '';
+ let { isMultiSelect } = this.props;
+ let { otherInputDisabled } = this.state;
- return (
- <Overlay
- show={!isValid}
- placement={position}
- target={() => {
- let {otherInputDisabled} = this.state;
- let target = otherInputDisabled ? ReactDOM.findDOMNode(this.input) : ReactDOM.findDOMNode(this.otherValue);
- return target.offsetParent ? target : undefined;
- }}
- container={this}>
- <Tooltip
- id={`error-${errorText.replace(' ', '-')}`}
- className='validation-error-message'>
- {errorText}
- </Tooltip>
- </Overlay>
- );
- }
+ if (otherInputDisabled) {
+ res = isMultiSelect ? this.input.getValue() : this.input.value;
+ } else {
+ res = this.otherValue.value;
+ }
+ return res;
+ }
- getValue() {
- let res = '';
- let {isMultiSelect} = this.props;
- let {otherInputDisabled} = this.state;
+ enumChanged() {
+ let enumValue = this.input.value;
+ let {
+ onEnumChange,
+ onOtherChange,
+ isMultiSelect,
+ onChange
+ } = this.props;
+ this.setState({
+ otherInputDisabled:
+ !Boolean(onOtherChange) || enumValue !== other.OTHER
+ });
- if (otherInputDisabled) {
- res = isMultiSelect ? this.input.getValue() : this.input.value;
- } else {
- res = this.otherValue.value;
- }
- return res;
- }
+ let value = isMultiSelect ? [enumValue] : enumValue;
+ if (onEnumChange) {
+ onEnumChange(value);
+ }
+ if (onChange) {
+ onChange(value);
+ }
+ }
- enumChanged() {
- let enumValue = this.input.value;
- let {onEnumChange, onOtherChange, isMultiSelect, onChange} = this.props;
- this.setState({
- otherInputDisabled: !Boolean(onOtherChange) || enumValue !== other.OTHER
- });
+ multiSelectEnumChanged(enumValue) {
+ let { onEnumChange, onOtherChange } = this.props;
+ let selectedValues = enumValue.map(enumVal => {
+ return enumVal.value;
+ });
- let value = isMultiSelect ? [enumValue] : enumValue;
- if (onEnumChange) {
- onEnumChange(value);
- }
- if (onChange) {
- onChange(value);
- }
- }
+ if (this.state.otherInputDisabled === false) {
+ selectedValues.shift();
+ } else if (selectedValues.includes(i18n(other.OTHER))) {
+ selectedValues = [i18n(other.OTHER)];
+ }
- multiSelectEnumChanged(enumValue) {
- let {onEnumChange, onOtherChange} = this.props;
- let selectedValues = enumValue.map(enumVal => {
- return enumVal.value;
- });
+ this.setState({
+ otherInputDisabled:
+ !Boolean(onOtherChange) ||
+ !selectedValues.includes(i18n(other.OTHER))
+ });
+ onEnumChange(selectedValues);
+ }
- if (this.state.otherInputDisabled === false) {
- selectedValues.shift();
- }
- else if (selectedValues.includes(i18n(other.OTHER))) {
- selectedValues = [i18n(other.OTHER)];
- }
+ changedOtherInput() {
+ let { onOtherChange } = this.props;
+ onOtherChange(this.otherValue.value);
+ }
- this.setState({
- otherInputDisabled: !Boolean(onOtherChange) || !selectedValues.includes(i18n(other.OTHER))
- });
- onEnumChange(selectedValues);
- }
-
- changedOtherInput() {
- let {onOtherChange} = this.props;
- onOtherChange(this.otherValue.value);
- }
-
- componentDidUpdate() {
- let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
- if (this.oldProps.otherValue !== otherValue
- || this.oldProps.selectedEnum !== selectedEnum
- || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
- this.oldProps = {
- otherValue,
- selectedEnum,
- multiSelectedEnum
- };
- onInputChange();
- }
- }
-
- static getTitleByName(values, name) {
- for (let key of Object.keys(values)) {
- let option = values[key].find(option => option.enum === name);
- if (option) {
- return option.title;
- }
- }
- return name;
- }
+ componentDidUpdate() {
+ let {
+ otherValue,
+ selectedEnum,
+ onInputChange,
+ multiSelectedEnum
+ } = this.props;
+ if (
+ this.oldProps.otherValue !== otherValue ||
+ this.oldProps.selectedEnum !== selectedEnum ||
+ this.oldProps.multiSelectedEnum !== multiSelectedEnum
+ ) {
+ this.oldProps = {
+ otherValue,
+ selectedEnum,
+ multiSelectedEnum
+ };
+ onInputChange();
+ }
+ }
+ static getTitleByName(values, name) {
+ for (let key of Object.keys(values)) {
+ let option = values[key].find(option => option.enum === name);
+ if (option) {
+ return option.title;
+ }
+ }
+ return name;
+ }
}
export default InputOptions;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index e440fcda69..3e0bb32ca9 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -22,114 +22,149 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js';
import FormControl from 'react-bootstrap/lib/FormControl.js';
class InputWrapper extends React.Component {
-
- state = {
- value: this.props.value,
- checked: this.props.checked,
- selectedValues: []
- }
-
- render() {
- const {label, hasError, validations = {}, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
- const {groupClassName, ...inputProps} = this.props;
- return(
- <FormGroup className={classNames('form-group', [groupClassName], {'required' : validations.required , 'has-error' : hasError})} >
- {(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
- {(type === 'text' || type === 'number') &&
- <FormControl
- bsClass={'form-control input-options-other'}
- onChange={(e) => this.onChange(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- value={value || ''}
- ref={(input) => this.inputWrapper = input}
- type={type}
- data-test-id={this.props['data-test-id']}/>}
-
- {type === 'textarea' &&
- <FormControl
- className='form-control input-options-other'
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value || ''}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- componentClass={type}
- onChange={(e) => this.onChange(e)}
- data-test-id={this.props['data-test-id']}/>}
-
- {type === 'checkbox' &&
- <Checkbox
- className={classNames({'required' : validations.required , 'has-error' : hasError})}
- onChange={(e)=>this.onChangeCheckBox(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- checked={value}
- data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
-
- {type === 'radio' &&
- <Radio name={name}
- checked={checked}
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value}
- ref={(input) => this.inputWrapper = input}
- 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}
- name={name} {...inputProps}
- data-test-id={this.props['data-test-id']}/>}
-
- </FormGroup>
-
- );
- }
-
- getValue() {
- return this.props.type !== 'select' ? this.state.value : this.state.selectedValues;
- }
-
- getChecked() {
- return this.state.checked;
- }
-
- optionSelect(e) {
- let selectedValues = [];
- if (e.target.value) {
- selectedValues.push(e.target.value);
- }
- this.setState({
- selectedValues
- });
- }
-
- onChange(e) {
- let {onChange} = this.props;
- this.setState({
- value: e.target.value
- });
- onChange(e.target.value);
- }
-
- onChangeCheckBox(e) {
- let {onChange} = this.props;
- this.setState({
- checked: e.target.checked
- });
- onChange(e.target.checked);
- }
-
- onChangeRadio(isChecked) {
- let {onChange} = this.props;
- this.setState({
- checked: isChecked
- });
- onChange(this.state.value);
- }
-
- focus() {
- ReactDOM.findDOMNode(this.inputWrapper).focus();
- }
-
+ state = {
+ value: this.props.value,
+ checked: this.props.checked,
+ selectedValues: []
+ };
+
+ render() {
+ const {
+ label,
+ hasError,
+ validations = {},
+ isReadOnlyMode,
+ value,
+ onBlur,
+ onKeyDown,
+ type,
+ disabled,
+ checked,
+ name
+ } = this.props;
+ const { groupClassName, ...inputProps } = this.props;
+ return (
+ <FormGroup
+ className={classNames('form-group', [groupClassName], {
+ required: validations.required,
+ 'has-error': hasError
+ })}>
+ {label &&
+ (type !== 'checkbox' && type !== 'radio') && (
+ <label className="control-label">{label}</label>
+ )}
+ {(type === 'text' || type === 'number') && (
+ <FormControl
+ bsClass={'form-control input-options-other'}
+ onChange={e => this.onChange(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ value={value || ''}
+ ref={input => (this.inputWrapper = input)}
+ type={type}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+
+ {type === 'textarea' && (
+ <FormControl
+ className="form-control input-options-other"
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value || ''}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ componentClass={type}
+ onChange={e => this.onChange(e)}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+
+ {type === 'checkbox' && (
+ <Checkbox
+ className={classNames({
+ required: validations.required,
+ 'has-error': hasError
+ })}
+ onChange={e => this.onChangeCheckBox(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ checked={value}
+ data-test-id={this.props['data-test-id']}>
+ {label}
+ </Checkbox>
+ )}
+
+ {type === 'radio' && (
+ <Radio
+ name={name}
+ checked={checked}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value}
+ ref={input => (this.inputWrapper = input)}
+ 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}
+ name={name}
+ {...inputProps}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ </FormGroup>
+ );
+ }
+
+ getValue() {
+ return this.props.type !== 'select'
+ ? this.state.value
+ : this.state.selectedValues;
+ }
+
+ getChecked() {
+ return this.state.checked;
+ }
+
+ optionSelect(e) {
+ let selectedValues = [];
+ if (e.target.value) {
+ selectedValues.push(e.target.value);
+ }
+ this.setState({
+ selectedValues
+ });
+ }
+
+ onChange(e) {
+ let { onChange } = this.props;
+ this.setState({
+ value: e.target.value
+ });
+ onChange(e.target.value);
+ }
+
+ onChangeCheckBox(e) {
+ let { onChange } = this.props;
+ this.setState({
+ checked: e.target.checked
+ });
+ onChange(e.target.checked);
+ }
+
+ onChangeRadio(isChecked) {
+ let { onChange } = this.props;
+ this.setState({
+ checked: isChecked
+ });
+ onChange(this.state.value);
+ }
+
+ focus() {
+ ReactDOM.findDOMNode(this.inputWrapper).focus();
+ }
}
-export default InputWrapper;
+export default InputWrapper;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
index 0982c133e6..429985a902 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
@@ -16,64 +16,76 @@
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 { default as SDCTabs } from 'sdc-ui/lib/react/Tabs.js';
import Overlay from 'react-bootstrap/lib/Overlay.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-export default
-class Tabs extends React.Component {
+export default class Tabs extends React.Component {
+ static propTypes = {
+ children: PropTypes.node
+ };
- static propTypes = {
- children: PropTypes.node
- };
+ cloneTab(element) {
+ const { invalidTabs } = this.props;
+ return React.cloneElement(element, {
+ key: element.props.tabId,
+ className:
+ invalidTabs.indexOf(element.props.tabId) > -1
+ ? 'invalid-tab'
+ : 'valid-tab'
+ });
+ }
- cloneTab(element) {
- const {invalidTabs} = this.props;
- return React.cloneElement(
- element,
- {
- key: element.props.tabId,
- className: invalidTabs.indexOf(element.props.tabId) > -1 ? 'invalid-tab' : 'valid-tab'
- }
- );
- }
+ showTabsError() {
+ const { invalidTabs } = this.props;
+ const showError =
+ (invalidTabs.length === 1 &&
+ invalidTabs[0] !== this.props.activeTab) ||
+ invalidTabs.length > 1;
+ return showError;
+ }
- showTabsError() {
- const {invalidTabs} = this.props;
- const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeTab) || (invalidTabs.length > 1));
- return showError;
- }
-
- render() {
- // eslint-disable-next-line no-unused-vars
- let {invalidTabs, ...tabProps} = this.props;
- return (
- <div>
- <SDCTabs {...tabProps} ref='tabsList' id='tabsList' >
- {this.props.children.map(element => this.cloneTab(element))}
- </SDCTabs>
- <Overlay
- animation={false}
- show={this.showTabsError()}
- placement='bottom'
- target={() => {
- let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)');
- return target && target.offsetParent ? target : undefined;
- }
- }
- container={() => {
- let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)');
- return target && target.offsetParent ? target.offsetParent : this;
- }}>
- <Tooltip
- id='error-some-tabs-contain-errors'
- className='validation-error-message'>
- {i18n('One or more tabs are invalid')}
- </Tooltip>
- </Overlay>
- </div>
- );
- }
+ render() {
+ // eslint-disable-next-line no-unused-vars
+ let { invalidTabs, ...tabProps } = this.props;
+ return (
+ <div>
+ <SDCTabs {...tabProps} ref="tabsList" id="tabsList">
+ {this.props.children.map(element => this.cloneTab(element))}
+ </SDCTabs>
+ <Overlay
+ animation={false}
+ show={this.showTabsError()}
+ placement="bottom"
+ target={() => {
+ let target = ReactDOM.findDOMNode(
+ this.refs.tabsList
+ ).querySelector(
+ 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'
+ );
+ return target && target.offsetParent
+ ? target
+ : undefined;
+ }}
+ container={() => {
+ let target = ReactDOM.findDOMNode(
+ this.refs.tabsList
+ ).querySelector(
+ 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'
+ );
+ return target && target.offsetParent
+ ? target.offsetParent
+ : this;
+ }}>
+ <Tooltip
+ id="error-some-tabs-contain-errors"
+ className="validation-error-message">
+ {i18n('One or more tabs are invalid')}
+ </Tooltip>
+ </Overlay>
+ </div>
+ );
+ }
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index 151d3fe859..e460f68a98 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -27,32 +27,63 @@ import Button from 'sdc-ui/lib/react/Button.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
class ValidationButtons extends React.Component {
+ static propTypes = {
+ labledButtons: PropTypes.bool.isRequired,
+ isReadOnlyMode: PropTypes.bool,
+ submitButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
+ };
- static propTypes = {
- labledButtons: PropTypes.bool.isRequired,
- isReadOnlyMode: PropTypes.bool,
- submitButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
- };
+ state = {
+ isValid: this.props.formValid
+ };
- state = {
- isValid: this.props.formValid
- };
-
- render() {
- let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : <SVGIcon className='check' name='check'/>;
- let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : <SVGIcon className='close' name='close'/>;
- return (
- <div className='validation-buttons'>
- {!this.props.isReadOnlyMode ?
- <div>
- <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' data-test-id='form-close-button'>{i18n('Close')}</Button>
- }
- </div>
- );
- }
+ render() {
+ let submitBtn = this.props.labledButtons ? (
+ this.props.submitButtonText ? (
+ this.props.submitButtonText
+ ) : (
+ i18n('Save')
+ )
+ ) : (
+ <SVGIcon className="check" name="check" />
+ );
+ let closeBtn = this.props.labledButtons ? (
+ this.props.cancelButtonText ? (
+ this.props.cancelButtonText
+ ) : (
+ i18n('Cancel')
+ )
+ ) : (
+ <SVGIcon className="close" name="close" />
+ );
+ return (
+ <div className="validation-buttons">
+ {!this.props.isReadOnlyMode ? (
+ <div>
+ <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"
+ data-test-id="form-close-button">
+ {i18n('Close')}
+ </Button>
+ )}
+ </div>
+ );
+ }
}
export default ValidationButtons;