feat: FormList update (#15)

* feat: FormItem update

* feat: FormList update

* feat: update

* feat: update

Author: wanpan11

src/components/FormList/index.tsx

@@ -3,12 +3,13 @@ import { Button, Form, FormInstance, FormProps } from "antd";
 
 import { getFormElement } from "../tools";
 
-export interface FormListProps extends Pick<FormProps, "form" | "colon" | "className" | "style" | "layout" | "labelAlign" | "onValuesChange" | "disabled"> {
+export interface FormListProps extends Omit<FormProps, "labelCol" | "wrapperCol"> {
   labelCol?: number;
   wrapperCol?: number;
 
   // 搜索
   searchBtn?: null | ReactElement;
+
   // 提交
   submitBtn?: boolean;
   submitNode?: ReactElement;
@@ -98,22 +99,24 @@ const FormList = (props: FormListProps) => {
   return (
     <Form form={realForm} labelCol={labelCol ? { span: labelCol } : undefined} wrapperCol={wrapperCol ? { span: wrapperCol } : undefined} onFinish={onOk} {...restProps}>
       {itemInfo.map((e, idx) => {
+        const key = e.name instanceof Array ? e.name.join("_") : e.name || idx;
+
         if (e.hide) {
           return null;
         }
 
         if (e.type === "blockNode") {
-          return <span key={typeof e.name === "string" ? e.name || idx : e.name.join("_")}>{e.label}</span>;
+          return <span key={key}>{e.label}</span>;
         }
 
         return (
           <Form.Item
+            key={key}
+            name={e.name}
             label={e.label}
             extra={e.extra}
             rules={[e.rule]}
             hidden={!(e.visible ?? true)}
-            name={e.name ? e.name : undefined}
-            key={typeof e.name === "string" ? e.name || idx : e.name.join("_")}
             valuePropName={e.valuePropName ? e.valuePropName : e.type === "switch" ? "checked" : "value"}
             initialValue={e.type === "radio" ? e.options?.[0].value : e.type === "switch" ? true : undefined}
             {...e.formItemProps}

src/components/FormModal/index.tsx

@@ -10,7 +10,7 @@ interface FormModalProps
 }
 
 const FormModal = (props: FormModalProps) => {
-  const { open, title, noFooter, okButtonProps, className, classNames, maskClosable = true, onCancel, wrapperCol = 12, labelCol = 5, onForm, ...resetProps } = props;
+  const { open, title, noFooter, okButtonProps, className, classNames, maskClosable = true, onCancel, wrapperCol = 21, labelCol = 3, onForm, ...resetProps } = props;
 
   const formInstance = useRef<FormInstance<any> | null>(null);
 
@@ -25,7 +25,7 @@ const FormModal = (props: FormModalProps) => {
       open={open}
       okText="确定"
       title={title}
-      destroyOnClose
+      destroyOnHidden
       cancelText="取消"
       className={className}
       maskClosable={maskClosable}
@@ -41,7 +41,9 @@ const FormModal = (props: FormModalProps) => {
         formInstance.current && formInstance.current.submit();
       }}
     >
-      <FormList submitBtn={false} labelCol={labelCol} wrapperCol={wrapperCol} onForm={getForm} {...resetProps} />
+      <div className="overflow-hidden">
+        <FormList submitBtn={false} labelCol={labelCol} wrapperCol={wrapperCol} onForm={getForm} {...resetProps} />
+      </div>
     </Modal>
   );
 };

src/components/tools.tsx

@@ -41,7 +41,10 @@ export const getFormElement = (type: FormItem["type"], info: FormItem) => {
           options={info.options as { value: string }[]}
           className="min-w-[150px]"
           filterOption={(input, option: any) => {
-            return (option.label as string).includes(input);
+            if (typeof option.label === "string") {
+              return option.label.includes(input);
+            }
+            return false;
           }}
           {...info.otherOptions}
         />

src/formIten.d.ts

@@ -1,15 +1,15 @@
 declare interface FormItem {
-  name: string | (number | string)[];
+  name?: string | (number | string)[];
   label?: string | React.ReactNode;
   placeholder?: string;
   initialValue?: unknown;
-  rule?: any;
+  rule?: import("antd").FormItemProps["rules"][number];
   hide?: boolean;
   visible?: boolean;
   disable?: boolean;
   extra?: string | React.ReactNode;
   type: "input" | "numberInput" | "select" | "treeSelect" | "datePick" | "rangePick" | "radio" | "checkbox" | "textArea" | "switch" | "blockNode" | "node";
-  valuePropName?: string;
+  valuePropName?: import("antd").FormItemProps["valuePropName"];
   formItemProps?: import("antd").FormItemProps;
   // 特有属性
   rightNode?: React.ReactNode; // node