From 1e870cf5ef7770b3e71051b39983dbca7d496706 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Fri, 26 May 2023 17:01:34 +0800
Subject: [PATCH] fix(association-field): display sub-details by default

---
 .../AssociationFieldProvider.tsx              | 34 ++++++++++++++++++-
 .../antd/association-field/Editable.tsx       | 34 ++-----------------
 .../antd/form-item/FormItem.tsx               |  4 +--
 3 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx b/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx
index 7dd6806f56..89bf697c2f 100644
--- a/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx
@@ -1,6 +1,6 @@
 import { Field } from '@formily/core';
 import { observer, useField, useFieldSchema } from '@formily/react';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useCollectionManager } from '../../../collection-manager';
 import { AssociationFieldContext } from './context';
 
@@ -24,6 +24,38 @@ export const AssociationFieldProvider = observer((props) => {
     [fieldSchema['x-component-props']?.mode],
   );
 
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    if (!collectionField) {
+      setLoading(false);
+      return;
+    }
+    if (field.value !== null && field.value !== undefined) {
+      // Nester 子表单时，如果没数据初始化一个 [null] 的占位
+      if (currentMode === 'Nester' && Array.isArray(field.value)) {
+        if (field.value.length === 0 && ['belongsToMany', 'hasMany'].includes(collectionField.type)) {
+          field.value = [null];
+        }
+      }
+      setLoading(false);
+      return;
+    }
+    if (currentMode === 'Nester') {
+      if (['belongsTo', 'hasOne'].includes(collectionField.type)) {
+        field.value = {};
+      } else if (['belongsToMany', 'hasMany'].includes(collectionField.type)) {
+        field.value = [null];
+      }
+    }
+    setLoading(false);
+  }, [currentMode, collectionField, field.value]);
+
+  if (loading) {
+    return null;
+  }
+
   return collectionField ? (
     <AssociationFieldContext.Provider
       value={{ options: collectionField, field, allowMultiple, allowDissociate, currentMode }}
diff --git a/packages/core/client/src/schema-component/antd/association-field/Editable.tsx b/packages/core/client/src/schema-component/antd/association-field/Editable.tsx
index 64c453507d..3be6ca37e6 100644
--- a/packages/core/client/src/schema-component/antd/association-field/Editable.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/Editable.tsx
@@ -1,5 +1,5 @@
 import { observer, useField, useFieldSchema, useForm } from '@formily/react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { SchemaComponentOptions } from '../../';
 import { useAssociationCreateActionProps as useCAP } from '../../../block-provider/hooks';
 import { AssociationFieldProvider } from './AssociationFieldProvider';
@@ -17,37 +17,6 @@ const EditableAssociationField = observer((props: any) => {
   const form = useForm();
   const fieldSchema = useFieldSchema();
   const { options: collectionField, currentMode } = useAssociationFieldContext();
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setLoading(true);
-    if (!collectionField) {
-      setLoading(false);
-      return;
-    }
-    if (field.value !== null && field.value !== undefined) {
-      // Nester 子表单时，如果没数据初始化一个 [null] 的占位
-      if (currentMode === 'Nester' && Array.isArray(field.value)) {
-        if (field.value.length === 0 && ['belongsToMany', 'hasMany'].includes(collectionField.type)) {
-          field.value = [null];
-        }
-      }
-      setLoading(false);
-      return;
-    }
-    if (currentMode === 'Nester') {
-      if (['belongsTo', 'hasOne'].includes(collectionField.type)) {
-        field.value = {};
-      } else if (['belongsToMany', 'hasMany'].includes(collectionField.type)) {
-        field.value = [null];
-      }
-    }
-    setLoading(false);
-  }, [currentMode, collectionField, field.value]);
-
-  if (loading) {
-    return null;
-  }
 
   const useCreateActionProps = () => {
     const { onClick } = useCAP();
@@ -77,6 +46,7 @@ const EditableAssociationField = observer((props: any) => {
       },
     };
   };
+
   return (
     <SchemaComponentOptions scope={{ useCreateActionProps }} components={{ CreateRecordAction }}>
       {currentMode === 'Picker' && <InternalPicker {...props} />}
diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
index ea0c58d654..08b114dd64 100644
--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
@@ -175,8 +175,8 @@ FormItem.Designer = function Designer() {
 
   const fieldSchemaWithoutRequired = _.omit(fieldSchema, 'required');
 
-  const isSubFormMode = fieldSchema['x-component-props'].mode === 'Nester';
-  const isPickerMode = fieldSchema['x-component-props'].mode === 'Picker';
+  const isSubFormMode = fieldSchema['x-component-props']?.mode === 'Nester';
+  const isPickerMode = fieldSchema['x-component-props']?.mode === 'Picker';
   const showFieldMode = isAssociationField && fieldModeOptions && !isTableField;
   const showModeSelect = showFieldMode && isPickerMode;