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

/*!
 * Copyright (C) 2017 AT&T Intellectual Property. 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.
 */
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import i18n from 'nfvo-utils/i18n/i18n.js';
import classNames from 'classnames';
import Select from 'nfvo-components/input/SelectInput.jsx';
import Overlay from 'react-bootstrap/lib/Overlay.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';

export const other = { OTHER: 'Other' };

class InputOptions extends React.Component {
    static propTypes = {
        values: PropTypes.arrayOf(
            PropTypes.shape({
                enum: PropTypes.string,
                title: PropTypes.string
            })
        ),
        isEnabledOther: PropTypes.bool,
        label: PropTypes.string,
        selectedValue: PropTypes.string,
        multiSelectedEnum: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.array
        ]),
        selectedEnum: PropTypes.string,
        otherValue: PropTypes.string,
        overlayPos: PropTypes.string,
        onEnumChange: PropTypes.func,
        onOtherChange: PropTypes.func,
        onBlur: PropTypes.func,
        isRequired: PropTypes.bool,
        isMultiSelect: PropTypes.bool,
        isValid: PropTypes.bool,
        disabled: PropTypes.bool
    };

    state = {
        otherInputDisabled: !this.props.otherValue
    };

    oldProps = {
        selectedEnum: '',
        otherValue: '',
        multiSelectedEnum: []
    };

    render() {
        let {
            label,
            isRequired,
            values,
            otherValue,
            onOtherChange,
            isMultiSelect,
            onBlur,
            multiSelectedEnum,
            selectedEnum,
            isValid,
            children,
            isReadOnlyMode
        } = this.props;
        const dataTestId = this.props['data-test-id']
            ? { 'data-test-id': this.props['data-test-id'] }
            : {};
        let currentMultiSelectedEnum = [];
        let currentSelectedEnum = '';
        let otherInputDisabled =
            (isMultiSelect &&
                (multiSelectedEnum === undefined ||
                    multiSelectedEnum.length === 0 ||
                    multiSelectedEnum[0] !== other.OTHER)) ||
            (!isMultiSelect &&
                (selectedEnum === undefined || selectedEnum !== other.OTHER));
        if (isMultiSelect) {
            currentMultiSelectedEnum = multiSelectedEnum;
            if (!otherInputDisabled) {
                currentSelectedEnum = multiSelectedEnum
                    ? multiSelectedEnum.toString()
                    : undefined;
            }
        } else if (selectedEnum) {
            currentSelectedEnum = selectedEnum;
        }
        if (!onBlur) {
            onBlur = () => {};
        }

        return (
            <div className="validation-input-wrapper">
                <div
                    className={classNames('form-group', {
                        required: isRequired,
                        'has-error': !isValid
                    })}>
                    {label && <label className="control-label">{label}</label>}
                    {isMultiSelect && otherInputDisabled ? (
                        <Select
                            {...dataTestId}
                            ref={input => (this.input = input)}
                            value={currentMultiSelectedEnum}
                            className="options-input"
                            clearable={false}
                            required={isRequired}
                            disabled={
                                isReadOnlyMode || Boolean(this.props.disabled)
                            }
                            onBlur={() => onBlur()}
                            onMultiSelectChanged={value =>
                                this.multiSelectEnumChanged(value)
                            }
                            options={this.renderMultiSelectOptions(values)}
                            multi
                        />
                    ) : (
                        <div
                            className={classNames('input-options', {
                                'has-error': !isValid
                            })}>
                            <select
                                {...dataTestId}
                                ref={input => (this.input = input)}
                                label={label}
                                className="form-control input-options-select"
                                value={currentSelectedEnum}
                                style={{
                                    width: otherInputDisabled ? '100%' : '100px'
                                }}
                                onBlur={() => onBlur()}
                                disabled={
                                    isReadOnlyMode ||
                                    Boolean(this.props.disabled)
                                }
                                onChange={value => this.enumChanged(value)}
                                type="select">
                                {children ||
                                    (values &&
                                        values.length &&
                                        values.map((val, index) =>
                                            this.renderOptions(val, index)
                                        ))}
                                {onOtherChange && (
                                    <option key="other" value={other.OTHER}>
                                        {i18n(other.OTHER)}
                                    </option>
                                )}
                            </select>

                            {!otherInputDisabled && (
                                <div className="input-options-separator" />
                            )}
                            <input
                                className="form-control input-options-other"
                                placeholder={i18n('other')}
                                ref={otherValue =>
                                    (this.otherValue = otherValue)
                                }
                                style={{
                                    display: otherInputDisabled
                                        ? 'none'
                                        : 'block'
                                }}
                                disabled={
                                    isReadOnlyMode ||
                                    Boolean(this.props.disabled)
                                }
                                value={otherValue || ''}
                                onBlur={() => onBlur()}
                                onChange={() => this.changedOtherInput()}
                            />
                        </div>
                    )}
                </div>
                {this.renderErrorOverlay()}
            </div>
        );
    }

    renderOptions(val, index) {
        return (
            <option key={index} value={val.enum}>
                {val.title}
            </option>
        );
    }

    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;
    }

    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 === 'password'
        ) {
            position = 'bottom';
        }

        return (
            <Overlay
                show={!isValid}
                placement={position}
                target={() => {
                    let { otherInputDisabled } = this.state;
                    let target = otherInputDisabled
                        ? ReactDOM.findDOMNode(this.input)
                        : ReactDOM.findDOMNode(this.otherValue);
                    return target.offsetParent ? target : undefined;
                }}
                container={this}>
                <Tooltip
                    id={`error-${errorText.replace(' ', '-')}`}
                    className="validation-error-message">
                    {errorText}
                </Tooltip>
            </Overlay>
        );
    }

    getValue() {
        let res = '';
        let { isMultiSelect } = this.props;
        let { otherInputDisabled } = this.state;

        if (otherInputDisabled) {
            res = isMultiSelect ? this.input.getValue() : this.input.value;
        } else {
            res = this.otherValue.value;
        }
        return res;
    }

    enumChanged() {
        let enumValue = this.input.value;
        let {
            onEnumChange,
            onOtherChange,
            isMultiSelect,
            onChange
        } = this.props;
        this.setState({
            otherInputDisabled:
                !Boolean(onOtherChange) || enumValue !== other.OTHER
        });

        let value = isMultiSelect ? [enumValue] : enumValue;
        if (onEnumChange) {
            onEnumChange(value);
        }
        if (onChange) {
            onChange(value);
        }
    }

    multiSelectEnumChanged(enumValue) {
        let { onEnumChange, onOtherChange } = 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:
                !Boolean(onOtherChange) ||
                !selectedValues.includes(i18n(other.OTHER))
        });
        onEnumChange(selectedValues);
    }

    changedOtherInput() {
        let { onOtherChange } = this.props;
        onOtherChange(this.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;