feat(element): support useRecord for ArrayBase (#2313)

alibaba · Oct 15, 2021 · 7459466 · 7459466
1 parent e2fe673
commit 7459466
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 6 deletions.
diff --git a/packages/element/docs/guide/array-cards.md b/packages/element/docs/guide/array-cards.md
@@ -89,3 +89,7 @@
 ### ArrayCards.useIndex
 
 > 读取当前渲染行索引的 Hook
+
+### ArrayCards.useRecord
+
+> 读取当前渲染记录的 Hook
diff --git a/packages/element/docs/guide/array-collapse.md b/packages/element/docs/guide/array-collapse.md
@@ -91,3 +91,7 @@
 ### ArrayCollapse.useIndex
 
 > 读取当前渲染行索引的 Hook
+
+### ArrayCollapse.useRecord
+
+> 读取当前渲染记录的 Hook
diff --git a/packages/element/docs/guide/array-items.md b/packages/element/docs/guide/array-items.md
@@ -91,3 +91,7 @@
 ### ArrayItems.useIndex
 
 > 读取当前渲染行索引的 Hook
+
+### ArrayItems.useRecord
+
+> 读取当前渲染记录的 Hook
diff --git a/packages/element/docs/guide/array-table.md b/packages/element/docs/guide/array-table.md
@@ -102,3 +102,7 @@
 ### ArrayTable.useIndex
 
 > 读取当前渲染行索引的 Hook
+
+### ArrayTable.useRecord
+
+> 读取当前渲染记录的 Hook
diff --git a/packages/element/src/array-base/index.ts b/packages/element/src/array-base/index.ts
@@ -35,6 +35,7 @@ export type ArrayBaseMixins = {
   Index?: typeof ArrayBaseIndex
   useArray?: typeof useArray
   useIndex?: typeof useIndex
+  useRecord?: typeof useRecord
 }
 
 export interface IArrayBaseProps {
@@ -44,6 +45,7 @@ export interface IArrayBaseProps {
 
 export interface IArrayBaseItemProps {
   index: number
+  record: any
 }
 
 export interface IArrayBaseContext {
@@ -58,17 +60,22 @@ export interface IArrayBaseContext {
 
 const ArrayBaseSymbol: InjectionKey<IArrayBaseContext> =
   Symbol('ArrayBaseContext')
-const ItemSymbol: InjectionKey<Ref<number>> = Symbol('ItemContext')
+const ItemSymbol: InjectionKey<IArrayBaseItemProps> = Symbol('ItemContext')
 
 const useArray = () => {
   return inject(ArrayBaseSymbol, null)
 }
 
 const useIndex = (index?: number) => {
-  const indexRef = inject(ItemSymbol)
+  const { index: indexRef } = toRefs(inject(ItemSymbol))
   return indexRef ?? ref(index)
 }
 
+const useRecord = (record?: number) => {
+  const { record: recordRef } = toRefs(inject(ItemSymbol))
+  return recordRef ?? ref(record)
+}
+
 const isObjectValue = (schema: Schema) => {
   if (Array.isArray(schema?.items)) return isObjectValue(schema.items[0])
 
@@ -155,10 +162,9 @@ const ArrayBaseInner = defineComponent<IArrayBaseProps>({
 
 const ArrayBaseItem = defineComponent({
   name: 'ArrayBaseItem',
-  props: ['index'],
+  props: ['index', 'record'],
   setup(props: IArrayBaseItemProps, { slots }) {
-    const { index } = toRefs(props)
-    provide(ItemSymbol, index)
+    provide(ItemSymbol, props)
     return () => {
       return h(Fragment, {}, slots)
     }
@@ -422,4 +428,5 @@ export const ArrayBase = composeExport(ArrayBaseInner, {
   useArray: useArray,
   useIndex: useIndex,
   useKey: useKey,
+  useRecord: useRecord,
 })
diff --git a/packages/element/src/array-cards/index.ts b/packages/element/src/array-cards/index.ts
@@ -129,6 +129,7 @@ const ArrayCardsInner = observer(
                 key: getKey(item, index),
                 props: {
                   index,
+                  record: item,
                 },
               },
               {
@@ -241,6 +242,7 @@ export const ArrayCards = composeExport(ArrayCardsInner, {
   MoveUp: ArrayBase.MoveUp,
   useArray: ArrayBase.useArray,
   useIndex: ArrayBase.useIndex,
+  useRecord: ArrayBase.useRecord,
 })
 
 export default ArrayCards
diff --git a/packages/element/src/array-collapse/index.ts b/packages/element/src/array-collapse/index.ts
@@ -143,6 +143,7 @@ export const ArrayCollapseInner = observer(
               {
                 props: {
                   index,
+                  record: item,
                 },
               },
               {
@@ -182,6 +183,7 @@ export const ArrayCollapseInner = observer(
               {
                 props: {
                   index,
+                  record: item,
                 },
               },
               {
@@ -237,6 +239,7 @@ export const ArrayCollapseInner = observer(
                     {
                       props: {
                         index,
+                        record: item,
                       },
                     },
                     {
@@ -379,6 +382,7 @@ export const ArrayCollapse = composeExport(ArrayCollapseInner, {
   MoveUp: ArrayBase.MoveUp,
   useArray: ArrayBase.useArray,
   useIndex: ArrayBase.useIndex,
+  useRecord: ArrayBase.useRecord,
 })
 
 export default ArrayCollapse
diff --git a/packages/element/src/array-items/index.ts b/packages/element/src/array-items/index.ts
@@ -43,6 +43,7 @@ const ArrayItemsInner = observer(
                 key,
                 props: {
                   index,
+                  record: item,
                 },
               },
               {
@@ -175,6 +176,7 @@ export const ArrayItems = composeExport(ArrayItemsInner, {
   MoveUp: ArrayBase.MoveUp,
   useArray: ArrayBase.useArray,
   useIndex: ArrayBase.useIndex,
+  useRecord: ArrayBase.useRecord,
 })
 
 export default ArrayItems
diff --git a/packages/element/src/array-table/index.ts b/packages/element/src/array-table/index.ts
@@ -129,6 +129,7 @@ const getArrayTableSources = (
   }
 
   const parseArrayTable = (schema: Schema['items']) => {
+    if (!schema) return []
     const sources: ObservableColumnSource[] = []
     const items = isArr(schema) ? schema : ([schema] as Schema[])
     return items.reduce((columns, schema) => {
@@ -172,7 +173,7 @@ const getArrayTableColumns = (
 
               const children = h(
                 ArrayBase.Item,
-                { props: { index }, key: `${key}${index}` },
+                { props: { index, record: props.row }, key: `${key}${index}` },
                 {
                   default: () =>
                     h(
@@ -561,6 +562,7 @@ export const ArrayTable = composeExport(ArrayTableInner, {
   MoveUp: ArrayBase.MoveUp,
   useArray: ArrayBase.useArray,
   useIndex: ArrayBase.useIndex,
+  useRecord: ArrayBase.useRecord,
 })
 
 export default ArrayTable