aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input
diff options
context:
space:
mode:
authorAvi Ziv <avi.ziv@amdocs.com>2017-07-18 19:45:38 +0300
committerAvi Ziv <avi.ziv@amdocs.com>2017-07-18 19:45:38 +0300
commitb8e2faf476202b6ffe61bc3a9a37df1304881d40 (patch)
treef78b8c0517d8e16c5ae610bf8b49f68ea8a312a1 /openecomp-ui/src/nfvo-components/input
parent75aacbbe1acf78fa53378f07f0a8c7769449a17e (diff)
[SDC] Onboarding 1710 rebase.
Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535 Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
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/dualListbox/DualListboxView.jsx10
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Form.jsx17
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Input.jsx44
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx1
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx18
6 files changed, 72 insertions, 25 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index e2ee40fcd2..eab1d45ef4 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -15,11 +15,11 @@
*/
import React from 'react';
import ReactDOM from 'react-dom';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
const ExpandableInputClosed = ({iconType, onClick}) => (
- <SVGIcon className='expandable-input-wrapper closed' name={iconType} onClick={onClick} />
+ <SVGIcon className='expandable-input-wrapper closed' data-test-id='expandable-input-closed' name={iconType} onClick={onClick} />
);
class ExpandableInputOpened extends React.Component {
@@ -58,6 +58,7 @@ class ExpandableInputOpened extends React.Component {
<div className='expandable-input-wrapper opened' key='expandable'>
<Input
type='text'
+ data-test-id='expandable-input-opened'
value={value}
ref={(input) => this.searchInputNode = input}
className='expandable-active'
@@ -65,7 +66,7 @@ class ExpandableInputOpened extends React.Component {
onChange={e => onChange(e)}
onKeyDown={e => this.handleKeyDown(e)}
onBlur={handleBlur}/>
- {value && <SVGIcon onClick={() => this.handleClose()} name='close' />}
+ {value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
{!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
</div>
);
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index c60d6f777e..a3be363ba4 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -14,7 +14,7 @@
* permissions and limitations under the License.
*/
import React from 'react';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
class DualListboxView extends React.Component {
@@ -118,10 +118,10 @@ class DualListboxView extends React.Component {
renderOperationsBar(isReadOnlyMode) {
return (
<div className={`dual-list-options-bar${isReadOnlyMode ? ' disabled' : ''}`}>
- {this.renderOperationBarButton(() => this.addToSelectedList(), 'angle-right')}
- {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angle-left')}
- {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angle-double-right')}
- {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angle-double-left')}
+ {this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')}
+ {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')}
+ {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')}
+ {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
</div>
);
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 98810d1c0d..8d53322587 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 @@ class Form extends React.Component {
onReset : null,
labledButtons: true,
onValidChange : null,
- isValid: true
+ isValid: true,
+ submitButtonText: null,
+ cancelButtonText: null
};
static propTypes = {
@@ -36,6 +38,8 @@ class Form extends React.Component {
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 @@ class Form extends React.Component {
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 @@ class Form extends React.Component {
{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 59c35d7993..eef8fee1ce 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 FormGroup from 'react-bootstrap/lib/FormGroup.js';
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 @@ class Input extends React.Component {
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 @@ class Input extends React.Component {
<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 @@ class Input extends React.Component {
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 @@ class Input extends React.Component {
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 @@ class Input extends React.Component {
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 @@ class Input extends React.Component {
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 @@ class Input extends React.Component {
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 5ca716cc20..6c8115deee 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 @@ class InputWrapper extends React.Component {
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 ebb1473c04..c3808dd2c3 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 @@ class ValidationButtons extends React.Component {
};
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>
);