openecomp-ui/src/nfvo-components/input/validation/Input.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import ReactDOM from 'react-dom';
  18 import classNames from 'classnames';
  19 import Checkbox from 'react-bootstrap/lib/Checkbox.js';
  20 import Radio from 'react-bootstrap/lib/Radio.js';
  21 import FormGroup from 'react-bootstrap/lib/FormGroup.js';
  22 import FormControl from 'react-bootstrap/lib/FormControl.js';
  23 import Overlay from 'react-bootstrap/lib/Overlay.js';
  24 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
  25
  26 class Input extends React.Component {
  27
  28         state = {
  29                 value: this.props.value,
  30                 checked: this.props.checked,
  31                 selectedValues: []
  32         }
  33
  34         render() {
  35                 const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
  36                 // eslint-disable-next-line no-unused-vars
  37                 const {groupClassName, isValid = true, errorText, isRequired,  ...inputProps} = this.props;
  38                 let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'form-group';
  39                 if (disabled) {
  40                         wrapperClassName += ' disabled';
  41                 }
  42                 return(
  43                         <div className={wrapperClassName}>
  44                                 <FormGroup className={classNames('form-group', [groupClassName], {'required' : isRequired , 'has-error' : !isValid})} >
  45                                         {(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
  46                                         {(type === 'text' || type === 'number') &&
  47                                         <FormControl
  48                                                 bsClass={'form-control input-options-other'}
  49                                                 onChange={(e) => this.onChange(e)}
  50                                                 disabled={isReadOnlyMode || Boolean(disabled)}
  51                                                 onBlur={onBlur}
  52                                                 onKeyDown={onKeyDown}
  53                                                 value={value || ''}
  54                                                 inputRef={(input) => this.input = input}
  55                                                 type={type}
  56                                                 data-test-id={this.props['data-test-id']}/>}
  57
  58                                         {type === 'textarea' &&
  59                                         <FormControl
  60                                                 className='form-control input-options-other'
  61                                                 disabled={isReadOnlyMode || Boolean(disabled)}
  62                                                 value={value || ''}
  63                                                 onBlur={onBlur}
  64                                                 onKeyDown={onKeyDown}
  65                                                 componentClass={type}
  66                                                 onChange={(e) => this.onChange(e)}
  67                                                 inputRef={(input) => this.input = input}
  68                                                 data-test-id={this.props['data-test-id']}/>}
  69
  70                                         {type === 'checkbox' &&
  71                                         <Checkbox
  72                                                 className={classNames({'required' : isRequired , 'has-error' : !isValid})}
  73                                                 onChange={(e)=>this.onChangeCheckBox(e)}
  74                                                 disabled={isReadOnlyMode || Boolean(disabled)}
  75                                                 checked={value}
  76                                                 data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
  77
  78                                         {type === 'radio' &&
  79                                         <Radio name={name}
  80                                                    checked={checked}
  81                                                    disabled={isReadOnlyMode || Boolean(disabled)}
  82                                                    value={value}
  83                                                    onChange={(e)=>this.onChangeRadio(e)}
  84                                                    data-test-id={this.props['data-test-id']}>{label}</Radio>}
  85                                         {type === 'select' &&
  86                                         <FormControl onClick={ (e) => this.optionSelect(e) }
  87                                                  componentClass={type}
  88                                                  inputRef={(input) => this.input = input}
  89                                                  name={name} {...inputProps}
  90                                                  data-test-id={this.props['data-test-id']}/>}
  91                                 </FormGroup>
  92                                 { this.renderErrorOverlay() }
  93                         </div>
  94                 );
  95         }
  96
  97         getValue() {
  98                 return this.props.type !== 'select' ? this.state.value : this.state.selectedValues;
  99         }
 100
 101         getChecked() {
 102                 return this.state.checked;
 103         }
 104
 105         optionSelect(e) {
 106                 let selectedValues = [];
 107                 if (e.target.value) {
 108                         selectedValues.push(e.target.value);
 109                 }
 110                 this.setState({
 111                         selectedValues
 112                 });
 113         }
 114
 115         onChange(e) {
 116                 const {onChange, type} = this.props;
 117                 let value = e.target.value;
 118                 if (type === 'number') {
 119                         value = Number(value);
 120                 }
 121                 this.setState({
 122                         value
 123                 });
 124                 onChange(value);
 125         }
 126
 127         onChangeCheckBox(e) {
 128                 let {onChange} = this.props;
 129                 this.setState({
 130                         checked: e.target.checked
 131                 });
 132                 onChange(e.target.checked);
 133         }
 134
 135         onChangeRadio(e) {
 136                 let {onChange} = this.props;
 137                 this.setState({
 138                         checked: e.target.checked
 139                 });
 140                 onChange(this.state.value);
 141         }
 142
 143         focus() {
 144                 ReactDOM.findDOMNode(this.input).focus();
 145         }
 146
 147         renderErrorOverlay() {
 148                 let position = 'right';
 149                 const {errorText = '', isValid = true, type, overlayPos} = this.props;
 150
 151                 if (overlayPos) {
 152                         position = overlayPos;
 153                 }
 154                 else if (type === 'text'
 155                         || type === 'email'
 156                         || type === 'number'
 157                         || type === 'password') {
 158                         position = 'bottom';
 159                 }
 160
 161                 return (
 162                         <Overlay
 163                                 show={!isValid}
 164                                 placement={position}
 165                                 target={() => {
 166                                         let target = ReactDOM.findDOMNode(this.input);
 167                                         return target.offsetParent ? target : undefined;
 168                                 }}
 169                                 container={this}>
 170                                 <Tooltip
 171                                         id={`error-${errorText.replace(' ', '-')}`}
 172                                         className='validation-error-message'>
 173                                         {errorText}
 174                                 </Tooltip>
 175                         </Overlay>
 176                 );
 177         }
 178
 179 }
 180 export default  Input;