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

React JAM UI components

import React from 'react';
import classNames from 'classnames';
import './styles.styl'

export default class Select extends React.Component {
    constructor() {
        super();
    }

    //mask
    onChangeCapture(e) {
        this.setState({value: e.target.value})
        if(this.props.bindTo) this.props.bindTo()
        if(this.props.onChange) this.props.onChange(e)
    }
    
    render() {
        let classes = classNames('select', this.props.className, {
            'disabled': this.props.disabled,
            'error': this.props.error,
            'valid': this.props.valid
        });
        
        return (
            <div className='input-container'>                
                <select className={ classes }
                    name={this.props.name} 
                    value={this.props.value} 
                    defaultValue={this.props.defaultValue} 
                    ref={ this.props.inputRef }
                    onChange={::this.onChangeCapture} 
                    onKeyUp={this.props.onKeyUp}
                    onBlur={this.props.onBlur}>
                    {this.props.items ? 
                        this.props.items.map((item) => {
                            return <option key={'s-' + item }>{item}</option>
                        })
                    : this.props.children
                    }
                    
                </select>
                { this.props.bar ? <i className='bar'></i> : null }
            </div>
        )
    }
}