ProductVariableSelect.jsx

import React, {Component} from "react";
import _ from 'lodash';

class ProductVariableSelect extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: this.props.value
        };

        this.onChange = this.onChange.bind(this);
        this.resetValue = this.resetValue.bind(this);
        this.resetSelect = this.resetSelect.bind(this);
    }

    static checkForRequired(isRequired) {
        if (isRequired) {
            return <span className="required-label">Required *</span>
        }
    }

    static renderMultiSelect(values, isRequired) {
        const availableValues = _.filter(values, value => {
            return value.includeValue.state.isAvailable || value.includeValue.state.isAssigned;
        });

        if (isRequired) {
            return values.map((value, i) => {
                return <option key={i} value={value.includeValue.value}>{value.text}</option>
            })
        }

        return availableValues.map((value, i) => {
            return <option key={i} value={value.includeValue.value}>{value.text}</option>
        })
    }

    static renderSimpleSelect(values, isRequired) {
        const availableValues = _.filter(values, value => {
            return value.state.isAvailable || value.state.isAssigned;
        });

        if (isRequired) {
            return values.map((value, i) => {
                return <option key={i} value={value.value}>{value.text}</option>
            });
        }

        return availableValues.map((value, i) => {
            return <option key={i} value={value.value}>{value.text}</option>
        });
    }

    static renderLabel(variable, isRequired) {
        return (
            <label>
                {variable.text}
                {ProductVariableSelect.checkForRequired(isRequired)}
            </label>
        );
    }

    static calculateRange(decimalPlaces, variable) {
        const available = _.filter(variable.values, value => {
            return value.state.isAvailable;
        });
        const assigned = _.find(variable.values, value => {
            return value.state.isAssigned;
        });
        let min = _.min(available.map(value => {
            return _.isUndefined(value.lower) ? value.value : value.lower;
        }));
        let max = _.max(available.map(value => {
            return _.isUndefined(value.upper) ? value.value : value.upper;
        }));
        let step = "1";

        if (decimalPlaces > 0) {
            step = "0." + "0".repeat(decimalPlaces - 1) + "1";
        }

        if (assigned) {
            min = assigned.value < min ? assigned.value : min;
            max = assigned.value > max ? assigned.value : max;
        }

        return { min, max, step };
    }

    getRules() {
        const { variable } = this.props;
        return new Map(variable.properties.map(prop => {
            return [prop.name, prop.value];
        }));
    }

    resetValue() {
        this.setState({
            value: ''
        });
    }

    renderNumberInput(rules, variable) {
        const { min, max, step } = ProductVariableSelect.calculateRange(rules.get('DecimalPlace'), variable);
        const placeholder = min + " - " + max;

        return (
            <div className="form-group">
                {ProductVariableSelect.renderLabel(variable, rules.get("Required"))}
                <input className="form-control"
                       placeholder={placeholder}
                       onChange={this.onChange}
                       type="number"
                       required={rules.get("Required")}
                       disabled={rules.get("ReadOnly")}
                       min={min}
                       max={max}
                       step={step}
                       value={this.state.value}/>
            </div>
        )
    }

    resetSelect(isRequired) {
        const { onChange, onRequiredChange, variable } = this.props;
        const blankValue = {
            variable: {
                name: variable.id,
                value: ""
            }
        };

        this.resetValue();

        if (isRequired) {
            return onRequiredChange(blankValue)
        }

        onChange(blankValue);
    }

    renderSelect(rules, variable) {
        const isMultiple = variable.isMultivalued;
        const isRequired = rules.get("Required");
        const isReadOnly = rules.get("ReadOnly");

        return (
            <div className="form-group">
                {ProductVariableSelect.renderLabel(variable, rules.get("Required"))}
                <select className="form-control"
                        onChange={e => this.onChange(e, isRequired)}
                        value={this.state.value}
                        readOnly={isReadOnly}
                        required={isRequired}>
                    <option value="">Choose...</option>
                    {isMultiple ? ProductVariableSelect.renderMultiSelect(variable.values, isRequired) : ProductVariableSelect.renderSimpleSelect(variable.values, isRequired)}
                </select>

                {(() => {
                    if (this.state.value !== "") {
                        return (
                            <button type="button" className="close" aria-label="Close"
                                    onClick={() => this.resetSelect(isRequired)}>
                                <span aria-hidden="true">&times;</span>
                            </button>
                        )
                    }
                })()}

            </div>
        )
    }

    renderVariable(variable) {
        const rules = new Map(variable.properties.map(prop => {
            return [prop.name, prop.value];
        }));

        this.state.rules = rules;
        const isShown = rules.get("Show");
        const isSelectBox = variable.type === "String";
        const isNumberInput = variable.type === "Number";

        if (!isShown) return;

        if (isSelectBox) {
            return this.renderSelect(rules, variable);
        } else if (isNumberInput) {
            return this.renderNumberInput(rules, variable);
        }
    }

    onChange(e, isRequired) {
        const { target } = e;
        const { onChange, onRequiredChange, variable } = this.props;
        const changedState = {
            recalculated: false
        };

        this.setState({ value: target.value });

        let value = {
            variable: {
                name: variable.id,
                value: target.value
            },
            text: {
                name: variable.text
            }
        };

        if (target.nodeName === "SELECT") {
            value.text.value = target.options[target.selectedIndex].text
        } else {
            value.text.value = target.value
        }

        if (isRequired) {
            return onRequiredChange(value);
        }

        onChange(value, changedState);
    }

    render() {
        return (
            <span>{this.renderVariable(this.props.variable)}</span>
        )
    }
}

export default ProductVariableSelect;