From 406866ffd5f6cb4167c38bcb903d4adf07b086ae Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Tue, 6 Jun 2017 10:55:09 +0300 Subject: [PATCH 1/3] Use InputField in login and signup forms --- src/containers/LoginForm/LoginForm.js | 97 +++++------ .../__snapshots__/LoginForm.test.js.snap | 8 +- src/containers/SignupForm/SignupForm.js | 163 ++++++++---------- .../__snapshots__/SignupForm.test.js.snap | 16 +- 4 files changed, 133 insertions(+), 151 deletions(-) diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js index 2e1d8a6f..7ee2fc9b 100644 --- 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 ( -
-
- - -
- -
- ); - } -} + const submitDisabled = pristine || submitting || inProgress; + return ( +
+
+ + +
+ +
+ ); +}; LoginFormComponent.defaultProps = { inProgress: false }; diff --git a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap index a5b7ab68..55938fe0 100644 --- a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap +++ b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap @@ -6,7 +6,7 @@ exports[`LoginForm matches snapshot 1`] = `
@@ -18,14 +18,14 @@ exports[`LoginForm matches snapshot 1`] = ` onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} - placeholder="" + placeholder={null} type="email" value="" />
@@ -37,7 +37,7 @@ exports[`LoginForm matches snapshot 1`] = ` onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} - placeholder="" + placeholder={null} type="password" value="" />
diff --git a/src/containers/SignupForm/SignupForm.js b/src/containers/SignupForm/SignupForm.js index 0e5d8133..a3b67794 100644 --- 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 ( -
-
+ const submitDisabled = pristine || submitting || inProgress; + return ( + +
+ +
-
- - -
-
- -
- - ); - } -} + +
+
+ +
+ + ); +}; SignupFormComponent.defaultProps = { inProgress: false }; diff --git a/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap b/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap index 42f9f9be..caece9b1 100644 --- a/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap +++ b/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap @@ -6,7 +6,7 @@ exports[`SignupForm matches snapshot 1`] = `
@@ -18,7 +18,7 @@ exports[`SignupForm matches snapshot 1`] = ` onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} - placeholder="" + placeholder={null} type="email" value="" />
@@ -27,7 +27,7 @@ exports[`SignupForm matches snapshot 1`] = `
@@ -39,14 +39,14 @@ exports[`SignupForm matches snapshot 1`] = ` onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} - placeholder="" + placeholder={null} type="text" value="" />
@@ -58,7 +58,7 @@ exports[`SignupForm matches snapshot 1`] = ` onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} - placeholder="" + placeholder={null} type="text" value="" />
@@ -66,7 +66,7 @@ exports[`SignupForm matches snapshot 1`] = `
@@ -78,7 +78,7 @@ exports[`SignupForm matches snapshot 1`] = ` onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} - placeholder="" + placeholder={null} type="password" value="" />
From b144cfe94fd2bfffc11f83d9c4f3a6d74c5df8dd Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Tue, 6 Jun 2017 11:22:17 +0300 Subject: [PATCH 2/3] Add autoFocus support --- src/components/InputField/InputField.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/InputField/InputField.js b/src/components/InputField/InputField.js index cb8b9da7..58ec3895 100644 --- 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({ From 1b7e3118aaa891180ffe185fd61523031dccee10 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Tue, 6 Jun 2017 11:23:03 +0300 Subject: [PATCH 3/3] Use InputField component instead of enhancedInput HOC --- .../EditListingDescriptionForm.js | 5 ++--- .../EditListingDescriptionForm.test.js.snap | 2 +- .../EditListingLocationForm.js | 6 +++--- .../__snapshots__/LoginForm.test.js.snap | 2 ++ .../PayoutDetailsForm/PayoutDetailsForm.js | 19 ++++++++++++------- .../__snapshots__/SignupForm.test.js.snap | 4 ++++ 6 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js index be297643..ba15ffb5 100644 --- 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]} /> diff --git a/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap b/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap index 9b10ad4b..23d9be4e 100644 --- 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`] = `
diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.js b/src/containers/EditListingLocationForm/EditListingLocationForm.js index 85d3b6b8..d4babfe4 100644 --- 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 { /> diff --git a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap index 55938fe0..25e7d8b5 100644 --- a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap +++ b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap @@ -11,6 +11,7 @@ exports[`LoginForm matches snapshot 1`] = ` Email @@ -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} />