aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/validation/Input.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Input.jsx404
1 files changed, 231 insertions, 173 deletions
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;