labo-components/app/components/search/AggregationCreator.jsx

B&G UI components

import React from 'react';
import Select from 'react-select';
import PropTypes from "prop-types";

import IDUtil from '../../util/IDUtil';
/*
	INPUT:
		- the fields to be displayed by the list.
		- an onOutput function (for emitting the created aggregation)

	OUTPUT:
		- a new aggregation

	HTML markup & CSS attributes:
		- regular div ==> .bg__aggregation-creator
*/
export default class AggregationCreator extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			selectedField : this.props.fieldList && this.props.fieldList.length > 0 ? this.props.fieldList[0] : null
		};
	}

	componentDidMount() {
		if(this.state.selectedField) {
            this.labelRef.value = this.state.selectedField.label;
		}
	}

	onOutput(e) {
		e.preventDefault();
		if(this.state.selectedField && this.props.onOutput) {
			this.props.onOutput(this.constructor.name, {
				field: this.state.selectedField.value,
				title : this.labelRef.value, //FIXME this custom title is only stored in the query, but not remembered when creating a new query with the same aggregation...
				id : this.state.selectedField.value,
				type : 'string'
			});
		}
	}

	selectField = e => {
        this.labelRef.value =  e.option.label;
		this.setState({selectedField : e.option});
	}

	onChange = (inputValue, { action }) => {
		console.debug(inputValue, action);
		if(action === 'select-option') {
			this.labelRef.value =  inputValue.label;
			this.setState({selectedField : inputValue});
		}
	};


	renderSelector = (fieldList, selectedField, onChangeFunc) => {
		return <Select
			className="basic-single"
			classNamePrefix="select"
			defaultValue={selectedField ? selectedField.label : null}
			isClearable={true}
			isSearchable={true}
			name="project"
			options={fieldList}
			onChange={onChangeFunc}
        />
	}

	//TODO do something in case no fields could be retrieved in the config
	render() {
		let stringSelect = null;
		const selector = this.renderSelector(this.props.fieldList, this.state.selectedField, this.onChange);
		if(this.props.fieldList) {
            stringSelect = (
                <div className="form-group">
                    <div className="form-horizontal">
                        <label className="col-sm-3 modal-aggregation-label">Fields to create facets</label>
                        <div className="col-sm-9">
                            {selector}
                        </div>
                    </div>
                </div>
            );
		}

		return (
			<div className={IDUtil.cssClassName('aggregation-creator')}>
				<form className="form-horizontal" onSubmit={this.onOutput.bind(this)}>
					{stringSelect}
					<div className="form-group">
    					<label className="col-sm-3" htmlFor="label">Label</label>
    					<div className="col-sm-9">
    						<input ref={input => (this.labelRef = input)} type="text" className="form-control" id="label"/>
    					</div>
  					</div>
  					<button type="submit" className="btn btn-default">Add</button>
				</form>
			</div>
		)
	}
}
AggregationCreator.propTypes = {
    fieldList : PropTypes.array.isRequired,
    allowHeavyFacets: PropTypes.bool.isRequired, //whether to allow the user to select facets with lots of different values
    onOutput: PropTypes.func.isRequired
};