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

React JAM UI components

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

export default class Textarea extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: props.value,
            valid: true,
            changed: !!props.value
        }
    }

    componentDidMount() {
    }
    //mask
    componentWillReceiveProps(nextProps) {
        if (!this.props.disabled && !this.props.readOnly) {
            this.setState({value: nextProps.value});
        }
    }

    onChangeCapture(e) {
        this.setState({
            value: e.target.value
        })
        if(this.props.bindTo) this.props.bindTo()
        if(this.props.onChange) this.props.onChange(e)
    }

    onFocusCapture(e) {
        this.setState({focus: true})
    }
    onBlurCapture(e) {
        this.setState({focus: false})
        if(this.props.onBlur) this.props.onBlur(e)
    }
    onKeyUp(e) {        
        this.setState({
            changed: true
        })
        if(this.props.onKeyUp) this.props.onKeyUp(e)
    }

    render() {
        let classes = classNames(
            'textarea',
            this.props.cls, {
                'disabled': this.props.disabled,
                'error': this.props.error,
                'valid': this.props.valid,
                'focus': this.state.focus
            }
        );

        return (
            <div className='textarea-container'>
                <textarea
                    className={ classes } 
                    name={this.props.name} 
                    value={ this.props.value } 
                    ref={ this.props.inputRef }
                    onChange={::this.onChangeCapture} 
                    onKeyUp={::this.onKeyUp}
                    onBlur={this.props.onBlurCapture}
                    onFocus={::this.onFocusCapture} 
                />
                { this.state.valid && this.state.changed && this.props.validMsg ? <div className='textarea-msg'>{this.props.validMsg}</div> : null }
                { !this.state.valid && this.state.changed && this.props.errorMsg ? <div className='textarea-msg'>{this.props.errorMsg}</div> : null }
            </div>
        )
    }
}

{/* <Textarea
    value={value}
    name='name'
    bindTo={ twoWayBinding.bind(this, 'value') }
    inputRef={ (el) => { this['value'] = el } }
/> */}