From 4c7c1ceeac9ffa91118a6e1903a6f4deb3d34989 Mon Sep 17 00:00:00 2001
From: Mikko Koski <mikkokos@gmail.com>
Date: Fri, 24 Mar 2017 10:52:27 +0200
Subject: [PATCH] Add Input component

---
 src/components/AddImages/AddImages.example.js |  3 +-
 src/components/AddImages/AddImages.js         |  2 +-
 src/components/CurrencyInput/CurrencyInput.js |  3 +-
 src/components/Discussion/Discussion.js       |  4 +-
 src/components/Input/Input.css                |  7 ++++
 src/components/Input/Input.js                 | 41 +++++++++++++++++++
 .../LocationAutocompleteInput.js              |  3 +-
 src/components/index.js                       |  2 +
 .../ChangeAccountPasswordForm.js              |  8 ++--
 .../ChangePasswordForm/ChangePasswordForm.js  |  6 +--
 .../EditListingForm/EditListingForm.js        | 14 +++++--
 src/containers/LoginForm/LoginForm.js         |  6 +--
 .../PasswordForgottenForm.js                  |  4 +-
 src/containers/SignUpForm/SignUpForm.js       | 10 ++---
 src/index.css                                 |  8 ----
 15 files changed, 86 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Input/Input.css
 create mode 100644 src/components/Input/Input.js

diff --git a/src/components/AddImages/AddImages.example.js b/src/components/AddImages/AddImages.example.js
index 61c3373b..9264d78e 100644
--- a/src/components/AddImages/AddImages.example.js
+++ b/src/components/AddImages/AddImages.example.js
@@ -4,6 +4,7 @@ import { arrayMove } from 'react-sortable-hoc';
 import { types } from '../../util/sdkLoader';
 import AddImages from './AddImages';
 import css from './AddImages.example.css';
+import { Input } from '../../components';
 
 const getId = () => {
   return uniqueId();
@@ -64,7 +65,7 @@ class AddImagesTest extends Component {
         <AddImages images={this.state.images} onSortEnd={this.onSortEnd}>
           <div className={css.addImageWrapper}>
             <label className={css.addImage} htmlFor="addImageExampleInput">+ Add image</label>
-            <input
+            <Input
               id="addImageExampleInput"
               type="file"
               accept="images/*"
diff --git a/src/components/AddImages/AddImages.js b/src/components/AddImages/AddImages.js
index 705fe0d6..b53ba6c1 100644
--- a/src/components/AddImages/AddImages.js
+++ b/src/components/AddImages/AddImages.js
@@ -4,7 +4,7 @@
  * Example:
  * // images = [{ id: 'tempId', imageId: 'realIdFromAPI', file: File }];
  * <AddImages images={images}>
- *   <input type="file" accept="images/*" onChange={handleChange} />
+ *   <Input type="file" accept="images/*" onChange={handleChange} />
  * </AddImages>
  */
 import React, { Component, PropTypes } from 'react';
diff --git a/src/components/CurrencyInput/CurrencyInput.js b/src/components/CurrencyInput/CurrencyInput.js
index fd2fd517..3b827ce7 100644
--- a/src/components/CurrencyInput/CurrencyInput.js
+++ b/src/components/CurrencyInput/CurrencyInput.js
@@ -13,6 +13,7 @@ import {
   truncateToSubUnitPrecision,
 } from '../../util/currency';
 import * as propTypes from '../../util/propTypes';
+import { Input } from '../../components';
 
 const allowedInputProps = allProps => {
   // Strip away props that are not passed to input element (or are overwritten)
@@ -162,7 +163,7 @@ class CurrencyInput extends Component {
     const { currencyConfig, defaultValue, placeholder, intl } = this.props;
     const placeholderText = placeholder || intl.formatNumber(defaultValue, currencyConfig);
     return (
-      <input
+      <Input
         {...allowedInputProps(this.props)}
         value={this.state.value}
         onChange={this.onInputChange}
diff --git a/src/components/Discussion/Discussion.js b/src/components/Discussion/Discussion.js
index 616ee7d8..e706affe 100644
--- a/src/components/Discussion/Discussion.js
+++ b/src/components/Discussion/Discussion.js
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-import { Button } from '../../components';
+import { Button, Input } from '../../components';
 
 import css from './Discussion.css';
 
@@ -47,7 +47,7 @@ class Discussion extends Component {
           {this.props.messages.map(msg => <Message key={msg.id} {...msg} />)}
         </ul>
         <form className={css.sendMessageForm} onSubmit={this.handleNewMessage}>
-          <input
+          <Input
             className={css.sendMessageInput}
             autoFocus
             type="text"
diff --git a/src/components/Input/Input.css b/src/components/Input/Input.css
new file mode 100644
index 00000000..dac40f43
--- /dev/null
+++ b/src/components/Input/Input.css
@@ -0,0 +1,7 @@
+.root {
+  display: block;
+  width: 100%;
+  font-size: 1.4rem;
+  border: 1px solid #979797;
+  padding: initial 18px;
+}
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
new file mode 100644
index 00000000..7ed9997d
--- /dev/null
+++ b/src/components/Input/Input.js
@@ -0,0 +1,41 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+import css from './Input.css';
+
+const Input = props => {
+  const { className, ...rest } = props;
+
+  const classes = classNames(css.root, className);
+
+  return <input className={classes} {...rest} />;
+};
+
+const { string } = PropTypes;
+
+Input.defaultProps = {
+  className: null,
+};
+
+Input.propTypes = {
+  className: string,
+};
+
+/*
+   Creates a new Input component for Redux Form Field.
+
+   Usage:
+
+   ```
+   <Field name="password" type="password" component={Input.fieldComponent} />
+   ```
+*/
+Input.fieldComponent = props => {
+  /* eslint-disable react/prop-types */
+  const { input, type } = props;
+  /* eslint-enable react/prop-types */
+
+  return <Input type={type} {...input} />;
+};
+
+export default Input;
diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js
index 1858b6c5..cd5758d2 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js
@@ -3,6 +3,7 @@ import { debounce } from 'lodash';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { getPlacePredictions, getPlaceDetails } from '../../util/googleMaps';
+import { Input } from '../../components';
 
 import css from './LocationAutocompleteInput.css';
 
@@ -275,7 +276,7 @@ class LocationAutocompleteInput extends Component {
 
     return (
       <div className={css.root}>
-        <input
+        <Input
           className={classNames(css.input, className)}
           type="search"
           placeholder={placeholder}
diff --git a/src/components/index.js b/src/components/index.js
index 5110ce94..c200a11b 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -5,6 +5,7 @@ import CurrencyInput from './CurrencyInput/CurrencyInput';
 import Discussion from './Discussion/Discussion';
 import FilterPanel from './FilterPanel/FilterPanel';
 import HeroSection from './HeroSection/HeroSection';
+import Input from './Input/Input';
 import ListingCard from './ListingCard/ListingCard';
 import ListingCardSmall from './ListingCardSmall/ListingCardSmall';
 import LocationAutocompleteInput from './LocationAutocompleteInput/LocationAutocompleteInput';
@@ -29,6 +30,7 @@ export {
   Discussion,
   FilterPanel,
   HeroSection,
+  Input,
   ListingCard,
   ListingCardSmall,
   LocationAutocompleteInput,
diff --git a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js
index d3d79ea5..12d929bf 100644
--- a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js
+++ b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { Button, Input } from '../../components';
 
 const ChangeAccountPasswordForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="newPassword1">New password</label>
-      <Field name="newPassword1" component="input" type="password" />
+      <Field name="newPassword1" component={Input.fieldComponent} type="password" />
       <label htmlFor="newPassword2">New password, again</label>
-      <Field name="newPassword2" component="input" type="password" />
+      <Field name="newPassword2" component={Input.fieldComponent} type="password" />
       <label htmlFor="password">Current password</label>
-      <Field name="password" component="input" type="password" />
+      <Field name="password" component={Input.fieldComponent} type="password" />
       <p>Delete account (module)</p>
       <Button type="submit" disabled={pristine || submitting}>Save changes</Button>
     </form>
diff --git a/src/containers/ChangePasswordForm/ChangePasswordForm.js b/src/containers/ChangePasswordForm/ChangePasswordForm.js
index 21800b25..baa01bd5 100644
--- a/src/containers/ChangePasswordForm/ChangePasswordForm.js
+++ b/src/containers/ChangePasswordForm/ChangePasswordForm.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { Button, Input } from '../../components';
 
 const ChangePasswordForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="newPassword1">New password</label>
-      <Field name="newPassword1" component="input" type="password" />
+      <Field name="newPassword1" component={Input.fieldComponent} type="password" />
       <label htmlFor="newPassword2">New password, again</label>
-      <Field name="newPassword2" component="input" type="password" />
+      <Field name="newPassword2" component={Input.fieldComponent} type="password" />
       <Button type="submit" disabled={pristine || submitting}>Change password</Button>
     </form>
   );
diff --git a/src/containers/EditListingForm/EditListingForm.js b/src/containers/EditListingForm/EditListingForm.js
index d6dd2fd5..5d012dfd 100644
--- a/src/containers/EditListingForm/EditListingForm.js
+++ b/src/containers/EditListingForm/EditListingForm.js
@@ -11,7 +11,13 @@ import {
   autocompleteSearchRequired,
   autocompletePlaceSelected,
 } from '../../util/validators';
-import { AddImages, CurrencyInput, LocationAutocompleteInput, Button } from '../../components';
+import {
+  AddImages,
+  CurrencyInput,
+  LocationAutocompleteInput,
+  Button,
+  Input,
+} from '../../components';
 import css from './EditListingForm.css';
 
 const ACCEPT_IMAGES = 'image/*';
@@ -39,7 +45,7 @@ const enhancedField = Comp => {
     } else if (Comp === 'textarea') {
       component = <textarea {...input} placeholder={label} />;
     } else {
-      component = <input {...input} placeholder={label} type={type} />;
+      component = <Input {...input} placeholder={label} type={type} />;
     }
     return (
       <div>
@@ -88,7 +94,7 @@ const RenderAddImage = props => {
   const inputProps = { accept, id: name, name, onChange, type };
   return (
     <div className={css.addImageWrapper}>
-      <input {...inputProps} className={css.addImageInput} />
+      <Input {...inputProps} className={css.addImageInput} />
       <label htmlFor={name} className={css.addImage}>{label}</label>
     </div>
   );
@@ -205,7 +211,7 @@ class EditListingForm extends Component {
               const { input, type, meta: { error, touched } } = props;
               return (
                 <div className={css.imageRequiredWrapper}>
-                  <input {...input} type={type} />
+                  <Input {...input} type={type} />
                   {touched && error
                     ? <span className={css.imageRequiredError}>{error}</span>
                     : null}
diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js
index c38579a4..f10f7c51 100644
--- a/src/containers/LoginForm/LoginForm.js
+++ b/src/containers/LoginForm/LoginForm.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { Button, Input } from '../../components';
 
 const LoginForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="email">Email</label>
-      <Field name="email" component="input" type="email" />
+      <Field name="email" component={Input.fieldComponent} type="email" />
       <label htmlFor="password">Password</label>
-      <Field name="password" component="input" type="password" />
+      <Field name="password" component={Input.fieldComponent} type="password" />
       <p>Forgot password?</p>
       <Button type="submit" disabled={pristine || submitting}>Log in</Button>
     </form>
diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.js b/src/containers/PasswordForgottenForm/PasswordForgottenForm.js
index cc95b684..b52ede20 100644
--- a/src/containers/PasswordForgottenForm/PasswordForgottenForm.js
+++ b/src/containers/PasswordForgottenForm/PasswordForgottenForm.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { Button, Input } from '../../components';
 
 const PasswordForgottenForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="email">Email</label>
-      <Field name="email" component="input" type="email" />
+      <Field name="email" component={Input.fieldComponent} type="email" />
       <p>We will send you instructions to your email.</p>
       <Button type="submit" disabled={pristine || submitting}>Send</Button>
     </form>
diff --git a/src/containers/SignUpForm/SignUpForm.js b/src/containers/SignUpForm/SignUpForm.js
index 112412b0..7e43923c 100644
--- a/src/containers/SignUpForm/SignUpForm.js
+++ b/src/containers/SignUpForm/SignUpForm.js
@@ -1,19 +1,19 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { Button, Input } from '../../components';
 
 const SignUpForm = props => {
   const { handleSubmit, pristine, submitting } = props;
   return (
     <form onSubmit={handleSubmit}>
       <label htmlFor="email">Email</label>
-      <Field name="email" component="input" type="email" />
+      <Field name="email" component={Input.fieldComponent} type="email" />
       <label htmlFor="firstName">First name</label>
-      <Field name="firstName" component="input" />
+      <Field name="firstName" component={Input.fieldComponent} />
       <label htmlFor="lastName">Last name</label>
-      <Field name="lastName" component="input" />
+      <Field name="lastName" component={Input.fieldComponent} />
       <label htmlFor="password">Password</label>
-      <Field name="password" component="input" type="password" />
+      <Field name="password" component={Input.fieldComponent} type="password" />
       <p>By confirming I accept the booking terms and conditions.</p>
       <Button type="submit" disabled={pristine || submitting}>Sign up</Button>
     </form>
diff --git a/src/index.css b/src/index.css
index df963e16..e36a1445 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,14 +24,6 @@ label {
   margin-top: 1rem;
 }
 
-input {
-  display: block;
-  width: 100%;
-  font-size: 1.4rem;
-  border: 1px solid #979797;
-  padding: initial 18px;
-}
-
 select {
   border: none;
 }