/* * ============LICENSE_START=================================================== * SPARKY (AAI UI service) * ============================================================================ * Copyright © 2017 AT&T Intellectual Property. * Copyright © 2017 Amdocs * All rights reserved. * ============================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END===================================================== * * ECOMP and OpenECOMP are trademarks * and service marks of AT&T Intellectual Property. */ import React from 'react'; import i18n from 'utils/i18n/i18n.js'; import classNames from 'classnames'; import Select from 'generic-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 { currentSelectedEnum = selectedEnum; } let isReadOnlyMode = this.context.isReadOnlyMode; return (
{isMultiSelect && otherInputDisabled ? onBlur()} disabled={isReadOnlyMode || Boolean(this.props.disabled)} onChange={ value => this.enumChanged(value)} type='select'> {values && values.length && values.map(val => this.renderOptions(val))} {onOtherChange && } {children} {!otherInputDisabled &&
} onBlur()} onChange={() => this.changedOtherInput()}/>
}
); } 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 }); if (onEnumChange) { onEnumChange(isMultiSelect ? [enumValue] : enumValue); } if (onChange) { onChange(enumValue); } } 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(); } } } export default InputOptions;