React material-ui HOCs

React material-ui HOCs.md

Dependencies

yarn add material-ui
yarn add vanilla-text-mask
yarn add text-mask-addons

EmailField.js

import React from 'react';

const TextField       = require('material-ui').TextField;
const vanillaTextMask = require('vanilla-text-mask');

import emailMask from 'text-mask-addons/dist/emailMask';


export default class EmailField extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};

        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
        this.maskController = vanillaTextMask.maskInput({
            inputElement : this.refs.component.input,
            mask         : emailMask,
        });
    }

    componentWillUnmount() {
        this.maskController.destroy();
    }

    handleChange(e, newValue) {

        // Pass through modified event
        this.onChange(e, newValue);
    }

    render() {
        const {onChange, ...otherProps} = this.props;
        this.onChange                   = onChange;

        return <TextField ref="component" onChange={this.handleChange} {...otherProps} />
    }

}

EmailField.propTypes = TextField.propTypes;

PhoneField.js

import React from 'react';

const TextField       = require('material-ui').TextField;
const vanillaTextMask = require('vanilla-text-mask');

export default class PhoneField extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};

        this.mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
        this.maskController = vanillaTextMask.maskInput({
            inputElement : this.refs.component.input,
            mask         : this.mask,
        });
    }

    componentWillUnmount() {
        this.maskController.destroy();
    }

    parseMaskedValue(value) {
        return value.replace(/(^\D*9?\D*0|\D+)/ig, '');
    }

    handleChange(e, newValue) {

        let value = this.parseMaskedValue(newValue);

        // Pass through modified event
        this.onChange(e, value);
    }

    render() {
        const {onChange, ...otherProps} = this.props;
        this.onChange                   = onChange;

        return <TextField ref="component" onChange={this.handleChange} {...otherProps} />
    }

}

PhoneField.propTypes = TextField.propTypes;