react-jam-ui/components/Suggest/index.js

React JAM UI components

import React from 'react'
import Input from 'react-jam-ui/components/Input'

import './styles.styl'

export default class Suggest extends React.Component {
    constructor(props){
        super(props);
        
        this.state = {
            value: props.value ? props.value[props.label] : ''
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.value && !this.props.value) {
            const value = nextProps.value ? nextProps.value[nextProps.label] : '';
            this.setState({ value })
        }
    }
    
    onClickCapture(el) {
        this.setState({value: el[this.props.label]});
        if (this.props.onSelect) this.props.onSelect(el);
    }
    
    onChangeCapture(e) {
        this.setState({value: e.target.value});
        if(this.props.data.length == 1 && e.target.value && e.target.value.toLowerCase() == this.props.data[0][this.props.label].toLowerCase()) {
            if (this.props.onSelect) this.props.onSelect(this.props.data[0]);
        }
    }

    render() {        
        return <div className='suggest'>
            <Input
                type='text'
                name={ this.props.name }
                placeholder={ this.props.placeholder }
                value={ this.state.value }
                onKeyUp={ this.props.onKeyUp }
                onChange={ ::this.onChangeCapture }
            />
            { this.props.data.length > 0 ? <div className='suggest-list'>
                {this.props.data.map((el) => <div key={`suggest-${this.props.name}-${el[this.props.id]}`} onClick={() => { ::this.onClickCapture(el)} } className='suggest-item'>{el[this.props.label]}</div>)}
            </div>
            : null }
        </div>
    }
}