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() {
        const {
            variant
        } = this.props;

        const classes = classNames(
            'textarea-container',
            this.props.className,
            {
                'input-default': !variant,
                [`input-${variant}`]: variant,
                'disabled': this.props.disabled,          
                'value': this.props.value,
                'focus': this.state.focus,
                'error': this.props.error,
                'valid': this.props.valid,
            }
        );

        return (
            <div className={ classes } >
                <textarea
                    className='textarea'
                    name={this.props.name} 
                    value={ this.props.value } 
                    ref={ this.props.inputRef }
                    onChange={ this.onChangeCapture } 
                    onKeyUp={ this.onKeyUp }
                    onBlur={ this.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 } }
/> */}