refactor: pagination

migrate-from-v1.md

@@ -40,6 +40,16 @@
 #### Menu
 #### NavBar
 #### Pagination
+- modelValue 改为 value，受控值
+- 增加 defaultValue 非受控值
+- prevText 重命名为 prev，改为 ReactNode
+- nextText 重命名为 next，改为 ReactNode
+- forceEllipses 重命令为 ellipse
+- showPageSize 重命名为 itemSize
+- itemsPerpage 重命名为 pageSize
+- totalitems 重命名为 total
+- pageNodeRender 重命名为 itemRender
+- 移除 pageCount，通过 total 与 pageSize 实现
 #### SideNavBar
 #### Tabbar
 #### Tabs

src/packages/pagination/__tests__/__snapshots__/pagination.spec.tsx.snap

@@ -3,10 +3,10 @@
 exports[`should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="nut-pagination "
+    class="nut-pagination"
   >
     <div
-      class="nut-pagination__prev   disabled"
+      class="nut-pagination__prev disabled"
     >
       上一页
     </div>
@@ -19,28 +19,28 @@ exports[`should match snapshot 1`] = `
         1
       </div>
       <div
-        class="nut-pagination__item "
+        class="nut-pagination__item"
       >
         2
       </div>
       <div
-        class="nut-pagination__item "
+        class="nut-pagination__item"
       >
         3
       </div>
       <div
-        class="nut-pagination__item "
+        class="nut-pagination__item"
       >
         4
       </div>
       <div
-        class="nut-pagination__item "
+        class="nut-pagination__item"
       >
         5
       </div>
     </div>
     <div
-      class="nut-pagination__next  "
+      class="nut-pagination__next"
     >
       下一页
     </div>

src/packages/pagination/__tests__/pagination.spec.tsx

@@ -4,22 +4,24 @@ import '@testing-library/jest-dom'
 import { Pagination } from '../pagination'
 
 test('should match snapshot', () => {
-  const { asFragment } = render(<Pagination totalItems={25} itemsPerPage={5} />)
+  const { asFragment } = render(<Pagination total={25} pageSize={5} />)
   expect(asFragment()).toMatchSnapshot()
 })
 
 test('should render items', async () => {
-  const { container } = render(<Pagination totalItems={25} itemsPerPage={5} />)
+  const { container } = render(<Pagination total={25} pageSize={5} />)
   expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(5)
 })
 test('should render simple mode', async () => {
-  const { container } = render(<Pagination pageCount={12} mode="simple" />)
+  const { container } = render(
+    <Pagination total={12} pageSize={1} mode="simple" />
+  )
   expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(0)
   expect(container.querySelectorAll('.nut-pagination__simple')).toHaveLength(1)
 })
-test('should render forceEllipses and should emit change event after clicking forceEllipses option', async () => {
+test('should render ellipse and should emit change event after clicking ellipse option', async () => {
   const { container, getByText } = render(
-    <Pagination totalItems={125} showPageSize={3} forceEllipses />
+    <Pagination total={125} itemSize={3} ellipse />
   )
   expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(4)
   fireEvent.click(getByText('...'))
@@ -31,7 +33,7 @@ test('should render forceEllipses and should emit change event after clicking fo
 
 test('should emit change event after clicking visible option', async () => {
   const { container, getByText } = render(
-    <Pagination totalItems={25} itemsPerPage={5} defaultValue={1} />
+    <Pagination total={25} pageSize={5} defaultValue={1} />
   )
   const next = getByText('下一页')
   fireEvent.click(next)
@@ -49,8 +51,8 @@ test('should not emit change event after clicking disable option', async () => {
   }
   const { container, getByText } = render(
     <Pagination
-      totalItems={25}
-      itemsPerPage={5}
+      total={25}
+      pageSize={5}
       defaultValue={1}
       onChange={pageChange}
     />
@@ -63,17 +65,17 @@ test('should not emit change event after clicking disable option', async () => {
 })
 
 test('should render custom content correctly', () => {
-  const pageNodeRender = (page: any) => {
+  const itemRender = (page: any) => {
     return <div>{page.number === 3 ? 'hot' : page.text}</div>
   }
   const { container, getByText } = render(
     <Pagination
-      totalItems={25}
-      itemsPerPage={5}
+      total={25}
+      pageSize={5}
       defaultValue={1}
-      pageNodeRender={pageNodeRender}
-      prevText="pre"
-      nextText="next"
+      itemRender={itemRender}
+      prev="pre"
+      next="next"
     />
   )
   expect(getByText('pre')).toHaveTextContent('pre')
@@ -82,3 +84,37 @@ test('should render custom content correctly', () => {
     container.querySelectorAll('.nut-pagination__item')[2]
   ).toHaveTextContent('hot')
 })
+
+test('test controlled mode', () => {
+  let value = 2
+  const pageChange = (v: number) => {
+    value = v
+  }
+  const { container, getByText } = render(
+    <Pagination value={value} total={25} pageSize={5} onChange={pageChange} />
+  )
+  expect(container.querySelector('.active')).toHaveTextContent('2')
+  const page = getByText('4')
+  fireEvent.click(page)
+  expect(value).toEqual(4)
+})
+
+test('test uncontrolled mode', () => {
+  let value = 0
+  const pageChange = (v: number) => {
+    value = v
+  }
+  const { container, getByText } = render(
+    <Pagination
+      defaultValue={2}
+      total={25}
+      pageSize={5}
+      onChange={pageChange}
+    />
+  )
+  expect(container.querySelector('.active')).toHaveTextContent('2')
+  const page = getByText('4')
+  fireEvent.click(page)
+  expect(value).toEqual(4)
+  expect(container.querySelector('.active')).toHaveTextContent('4')
+})

src/packages/pagination/demo.taro.tsx

@@ -6,98 +6,117 @@ import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 
 interface T {
-  ce5c5446: string
-  c38a08ef: string
-  b840c88f: string
-  a74a1fd4: string
+  basic: string
+  simple: string
+  ellipse: string
+  custom: string
+  uncontrolled: string
 }
 
 const PaginationDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
-      ce5c5446: '基础用法',
-      c38a08ef: '简单模式',
-      b840c88f: '显示省略号',
-      a74a1fd4: '自定义按钮',
+      basic: '基础用法',
+      simple: '简单模式',
+      ellipse: '显示省略号',
+      custom: '自定义按钮',
+      uncontrolled: '非受控方式',
     },
     'zh-TW': {
-      ce5c5446: '基礎用法',
-      c38a08ef: '簡單模式',
-      b840c88f: '顯示省略號',
-      a74a1fd4: '自定義按鈕',
+      basic: '基礎用法',
+      simple: '簡單模式',
+      ellipse: '顯示省略號',
+      custom: '自定義按鈕',
+      uncontrolled: '非受控方式',
     },
     'en-US': {
-      ce5c5446: 'Basic usage',
-      c38a08ef: 'Simple mode',
-      b840c88f: 'Show ellipsis',
-      a74a1fd4: 'Custom button',
+      basic: 'Basic usage',
+      simple: 'Simple mode',
+      ellipse: 'Show ellipsis',
+      custom: 'Custom button',
+      uncontrolled: 'Uncontrolled mode',
     },
   })
   const [currentPage1, setCurrent1] = useState(1)
   const [currentPage2, setCurrent2] = useState(1)
   const [currentPage3, setCurrent3] = useState(1)
   const [currentPage4, setCurrent4] = useState(3)
-  const pageChange1 = (v: any) => {
+  const pageChange1 = (v: number) => {
     const c = v
     setCurrent1(c)
   }
-  const pageChange2 = (v: any) => {
+  const pageChange2 = (v: number) => {
     const c = v
     setCurrent2(c)
   }
-  const pageChange3 = (v: any) => {
+  const pageChange3 = (v: number) => {
     const c = v
     setCurrent3(c)
   }
-  const pageChange4 = (v: any) => {
+  const pageChange4 = (v: number) => {
     const c = v
     setCurrent4(c)
   }
-  const pageNodeRender = (item: any) => {
+  const itemRender = (item: any) => {
     return <div>{item.number === 3 ? 'hot' : item.text}</div>
   }
+  const pageChange5 = (v: number) => {
+    const c = v
+    setCurrent3(c)
+  }
   return (
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.ce5c5446}</h2>
+        <h2>{translated.basic}</h2>
         <Cell>
           <Pagination
-            modelValue={currentPage1}
-            totalItems="20"
-            itemsPerPage="5"
+            value={currentPage1}
+            total={20}
+            pageSize={5}
             onChange={pageChange1}
           />
         </Cell>
-        <h2>{translated.c38a08ef}</h2>
+        <h2>{translated.simple}</h2>
         <Cell>
           <Pagination
-            modelValue={currentPage2}
-            pageCount={12}
+            value={currentPage2}
+            total={12}
+            pageSize={1}
             mode="simple"
             onChange={pageChange2}
           />
         </Cell>
-        <h2>{translated.b840c88f}</h2>
+        <h2>{translated.ellipse}</h2>
         <Cell>
           <Pagination
-            modelValue={currentPage3}
-            totalItems="125"
-            showPageSize="3"
-            forceEllipses
+            value={currentPage3}
+            total={125}
+            itemSize={2}
+            ellipse
             onChange={pageChange3}
           />
         </Cell>
-        <h2>{translated.a74a1fd4}</h2>
+        <h2>{translated.custom}</h2>
         <Cell>
           <Pagination
-            modelValue={currentPage4}
-            totalItems="500"
-            showPageSize="5"
+            value={currentPage4}
+            total={500}
+            itemSize={5}
             onChange={pageChange4}
-            prevText={<Left />}
-            nextText={<Right />}
-            pageNodeRender={pageNodeRender}
+            prev={<Left />}
+            next={<Right />}
+            itemRender={itemRender}
+          />
+        </Cell>
+        <h2>{translated.uncontrolled}</h2>
+        <Cell>
+          <Pagination
+            defaultValue={15}
+            total={500}
+            pageSize={10}
+            itemSize={3}
+            onChange={pageChange5}
           />
         </Cell>
       </div>