Add Input component

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/*"

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';

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}

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"

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;
+}

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;

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}

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,

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>

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>
   );

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}

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>

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>

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>

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;
 }