Merge pull request #208 from sharetribe/use-input-field-in-forms

Use InputField component forms
2026-07-29 05:00:43 +10:00 · 2017-06-06 11:27:46 +03:00 · 2017-06-06 11:27:46 +03:00 · 3325af7f2c
commit 3325af7f2c
parent 3933353821 1b7e3118aa
9 changed files with 161 additions and 166 deletions
--- a/src/components/InputField/InputField.js
+++ b/src/components/InputField/InputField.js
@ -19,10 +19,11 @@ class InputField extends Component {
      type,
      label,
      placeholder,
+      autoFocus,
      input,
      meta,
    } = this.props;
-    const inputProps = { ...input, type, placeholder };
+    const inputProps = { ...input, type, placeholder, autoFocus };
    const { pristine, valid, invalid, touched, error } = meta;

    // Error message and input error styles are only shown if the
@ -60,6 +61,7 @@ InputField.defaultProps = {
  clearOnUnmount: false,
  label: null,
  placeholder: null,
+  autoFocus: false,
 };

 const { string, shape, bool, func } = PropTypes;
@ -78,6 +80,7 @@ InputField.propTypes = {
  type: string.isRequired,
  label: string,
  placeholder: string,
+  autoFocus: bool,

  // Objects created by redux-form
  input: shape({
--- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js
+++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js
@ -5,7 +5,7 @@ import { intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { enhancedField } from '../../util/forms';
 import { maxLength, required } from '../../util/validators';
-import { Button } from '../../components';
+import { Button, InputField } from '../../components';

 import css from './EditListingDescriptionForm.css';

@ -18,7 +18,6 @@ export class EditListingDescriptionFormComponent extends Component {
    // We must create the enhanced components outside the render function
    // to avoid losing focus.
    // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
-    this.EnhancedInput = enhancedField('input');
    this.EnhancedTextArea = enhancedField('textarea', { rootClassName: css.description });
  }

@ -64,7 +63,7 @@ export class EditListingDescriptionFormComponent extends Component {
          name="title"
          label={titleMessage}
          placeholder={titlePlaceholderMessage}
-          component={this.EnhancedInput}
+          component={InputField}
          type="text"
          validate={[required(titleRequiredMessage), maxLength60Message]}
        />
--- a/src/containers/EditListingDescriptionForm/snapshots/EditListingDescriptionForm.test.js.snap
+++ b/src/containers/EditListingDescriptionForm/snapshots/EditListingDescriptionForm.test.js.snap
@ -5,7 +5,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
  <div
    className="">
    <label
-      className=""
+      className={undefined}
      htmlFor="title">
      Name of your sauna
    </label>
--- a/src/containers/EditListingLocationForm/EditListingLocationForm.js
+++ b/src/containers/EditListingLocationForm/EditListingLocationForm.js
@ -7,7 +7,7 @@ import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { enhancedField } from '../../util/forms';
 import { autocompleteSearchRequired, autocompletePlaceSelected } from '../../util/validators';
-import { LocationAutocompleteInput, Button } from '../../components';
+import { LocationAutocompleteInput, Button, InputField } from '../../components';

 import css from './EditListingLocationForm.css';

@ -19,7 +19,6 @@ export class EditListingLocationFormComponent extends Component {
    // to avoid losing focus.
    // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
    this.EnhancedLocationAutocompleteInput = enhancedField(LocationAutocompleteInput);
-    this.EnhancedInput = enhancedField('input', { rootClassName: css.building });
  }

  render() {
@ -63,10 +62,11 @@ export class EditListingLocationFormComponent extends Component {
        />

        <Field
+          className={css.building}
          name="building"
          label={buildingMessage}
          placeholder={buildingPlaceholderMessage}
-          component={this.EnhancedInput}
+          component={InputField}
          type="text"
        />

--- a/src/containers/LoginForm/LoginForm.js
+++ b/src/containers/LoginForm/LoginForm.js
@ -1,65 +1,58 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { InputField, Button } from '../../components';
 import * as validators from '../../util/validators';
-import { enhancedField } from '../../util/forms';

 import css from './LoginForm.css';

-class LoginFormComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.EnhancedInput = enhancedField('input');
-  }
-  render() {
-    const { handleSubmit, pristine, submitting, inProgress, intl } = this.props;
+const LoginFormComponent = props => {
+  const { handleSubmit, pristine, submitting, inProgress, intl } = props;

-    // email
-    const emailLabel = intl.formatMessage({
-      id: 'LoginForm.emailLabel',
-    });
-    const emailRequiredMessage = intl.formatMessage({
-      id: 'LoginForm.emailRequired',
-    });
-    const emailRequired = validators.required(emailRequiredMessage);
+  // email
+  const emailLabel = intl.formatMessage({
+    id: 'LoginForm.emailLabel',
+  });
+  const emailRequiredMessage = intl.formatMessage({
+    id: 'LoginForm.emailRequired',
+  });
+  const emailRequired = validators.required(emailRequiredMessage);

-    // password
-    const passwordLabel = intl.formatMessage({
-      id: 'LoginForm.passwordLabel',
-    });
-    const passwordRequiredMessage = intl.formatMessage({
-      id: 'LoginForm.passwordRequired',
-    });
-    const passwordRequired = validators.required(passwordRequiredMessage);
+  // password
+  const passwordLabel = intl.formatMessage({
+    id: 'LoginForm.passwordLabel',
+  });
+  const passwordRequiredMessage = intl.formatMessage({
+    id: 'LoginForm.passwordRequired',
+  });
+  const passwordRequired = validators.required(passwordRequiredMessage);

-    const submitDisabled = pristine || submitting || inProgress;
-    return (
-      <form className={css.form} onSubmit={handleSubmit}>
-        <div>
-          <Field
-            name="email"
-            type="email"
-            label={emailLabel}
-            component={this.EnhancedInput}
-            validate={emailRequired}
-          />
-          <Field
-            name="password"
-            type="password"
-            label={passwordLabel}
-            component={this.EnhancedInput}
-            validate={passwordRequired}
-          />
-        </div>
-        <Button className={css.button} type="submit" disabled={submitDisabled}>
-          <FormattedMessage id="LoginForm.logIn" />
-        </Button>
-      </form>
-    );
-  }
-}
+  const submitDisabled = pristine || submitting || inProgress;
+  return (
+    <form className={css.form} onSubmit={handleSubmit}>
+      <div>
+        <Field
+          name="email"
+          type="email"
+          label={emailLabel}
+          component={InputField}
+          validate={emailRequired}
+        />
+        <Field
+          name="password"
+          type="password"
+          label={passwordLabel}
+          component={InputField}
+          validate={passwordRequired}
+        />
+      </div>
+      <Button className={css.button} type="submit" disabled={submitDisabled}>
+        <FormattedMessage id="LoginForm.logIn" />
+      </Button>
+    </form>
+  );
+};

 LoginFormComponent.defaultProps = { inProgress: false };

--- a/src/containers/LoginForm/snapshots/LoginForm.test.js.snap
+++ b/src/containers/LoginForm/snapshots/LoginForm.test.js.snap
@ -6,11 +6,12 @@ exports[`LoginForm matches snapshot 1`] = `
    <div
      className="">
      <label
-        className=""
+        className={undefined}
        htmlFor="email">
        Email
      </label>
      <input
+        autoFocus={false}
        className=""
        name="email"
        onBlur={[Function]}
@ -18,18 +19,19 @@ exports[`LoginForm matches snapshot 1`] = `
        onDragStart={[Function]}
        onDrop={[Function]}
        onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
        type="email"
        value="" />
    </div>
    <div
      className="">
      <label
-        className=""
+        className={undefined}
        htmlFor="password">
        Password
      </label>
      <input
+        autoFocus={false}
        className=""
        name="password"
        onBlur={[Function]}
@ -37,7 +39,7 @@ exports[`LoginForm matches snapshot 1`] = `
        onDragStart={[Function]}
        onDrop={[Function]}
        onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
        type="password"
        value="" />
    </div>
--- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js
+++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.js
@ -5,7 +5,13 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Field, reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form';
 import classNames from 'classnames';
 import config from '../../config';
-import { Button, StripeBankAccountToken, Select, BirthdayInput } from '../../components';
+import {
+  Button,
+  StripeBankAccountToken,
+  Select,
+  BirthdayInput,
+  InputField,
+} from '../../components';
 import * as validators from '../../util/validators';
 import { enhancedField } from '../../util/forms';

@ -40,7 +46,6 @@ CountriesSelect.propTypes = {
 class PayoutDetailsFormComponent extends Component {
  constructor(props) {
    super(props);
-    this.EnhancedInput = enhancedField('input');
    this.EnhancedCountriesDropdown = enhancedField(CountriesSelect);
    this.EnhancedBirthdayInput = enhancedField(BirthdayInput);
  }
@ -120,7 +125,7 @@ class PayoutDetailsFormComponent extends Component {
            type="text"
            label={streetAddressLabel}
            placeholder={streetAddressPlaceholder}
-            component={this.EnhancedInput}
+            component={InputField}
            validate={streetAddressRequired}
            clearOnUnmount
          />
@ -129,7 +134,7 @@ class PayoutDetailsFormComponent extends Component {
            type="text"
            label={postalCodeLabel}
            placeholder={postalCodePlaceholder}
-            component={this.EnhancedInput}
+            component={InputField}
            validate={postalCodeRequired}
            clearOnUnmount
          />
@ -138,7 +143,7 @@ class PayoutDetailsFormComponent extends Component {
            type="text"
            label={cityLabel}
            placeholder={cityPlaceholder}
-            component={this.EnhancedInput}
+            component={InputField}
            validate={cityRequired}
            clearOnUnmount
          />
@ -184,14 +189,14 @@ class PayoutDetailsFormComponent extends Component {
          name="firstName"
          type="text"
          label={firstNameLabel}
-          component={this.EnhancedInput}
+          component={InputField}
          validate={firstNameRequired}
        />
        <Field
          name="lastName"
          type="text"
          label={lastNameLabel}
-          component={this.EnhancedInput}
+          component={InputField}
          validate={lastNameRequired}
        />
        <Field
--- a/src/containers/SignupForm/SignupForm.js
+++ b/src/containers/SignupForm/SignupForm.js
@ -1,107 +1,96 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { InputField, Button } from '../../components';
 import * as validators from '../../util/validators';
-import { enhancedField } from '../../util/forms';

 import css from './SignupForm.css';

-class SignupFormComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.EnhancedInput = enhancedField('input');
-    this.EnhancedFirstNameInput = enhancedField('input', {
-      rootClassName: css.firstNameRoot,
-    });
-    this.EnhancedLastNameInput = enhancedField('input', {
-      rootClassName: css.lastNameRoot,
-    });
-  }
-  render() {
-    const { handleSubmit, pristine, submitting, inProgress, intl } = this.props;
+const SignupFormComponent = props => {
+  const { handleSubmit, pristine, submitting, inProgress, intl } = props;

-    // email
-    const emailLabel = intl.formatMessage({
-      id: 'SignupForm.emailLabel',
-    });
-    const emailRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.emailRequired',
-    });
-    const emailRequired = validators.required(emailRequiredMessage);
+  // email
+  const emailLabel = intl.formatMessage({
+    id: 'SignupForm.emailLabel',
+  });
+  const emailRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.emailRequired',
+  });
+  const emailRequired = validators.required(emailRequiredMessage);

-    // password
-    const passwordLabel = intl.formatMessage({
-      id: 'SignupForm.passwordLabel',
-    });
-    const passwordRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.passwordRequired',
-    });
-    const passwordRequired = validators.required(passwordRequiredMessage);
+  // password
+  const passwordLabel = intl.formatMessage({
+    id: 'SignupForm.passwordLabel',
+  });
+  const passwordRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.passwordRequired',
+  });
+  const passwordRequired = validators.required(passwordRequiredMessage);

-    // firstName
-    const firstNameLabel = intl.formatMessage({
-      id: 'SignupForm.firstNameLabel',
-    });
-    const firstNameRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.firstNameRequired',
-    });
-    const firstNameRequired = validators.required(firstNameRequiredMessage);
+  // firstName
+  const firstNameLabel = intl.formatMessage({
+    id: 'SignupForm.firstNameLabel',
+  });
+  const firstNameRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.firstNameRequired',
+  });
+  const firstNameRequired = validators.required(firstNameRequiredMessage);

-    // lastName
-    const lastNameLabel = intl.formatMessage({
-      id: 'SignupForm.lastNameLabel',
-    });
-    const lastNameRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.lastNameRequired',
-    });
-    const lastNameRequired = validators.required(lastNameRequiredMessage);
+  // lastName
+  const lastNameLabel = intl.formatMessage({
+    id: 'SignupForm.lastNameLabel',
+  });
+  const lastNameRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.lastNameRequired',
+  });
+  const lastNameRequired = validators.required(lastNameRequiredMessage);

-    const submitDisabled = pristine || submitting || inProgress;
-    return (
-      <form className={css.root} onSubmit={handleSubmit}>
-        <div>
+  const submitDisabled = pristine || submitting || inProgress;
+  return (
+    <form className={css.root} onSubmit={handleSubmit}>
+      <div>
+        <Field
+          name="email"
+          type="email"
+          label={emailLabel}
+          validate={emailRequired}
+          component={InputField}
+        />
+        <div className={css.name}>
          <Field
-            name="email"
-            type="email"
-            label={emailLabel}
-            validate={emailRequired}
-            component={this.EnhancedInput}
+            className={css.firstNameRoot}
+            name="firstName"
+            type="text"
+            label={firstNameLabel}
+            validate={firstNameRequired}
+            component={InputField}
          />
-          <div className={css.name}>
-            <Field
-              name="firstName"
-              type="text"
-              label={firstNameLabel}
-              validate={firstNameRequired}
-              component={this.EnhancedFirstNameInput}
-            />
-            <Field
-              name="lastName"
-              type="text"
-              label={lastNameLabel}
-              validate={lastNameRequired}
-              component={this.EnhancedLastNameInput}
-            />
-          </div>
          <Field
-            name="password"
-            type="password"
-            label={passwordLabel}
-            validate={passwordRequired}
-            component={this.EnhancedInput}
+            className={css.lastNameRoot}
+            name="lastName"
+            type="text"
+            label={lastNameLabel}
+            validate={lastNameRequired}
+            component={InputField}
          />
        </div>
-        <div>
-          <Button className={css.button} type="submit" disabled={submitDisabled}>
-            <FormattedMessage id="SignupForm.signUp" />
-          </Button>
-        </div>
-      </form>
-    );
-  }
-}
+        <Field
+          name="password"
+          type="password"
+          label={passwordLabel}
+          validate={passwordRequired}
+          component={InputField}
+        />
+      </div>
+      <div>
+        <Button className={css.button} type="submit" disabled={submitDisabled}>
+          <FormattedMessage id="SignupForm.signUp" />
+        </Button>
+      </div>
+    </form>
+  );
+};

 SignupFormComponent.defaultProps = { inProgress: false };

--- a/src/containers/SignupForm/snapshots/SignupForm.test.js.snap
+++ b/src/containers/SignupForm/snapshots/SignupForm.test.js.snap
@ -6,11 +6,12 @@ exports[`SignupForm matches snapshot 1`] = `
    <div
      className="">
      <label
-        className=""
+        className={undefined}
        htmlFor="email">
        Email
      </label>
      <input
+        autoFocus={false}
        className=""
        name="email"
        onBlur={[Function]}
@ -18,7 +19,7 @@ exports[`SignupForm matches snapshot 1`] = `
        onDragStart={[Function]}
        onDrop={[Function]}
        onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
        type="email"
        value="" />
    </div>
@ -27,11 +28,12 @@ exports[`SignupForm matches snapshot 1`] = `
      <div
        className="">
        <label
-          className=""
+          className={undefined}
          htmlFor="firstName">
          First name
        </label>
        <input
+          autoFocus={false}
          className=""
          name="firstName"
          onBlur={[Function]}
@ -39,18 +41,19 @@ exports[`SignupForm matches snapshot 1`] = `
          onDragStart={[Function]}
          onDrop={[Function]}
          onFocus={[Function]}
-          placeholder=""
+          placeholder={null}
          type="text"
          value="" />
      </div>
      <div
        className="">
        <label
-          className=""
+          className={undefined}
          htmlFor="lastName">
          Last name
        </label>
        <input
+          autoFocus={false}
          className=""
          name="lastName"
          onBlur={[Function]}
@ -58,7 +61,7 @@ exports[`SignupForm matches snapshot 1`] = `
          onDragStart={[Function]}
          onDrop={[Function]}
          onFocus={[Function]}
-          placeholder=""
+          placeholder={null}
          type="text"
          value="" />
      </div>
@ -66,11 +69,12 @@ exports[`SignupForm matches snapshot 1`] = `
    <div
      className="">
      <label
-        className=""
+        className={undefined}
        htmlFor="password">
        Password
      </label>
      <input
+        autoFocus={false}
        className=""
        name="password"
        onBlur={[Function]}
@ -78,7 +82,7 @@ exports[`SignupForm matches snapshot 1`] = `
        onDragStart={[Function]}
        onDrop={[Function]}
        onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
        type="password"
        value="" />
    </div>