From 6cacaf2e4be7bf4ae94956fdd4458ee1a1d541cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 18 Jul 2016 14:06:04 +0200 Subject: [PATCH 1/5] Fix warning about missing key prop for iterated element in Home page See https://fb.me/react-warning-keys for more information. --- app/components/ui/sunrise-home/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/ui/sunrise-home/index.js b/app/components/ui/sunrise-home/index.js index 30a6779d..107ba5ad 100644 --- a/app/components/ui/sunrise-home/index.js +++ b/app/components/ui/sunrise-home/index.js @@ -90,8 +90,8 @@ const SunriseHome = React.createClass( {
- { explanations.map( explanation => ( -
+ { explanations.map( ( explanation, index ) => ( +
{ explanation.title }
From ea72b162af5766465e8685a85b9882373f06463f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 18 Jul 2016 14:31:28 +0200 Subject: [PATCH 2/5] Bump React to latest available version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 657a7344..15956e73 100644 --- a/package.json +++ b/package.json @@ -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", From e9ad1caecb39ac480390885980de5b68ef4d25a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 18 Jul 2016 14:36:43 +0200 Subject: [PATCH 3/5] Filter out only props provided by redux-form via the fields prop See http://redux-form.com/5.3.1/#/api/props for more information. --- app/lib/form/index.js | 31 ++++++++++++++++++++++++------- package.json | 2 +- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/app/lib/form/index.js b/app/lib/form/index.js index 0f883436..b2d6d4f5 100644 --- a/app/lib/form/index.js +++ b/app/lib/form/index.js @@ -21,15 +21,32 @@ export const getAsyncValidateFunction = validate => values => new Promise( ( res } ); /** - * Extract valid props to be given to an 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. + * + * @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, + autofilled, + dirty, + error, + initialValue, + invalid, + onUpdate, + pristine, + touched, + valid, + visited, + ...validProps + } = props; + return validProps; }; diff --git a/package.json b/package.json index 15956e73..2a9bc044 100644 --- a/package.json +++ b/package.json @@ -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", From 1e8667009f493358cb11b85868f0dd0444e401e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 18 Jul 2016 14:40:02 +0200 Subject: [PATCH 4/5] Fix invalid props passed to form elements See https://github.com/erikras/redux-form/issues/1249 for more information. --- app/components/ui/checkout/index.js | 5 +++-- app/components/ui/contact-information/index.js | 3 ++- app/components/ui/contact-information/state.js | 3 ++- app/components/ui/form/input.js | 5 +++-- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/app/components/ui/checkout/index.js b/app/components/ui/checkout/index.js index cac0c023..e4cba8f3 100644 --- a/app/components/ui/checkout/index.js +++ b/app/components/ui/checkout/index.js @@ -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( { @@ -106,7 +107,7 @@ const Checkout = React.createClass( {
diff --git a/app/components/ui/contact-information/state.js b/app/components/ui/contact-information/state.js index ea9a882a..f6ccf82b 100644 --- a/app/components/ui/contact-information/state.js +++ b/app/components/ui/contact-information/state.js @@ -5,6 +5,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'; const State = ( { disabled, field, states, onBlur } ) => { @@ -21,7 +22,7 @@ const State = ( { disabled, field, states, onBlur } ) => { } else { content = ( From 0734c332667182eaee8b59d32cedbe41c43d7234 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 18 Jul 2016 14:41:01 +0200 Subject: [PATCH 5/5] Update forms to use custom Input ui component --- app/components/ui/connect-user/index.js | 3 ++- app/components/ui/connect-user/verify-user/index.js | 5 +++-- app/components/ui/contact-information/state.js | 5 +++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/app/components/ui/connect-user/index.js b/app/components/ui/connect-user/index.js index d24d98a8..ee431379 100644 --- a/app/components/ui/connect-user/index.js +++ b/app/components/ui/connect-user/index.js @@ -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( { @@ -60,7 +61,7 @@ const ConnectUser = React.createClass( { fieldArea={
- +
} diff --git a/app/components/ui/connect-user/verify-user/index.js b/app/components/ui/connect-user/verify-user/index.js index 91335535..befbeee9 100644 --- a/app/components/ui/connect-user/verify-user/index.js +++ b/app/components/ui/connect-user/verify-user/index.js @@ -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'; @@ -77,7 +78,7 @@ const VerifyUser = React.createClass( {
- +
@@ -135,7 +136,7 @@ const VerifyUser = React.createClass( {
- + diff --git a/app/components/ui/contact-information/state.js b/app/components/ui/contact-information/state.js index f6ccf82b..25549ee9 100644 --- a/app/components/ui/contact-information/state.js +++ b/app/components/ui/contact-information/state.js @@ -5,6 +5,7 @@ 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'; @@ -13,8 +14,8 @@ const State = ( { disabled, field, states, onBlur } ) => { if ( ! states.hasLoadedFromServer || isEmpty( states.data ) ) { content = ( -