fix: fix ArrayTable skipping validation of new page (#3117)

maurice · web-flow · commit 99f669a8ecf4 · 2022-05-14T10:59:19.000+08:00
diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -1,4 +1,11 @@
-import React, { Fragment, useState, useRef, useEffect } from 'react'
+import React, {
+  Fragment,
+  useState,
+  useRef,
+  useEffect,
+  createContext,
+  useContext,
+} from 'react'
 import { Table, Pagination, Space, Select, Badge } from 'antd'
 import { PaginationProps } from 'antd/lib/pagination'
 import { TableProps, ColumnProps } from 'antd/lib/table'
@@ -13,7 +20,7 @@ import {
   RecursionField,
   ReactFC,
 } from '@formily/react'
-import { isArr, isBool } from '@formily/shared'
+import { isArr, isBool, isFn } from '@formily/shared'
 import { Schema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
 import { ArrayBase, ArrayBaseMixins } from '../array-base'
@@ -42,6 +49,12 @@ type ComposedArrayTable = React.FC<React.PropsWithChildren<TableProps<any>>> &
     Column?: React.FC<React.PropsWithChildren<ColumnProps<any>>>
   }
 
+interface PaginationAction {
+  totalPage?: number
+  pageSize?: number
+  changePage?: (page: number) => void
+}
+
 const SortableRow = SortableElement((props: any) => <tr {...props} />)
 const SortableBody = SortableContainer((props: any) => <tbody {...props} />)
 
@@ -198,6 +211,11 @@ const StatusSelect: ReactFC<IStatusSelectProps> = observer(
   }
 )
 
+const PaginationContext = createContext<PaginationAction>({})
+const usePagination = () => {
+  return useContext(PaginationContext)
+}
+
 const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
   const [current, setCurrent] = useState(1)
   const prefixCls = usePrefixCls('formily-array-table')
@@ -253,10 +271,14 @@ const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
 
   return (
     <Fragment>
-      {props.children?.(
-        dataSource?.slice(startIndex, endIndex + 1),
-        renderPagination()
-      )}
+      <PaginationContext.Provider
+        value={{ totalPage, pageSize, changePage: handleChange }}
+      >
+        {props.children?.(
+          dataSource?.slice(startIndex, endIndex + 1),
+          renderPagination()
+        )}
+      </PaginationContext.Provider>
     </Fragment>
   )
 }
@@ -357,4 +379,23 @@ ArrayTable.Column = () => {
 
 ArrayBase.mixin(ArrayTable)
 
+const Addition: ArrayBaseMixins['Addition'] = (props) => {
+  const array = ArrayBase.useArray()
+  const { totalPage = 0, pageSize = 10, changePage } = usePagination()
+  return (
+    <ArrayBase.Addition
+      {...props}
+      onClick={(e) => {
+        // 如果添加数据后将超过当前页，则自动切换到下一页
+        const total = array?.field?.value.length || 0
+        if (total === totalPage * pageSize + 1 && isFn(changePage)) {
+          changePage(totalPage + 1)
+        }
+        props.onClick?.(e)
+      }}
+    />
+  )
+}
+ArrayTable.Addition = Addition
+
 export default ArrayTable
diff --git a/packages/element/src/array-table/index.ts b/packages/element/src/array-table/index.ts
@@ -1,4 +1,11 @@
-import { computed, defineComponent, ref, Ref } from '@vue/composition-api'
+import {
+  computed,
+  defineComponent,
+  ref,
+  Ref,
+  provide,
+  inject,
+} from '@vue/composition-api'
 import {
   GeneralField,
   IVoidFieldFactoryProps,
@@ -13,7 +20,7 @@ import {
   Fragment,
 } from '@formily/vue'
 import { observer } from '@formily/reactive-vue'
-import { isArr, isBool } from '@formily/shared'
+import { isArr, isBool, isFn } from '@formily/shared'
 import { ArrayBase } from '../array-base'
 import { stylePrefix } from '../__builtins__/configs'
 import { composeExport } from '../__builtins__/shared'
@@ -65,6 +72,14 @@ type ColumnProps = ElColumnProps & {
   }) => VNode
 }
 
+interface PaginationAction {
+  totalPage?: number
+  pageSize?: number
+  changePage?: (page: number) => void
+}
+
+const PaginationSymbol = Symbol('pagination')
+
 const isColumnComponent = (schema: Schema) => {
   return schema['x-component']?.indexOf('Column') > -1
 }
@@ -320,6 +335,10 @@ const StatusSelect = observer(
   }
 )
 
+const usePagination = () => {
+  return inject<Ref<PaginationAction>>(PaginationSymbol, ref({}))
+}
+
 const ArrayTablePagination = defineComponent<IArrayTablePaginationProps>({
   inheritAttrs: false,
   props: ['pageSize', 'dataSource'],
@@ -396,6 +415,15 @@ const ArrayTablePagination = defineComponent<IArrayTablePaginationProps>({
       )
     }
 
+    const paginationContext = computed<PaginationAction>(() => {
+      return {
+        totalPage: totalPage.value,
+        pageSize: pageSize.value,
+        changePage: (page: number) => (current.value = page),
+      }
+    })
+    provide(PaginationSymbol, paginationContext)
+
     return () => {
       return h(
         Fragment,
@@ -556,11 +584,41 @@ const ArrayTableColumn: Component = {
   },
 }
 
+const ArrayAddition = defineComponent({
+  name: 'ArrayAddition',
+  setup(props, { attrs, listeners, slots }) {
+    const array = ArrayBase.useArray()
+    const paginationRef = usePagination()
+
+    const onClick = listeners['click']
+    listeners['click'] = (e) => {
+      const { totalPage = 0, pageSize = 10, changePage } = paginationRef.value
+      // 如果添加数据后超过当前页，则自动切换到下一页
+      const total = array?.field?.value?.value.length || 0
+      if (total === (totalPage - 1) * pageSize + 1 && isFn(changePage)) {
+        changePage(totalPage)
+      }
+      if (onClick) onClick(e)
+    }
+    return () => {
+      return h(
+        ArrayBase.Addition,
+        {
+          props,
+          attrs,
+          on: listeners,
+        },
+        slots
+      )
+    }
+  },
+})
+
 export const ArrayTable = composeExport(ArrayTableInner, {
   Column: ArrayTableColumn,
   Index: ArrayBase.Index,
   SortHandle: ArrayBase.SortHandle,
-  Addition: ArrayBase.Addition,
+  Addition: ArrayAddition,
   Remove: ArrayBase.Remove,
   MoveDown: ArrayBase.MoveDown,
   MoveUp: ArrayBase.MoveUp,
diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx
@@ -1,4 +1,11 @@
-import React, { Fragment, useState, useRef, useEffect } from 'react'
+import React, {
+  Fragment,
+  useState,
+  useRef,
+  useEffect,
+  createContext,
+  useContext,
+} from 'react'
 import { Table, Pagination, Select, Badge } from '@alifd/next'
 import { PaginationProps } from '@alifd/next/lib/pagination'
 import { TableProps, ColumnProps } from '@alifd/next/lib/table'
@@ -12,7 +19,7 @@ import {
   RecursionField,
   ReactFC,
 } from '@formily/react'
-import { isArr, isBool } from '@formily/shared'
+import { isArr, isBool, isFn } from '@formily/shared'
 import { Schema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
 import { ArrayBase, ArrayBaseMixins } from '../array-base'
@@ -46,6 +53,12 @@ type ComposedArrayTable = ReactFC<ExtendTableProps> &
     Column?: ReactFC<ColumnProps>
   }
 
+interface PaginationAction {
+  totalPage?: number
+  pageSize?: number
+  changePage?: (page: number) => void
+}
+
 const isColumnComponent = (schema: Schema) => {
   return schema['x-component']?.indexOf('Column') > -1
 }
@@ -192,6 +205,11 @@ const StatusSelect: ReactFC<IStatusSelectProps> = observer(
   }
 )
 
+const PaginationContext = createContext<PaginationAction>({})
+const usePagination = () => {
+  return useContext(PaginationContext)
+}
+
 const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = ({
   children,
   dataSource,
@@ -249,10 +267,14 @@ const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = ({
 
   return (
     <Fragment>
-      {children?.(
-        dataSource?.slice(startIndex, endIndex + 1),
-        renderPagination()
-      )}
+      <PaginationContext.Provider
+        value={{ totalPage, pageSize, changePage: handleChange }}
+      >
+        {children?.(
+          dataSource?.slice(startIndex, endIndex + 1),
+          renderPagination()
+        )}
+      </PaginationContext.Provider>
     </Fragment>
   )
 }
@@ -316,4 +338,23 @@ ArrayTable.Column = () => {
 
 ArrayBase.mixin(ArrayTable)
 
+const Addition: ArrayBaseMixins['Addition'] = (props) => {
+  const array = ArrayBase.useArray()
+  const { totalPage = 0, pageSize = 10, changePage } = usePagination()
+  return (
+    <ArrayBase.Addition
+      {...props}
+      onClick={(e) => {
+        // 如果添加数据后将超过当前页，则自动切换到下一页
+        const total = array?.field?.value.length || 0
+        if (total === totalPage * pageSize + 1 && isFn(changePage)) {
+          changePage(totalPage + 1)
+        }
+        props.onClick?.(e)
+      }}
+    />
+  )
+}
+ArrayTable.Addition = Addition
+
 export default ArrayTable
