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

B&G UI components

import React from 'react';
import IDUtil from '../../util/IDUtil';
import ElasticsearchDataUtil from '../../util/ElasticsearchDataUtil';

class KeywordFieldSelector extends React.Component {

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

        this.CLASS_PREFIX = 'kfs';
    }

    //only update on a new search or a new selected field
    shouldComponentUpdate(nextProps, nextState) {
        return (nextProps.searchId != this.props.searchId)
        || (nextProps.selectedField != this.props.selectedField);
    }

	onOutput(data) {
        if (this.props.onOutput) {
            this.props.onOutput(this.constructor.name, data);
        }
	}

	selectField(e) {
	    let data = null;

	        if(e.target.value != 'null_option') {
            data = {
                field: e.target.value
            }
        }
		this.setState({selectedField : e.target.value});
        this.onOutput(data);
        }


  render() {
        let keywordFieldSelect = null;
        if (this.props.collectionConfig.getFacetSelectionList(false)) {
            const selectedOption = this.props.selectedField ? this.props.selectedField : 'null_option';
            let options = this.props.collectionConfig.getFacetSelectionList(false).map((kf, index) => {
                return (<option key={'kf__' + index} value={kf['value']}>{kf['label']}</option>);
            });
            options.splice(0,0, <option key={'kf__default_value' } value="null_option">Select keyword field</option>);

            keywordFieldSelect = (
                        <select className="form-control" value={selectedOption}
                            key="project_keyword_select"
                            onChange={this.selectField.bind(this)}
                            title={selectedOption == "null_option" ? '' : selectedOption}
                        >
                        {options}
                        </select>
            );
        }

        return (
            <div className={IDUtil.cssClassName('keyword-field-selector', this.CLASS_PREFIX)}>
                {keywordFieldSelect}
             </div>
        );
    }
}


export default KeywordFieldSelector;