From fdb7ab1866233b04a8526ea31cbdb5688ba8eb34 Mon Sep 17 00:00:00 2001
From: katherinehhh <shunai.tang@hand-china.com>
Date: Wed, 31 May 2023 10:43:56 +0800
Subject: [PATCH] refactor(sub-form):sub-form style  (#1959)

* style: sub nester style improve

* style: sub-form style improve

* fix: improve code

* fix: null

---------

Co-authored-by: chenos <chenlinxh@gmail.com>
---
 .../association-field/AssociationSelect.tsx   |  2 +-
 .../antd/association-field/InternalNester.tsx | 45 +++++++++---
 .../antd/association-field/InternalPicker.tsx |  2 +-
 .../antd/association-field/Nester.tsx         | 71 ++++++++++++++-----
 4 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx b/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx
index 2e9a25aad..a93d6e688 100644
--- a/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx
@@ -20,7 +20,7 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
 
   return (
     <div key={fieldSchema.name}>
-      <Input.Group compact style={{ display: 'flex' }}>
+      <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
         <RemoteSelect
           style={{ width: '100%' }}
           {...props}
diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx
index 369b8bc54..00cca8174 100644
--- a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx
@@ -1,6 +1,7 @@
 import { FormLayout } from '@formily/antd';
 import { RecursionField, useField, useFieldSchema } from '@formily/react';
 import React, { useEffect } from 'react';
+import { css, cx } from '@emotion/css';
 import { CollectionProvider } from '../../../collection-manager';
 import { useInsertSchema } from './hooks';
 import { useAssociationFieldContext } from './hooks';
@@ -11,21 +12,47 @@ export const InternalNester = () => {
   const fieldSchema = useFieldSchema();
   const insertNester = useInsertSchema('Nester');
   const { options: collectionField } = useAssociationFieldContext();
-
+  const showTitle = fieldSchema['x-decorator-props']?.showTitle ?? true;
   useEffect(() => {
     insertNester(schema.Nester);
   }, []);
   return (
     <CollectionProvider name={collectionField.target}>
       <FormLayout layout={'vertical'}>
-        <RecursionField
-          onlyRenderProperties
-          basePath={field.address}
-          schema={fieldSchema}
-          filterProperties={(s) => {
-            return s['x-component'] === 'AssociationField.Nester';
-          }}
-        />
+        <div
+          className={cx(
+            css`
+              & .ant-formily-item-layout-vertical {
+                margin-bottom: 10px;
+              }
+              .ant-card-body {
+                padding: 15px 20px;
+              }
+              .ant-divider-horizontal {
+                margin: 10px 0;
+              }
+            `,
+            {
+              [css`
+                .ant-card-body {
+                  padding: 0px 20px 20px 0px;
+                }
+                > .ant-card-bordered {
+                  border: none;
+                }
+              `]: showTitle === false,
+            },
+          )}
+        >
+          <RecursionField
+            onlyRenderProperties
+            basePath={field.address}
+            schema={fieldSchema}
+            filterProperties={(s) => {
+              return s['x-component'] === 'AssociationField.Nester';
+            }}
+          />
+        </div>
       </FormLayout>
     </CollectionProvider>
   );
diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
index 663b22fa3..a93cf9904 100644
--- a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
@@ -125,7 +125,7 @@ export const InternalPicker = observer((props: any) => {
   };
   return (
     <>
-      <Input.Group compact style={{ display: 'flex' }}>
+      <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
         <div style={{ width: '100%' }}>
           <Select
             style={{ width: '100%' }}
diff --git a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx
index a065b5936..1b782371b 100644
--- a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx
@@ -1,9 +1,10 @@
-import { CloseCircleOutlined } from '@ant-design/icons';
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
 import { ArrayField } from '@formily/core';
-import { spliceArrayState } from '@formily/core/lib/shared/internals';
+import { spliceArrayState } from '@formily/core/esm/shared/internals';
 import { RecursionField, observer, useFieldSchema } from '@formily/react';
 import { action } from '@formily/reactive';
-import { Button, Card, Divider } from 'antd';
+import { Card, Divider, Tooltip } from 'antd';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AssociationFieldContext } from './context';
@@ -29,7 +30,15 @@ const ToManyNester = observer((props) => {
   const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
   const { t } = useTranslation();
   return (
-    <Card bordered={true} style={{ position: 'relative' }}>
+    <Card
+      bordered={true}
+      style={{ position: 'relative' }}
+      className={css`
+        > .ant-card-body > .ant-divider:last-child {
+          display: none;
+        }
+      `}
+    >
       {(field.value || []).map((value, index) => {
         let allowed = allowDissociate;
         if (!allowDissociate) {
@@ -39,19 +48,43 @@ const ToManyNester = observer((props) => {
           <>
             {!field.readPretty && allowed && (
               <div style={{ textAlign: 'right' }}>
-                <CloseCircleOutlined
-                  style={{ zIndex: 1000, position: 'absolute', color: '#a8a3a3' }}
-                  onClick={() => {
-                    action(() => {
-                      spliceArrayState(field as any, {
-                        startIndex: index,
-                        deleteCount: 1,
-                      });
-                      field.value.splice(index, 1);
-                      return field.onInput(field.value);
-                    });
-                  }}
-                />
+                {[
+                  field.editable && allowMultiple && (
+                    <Tooltip key={'add'} title={t('Add new')}>
+                      <PlusOutlined
+                        style={{ zIndex: 1000, marginRight: '10px', color: '#a8a3a3' }}
+                        onClick={() => {
+                          action(() => {
+                            if (!Array.isArray(field.value)) {
+                              field.value = [];
+                            }
+                            spliceArrayState(field as any, {
+                              startIndex: index + 1,
+                              insertCount: 1,
+                            });
+                            field.value.splice(index + 1, 0, null);
+                            return field.onInput(field.value);
+                          });
+                        }}
+                      />
+                    </Tooltip>
+                  ),
+                  <Tooltip key={'remove'} title={t('Remove')}>
+                    <CloseOutlined
+                      style={{ zIndex: 1000, color: '#a8a3a3' }}
+                      onClick={() => {
+                        action(() => {
+                          spliceArrayState(field as any, {
+                            startIndex: index,
+                            deleteCount: 1,
+                          });
+                          field.value.splice(index, 1);
+                          return field.onInput(field.value);
+                        });
+                      }}
+                    />
+                  </Tooltip>,
+                ]}
               </div>
             )}
             <RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
@@ -59,7 +92,7 @@ const ToManyNester = observer((props) => {
           </>
         );
       })}
-      {field.editable && allowMultiple && (
+      {/* {field.editable && allowMultiple && (
         <Button
           type={'dashed'}
           block
@@ -71,7 +104,7 @@ const ToManyNester = observer((props) => {
         >
           {t('Add new')}
         </Button>
-      )}
+      )} */}
     </Card>
   );
 });