fix: upgrade rc-form and refactor to be compatible with react@16

components/form/Form.tsx

@@ -4,10 +4,9 @@ import classNames from 'classnames';
 import createDOMForm from 'rc-form/lib/createDOMForm';
 import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import omit from 'omit.js';
-import createReactClass from 'create-react-class';
 import warning from '../_util/warning';
 import FormItem from './FormItem';
-import { FIELD_META_PROP } from './constants';
+import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
 
 export interface FormCreateOption<T> {
   onFieldsChange?: (props: T, fields: Array<any>) => void;
@@ -149,48 +148,12 @@ export default class Form extends React.Component<FormProps, any> {
   static Item = FormItem;
 
   static create = function<TOwnProps>(options: FormCreateOption<TOwnProps> = {}): ComponentDecorator<TOwnProps> {
-    const formWrapper = createDOMForm({
+    return createDOMForm({
       fieldNameProp: 'id',
       ...options,
       fieldMetaProp: FIELD_META_PROP,
+      fieldDataProp: FIELD_DATA_PROP,
     });
-
-    /* eslint-disable react/prefer-es6-class */
-    return (Component) => formWrapper(createReactClass({
-      propTypes: {
-        form: PropTypes.object.isRequired,
-      },
-      childContextTypes: {
-        form: PropTypes.object.isRequired,
-      },
-      getChildContext() {
-        return {
-          form: this.props.form,
-        };
-      },
-      componentWillMount() {
-        this.__getFieldProps = this.props.form.getFieldProps;
-      },
-      deprecatedGetFieldProps(name, option) {
-        warning(
-          false,
-          '`getFieldProps` is not recommended, please use `getFieldDecorator` instead, ' +
-          'see: https://u.ant.design/get-field-decorator',
-        );
-        return this.__getFieldProps(name, option);
-      },
-      render() {
-        this.props.form.getFieldProps = this.deprecatedGetFieldProps;
-
-        const withRef: any = {};
-        if (options.withRef) {
-          withRef.ref = 'formWrappedComponent';
-        } else if (this.props.wrappedComponentRef) {
-          withRef.ref = this.props.wrappedComponentRef;
-        }
-        return <Component {...this.props} {...withRef} />;
-      },
-    }));
   };
 
   constructor(props) {

components/form/FormItem.tsx

@@ -6,12 +6,12 @@ import Animate from 'rc-animate';
 import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import Row from '../grid/row';
 import Col, { ColProps } from '../grid/col';
-import { WrappedFormUtils } from './Form';
-import { FIELD_META_PROP } from './constants';
 import warning from '../_util/warning';
+import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
 
 export interface FormItemProps {
   prefixCls?: string;
+  className?: string;
   id?: string;
   label?: React.ReactNode;
   labelCol?: ColProps;
@@ -20,14 +20,12 @@ export interface FormItemProps {
   extra?: React.ReactNode;
   validateStatus?: 'success' | 'warning' | 'error' | 'validating';
   hasFeedback?: boolean;
-  className?: string;
   required?: boolean;
   style?: React.CSSProperties;
   colon?: boolean;
 }
 
 export interface FormItemContext {
-  form: WrappedFormUtils;
   vertical: boolean;
 }
 
@@ -53,7 +51,6 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   };
 
   static contextTypes = {
-    form: PropTypes.object,
     vertical: PropTypes.bool,
   };
 
@@ -72,10 +69,11 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   }
 
   getHelpMsg() {
-    const context = this.context;
     const props = this.props;
-    if (props.help === undefined && context.form) {
-      return this.getId() ? (context.form.getFieldError(this.getId()) || []).join(', ') : '';
+    const onlyControl = this.getOnlyControl();
+    if (props.help === undefined && onlyControl) {
+      const errors = this.getField().errors;
+      return errors ? errors.map(e => e.message).join(', ') : '';
     }
 
     return props.help;
@@ -97,7 +95,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
       if (!child.props) {
         continue;
       }
-      if (FIELD_META_PROP in child.props) {
+      if (FIELD_META_PROP in child.props) { // And means FIELD_DATA_PROP in chidl.props, too.
         controls.push(child);
       } else if (child.props.children) {
         controls = controls.concat(this.getControls(child.props.children, recursively));
@@ -124,6 +122,10 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     return this.getChildProp(FIELD_META_PROP);
   }
 
+  getField() {
+    return this.getChildProp(FIELD_DATA_PROP);
+  }
+
   renderHelp() {
     const prefixCls = this.props.prefixCls;
     const help = this.getHelpMsg();
@@ -147,18 +149,18 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   }
 
   getValidateStatus() {
-    const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
-    const fieldId = this.getId();
-    if (!fieldId) {
+    const onlyControl = this.getOnlyControl();
+    if (!onlyControl) {
       return '';
     }
-    if (isFieldValidating(fieldId)) {
+    const field = this.getField();
+    if (field.validating) {
       return 'validating';
     }
-    if (!!getFieldError(fieldId)) {
+    if (field.errors) {
       return 'error';
     }
-    const fieldValue = getFieldValue(fieldId);
+    const fieldValue = 'value' in field ? field.value : this.getMeta().initialValue;
     if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
       return 'success';
     }
@@ -166,23 +168,21 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   }
 
   renderValidateWrapper(c1, c2, c3) {
-    let classes = '';
-    const form = this.context.form;
     const props = this.props;
-    const validateStatus = (props.validateStatus === undefined && form) ?
+    const onlyControl = this.getOnlyControl;
+    const validateStatus = (props.validateStatus === undefined && onlyControl) ?
       this.getValidateStatus() :
       props.validateStatus;
 
+    let classes = '';
     if (validateStatus) {
-      classes = classNames(
-        {
-          'has-feedback': props.hasFeedback || validateStatus === 'validating',
-          'has-success': validateStatus === 'success',
-          'has-warning': validateStatus === 'warning',
-          'has-error': validateStatus === 'error',
-          'is-validating': validateStatus === 'validating',
-        },
-      );
+      classes = classNames({
+        'has-feedback': props.hasFeedback || validateStatus === 'validating',
+        'has-success': validateStatus === 'success',
+        'has-warning': validateStatus === 'warning',
+        'has-error': validateStatus === 'error',
+        'is-validating': validateStatus === 'validating',
+      });
     }
     return (
       <div className={`${this.props.prefixCls}-item-control ${classes}`}>
@@ -209,9 +209,9 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     if (required !== undefined) {
       return required;
     }
-    if (this.context.form) {
+    if (this.getOnlyControl()) {
       const meta = this.getMeta() || {};
-      const validate = (meta.validate || []);
+      const validate = meta.validate || [];
 
       return validate.filter((item) => !!item.rules).some((item) => {
         return item.rules.some((rule) => rule.required);

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -35,6 +35,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-0"
                 placeholder="placeholder"
@@ -71,6 +72,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-1"
                 placeholder="placeholder"
@@ -107,6 +109,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-2"
                 placeholder="placeholder"
@@ -143,6 +146,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-3"
                 placeholder="placeholder"
@@ -179,6 +183,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-4"
                 placeholder="placeholder"
@@ -215,6 +220,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-5"
                 placeholder="placeholder"
@@ -251,6 +257,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-6"
                 placeholder="placeholder"
@@ -287,6 +294,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-7"
                 placeholder="placeholder"
@@ -323,6 +331,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-8"
                 placeholder="placeholder"
@@ -359,6 +368,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             >
               <input
                 class="ant-input"
+                data-__field="[object Object]"
                 data-__meta="[object Object]"
                 id="field-9"
                 placeholder="placeholder"
@@ -439,6 +449,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
       >
         <input
           class="ant-input"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="note"
           type="text"
@@ -691,6 +702,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       >
         <input
           class="ant-input"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="username"
           placeholder="Please input your name"
@@ -722,6 +734,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       >
         <input
           class="ant-input"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="nickname"
           placeholder="Please input your nickname"
@@ -824,6 +837,7 @@ exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
         >
           <input
             class="ant-input"
+            data-__field="[object Object]"
             data-__meta="[object Object]"
             id="username"
             type="text"
@@ -871,6 +885,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
           </span>
           <input
             class="ant-input"
+            data-__field="[object Object]"
             data-__meta="[object Object]"
             id="userName"
             placeholder="Username"
@@ -903,6 +918,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
           </span>
           <input
             class="ant-input"
+            data-__field="[object Object]"
             data-__meta="[object Object]"
             id="password"
             placeholder="Password"
@@ -1126,6 +1142,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           </span>
           <input
             class="ant-input"
+            data-__field="[object Object]"
             data-__meta="[object Object]"
             id="userName"
             placeholder="Username"
@@ -1158,6 +1175,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           </span>
           <input
             class="ant-input"
+            data-__field="[object Object]"
             data-__meta="[object Object]"
             id="password"
             placeholder="Password"
@@ -1186,6 +1204,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
             <input
               checked=""
               class="ant-checkbox-input"
+              data-__field="[object Object]"
               data-__meta="[object Object]"
               type="checkbox"
             />
@@ -1249,6 +1268,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       >
         <input
           class="ant-input"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="email"
           type="text"
@@ -1279,6 +1299,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       >
         <input
           class="ant-input"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="password"
           type="password"
@@ -1309,6 +1330,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       >
         <input
           class="ant-input"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="confirm"
           type="password"
@@ -1344,6 +1366,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       >
         <input
           class="ant-input"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="nickname"
           type="text"
@@ -1384,6 +1407,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           <input
             autocomplete="off"
             class="ant-input ant-cascader-input "
+            data-__field="[object Object]"
             data-__meta="[object Object]"
             id="residence"
             readonly=""
@@ -1466,6 +1490,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             </span>
             <input
               class="ant-input"
+              data-__field="[object Object]"
               data-__meta="[object Object]"
               id="phone"
               type="text"
@@ -1580,6 +1605,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           >
             <input
               class="ant-input"
+              data-__field="[object Object]"
               data-__meta="[object Object]"
               id="captcha"
               type="text"
@@ -1626,6 +1652,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           >
             <input
               class="ant-checkbox-input"
+              data-__field="[object Object]"
               data-__meta="[object Object]"
               type="checkbox"
             />
@@ -2202,6 +2229,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       >
         <span
           class="ant-switch"
+          data-__field="[object Object]"
           data-__meta="[object Object]"
           id="switch"
           tabindex="0"

components/form/constants.tsx

@@ -1 +1,2 @@
 export const FIELD_META_PROP = 'data-__meta';
+export const FIELD_DATA_PROP = 'data-__field';

package.json

@@ -57,7 +57,7 @@
     "rc-dialog": "~6.5.10",
     "rc-dropdown": "~1.5.0",
     "rc-editor-mention": "^1.0.2",
-    "rc-form": "~1.4.0",
+    "rc-form": "~1.5.0",
     "rc-input-number": "~3.6.0",
     "rc-menu": "~5.1.0",
     "rc-notification": "~3.0.0",