feat: ArrayCollapse header support ReactNode & update extra position (#38)

* feat: arrayCollapse support ReactNode

* chore: update text

* feat: update extra position

---------

Co-authored-by: xuyongchao <xuyongchao@bytedance.com>

Author: over58

docs/components/ArrayCollapse.md

@@ -17,7 +17,7 @@ import {
 } from '@formily/antd-v5'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Button } from 'antd'
+import { Button, Typography } from 'antd'
 
 const SchemaField = createSchemaField({
   components: {
@@ -107,7 +107,12 @@ export default () => {
           <SchemaField.Void
             x-component="ArrayCollapse.CollapsePanel"
             x-component-props={{
-              header: 'String array',
+              header: (
+                <Typography.Text type="danger" style={{ marginLeft: 4 }}>
+                  String Array
+                </Typography.Text>
+              ),
+              extra: 'extra text',
             }}
           >
             <SchemaField.Void x-component="ArrayCollapse.Index" />

docs/components/ArrayCollapse.zh-CN.md

@@ -17,7 +17,7 @@ import {
 } from '@formily/antd-v5'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Button } from 'antd'
+import { Button, Typography } from 'antd'
 
 const SchemaField = createSchemaField({
   components: {
@@ -107,7 +107,12 @@ export default () => {
           <SchemaField.Void
             x-component="ArrayCollapse.CollapsePanel"
             x-component-props={{
-              header: '字符串数组',
+              header: (
+                <Typography.Text type="danger" style={{ marginLeft: 4 }}>
+                  字符串数组
+                </Typography.Text>
+              ),
+              extra: '额外信息',
             }}
           >
             <SchemaField.Void x-component="ArrayCollapse.Index" />

packages/components/src/array-collapse/index.tsx

@@ -141,9 +141,8 @@ const InternalArrayCollapse: ReactFC<IArrayCollapseProps> = observer(
               .get('componentProps')
             const props: CollapsePanelProps = items['x-component-props']
             const header = () => {
-              const header = `${
-                panelProps?.header || props.header || field.title
-              }`
+              const header = panelProps?.header || props.header || field.title
+
               const path = field.address.concat(index)
               const errors = field.form.queryFeedbacks({
                 type: 'error',
@@ -180,6 +179,7 @@ const InternalArrayCollapse: ReactFC<IArrayCollapseProps> = observer(
 
             const extra = (
               <ArrayBase.Item index={index} record={item}>
+                {panelProps?.extra}
                 <RecursionField
                   schema={items}
                   name={index}
@@ -189,7 +189,6 @@ const InternalArrayCollapse: ReactFC<IArrayCollapseProps> = observer(
                   }}
                   onlyRenderProperties
                 />
-                {panelProps?.extra}
               </ArrayBase.Item>
             )