feat(FormCollapseList): support extra, expandIcon and fieldRemoveButton

yuntijs · Jul 17, 2024 · 4e1dd04 · 4e1dd04
1 parent cb8d581
commit 4e1dd04
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 43 deletions.
diff --git a/src/Form/collapse-list/index.tsx b/src/Form/collapse-list/index.tsx
@@ -39,7 +39,14 @@ export interface FormCollapseListProps
   extends Omit<AntFormListProps, 'name' | 'children'>,
     Pick<
       CollapseGroupProps,
-      'className' | 'icon' | 'title' | 'variant' | 'defaultActive' | 'style'
+      | 'className'
+      | 'extra'
+      | 'expandIcon'
+      | 'icon'
+      | 'title'
+      | 'variant'
+      | 'defaultActive'
+      | 'style'
     > {
   /** 字段名 */
   name?: FormItemProps['name'];
@@ -61,9 +68,13 @@ export interface FormCollapseListProps
   maxFileds?: number;
   /** 删除时调用，返回 false 时取消删除 */
   onRemove?: (values: any) => boolean | void | Promise<boolean | void>;
+  /** 是否启用表单项删除按钮，默认为启用 */
+  fieldRemoveButton?: boolean;
 }
 
 export const FormCollapseList: React.FC<FormCollapseListProps> = ({
+  extra,
+  expandIcon,
   icon,
   title,
   variant,
@@ -79,6 +90,7 @@ export const FormCollapseList: React.FC<FormCollapseListProps> = ({
   addParams,
   className,
   onRemove,
+  fieldRemoveButton = true,
   style,
   ...formListProps
 }) => {
@@ -115,23 +127,25 @@ export const FormCollapseList: React.FC<FormCollapseListProps> = ({
   return (
     <CollapseGroup
       extra={
-        name &&
-        !readOnly && (
-          <Tooltip title={maxFileds && `最多添加 ${maxFileds} 项`}>
-            <Button
-              disabled={disabled || !!(maxFileds && fieldsWatch?.length === maxFileds)}
-              icon={<PlusOutlined />}
-              onClick={e => {
-                e.stopPropagation();
-                listAdd.current?.(...getAddParams());
-              }}
-              size="small"
-              type="text"
-            />
-          </Tooltip>
-        )
+        extra === undefined
+          ? name &&
+            !readOnly && (
+              <Tooltip title={maxFileds && `最多添加 ${maxFileds} 项`}>
+                <Button
+                  disabled={disabled || !!(maxFileds && fieldsWatch?.length === maxFileds)}
+                  icon={<PlusOutlined />}
+                  onClick={e => {
+                    e.stopPropagation();
+                    listAdd.current?.(...getAddParams());
+                  }}
+                  size="small"
+                  type="text"
+                />
+              </Tooltip>
+            )
+          : extra
       }
-      {...{ className, icon, title, variant, defaultActive, style }}
+      {...{ className, expandIcon, icon, title, variant, defaultActive, style }}
     >
       {name ? (
         <Form.List name={name} {...formListProps}>
@@ -213,34 +227,32 @@ export const FormCollapseList: React.FC<FormCollapseListProps> = ({
                       },
                     })
                   ),
-                  {
-                    title: '',
-                    dataIndex: 'del',
-                    render: (_text, _record, index) => {
-                      if (readOnly) {
-                        return;
-                      }
-                      const { name: fieldName } = fields[index];
-                      return (
-                        <Form.Item>
-                          <Button
-                            disabled={
-                              disabled || (disableRemoveWhenOneField && fields.length === 1)
-                            }
-                            icon={<Icon icon={Trash2} />}
-                            onClick={async () => {
-                              const isRemove = await handleOnRemove(fieldName);
-                              if (isRemove !== false) {
-                                remove(fieldName);
+                  !readOnly &&
+                    fieldRemoveButton !== false && {
+                      title: '',
+                      dataIndex: 'del',
+                      render: (_text: string, _record: any, index: number) => {
+                        const { name: fieldName } = fields[index];
+                        return (
+                          <Form.Item>
+                            <Button
+                              disabled={
+                                disabled || (disableRemoveWhenOneField && fields.length === 1)
                               }
-                            }}
-                            type="text"
-                          />
-                        </Form.Item>
-                      );
+                              icon={<Icon icon={Trash2} />}
+                              onClick={async () => {
+                                const isRemove = await handleOnRemove(fieldName);
+                                if (isRemove !== false) {
+                                  remove(fieldName);
+                                }
+                              }}
+                              type="text"
+                            />
+                          </Form.Item>
+                        );
+                      },
                     },
-                  },
-                ]}
+                ].filter(c => !!c)}
                 dataSource={fields}
                 locale={{ emptyText: empty }}
                 pagination={false}

diff --git a/src/Form/demos/Playground.tsx b/src/Form/demos/Playground.tsx
@@ -9,6 +9,7 @@ export default () => {
     {
       name: 'outputs',
       title: '输出变量',
+      fieldRemoveButton: true,
       readOnly: false,
       defaultActive: true,
       disabled: false,