feat: Form support scrollToField (ant-design#17457)

* support scroll & label htmlFor * update snapshot * add test case * doc update * add decleare * adjust logic of label id * clean ts error
sabirmostofa · Jul 4, 2019 · b3a76c1 · b3a76c1
1 parent 186f973
commit b3a76c1
Show file tree

Hide file tree

Showing 15 changed files with 242 additions and 8 deletions.
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import omit from 'omit.js';
 import classNames from 'classnames';
-import FieldForm, { FormInstance, useForm, List } from 'rc-field-form';
+import FieldForm, { List } from 'rc-field-form';
 import { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
 import { ColProps } from '../grid/col';
 import { ConfigContext, ConfigConsumerProps } from '../config-provider';
 import { FormContext } from './context';
 import { FormLabelAlign } from './interface';
+import { useForm, FormInstance } from './util';
 
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 
-interface FormProps extends RcFormProps {
+interface FormProps extends Omit<RcFormProps, 'form'> {
   prefixCls?: string;
   hideRequiredMark?: boolean;
   colon?: boolean;
@@ -19,12 +20,14 @@ interface FormProps extends RcFormProps {
   labelAlign?: FormLabelAlign;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
+  form?: FormInstance;
 }
 
 const InternalForm: React.FC<FormProps> = (props, ref) => {
   const { getPrefixCls }: ConfigConsumerProps = React.useContext(ConfigContext);
 
   const {
+    form,
     colon,
     name,
     labelAlign,
@@ -57,6 +60,11 @@ const InternalForm: React.FC<FormProps> = (props, ref) => {
     'colon',
   ]);
 
+  const [wrapForm] = useForm(form);
+  wrapForm.__INTERNAL__.name = name;
+
+  React.useImperativeHandle(ref, () => wrapForm);
+
   return (
     <FormContext.Provider
       value={{
@@ -68,7 +76,7 @@ const InternalForm: React.FC<FormProps> = (props, ref) => {
         colon,
       }}
     >
-      <FieldForm id={name} {...formProps} ref={ref} className={formClassName} />
+      <FieldForm id={name} {...formProps} form={wrapForm} className={formClassName} />
     </FormContext.Provider>
   );
 };

diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
@@ -10,7 +10,7 @@ import warning from '../_util/warning';
 import FormItemLabel, { FormItemLabelProps } from './FormItemLabel';
 import FormItemInput, { FormItemInputProps } from './FormItemInput';
 import { FormContext, FormItemContext } from './context';
-import { toArray } from './util';
+import { toArray, getFieldId } from './util';
 
 const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
 export type ValidateStatus = (typeof ValidateStatuses)[number];
@@ -154,10 +154,10 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
             : !!(rules && rules.some(rule => typeof rule === 'object' && rule.required));
 
         // ======================= Children =======================
-        const mergedId = mergedName.join('_');
+        const fieldId = getFieldId(mergedName, formName);
         const mergedControl: typeof control = {
           ...control,
-          id: formName ? `${formName}_${mergedId}` : mergedId,
+          id: fieldId,
         };
 
         let childNode;
@@ -195,7 +195,12 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
         return (
           <Row type="flex" className={classNames(itemClassName)} style={style} key="row">
             {/* Label */}
-            <FormItemLabel {...props} required={isRequired} prefixCls={prefixCls} />
+            <FormItemLabel
+              htmlFor={fieldId}
+              {...props}
+              required={isRequired}
+              prefixCls={prefixCls}
+            />
             {/* Input Group */}
             <FormItemInput
               {...props}

diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx
@@ -6,7 +6,7 @@ import { FormContext, FormContextProps } from './context';
 
 export interface FormItemLabelProps {
   colon?: boolean;
-  htmlFor: string;
+  htmlFor?: string;
   label?: React.ReactNode;
   labelAlign?: FormLabelAlign;
   labelCol?: ColProps;