Input higher-order components

EmailInput.jsx

import CreateInput from './Input.jsx';

const emailProps = {
  type: "email",
  inputMode: "email",
  name: "email",
  autoComplete: "email",
  pattern: "[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?",
  spellCheck: false,
  autoCorrect: "off",
  autoCapitalize: "none",
};

const EmailInput = CreateInput(emailProps)
export default EmailInput;

Input.jsx

import React from 'react';
require('./Input.css');

function CreateInput(inputProps){
  class Input extends React.Component {
    constructor(props){
      super(props);
    }

    componentWillMount(){
      return Object.assign({}, this.defaultProps, this.props, inputProps);
    }

    render(){
      return (<input {...inputProps} {...this.props} />)
    }
  }

  Input.propTypes = {
    name: React.PropTypes.string,
    value: React.PropTypes.string,
    className: React.PropTypes.string,
    required: React.PropTypes.bool,
    onChange: React.PropTypes.func,
    onBlur: React.PropTypes.func,
    onFocus: React.PropTypes.func,
    onSearch: React.PropTypes.func,
    validator: React.PropTypes.func,
    pattern: React.PropTypes.string,
    placeholder: React.PropTypes.string,
  }

  Input.defaultProps = {
    defaultValue: null,
    required: false,
    onChange: null,
    onBlur: null,
    onFocus: null,
    onSearch: null,
    validator: null,
    pattern: null,
    className: "inputField",
    placeholder: null,
  }

  return Input;
}

export default CreateInput;

NumberInput.jsx

import CreateInput from './Input.jsx';

const numberProps = {
  type: "number",
  name: "numberInput",
  inputMode: "numeric",
  autoComplete: "off",
  pattern: "[0-9]*",
  spellCheck: false,
  autoCorrect: "off",
  autoCapitalize: "none",
}

const NumberInput = CreateInput(numberProps)
export default NumberInput;

SeachInput.jsx

import CreateInput from './Input.jsx';

const searchProps = {
  type: "search",
  name: "searchInput",
  incremental: true,
}

const SearchInput = CreateInput(searchProps)
export default SearchInput;

TextInput.jsx

import CreateInput from './Input.jsx';

const textProps = {
  type: "text",
  name: "textInput",
  inputMode: "verbatim",
};

const TextInput = CreateInput(textProps)
export default TextInput;

URLInput.jsx

import CreateInput from './Input.jsx';

const urlProps = {
  type: "url",
  name: "urlInput",
  ref: "urlInput",
  inputMode: "url",
  autoComplete: "url",
  spellCheck: false,
  autoCorrect: "off",
  autoCapitalize: "none",
  pattern: "^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?",
};

const URLInput = CreateInput(urlProps)
export default URLInput;