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() {
        const {
            size,
            className,
            variant,
            error,
            valid,
            inputRef,
            items,
            onChange,
            bindTo,
            ...rest
        } = this.props

        const classes = classNames(
            'select-container',
            size, 
            className, 
            {
                [`select-default`]: !variant,
                [`select-${variant}`]: variant,
                'disabled': rest.disabled,
                'error': error,
                'valid': valid
            }
        );

        const classesSelect = classNames(
            'select', 
            size
        );
        
        return (
            <div className={ classes }>                
                <select
                    className={ classesSelect }
                    ref={ inputRef }
                    onChange={ this.onChangeCapture }
                    { ...rest }
                >
                    {
                        items 
                        ? items.map( item => <option key={'s-' + item }>{item}</option> )
                        : this.props.children
                    }
                    
                </select>
                { this.props.bar ? <i className='bar'></i> : null }
            </div>
        )
    }
}