fix(next): add onPageSizeChange (#777)

alibaba · Apr 4, 2020 · b2df2d4 · b2df2d4
1 parent 0c7272d
commit b2df2d4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git a/docs/zh-cn/schema-develop/quick-start.md b/docs/zh-cn/schema-develop/quick-start.md
@@ -156,7 +156,7 @@ const service = ({ values, pagination, sorter = {}, filters = {} }) => {
   return fetch({
     url: 'https://randomuser.me/api',
     data: {
-      results: 10,
+      results: pagination.pageSize,
       sortField: sorter.field,
       sortOrder: sorter.order,
       page: pagination.current,

diff --git a/packages/devtools/src/app/components/LeftPanel.tsx b/packages/devtools/src/app/components/LeftPanel.tsx
@@ -33,4 +33,5 @@ export const LeftPanel = styled(({ className, dataSource, onSelect }) => {
   )
 })`
   width: 50%;
+  min-width: 50%;
 `
diff --git a/packages/devtools/src/app/components/Tabs.tsx b/packages/devtools/src/app/components/Tabs.tsx
@@ -38,6 +38,7 @@ export const Tabs = styled(({ className, dataSource, current, onChange }) => {
     transition: 0.15s all ease-in-out;
     border-right: 1px solid #3d424a;
     padding: 0 10px;
+    font-size: 12px;
     &:hover {
       background: #1d1f25;
     }

diff --git a/packages/next/README.zh-cn.md b/packages/next/README.zh-cn.md
@@ -687,13 +687,13 @@ import {
 } from '@formily/next'
 import { Input } from '@formily/next-components'
 import { fetch } from 'mfetch'
-import { Table } from '@alifd/next'
+import { Table, Pagination } from '@alifd/next'
 
 const service = ({ values, pagination, sorter = {}, filters = {} }) => {
   return fetch({
     url: 'https://randomuser.me/api',
     data: {
-      results: 10,
+      results: pagination.pageSize,
       sortField: sorter.field,
       sortOrder: sorter.order,
       page: pagination.current,
@@ -712,7 +712,7 @@ const service = ({ values, pagination, sorter = {}, filters = {} }) => {
 }
 
 const App = () => {
-  const { form, table } = useFormTableQuery(service)
+  const { form, table, pagination } = useFormTableQuery(service)
   return (
     <>
       <SchemaForm
@@ -746,6 +746,11 @@ const App = () => {
         />
         <Table.Column title="email" dataIndex="email" />
       </Table>
+      <Pagination
+        {...pagination}
+        style={{ marginTop: 10 }}
+        pageSizeSelector="filter"
+      />
     </>
   )
 }

diff --git a/packages/next/src/hooks/useFormTableQuery.ts b/packages/next/src/hooks/useFormTableQuery.ts
@@ -77,6 +77,13 @@ export const useFormTableQuery = (
       current: response.current || 1,
       pageSize: response.pageSize || 20,
       total: response.total || 0,
+      onPageSizeChange(pageSize: number) {
+        setPagination({
+          ...pagination,
+          pageSize
+        })
+        trigger()
+      },
       onChange(current: number) {
         setPagination({
           ...pagination,
-Original file line number
+Diff line change
@@ Expand Up @@
       )
     })`
       width: 50%;
+      min-width: 50%;
     `