[SDC] Onboarding 1710 rebase.
Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 98810d1..8d53322 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -25,7 +25,9 @@
onReset : null,
labledButtons: true,
onValidChange : null,
- isValid: true
+ isValid: true,
+ submitButtonText: null,
+ cancelButtonText: null
};
static propTypes = {
@@ -36,6 +38,8 @@
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
@@ -48,7 +52,8 @@
render() {
// eslint-disable-next-line no-unused-vars
- let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
+ 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'>
@@ -56,7 +61,13 @@
{children}
</fieldset>
</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 59c35d7..eef8fee 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -22,6 +22,7 @@
import FormControl from 'react-bootstrap/lib/FormControl.js';
import Overlay from 'react-bootstrap/lib/Overlay.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx';
class Input extends React.Component {
@@ -29,13 +30,14 @@
value: this.props.value,
checked: this.props.checked,
selectedValues: []
- }
+ };
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, ...inputProps} = this.props;
- let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'form-group';
+ 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';
}
@@ -43,7 +45,7 @@
<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' || type === 'number') &&
+ {type === 'text' &&
<FormControl
bsClass={'form-control input-options-other'}
onChange={(e) => this.onChange(e)}
@@ -54,6 +56,17 @@
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
@@ -81,6 +94,7 @@
disabled={isReadOnlyMode || Boolean(disabled)}
value={value}
onChange={(e)=>this.onChangeRadio(e)}
+ inputRef={(input) => this.input = input}
data-test-id={this.props['data-test-id']}>{label}</Radio>}
{type === 'select' &&
<FormControl onClick={ (e) => this.optionSelect(e) }
@@ -88,6 +102,18 @@
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>
@@ -116,7 +142,11 @@
const {onChange, type} = this.props;
let value = e.target.value;
if (type === 'number') {
- value = Number(value);
+ if (value === '') {
+ value = undefined;
+ } else {
+ value = Number(value);
+ }
}
this.setState({
value
@@ -154,7 +184,9 @@
else if (type === 'text'
|| type === 'email'
|| type === 'number'
- || type === 'password') {
+ || type === 'radio'
+ || type === 'password'
+ || type === 'date') {
position = 'bottom';
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index 5ca716c..6c8115d 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -71,6 +71,7 @@
checked={checked}
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>}
{type === 'select' &&
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index ebb1473..c3808dd 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -22,14 +22,16 @@
*/
import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+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: React.PropTypes.bool.isRequired,
- isReadOnlyMode: React.PropTypes.bool
+ isReadOnlyMode: React.PropTypes.bool,
+ submitButtonText: React.PropTypes.string,
+ cancelButtonText: React.PropTypes.string
};
state = {
@@ -37,16 +39,16 @@
};
render() {
- var submitBtn = this.props.labledButtons ? i18n('Save') : <SVGIcon className='check' name='check'/>;
- var closeBtn = this.props.labledButtons ? i18n('Cancel') : <SVGIcon className='close' name='close'/>;
+ 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 bsStyle='primary' ref='submitbutton' type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
- <Button type='reset'>{closeBtn}</Button>
+ <Button type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
+ <Button btnType='outline' type='reset'>{closeBtn}</Button>
</div>
- : <Button type='reset'>{i18n('Close')}</Button>
+ : <Button btnType='outline' type='reset'>{i18n('Close')}</Button>
}
</div>
);