src/generic-components/input/inputOptions/InputOptions.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  */
  21 import React from 'react';
  22 import { PropTypes } from 'prop-types';
  23 import i18n from 'utils/i18n/i18n.js';
  24 import classNames from 'classnames';
  25 import Select from 'generic-components/input/SelectInput.jsx';
  26
  27 export const other = {OTHER: 'Other'};
  28
  29 class InputOptions extends React.Component {
  30
  31                 static propTypes = {
  32                                 values: PropTypes.arrayOf(PropTypes.shape({
  33                                                 enum: PropTypes.string,
  34                                                 title: PropTypes.string
  35                                 })),
  36                                 isEnabledOther: PropTypes.bool,
  37                                 title: PropTypes.string,
  38                                 selectedValue: PropTypes.string,
  39                                 multiSelectedEnum: PropTypes.array,
  40                                 selectedEnum: PropTypes.string,
  41                                 otherValue: PropTypes.string,
  42                                 onEnumChange: PropTypes.func,
  43                                 onOtherChange: PropTypes.func,
  44                                 isRequired: PropTypes.bool,
  45                                 isMultiSelect: PropTypes.bool
  46                 };
  47
  48
  49                 static contextTypes = {
  50                                 isReadOnlyMode: PropTypes.bool
  51                 };
  52
  53                 state = {
  54                                 otherInputDisabled: !this.props.otherValue
  55                 };
  56
  57                 oldProps = {
  58                                 selectedEnum: '',
  59                                 otherValue: '',
  60                                 multiSelectedEnum: []
  61                 };
  62
  63                 render() {
  64                                 let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
  65
  66                                 let currentMultiSelectedEnum = [];
  67                                 let currentSelectedEnum = '';
  68                                 let {otherInputDisabled} = this.state;
  69                                 if (isMultiSelect) {
  70                                                 currentMultiSelectedEnum = multiSelectedEnum;
  71                                                 if (!otherInputDisabled) {
  72                                                                 currentSelectedEnum =
  73                                                                                 multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
  74                                                 }
  75                                 }
  76                                 else {
  77                                                 currentSelectedEnum = selectedEnum;
  78                                 }
  79
  80                                 let isReadOnlyMode = this.context.isReadOnlyMode;
  81
  82                                 return (
  83                                                 <div
  84                                                                 className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
  85                                                                 <label className='control-label'>{label}</label>
  86                                                                 {isMultiSelect && otherInputDisabled ?
  87                                                                  <Select
  88                                                                                  ref='_myInput'
  89                                                                                  value={currentMultiSelectedEnum}
  90                                                                                  className='options-input'
  91                                                                                  clearable={false}
  92                                                                                  required={isRequired}
  93                                                                                  disabled={isReadOnlyMode || Boolean(this.props.disabled)}
  94                                                                                  onBlur={() => onBlur()}
  95                                                                                  onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
  96                                                                                  options={this.renderMultiSelectOptions(values)}
  97                                                                                  multi/> :
  98                                                                  <div className={classNames('input-options',{'has-error' : hasError})}>
  99                                                                                  <select
 100                                                                                                  ref={'_myInput'}
 101                                                                                                  label={label}
 102                                                                                                  className='form-control input-options-select'
 103                                                                                                  value={currentSelectedEnum}
 104                                                                                                  style={{'width' : otherInputDisabled ? '100%' : '95px'}}
 105                                                                                                  onBlur={() => onBlur()}
 106                                                                                                  disabled={isReadOnlyMode || Boolean(this.props.disabled)}
 107                                                                                                  onChange={ value => this.enumChanged(value)}
 108                                                                                                  type='select'>
 109                                                                                                  {values &&
 110                                                                                                  values.length &&
 111                                                                                                  values.map(val => this.renderOptions(val))}
 112                                                                                                  {onOtherChange && <option key='other'
 113                                                                                                                            value={other.OTHER}>{i18n(
 114                                                                                                                  other.OTHER)}</option>}
 115                                                                                                  {children}
 116                                                                                  </select>
 117
 118                                                                                  {!otherInputDisabled && <div className='input-options-separator'/>}
 119                                                                                  <input
 120                                                                                                  className='form-control input-options-other'
 121                                                                                                  placeholder={i18n('other')}
 122                                                                                                  ref='_otherValue'
 123                                                                                                  style={{'display' : otherInputDisabled ? 'none' : 'block'}}
 124                                                                                                  disabled={isReadOnlyMode || Boolean(this.props.disabled)}
 125                                                                                                  value={otherValue || ''}
 126                                                                                                  onBlur={() => onBlur()}
 127                                                                                                  onChange={() => this.changedOtherInput()}/>
 128                                                                  </div>
 129                                                                 }
 130                                                 </div>
 131                                 );
 132                 }
 133
 134                 renderOptions(val) {
 135                                 return (
 136                                                 <option key={val.enum} value={val.enum}>{val.title}</option>
 137                                 );
 138                 }
 139
 140
 141                 renderMultiSelectOptions(values) {
 142                                 let {onOtherChange} = this.props;
 143                                 let optionsList = [];
 144                                 if (onOtherChange) {
 145                                                 optionsList = values.map(option => {
 146                                                                 return {
 147                                                                                 label: option.title,
 148                                                                                 value: option.enum,
 149                                                                 };
 150                                                 }).concat([{
 151                                                                 label: i18n(other.OTHER),
 152                                                                 value: i18n(other.OTHER),
 153                                                 }]);
 154                                 }
 155                                 else {
 156                                                 optionsList = values.map(option => {
 157                                                                 return {
 158                                                                                 label: option.title,
 159                                                                                 value: option.enum,
 160                                                                 };
 161                                                 });
 162                                 }
 163                                 if (optionsList.length > 0 && optionsList[0].value === '') {
 164                                                 optionsList.shift();
 165                                 }
 166                                 return optionsList;
 167                 }
 168
 169                 getValue() {
 170                                 let res = '';
 171                                 let {isMultiSelect} = this.props;
 172                                 let {otherInputDisabled} = this.state;
 173
 174                                 if (otherInputDisabled) {
 175                                                 res =
 176                                                                 isMultiSelect
 177                                                                                 ? this.refs._myInput.getValue()
 178                                                                                 : this.refs._myInput.value;
 179                                 } else {
 180                                                 res = this.refs._otherValue.value;
 181                                 }
 182                                 return res;
 183                 }
 184
 185                 enumChanged() {
 186                                 let enumValue = this.refs._myInput.value;
 187                                 let {onEnumChange, isMultiSelect, onChange} = this.props;
 188                                 this.setState({
 189                                                 otherInputDisabled: enumValue !== other.OTHER
 190                                 });
 191                                 if (onEnumChange) {
 192                                                 onEnumChange(isMultiSelect ? [enumValue] : enumValue);
 193                                 }
 194
 195                                 if (onChange) {
 196                                                 onChange(enumValue);
 197                                 }
 198
 199                 }
 200
 201                 multiSelectEnumChanged(enumValue) {
 202                                 let {onEnumChange} = this.props;
 203                                 let selectedValues = enumValue.map(enumVal => {
 204                                                 return enumVal.value;
 205                                 });
 206
 207                                 if (this.state.otherInputDisabled === false) {
 208                                                 selectedValues.shift();
 209                                 }
 210                                 else if (selectedValues.includes(i18n(other.OTHER))) {
 211                                                 selectedValues = [i18n(other.OTHER)];
 212                                 }
 213
 214                                 this.setState({
 215                                                 otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
 216                                 });
 217                                 onEnumChange(selectedValues);
 218                 }
 219
 220                 changedOtherInput() {
 221                                 let {onOtherChange} = this.props;
 222                                 onOtherChange(this.refs._otherValue.value);
 223                 }
 224
 225                 componentDidUpdate() {
 226                                 let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
 227                                 if (this.oldProps.otherValue !== otherValue
 228                                                 || this.oldProps.selectedEnum !== selectedEnum
 229                                                 || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
 230                                                 this.oldProps = {
 231                                                                 otherValue,
 232                                                                 selectedEnum,
 233                                                                 multiSelectedEnum
 234                                                 };
 235                                                 onInputChange();
 236                                 }
 237                 }
 238
 239 }
 240
 241 export default InputOptions;