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

React JAM UI components

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

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

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

    componentDidMount() {
        if(this.state.value && this.props.validation) {
            this.validateInput(this.inputDom);
        }
    }
    //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) {
        if (this.props.validation) {
            this.validateInput(e.target)
        }
        
        this.setState({ changed: true })
        if(this.props.onKeyUp) this.props.onKeyUp(e)
    }

    validateInput(el) {
        let valid = false;

        if (this.props.validation.name) {
            //check for name of validation
        }
        if (this.props.validation.regexp) {
            valid = this.props.validation.regexp.test(el.value);
        }

        this.setState({valid})
        
        el.valid = valid;

        return valid
    }

    render() {
        let classes = classNames('input-container', this.props.size, this.props.className, {
            [`input-default`]: !this.props.variant,
            [`input-${this.props.variant}`]: this.props.variant,
            'disabled': this.props.disabled,
            'focus': this.state.focus,
            'error': this.props.validation && !this.state.valid && this.state.changed,
            'valid': this.props.validation && this.state.valid && this.state.changed,
            'input-container_icon': this.props.icon
        });
        let classesInput = classNames('input', this.props.size, {
            [`align-${this.props.align}`]: this.props.align
        });

        //const { layout, ...rest } = props

        return (
            <div className={ classes } >
                { this.props.icon ? this.props.icon : null }
                <input className={ classesInput }
                    type={this.props.type || 'text'} 
                    disabled={ this.props.disabled } 
                    placeholder={ this.props.placeholder } 
                    value={ this.state.value } 
                    defaultValue={ this.state.defaultValue } 
                    name={this.props.name} 
                    ref={(el)=>{
                        this.inputDom = el;
                        if (this.props.inputRef) this.props.inputRef(el)
                    }}
                    onFocus={::this.onFocusCapture} 
                    onChange={::this.onChangeCapture} 
                    onKeyUp={::this.onKeyUp}
                    onBlur={::this.onBlurCapture} />
                
                { this.state.valid && this.state.changed && this.props.validMsg ? <div className='input-msg'>{this.props.validMsg}</div> : null }
                { !this.state.valid && this.state.changed && this.props.errorMsg ? <div className='input-msg'>{this.props.errorMsg}</div> : null }
            </div>
        )
    }
}

/*<Input size='sm' placeholder='a' value={this.state.a.b.d} onChange={this.handleInputChange} name='d' bindTo={ twoWayBinding.bind(this, 'a.b.d') } inputRef={ (el) => { this['a.b.d'] = el } } />*/
/*<div class="form-control__wrap form-control_icon">
                <i class="icon fa fa-user"></i>
                <input type="text" ng-model="user.email" placeholder="{{ 'TXT.ENTER_EMAIL' | translate }}" name="email" class="form-control" ng-change="checkEmail()" />
                <i class="form-control__bar"></i>
            </div>*/