feat(antd): support for hidden pagination of component array table (#…

…3875) * feat(antd): support for hidden pagination of component ArrayTable * style(antd): format code
alibaba · Jul 4, 2023 · 1e62b24 · 1e62b24
1 parent 0ac09f9
commit 1e62b24
Showing 1 changed file with 27 additions and 6 deletions.
diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -38,6 +38,7 @@ interface ObservableColumnSource {
 }
 interface IArrayTablePaginationProps extends PaginationProps {
   dataSource?: any[]
+  showPagination?: boolean
   children?: (
     dataSource: any[],
     pagination: React.ReactNode,
@@ -61,6 +62,7 @@ type ComposedArrayTable = React.FC<
 interface PaginationAction {
   totalPage?: number
   pageSize?: number
+  showPagination?: boolean
   changePage?: (page: number) => void
 }
 
@@ -229,6 +231,7 @@ const usePagination = () => {
 const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
   const [current, setCurrent] = useState(1)
   const prefixCls = usePrefixCls('formily-array-table')
+  const showPagination = props.showPagination ?? true
   const pageSize = props.pageSize || 10
   const size = props.size || 'default'
   const dataSource = props.dataSource || []
@@ -254,7 +257,7 @@ const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
   }, [totalPage, current])
 
   const renderPagination = () => {
-    if (totalPage <= 1) return
+    if (totalPage <= 1 || !showPagination) return
     return (
       <div className={`${prefixCls}-pagination`}>
         <Space>
@@ -282,10 +285,17 @@ const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
   return (
     <Fragment>
       <PaginationContext.Provider
-        value={{ totalPage, pageSize, changePage: handleChange }}
+        value={{
+          totalPage,
+          pageSize,
+          changePage: handleChange,
+          showPagination,
+        }}
       >
         {props.children?.(
-          dataSource?.slice(startIndex, endIndex + 1),
+          showPagination
+            ? dataSource?.slice(startIndex, endIndex + 1)
+            : dataSource,
           renderPagination(),
           { startIndex }
         )}
@@ -314,7 +324,9 @@ export const ArrayTable: ComposedArrayTable = observer((props) => {
   const dataSource = Array.isArray(field.value) ? field.value.slice() : []
   const sources = useArrayTableSources()
   const columns = useArrayTableColumns(dataSource, field, sources)
-  const pagination = isBool(props.pagination) ? {} : props.pagination
+  const pagination = isBool(props.pagination)
+    ? { showPagination: props.pagination }
+    : props.pagination
   const addition = useAddition()
   const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props
   const defaultRowKey = (record: any) => {
@@ -411,14 +423,23 @@ ArrayBase.mixin(ArrayTable)
 
 const Addition: ArrayBaseMixins['Addition'] = (props) => {
   const array = ArrayBase.useArray()
-  const { totalPage = 0, pageSize = 10, changePage } = usePagination()
+  const {
+    totalPage = 0,
+    pageSize = 10,
+    changePage,
+    showPagination,
+  } = usePagination()
   return (
     <ArrayBase.Addition
       {...props}
       onClick={(e) => {
         // 如果添加数据后将超过当前页，则自动切换到下一页
         const total = array?.field?.value.length || 0
-        if (total === totalPage * pageSize + 1 && isFn(changePage)) {
+        if (
+          showPagination &&
+          total === totalPage * pageSize + 1 &&
+          isFn(changePage)
+        ) {
           changePage(totalPage + 1)
         }
         props.onClick?.(e)