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