import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import classNames from 'classnames';
import Select from 'nfvo-components/input/SelectInput.jsx';
export const other = {OTHER: 'Other'};
class InputOptions extends React.Component {
static propTypes = {
values: React.PropTypes.arrayOf(React.PropTypes.shape({
enum: React.PropTypes.string,
title: React.PropTypes.string
})),
isEnabledOther: React.PropTypes.bool,
title: React.PropTypes.string,
selectedValue: React.PropTypes.string,
multiSelectedEnum: React.PropTypes.array,
selectedEnum: React.PropTypes.string,
otherValue: React.PropTypes.string,
onEnumChange: React.PropTypes.func,
onOtherChange: React.PropTypes.func,
isRequired: React.PropTypes.bool,
isMultiSelect: React.PropTypes.bool
};
static contextTypes = {
isReadOnlyMode: React.PropTypes.bool
};
state = {
otherInputDisabled: !this.props.otherValue
};
oldProps = {
selectedEnum: '',
otherValue: '',
multiSelectedEnum: []
};
render() {
let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
let currentMultiSelectedEnum = [];
let currentSelectedEnum = '';
let {otherInputDisabled} = this.state;
if (isMultiSelect) {
currentMultiSelectedEnum = multiSelectedEnum;
if(!otherInputDisabled) {
currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
}
}
else if(selectedEnum){
currentSelectedEnum = selectedEnum;
}
let isReadOnlyMode = this.context.isReadOnlyMode;
return(
{label &&
}
{isMultiSelect && otherInputDisabled ?
);
}
renderOptions(val){
return(
);
}
renderMultiSelectOptions(values) {
let {onOtherChange} = this.props;
let optionsList = [];
if (onOtherChange) {
optionsList = values.map(option => {
return {
label: option.title,
value: option.enum,
};
}).concat([{
label: i18n(other.OTHER),
value: i18n(other.OTHER),
}]);
}
else {
optionsList = values.map(option => {
return {
label: option.title,
value: option.enum,
};
});
}
if (optionsList.length > 0 && optionsList[0].value === '') {
optionsList.shift();
}
return optionsList;
}
getValue() {
let res = '';
let {isMultiSelect} = this.props;
let {otherInputDisabled} = this.state;
if (otherInputDisabled) {
res = isMultiSelect ? this.refs._myInput.getValue() : this.refs._myInput.value;
} else {
res = this.refs._otherValue.value;
}
return res;
}
enumChanged() {
let enumValue = this.refs._myInput.value;
let {onEnumChange, isMultiSelect, onChange} = this.props;
this.setState({
otherInputDisabled: enumValue !== other.OTHER
});
let value = isMultiSelect ? [enumValue] : enumValue;
if (onEnumChange) {
onEnumChange(value);
}
if (onChange) {
onChange(value);
}
}
multiSelectEnumChanged(enumValue) {
let {onEnumChange} = this.props;
let selectedValues = enumValue.map(enumVal => {
return enumVal.value;
});
if (this.state.otherInputDisabled === false) {
selectedValues.shift();
}
else if (selectedValues.includes(i18n(other.OTHER))) {
selectedValues = [i18n(other.OTHER)];
}
this.setState({
otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
});
onEnumChange(selectedValues);
}
changedOtherInput() {
let {onOtherChange} = this.props;
onOtherChange(this.refs._otherValue.value);
}
componentDidUpdate() {
let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
if (this.oldProps.otherValue !== otherValue
|| this.oldProps.selectedEnum !== selectedEnum
|| this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
this.oldProps = {
otherValue,
selectedEnum,
multiSelectedEnum
};
onInputChange();
}
}
static getTitleByName(values, name) {
for (let key of Object.keys(values)) {
let option = values[key].find(option => option.enum === name);
if (option) {
return option.title;
}
}
return name;
}
}
export default InputOptions;