feat(antd/next): support useRecord for ArrayBase (#2298)

alibaba · Oct 14, 2021 · b72fa25 · b72fa25
1 parent c48212c
commit b72fa25
Show file tree

Hide file tree

Showing 26 changed files with 93 additions and 11 deletions.
diff --git a/packages/antd/docs/components/ArrayCards.md b/packages/antd/docs/components/ArrayCards.md
@@ -501,3 +501,7 @@ No attributes
 ### ArrayCards.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayCards.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/antd/docs/components/ArrayCards.zh-CN.md b/packages/antd/docs/components/ArrayCards.zh-CN.md
@@ -501,3 +501,7 @@ export default () => {
 ### ArrayCards.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayCards.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/antd/docs/components/ArrayCollapse.md b/packages/antd/docs/components/ArrayCollapse.md
@@ -625,3 +625,7 @@ No attributes
 ### ArrayCollapse.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayCollapse.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/antd/docs/components/ArrayCollapse.zh-CN.md b/packages/antd/docs/components/ArrayCollapse.zh-CN.md
@@ -625,3 +625,7 @@ export default () => {
 ### ArrayCollapse.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayCollapse.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/antd/docs/components/ArrayItems.md b/packages/antd/docs/components/ArrayItems.md
@@ -779,3 +779,7 @@ No attributes
 ### ArrayItems.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayItems.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/antd/docs/components/ArrayItems.zh-CN.md b/packages/antd/docs/components/ArrayItems.zh-CN.md
@@ -776,3 +776,7 @@ export default () => {
 ### ArrayItems.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayItems.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/antd/docs/components/ArrayTable.md b/packages/antd/docs/components/ArrayTable.md
@@ -733,3 +733,7 @@ No attributes
 ### ArrayTable.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayTable.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/antd/docs/components/ArrayTable.zh-CN.md b/packages/antd/docs/components/ArrayTable.zh-CN.md
@@ -733,3 +733,7 @@ export default () => {
 ### ArrayTable.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayTable.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/antd/src/array-base/index.tsx b/packages/antd/src/array-base/index.tsx
@@ -30,6 +30,7 @@ export interface IArrayBaseContext {
 
 export interface IArrayBaseItemProps {
   index: number
+  record: any
 }
 
 export type ArrayBaseMixins = {
@@ -41,6 +42,7 @@ export type ArrayBaseMixins = {
   Index?: React.FC
   useArray?: () => IArrayBaseContext
   useIndex?: () => number
+  useRecord?: () => any
 }
 
 export interface IArrayBaseProps {
@@ -70,6 +72,11 @@ const useIndex = (index?: number) => {
   return ctx ? ctx.index : index
 }
 
+const useRecord = (record?: number) => {
+  const ctx = useContext(ItemContext)
+  return ctx ? ctx.record : record
+}
+
 const getDefaultValue = (defaultValue: any, schema: Schema) => {
   if (isValid(defaultValue)) return clone(defaultValue)
   if (Array.isArray(schema?.items))
@@ -238,6 +245,7 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
 
 ArrayBase.useArray = useArray
 ArrayBase.useIndex = useIndex
+ArrayBase.useRecord = useRecord
 ArrayBase.mixin = (target: any) => {
   target.Index = ArrayBase.Index
   target.SortHandle = ArrayBase.SortHandle
@@ -247,6 +255,7 @@ ArrayBase.mixin = (target: any) => {
   target.MoveUp = ArrayBase.MoveUp
   target.useArray = ArrayBase.useArray
   target.useIndex = ArrayBase.useIndex
+  target.useRecord = ArrayBase.useRecord
   return target
 }
 

diff --git a/packages/antd/src/array-cards/index.tsx b/packages/antd/src/array-cards/index.tsx
@@ -97,7 +97,7 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         />
       )
       return (
-        <ArrayBase.Item key={index} index={index}>
+        <ArrayBase.Item key={index} index={index} record={item}>
           <Card
             {...props}
             onChange={() => {}}

diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
@@ -138,7 +138,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 address: `${path}.**`,
               })
               return (
-                <ArrayBase.Item index={index}>
+                <ArrayBase.Item index={index} record={item}>
                   <RecursionField
                     schema={items}
                     name={index}
@@ -164,7 +164,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
             }
 
             const extra = (
-              <ArrayBase.Item index={index}>
+              <ArrayBase.Item index={index} record={item}>
                 <RecursionField
                   schema={items}
                   name={index}
@@ -198,7 +198,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 header={header()}
                 extra={extra}
               >
-                <ArrayBase.Item index={index} key={index}>
+                <ArrayBase.Item index={index} key={index} record={item}>
                   {content}
                 </ArrayBase.Item>
               </Collapse.Panel>

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

diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -121,7 +121,7 @@ const useArrayTableColumns = (
       render: (value: any, record: any) => {
         const index = dataSource.indexOf(record)
         const children = (
-          <ArrayBase.Item index={index}>
+          <ArrayBase.Item index={index} record={record}>
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
         )

diff --git a/packages/next/docs/components/ArrayCards.md b/packages/next/docs/components/ArrayCards.md
@@ -501,3 +501,7 @@ No attributes
 ### ArrayCards.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayCards.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/next/docs/components/ArrayCards.zh-CN.md b/packages/next/docs/components/ArrayCards.zh-CN.md
@@ -501,3 +501,7 @@ export default () => {
 ### ArrayCards.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayCards.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/next/docs/components/ArrayCollapse.md b/packages/next/docs/components/ArrayCollapse.md
@@ -631,3 +631,7 @@ No attributes
 ### ArrayCollapse.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayCollapse.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/next/docs/components/ArrayCollapse.zh-CN.md b/packages/next/docs/components/ArrayCollapse.zh-CN.md
@@ -631,3 +631,7 @@ export default () => {
 ### ArrayCollapse.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayCollapse.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/next/docs/components/ArrayItems.md b/packages/next/docs/components/ArrayItems.md
@@ -779,3 +779,7 @@ No attributes
 ### ArrayItems.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayItems.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/next/docs/components/ArrayItems.zh-CN.md b/packages/next/docs/components/ArrayItems.zh-CN.md
@@ -776,3 +776,7 @@ export default () => {
 ### ArrayItems.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayItems.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/next/docs/components/ArrayTable.md b/packages/next/docs/components/ArrayTable.md
@@ -748,3 +748,7 @@ No attributes
 ### ArrayTable.useIndex
 
 > Read the React Hook of the current rendering row index
+
+### ArrayTable.useRecord
+
+> Read the React Hook of the current rendering row
diff --git a/packages/next/docs/components/ArrayTable.zh-CN.md b/packages/next/docs/components/ArrayTable.zh-CN.md
@@ -746,3 +746,7 @@ export default () => {
 ### ArrayTable.useIndex
 
 > 读取当前渲染行索引的 React Hook
+
+### ArrayTable.useRecord
+
+> 读取当前渲染记录的 React Hook
diff --git a/packages/next/src/array-base/index.tsx b/packages/next/src/array-base/index.tsx
@@ -30,6 +30,7 @@ export interface IArrayBaseContext {
 
 export interface IArrayBaseItemProps {
   index: number
+  record: any
 }
 
 export type ArrayBaseMixins = {
@@ -41,6 +42,7 @@ export type ArrayBaseMixins = {
   Index?: React.FC
   useArray?: () => IArrayBaseContext
   useIndex?: () => number
+  useRecord?: () => any
 }
 
 export interface IArrayBaseProps {
@@ -70,6 +72,11 @@ const useIndex = (index?: number) => {
   return ctx ? ctx.index : index
 }
 
+const useRecord = (record?: number) => {
+  const ctx = useContext(ItemContext)
+  return ctx ? ctx.record : record
+}
+
 const getDefaultValue = (defaultValue: any, schema: Schema) => {
   if (isValid(defaultValue)) return clone(defaultValue)
   if (Array.isArray(schema?.items))
@@ -238,6 +245,7 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
 
 ArrayBase.useArray = useArray
 ArrayBase.useIndex = useIndex
+ArrayBase.useRecord = useRecord
 ArrayBase.mixin = (target: any) => {
   target.Index = ArrayBase.Index
   target.SortHandle = ArrayBase.SortHandle
@@ -247,6 +255,7 @@ ArrayBase.mixin = (target: any) => {
   target.MoveUp = ArrayBase.MoveUp
   target.useArray = ArrayBase.useArray
   target.useIndex = ArrayBase.useIndex
+  target.useRecord = ArrayBase.useRecord
   return target
 }
 

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

diff --git a/packages/next/src/array-collapse/index.tsx b/packages/next/src/array-collapse/index.tsx
@@ -132,7 +132,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 address: `${path}.**`,
               })
               return (
-                <ArrayBase.Item index={index}>
+                <ArrayBase.Item index={index} record={item}>
                   <div
                     className={cls(`${prefixCls}-item-title`, props.className)}
                   >
@@ -188,7 +188,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
                 key={index}
                 title={title()}
               >
-                <ArrayBase.Item index={index} key={index}>
+                <ArrayBase.Item index={index} key={index} record={item}>
                   {content}
                 </ArrayBase.Item>
               </Collapse.Panel>

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

diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx
@@ -120,7 +120,7 @@ const useArrayTableColumns = (
       cell: (value: any, _: number, record: any) => {
         const index = dataSource.indexOf(record)
         const children = (
-          <ArrayBase.Item key={index} index={index}>
+          <ArrayBase.Item key={index} index={index} record={record}>
             <RecursionField schema={schema} name={index} onlyRenderProperties />
           </ArrayBase.Item>
         )