feat: 新增动态表单能力 (#602)

* feat: 新增动态表单能力 * feat: 优化 form 样式 & 默认渲染 extra 节点 * feat: 新增动态表单能力
Tencent · Apr 13, 2022 · 3b82c6d · 3b82c6d
1 parent 6860d01
commit 3b82c6d
Show file tree

Hide file tree

Showing 14 changed files with 900 additions and 230 deletions.
diff --git a/site/vite.config.js b/site/vite.config.js
@@ -44,7 +44,7 @@ export default ({ mode }) => {
       react(),
       tdocPlugin(),
       VitePWA(pwaConfig),
-      replace({ __DATE__: new Date().toISOString() }),
+      replace({ preventAssignment: false, __DATE__: new Date().toISOString() }),
       // istanbul({
       //   cwd: resolvePath('../'),
       //   include: ['src/**/*'],

diff --git a/src/_common b/src/_common
diff --git a/src/form/Form.tsx b/src/form/Form.tsx
@@ -8,6 +8,7 @@ import useInstance from './hooks/useInstance';
 import { StyledProps } from '../common';
 import FormContext from './FormContext';
 import FormItem from './FormItem';
+import FormList from './FormList';
 
 export interface FormProps extends TdFormProps, StyledProps {
   children?: React.ReactNode;
@@ -28,7 +29,6 @@ const Form = forwardRefWithStatics(
       statusIcon,
       labelAlign = 'right',
       layout = 'vertical',
-      size = 'medium',
       colon = false,
       requiredMark = globalFormConfig.requiredMark,
       scrollToFirstError,
@@ -48,7 +48,7 @@ const Form = forwardRefWithStatics(
     });
 
     const formRef: React.RefObject<HTMLFormElement> = useRef();
-    const formItemsRef = useRef([]);
+    const formMapRef = useRef(new Map()); // 收集所有 formItem 实例
 
     const {
       submit,
@@ -60,7 +60,7 @@ const Form = forwardRefWithStatics(
       validate,
       clearValidate,
       setValidateMessage,
-    } = useInstance(props, formRef, formItemsRef);
+    } = useInstance(props, formRef, formMapRef);
 
     useImperativeHandle(ref as FormRefInterface, () => ({
       currentElement: formRef.current,
@@ -80,8 +80,8 @@ const Form = forwardRefWithStatics(
         e.preventDefault?.();
         e.stopPropagation?.();
       }
-      formItemsRef.current.forEach(({ current: formItemRef }) => {
-        formItemRef && formItemRef?.resetField();
+      [...formMapRef.current.values()].forEach((formItemRef) => {
+        formItemRef?.current.resetField();
       });
       onReset?.({ e });
     }
@@ -105,7 +105,6 @@ const Form = forwardRefWithStatics(
           statusIcon,
           labelAlign,
           layout,
-          size,
           colon,
           requiredMark,
           errorMessage,
@@ -114,7 +113,7 @@ const Form = forwardRefWithStatics(
           resetType,
           rules,
           disabled,
-          formItemsRef,
+          formMapRef,
           onFormItemValueChange,
         }}
       >
@@ -131,7 +130,7 @@ const Form = forwardRefWithStatics(
       </FormContext.Provider>
     );
   },
-  { FormItem },
+  { FormItem, FormList },
 );
 
 Form.displayName = 'Form';

diff --git a/src/form/FormContext.tsx b/src/form/FormContext.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { TdFormProps } from './type';
+import { TdFormProps, TdFormListProps } from './type';
+import { FormItemInstance } from './FormItem';
 
 const FormContext = React.createContext<{
   labelWidth?: TdFormProps['labelWidth'];
   statusIcon?: TdFormProps['statusIcon'];
   labelAlign: TdFormProps['labelAlign'];
   layout: TdFormProps['layout'];
-  size: TdFormProps['size'];
   colon: TdFormProps['colon'];
   requiredMark: TdFormProps['requiredMark'];
   scrollToFirstError: TdFormProps['scrollToFirstError'];
@@ -15,13 +15,12 @@ const FormContext = React.createContext<{
   disabled: TdFormProps['disabled'];
   rules: TdFormProps['rules'];
   errorMessage: TdFormProps['errorMessage'];
-  formItemsRef: React.RefObject<Array<React.RefObject<HTMLElement>>>;
+  formMapRef: React.RefObject<Map<any, React.RefObject<FormItemInstance>>>;
   onFormItemValueChange: (changedValue: Record<string, unknown>) => void;
 }>({
-  labelWidth: 'calc(1 / 12 * 100%)',
+  labelWidth: '100px',
   labelAlign: 'right',
   layout: 'vertical',
-  size: 'medium',
   colon: false,
   requiredMark: true,
   scrollToFirstError: undefined,
@@ -32,9 +31,21 @@ const FormContext = React.createContext<{
   errorMessage: undefined,
   statusIcon: false,
   onFormItemValueChange: undefined,
-  formItemsRef: null,
+  formMapRef: undefined,
 });
 
 export const useFormContext = () => React.useContext(FormContext);
 
 export default FormContext;
+
+export const FormListContext = React.createContext<{
+  name: string | number;
+  rules: TdFormListProps['rules'];
+  formListMapRef: React.RefObject<Map<any, React.RefObject<FormItemInstance>>>;
+}>({
+  name: undefined,
+  rules: undefined,
+  formListMapRef: undefined,
+});
+
+export const useFormListContext = () => React.useContext(FormListContext);