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

React JAM UI components

import React from 'react'
import classNames from 'classnames'
import createTextMaskInputElement from '../../utils/mask/createTextMaskInputElement'
import masks from '../../utils/masks'
import validations from '../../utils/validations'

import './styles.styl'

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

        this.state = {
            valid: props.valid,
            dirty: (props.value || props.defaultValue),
            validation: props.validation && props.validation.name ? {
                ...validations[props.validation.name],
                ...props.validation
            } : props.validation || null,
            mask: props.mask && props.mask.name ? {
                ...masks[props.mask.name],
                ...props.mask
            } : props.mask || null,
        }
    }
    componentDidUpdate() {
        if (this.props.mask) this.initTextMask()
    }

    componentDidMount() {
        if (this.props.mask) this.initTextMask()

        if(
            (this.props.value || this.props.defaultValue) &&
            ( this.props.validation || this.props.required ) 
        ) {
            this.validateInput(this.inputDom);
        }
    }
    
    initTextMask() {
        const mask = this.state.mask ? this.state.mask : null;

        if (mask) {
            this.textMaskInputElement = createTextMaskInputElement({
                inputElement: this.inputDom,
                mask: mask.pattern,
                ...mask
            })
            
            this.textMaskInputElement.update(this.props.value)
        }
    }
    
    onFocusCapture = e => {
        this.setState({
            focus: true,
            dirty: true
        })
        if (this.props.onFocus) this.props.onFocus(e)
    }

    onBlurCapture = e => {
        this.setState({
            focus: false
        })
        
        if ( this.props.validation || this.props.required ) this.validateInput(this.inputDom)

        if ( this.props.onBlur ) this.props.onBlur(e)
    }
    
    onInputCapture = e => {
        const value = e.target.value;

        this.setState({
            dirty: true
        })

        if ( this.props.mask ) this.textMaskInputElement.update(value)            
        if ( this.props.validation || this.props.required ) this.validateInput(this.inputDom)
        if ( this.props.bindTo ) this.props.bindTo()
        if ( this.props.onInput ) this.props.onInput(e)
    }

    validateInput(input) {
        let valid = false;
        const pattern = this.state.validation ? this.state.validation.regexp : null
        
        
        if (pattern) {
            valid = pattern.test(input.value);
        } else
        if (this.props.required && input.value) {
            valid = true;
        }

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

        return valid
    }

    render() {
        const {
            size,
            className,
            variant,
            inputRef,
            validation,
            icon,
            bindTo,
            mask,
            onInput,
            onBlur,
            onFocus,
            valid,
            ...rest
        } = this.props;

        const _valid = valid !== false && valid !== true ? this.state.valid : valid;
        
        const classes = classNames(
            'input-container',
            size,
            className, 
            {
                'input-default': !variant,
                [`input-${variant}`]: variant,
                'disabled': rest.disabled,
                'value': this.props.value,
                'focus': this.state.focus,
                'error': _valid == false && this.state.dirty,
                'valid': _valid == true && this.state.dirty,
                'input-container_icon': icon
            }
        );
        const classesInput = classNames(
            'input', 
            size
        );

        return (
            <div className={ classes } >
                {
                    icon
                    ? icon
                    : null
                }
                <input
                    className={ classesInput }
                    type={ this.props.type || 'text' }
                    ref={ el => {
                        this.inputDom = el;
                        if (inputRef) inputRef(el)
                    }}
                    onFocus={ this.onFocusCapture}
                    onInput={ this.onInputCapture }
                    onBlur={ this.onBlurCapture }
                    { ... rest }
                />
                
                {
                    _valid && 
                    this.state.dirty && 
                    this.state.validation && 
                    this.state.validation.valid &&
                    <div className='input-msg'>{this.state.validation.valid}</div>
                }
                {
                    !_valid && 
                    this.state.dirty && 
                    this.state.validation &&
                    this.state.validation.error &&
                    <div className='input-msg'>{this.state.validation.error}</div>
                }
            </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 } }
    validation={{
        name: 'phone',
        regexp: /^(8|\+7)( |-)?(\d){3}( |-)?\d{3}( |-)?\d{2}( |-)?\d{2}$/,
        error: 'Неверный телефон, укажите в формате +7 999 999 99 99'
    }}
    mask={{
        name: 'phone',
        value: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
    }}
/>*/
/*<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>*/