fix(antd/next): fix array components lose reactive (#3266)

alibaba · Jul 11, 2022 · 9107e86 · 9107e86
1 parent 57510b4
commit 9107e86
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 14 deletions.
diff --git a/packages/antd/src/array-cards/index.tsx b/packages/antd/src/array-cards/index.tsx
@@ -106,7 +106,7 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         <ArrayBase.Item
           key={index}
           index={index}
-          record={() => dataSource[index]}
+          record={() => field.value?.[index]}
         >
           <Card
             {...props}

diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
@@ -140,7 +140,10 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 address: `${path}.**`,
               })
               return (
-                <ArrayBase.Item index={index} record={() => dataSource[index]}>
+                <ArrayBase.Item
+                  index={index}
+                  record={() => field.value?.[index]}
+                >
                   <RecursionField
                     schema={items}
                     name={index}

diff --git a/packages/antd/src/array-items/index.tsx b/packages/antd/src/array-items/index.tsx
@@ -99,7 +99,7 @@ export const ArrayItems: ComposedArrayItems = observer((props) => {
               <ArrayBase.Item
                 key={index}
                 index={index}
-                record={() => dataSource[index]}
+                record={() => field.value?.[index]}
               >
                 <SortableItem key={`item-${index}`} index={index}>
                   <div className={`${prefixCls}-item-inner`}>

diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -122,7 +122,7 @@ const useArrayTableSources = () => {
 }
 
 const useArrayTableColumns = (
-  dataSource: any[],
+  field: ArrayField,
   sources: ObservableColumnSource[]
 ): TableProps<any>['columns'] => {
   return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
@@ -133,9 +133,9 @@ const useArrayTableColumns = (
       key,
       dataIndex: name,
       render: (value: any, record: any) => {
-        const index = dataSource.indexOf(record)
+        const index = field?.value?.indexOf(record)
         const children = (
-          <ArrayBase.Item index={index} record={() => dataSource[index]}>
+          <ArrayBase.Item index={index} record={() => field?.value?.[index]}>
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
         )
@@ -295,7 +295,7 @@ export const ArrayTable: ComposedArrayTable = observer(
     const prefixCls = usePrefixCls('formily-array-table')
     const dataSource = Array.isArray(field.value) ? field.value.slice() : []
     const sources = useArrayTableSources()
-    const columns = useArrayTableColumns(dataSource, sources)
+    const columns = useArrayTableColumns(field, sources)
     const pagination = isBool(props.pagination) ? {} : props.pagination
     const addition = useAddition()
     const defaultRowKey = (record: any) => {

diff --git a/packages/next/src/array-cards/index.tsx b/packages/next/src/array-cards/index.tsx
@@ -159,7 +159,7 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         <ArrayBase.Item
           key={index}
           index={index}
-          record={() => dataSource[index]}
+          record={() => field.value?.[index]}
         >
           <Card
             contentHeight="auto"

diff --git a/packages/next/src/array-collapse/index.tsx b/packages/next/src/array-collapse/index.tsx
@@ -195,7 +195,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 <ArrayBase.Item
                   index={index}
                   key={index}
-                  record={() => dataSource[index]}
+                  record={() => field.value?.[index]}
                 >
                   {content}
                 </ArrayBase.Item>

diff --git a/packages/next/src/array-items/index.tsx b/packages/next/src/array-items/index.tsx
@@ -99,7 +99,7 @@ export const ArrayItems: ComposedArrayItems = observer((props) => {
               <ArrayBase.Item
                 key={index}
                 index={index}
-                record={() => dataSource[index]}
+                record={() => field.value?.[index]}
               >
                 <SortableItem key={`item-${index}`} index={index}>
                   <div className={`${prefixCls}-item-inner`}>

diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx
@@ -120,7 +120,7 @@ const useArrayTableSources = () => {
 }
 
 const useArrayTableColumns = (
-  dataSource: any[],
+  field: ArrayField,
   sources: ObservableColumnSource[]
 ): TableProps['columns'] => {
   return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
@@ -131,12 +131,12 @@ const useArrayTableColumns = (
       key,
       dataIndex: name,
       cell: (value: any, _: number, record: any) => {
-        const index = dataSource.indexOf(record)
+        const index = field.value?.indexOf(record)
         const children = (
           <ArrayBase.Item
             key={index}
             index={index}
-            record={() => dataSource[index]}
+            record={() => field.value?.[index]}
           >
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
@@ -299,7 +299,7 @@ export const ArrayTable: ComposedArrayTable = observer(
     const prefixCls = usePrefixCls('formily-array-table')
     const dataSource = Array.isArray(field.value) ? field.value.slice() : []
     const sources = useArrayTableSources()
-    const columns = useArrayTableColumns(dataSource, sources)
+    const columns = useArrayTableColumns(field, sources)
     const pagination = isBool(props.pagination) ? {} : props.pagination
     const addition = useAddition()