✨ feat(ims-view-pc): add renderFormList

eternallycyf · Sep 24, 2024 · c65cb3a · c65cb3a
1 parent 191c9cd
commit c65cb3a
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 75 deletions.
diff --git a/packages/ims-view-pc/src/components/CustomForm/CustomForm.tsx b/packages/ims-view-pc/src/components/CustomForm/CustomForm.tsx
@@ -6,8 +6,82 @@ import React, {
   useState,
   type ForwardRefRenderFunction,
 } from 'react';
-import { ModalTypeEnum, type CustomFormHandle, type CustomFormProps } from '.';
+import { ModalTypeEnum, type CustomFormHandle, type CustomFormList, type CustomFormProps } from '.';
 import './index.less';
+
+export const renderFormList = (formList: CustomFormList) => {
+  return (
+    <>
+      {(formList || []).map((item, index) => {
+        const getContent = (item) => {
+          if (!item?.children) {
+            return (
+              <Form.Item
+                labelAlign="left"
+                label={item?.label}
+                name={item?.name}
+                rules={item?.rules || item?.itemProps?.rules || []}
+                initialValue={item?.initialValue}
+                {...item?.itemProps}
+              >
+                {renderFormItem(item)}
+              </Form.Item>
+            );
+          }
+          return (
+            <Form.Item
+              key={index}
+              labelAlign="left"
+              noStyle
+              shouldUpdate={item?.itemProps?.shouldUpdate || (() => true)}
+            >
+              {(form) => {
+                if (item?.children) {
+                  const values = form.getFieldsValue();
+                  const _renderChildren = (_children = []) => (
+                    <Form.Item
+                      label={item?.label}
+                      shouldUpdate={item?.itemProps?.shouldUpdate || (() => true)}
+                      {...item?.itemProps}
+                    >
+                      <Row style={{ width: '100%' }}>
+                        {_children?.map((ele, ind) => (
+                          <Col key={ind} style={ele?.itemProps?.style}>
+                            {getContent(ele)}
+                          </Col>
+                        ))}
+                      </Row>
+                    </Form.Item>
+                  );
+
+                  if (typeof item?.children === 'function') {
+                    const nextValues = item?.children(values, form);
+                    if (nextValues === false) return null;
+                    if (React.isValidElement(nextValues) && !Array.isArray(nextValues)) {
+                      return nextValues;
+                    }
+                    return _renderChildren(nextValues || []);
+                  } else {
+                    if (item?.children?.length == 0 || !item?.children) return null;
+                    return _renderChildren(item.children || []);
+                  }
+                } else {
+                  return renderFormItem(item);
+                }
+              }}
+            </Form.Item>
+          );
+        };
+        if (item?.type == 'update') return getContent(item);
+        return (
+          <Col span={item?.col ?? 0} key={index} className={`ant-form-item-${item?.type ?? ''}`}>
+            {getContent(item)}
+          </Col>
+        );
+      })}
+    </>
+  );
+};
 const CustomForm: ForwardRefRenderFunction<CustomFormHandle, CustomFormProps> = (props, ref) => {
   const {
     onCancel,
@@ -63,77 +137,7 @@ const CustomForm: ForwardRefRenderFunction<CustomFormHandle, CustomFormProps> =
   };
 
   const content = useMemo(() => {
-    return (
-      <Row gutter={16}>
-        {(formList || []).map((item, index) => {
-          const getContent = (item) => {
-            if (!item?.children) {
-              return (
-                <Form.Item
-                  labelAlign="left"
-                  label={item?.label}
-                  name={item?.name}
-                  rules={item?.rules || item?.itemProps?.rules || []}
-                  initialValue={item?.initialValue}
-                  {...item?.itemProps}
-                >
-                  {renderFormItem(item)}
-                </Form.Item>
-              );
-            }
-            return (
-              <Form.Item
-                key={index}
-                labelAlign="left"
-                noStyle
-                shouldUpdate={item?.itemProps?.shouldUpdate || (() => true)}
-              >
-                {(form) => {
-                  if (item?.children) {
-                    const values = form.getFieldsValue();
-                    const _renderChildren = (_children = []) => (
-                      <Form.Item
-                        label={item?.label}
-                        shouldUpdate={item?.itemProps?.shouldUpdate || (() => true)}
-                        {...item?.itemProps}
-                      >
-                        <Row style={{ width: '100%' }}>
-                          {_children?.map((ele, ind) => (
-                            <Col key={ind} style={ele?.itemProps?.style}>
-                              {getContent(ele)}
-                            </Col>
-                          ))}
-                        </Row>
-                      </Form.Item>
-                    );
-
-                    if (typeof item?.children === 'function') {
-                      const nextValues = item?.children(values, form);
-                      if (nextValues === false) return null;
-                      if (React.isValidElement(nextValues) && !Array.isArray(nextValues)) {
-                        return nextValues;
-                      }
-                      return _renderChildren(nextValues || []);
-                    } else {
-                      if (item?.children?.length == 0 || !item?.children) return null;
-                      return _renderChildren(item.children || []);
-                    }
-                  } else {
-                    return renderFormItem(item);
-                  }
-                }}
-              </Form.Item>
-            );
-          };
-          if (item?.type == 'update') return getContent(item);
-          return (
-            <Col span={item?.col ?? 0} key={index} className={`ant-form-item-${item?.type ?? ''}`}>
-              {getContent(item)}
-            </Col>
-          );
-        })}
-      </Row>
-    );
+    return <Row gutter={16}>{renderFormList(formList)}</Row>;
   }, [formList, form]);
 
   let WrapperProps: any = {

diff --git a/packages/ims-view-pc/src/components/CustomForm/index.tsx b/packages/ims-view-pc/src/components/CustomForm/index.tsx
@@ -1,7 +1,7 @@
 import type { DrawerProps, FormInstance, FormProps, ModalProps } from 'antd';
-import { Search } from 'ims-view-pc';
+import { renderFormItem, Search } from 'ims-view-pc';
 import React, { RefObject } from 'react';
-import CommonForm from './CustomForm';
+import CommonForm, { renderFormList } from './CustomForm';
 
 /**
  * @name 弹窗类型
@@ -84,8 +84,14 @@ const CompoundedCustomFrom = React.forwardRef<CustomFormHandle, CustomFormProps>
   },
 ) => React.ReactElement;
 
-type CompoundedComponent = typeof CompoundedCustomFrom & {};
+type CompoundedComponent = typeof CompoundedCustomFrom & {
+  renderFormItem: typeof renderFormItem;
+  renderFormList: typeof renderFormList;
+};
 
 const CustomForm = CompoundedCustomFrom as CompoundedComponent;
 
+CustomForm.renderFormItem = renderFormItem;
+CustomForm.renderFormList = renderFormList;
+
 export default CustomForm;