import React, { PropTypes } from 'react';

import baseStyles from './base.css';
import themeStyles from './oaxaca-theme.css';

const propTypes = {
  defaultValue: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
};

const Input = ({ defaultValue, name, onChange, placeholder }) => {
  let debounce;

  const onChangeWithDebounce = e => {
    clearTimeout( debounce );
    debounce = setTimeout(() => {
      onChange( e.target.value );
    }, 500 );
  };

  return (
    <input
      className={[
        baseStyles.regular,
        themeStyles.regular,
      ].join( ' ' )}
      defaultValue={ defaultValue }
      name={ name }
      onChange={ onChangeWithDebounce }
      placeholder={ placeholder }
    />
  );
};

Input.propTypes = propTypes;

export default Input;

import React, { PropTypes } from 'react';

import baseStyles from './base.css';
import themeStyles from './oaxaca-theme.css';

const propTypes = {
  defaultValue: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
};

const Input = ({ defaultValue, name, onChange, placeholder }) => {
  let debounce;

  const onChangeWithDebounce = e => {
    const { value } = e.target;
    clearTimeout( debounce );
    debounce = setTimeout(() => {
      onChange( value );
    }, 500 );
  };

  return (
    <input
      className={[
        baseStyles.regular,
        themeStyles.regular,
      ].join( ' ' )}
      defaultValue={ defaultValue }
      name={ name }
      onChange={ onChangeWithDebounce }
      placeholder={ placeholder }
    />
  );
};

Input.propTypes = propTypes;

export default Input;

read input value onchange before timeout