Skip to content
This repository has been archived by the owner on Apr 25, 2019. It is now read-only.

Update forms to use custom Input ui component #281

Merged
merged 5 commits into from
Jul 18, 2016
Merged

Update forms to use custom Input ui component #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6cacaf2
Fix warning about missing key prop for iterated element in Home page
stephanethomas Jul 18, 2016
ea72b16
Bump React to latest available version
stephanethomas Jul 18, 2016
e9ad1ca
Filter out only props provided by redux-form via the fields prop
stephanethomas Jul 18, 2016
1e86670
Fix invalid props passed to form elements
stephanethomas Jul 18, 2016
0734c33
Update forms to use custom Input ui component
stephanethomas Jul 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions app/components/ui/checkout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import capitalize from 'lodash/capitalize';
import FormToggle from 'components/ui/form/form-toggle';
import ValidationError from 'components/ui/form/validation-error';
import Input from 'components/ui/form/input';
import { removeInvalidInputProps } from 'lib/form';
import SiftScience from 'lib/sift-science';

const Checkout = React.createClass( {
Expand Down Expand Up @@ -106,7 +107,7 @@ const Checkout = React.createClass( {
<label>{ i18n.translate( 'Expiration' ) }</label>
<div className={ styles.expiration }>
<select
{ ...fields.expirationMonth }
{ ...removeInvalidInputProps( fields.expirationMonth ) }
className={ styles.expirationMonth }>
<option>{ i18n.translate( 'Month' ) }</option>
{ months.map( ( monthName, monthIndex ) => {
Expand All @@ -120,7 +121,7 @@ const Checkout = React.createClass( {
</select>

<select
{ ...fields.expirationYear }
{ ...removeInvalidInputProps( fields.expirationYear ) }
className={ styles.expirationYear }>
<option>{ i18n.translate( 'Year' ) }</option>
<option value="19">2019</option>
Expand Down
3 changes: 2 additions & 1 deletion app/components/ui/connect-user/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import DocumentTitle from 'components/ui/document-title';
import Footer from 'components/ui/connect-user/footer';
import Form from 'components/ui/form';
import Header from 'components/ui/connect-user/header';
import Input from 'components/ui/form/input';
import ValidationError from 'components/ui/form/validation-error';

const ConnectUser = React.createClass( {
Expand Down Expand Up @@ -60,7 +61,7 @@ const ConnectUser = React.createClass( {
fieldArea={
<fieldset>
<label>{ i18n.translate( 'Email address:' ) }</label>
<input { ...fields.email } autoFocus />
<Input field={ fields.email } autoFocus />
<ValidationError field={ fields.email } submitFailed={ submitFailed } />
</fieldset>
}
Expand Down
5 changes: 3 additions & 2 deletions app/components/ui/connect-user/verify-user/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Footer from 'components/ui/connect-user/footer';
import Form from 'components/ui/form';
import Header from 'components/ui/connect-user/header';
import i18n from 'i18n-calypso';
import Input from 'components/ui/form/input';
import ResendSignupEmail from './resend-signup-email';
import styles from './styles.scss';
import ValidationError from 'components/ui/form/validation-error';
Expand Down Expand Up @@ -77,7 +78,7 @@ const VerifyUser = React.createClass( {
<div className={ styles.twoFactorFields }>
<label>{ i18n.translate( 'Two factor authentication code:' ) }</label>

<input { ...fields.twoFactorAuthenticationCode } autoComplete="off" />
<Input field={ fields.twoFactorAuthenticationCode } autoComplete="off" />

<ValidationError field={ fields.twoFactorAuthenticationCode } submitFailed={ submitFailed } />
</div>
Expand Down Expand Up @@ -135,7 +136,7 @@ const VerifyUser = React.createClass( {
<fieldset>
<label>{ i18n.translate( 'Confirmation code:' ) }</label>

<input { ...fields.code } autoFocus autoComplete="off" />
<Input field={ fields.code } autoFocus autoComplete="off" />

<ValidationError field={ fields.code } submitFailed={ submitFailed } />

Expand Down
3 changes: 2 additions & 1 deletion app/components/ui/contact-information/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import DocumentTitle from 'components/ui/document-title';
import Form from 'components/ui/form';
import State from 'components/ui/contact-information/state';
import Input from 'components/ui/form/input';
import { removeInvalidInputProps } from 'lib/form';
import styles from './styles.scss';
import CheckoutProgressbar from 'components/ui/checkout-progressbar';
import ValidationError from 'components/ui/form/validation-error';
Expand Down Expand Up @@ -319,7 +320,7 @@ class ContactInformation extends React.Component {
</div>

<select
{ ...fields.countryCode }
{ ...removeInvalidInputProps( fields.countryCode ) }
disabled={ this.isDataLoading() }
className={ styles.countryCode }>
<option value="" disabled>{ i18n.translate( 'Select Country' ) }</option>
Expand Down
8 changes: 5 additions & 3 deletions app/components/ui/contact-information/state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,25 @@ import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';

// Internal dependencies
import Input from 'components/ui/form/input';
import { removeInvalidInputProps } from 'lib/form';
import styles from './styles.scss';

const State = ( { disabled, field, states, onBlur } ) => {
let content;

if ( ! states.hasLoadedFromServer || isEmpty( states.data ) ) {
content = (
<input
{ ...field }
<Input
field={ field }
disabled={ ! states.hasLoadedFromServer || disabled }
onBlur={ onBlur }
placeholder={ i18n.translate( 'State' ) } />
);
} else {
content = (
<select
{ ...field }
{ ...removeInvalidInputProps( field ) }
onBlur={ onBlur }
disabled={ disabled }>
<option value="" disabled>{ i18n.translate( 'State' ) }</option>
Expand Down
5 changes: 3 additions & 2 deletions app/components/ui/form/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';

// Internal dependencies
import { removeInvalidInputProps } from 'lib/form';
import styles from './styles.scss';

class Input extends React.Component {
Expand Down Expand Up @@ -34,13 +35,13 @@ class Input extends React.Component {
inputClassName = classNames( styles.input, {
[ styles.hasError ]: isInvalid
} ),
newProps = omit( this.props, [ 'field', 'className' ] );
newProps = omit( this.props, [ 'className', 'field', 'untouch' ] );

return (
<div className={ className }>
<input
className={ inputClassName }
{ ...field }
{ ...removeInvalidInputProps( field ) }
{ ...newProps }
ref={ this.saveRef }
/>
Expand Down
4 changes: 2 additions & 2 deletions app/components/ui/sunrise-home/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ const SunriseHome = React.createClass( {
<div className={ styles.explanationsHeadingLine } />

<div className={ styles.explanations }>
{ explanations.map( explanation => (
<div className={ styles.explanationBlock }>
{ explanations.map( ( explanation, index ) => (
<div className={ styles.explanationBlock } key={ index }>
<div className={ styles.explanationTitle }>
{ explanation.title }
</div>
Expand Down
31 changes: 24 additions & 7 deletions app/lib/form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,32 @@ export const getAsyncValidateFunction = validate => values => new Promise( ( res
} );

/**
* Extract valid props to be given to an <input> element from an object (a set of props) containing other fields.
* This function basically removes all custom props added by react-form.
* See this issue in react-form: https://github.com/erikras/redux-form/issues/1249#
* Extracts valid props to be given to a form element from an object (a set of props) containing other fields. This
* function basically removes all custom props added by redux-form:
*
* @param {object} props - a set of props for an input element
* @returns {object} props filtered
* https://github.com/erikras/redux-form/issues/1249
*
* This function should be removed once redux-form is upgraded to version 6.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems v6 won't fix this, it just provides a cleaner syntax to create input components.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh ok it has this input prop with all the valid properties

*
* @param {object} props - a set of props for a form element
* @returns {object} - the props filtered
*/
export const removeInvalidInputProps = ( props ) => {
const { active, autofill, autofilled, dirty, error, initialValue, invalid, onUpdate, pristine, touched,
valid, visited, asyncValidating, autofocus, ...validProps } = props;
const {
active,
autofill,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the purpose of removing asyncValidating from this list?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's because it's useless since it's not part of the list of props that redux-form provides inside the fields object.

autofilled,
dirty,
error,
initialValue,
invalid,
onUpdate,
pristine,
touched,
valid,
visited,
...validProps
} = props;

return validProps;
};
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"postcss-loader": "^0.8.2",
"pug": "^2.0.0-alpha3",
"random-words": "0.0.1",
"react": "^15.0.2",
"react": "^15.2.1",
"react-addons-create-fragment": "^15.0.2",
"react-addons-css-transition-group": "^15.0.2",
"react-bind-handlers": "^1.0.5",
Expand All @@ -98,7 +98,7 @@
"react-router-redux": "^4.0.0",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.3.1",
"redux-form": "^5.2.5",
"redux-form": "^5.3.1",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"sass-loader": "^3.2.0",
Expand Down