feat: pagination (#191) (#225)

Co-authored-by: kongjing@dian.so <apple@AppledeMacBook-Pro-2.local>

packages/vantui-demo/src/app.config.js

@@ -56,6 +56,7 @@ export default {
     'pages/power-scroll-view/index',
     'pages/number-keyboard/index',
     'pages/table/index',
+    'pages/pagination/index',
   ],
   window: {
     navigationBarBackgroundColor: '#f8f8f8',

packages/vantui-demo/src/config.js

@@ -211,6 +211,10 @@ export default [
     groupName: '导航组件',
     icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
     list: [
+      {
+        path: '/pagination',
+        title: 'Pagination 分页',
+      },
       {
         path: '/grid',
         title: 'Grid 宫格',

packages/vantui-demo/src/pages/pagination/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: 'Pagination 分页',
+  enableShareAppMessage: true,
+}

packages/vantui-demo/src/pages/pagination/index.js

@@ -0,0 +1,92 @@
+import { Component } from 'react'
+import { Pagination, Icon } from '@antmjs/vantui'
+import DemoPage from '../../components/demo-page/index'
+
+import DemoBlock from '../../components/demo-block/index'
+import './index.scss'
+
+export default class Index extends Component {
+  constructor() {
+    super()
+  }
+
+  state = {
+    curPage1: 1,
+    curPage2: 1,
+    curPage3: 1,
+    curPage4: 1,
+  }
+
+  pChange1 = (curPage1) => {
+    this.setState({
+      curPage1,
+    })
+  }
+
+  pChange2 = (curPage2) => {
+    this.setState({
+      curPage2,
+    })
+  }
+
+  pChange3 = (curPage3) => {
+    this.setState({
+      curPage3,
+    })
+  }
+
+  pChange4 = (curPage4) => {
+    this.setState({
+      curPage4,
+    })
+  }
+
+  render() {
+    const { curPage1, curPage2, curPage3, curPage4 } = this.state
+    return (
+      <DemoPage title="Pagination 分页">
+        <>
+          <DemoBlock title="基础用法" padding>
+            <Pagination
+              modelValue={curPage1}
+              totalItems="25"
+              itemsPerPage="5"
+              onChange={this.pChange1}
+            />
+          </DemoBlock>
+          <DemoBlock title="简单模式" padding>
+            <Pagination
+              modelValue={curPage2}
+              pageCount={12}
+              mode="simple"
+              onChange={this.pChange2}
+            />
+          </DemoBlock>
+          <DemoBlock title="显示省略号" padding>
+            <Pagination
+              modelValue={curPage3}
+              pageCount={12}
+              totalItems="125"
+              showPageSize={4}
+              forceEllipses
+              onChange={this.pChange3}
+            />
+          </DemoBlock>
+          <DemoBlock title="自定义按钮" padding>
+            <Pagination
+              modelValue={curPage4}
+              totalItems="500"
+              showPageSize="5"
+              onChange={this.pChange4}
+              pageNodeRender={(page) => {
+                return <div>{page.number == 3 ? 'hot' : page.text}</div>
+              }}
+              prevText={<Icon name="arrow-left" />}
+              nextText={<Icon name="arrow" />}
+            />
+          </DemoBlock>
+        </>
+      </DemoPage>
+    )
+  }
+}

packages/vantui-demo/src/pages/pagination/index.scss

@@ -0,0 +1,12 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+}

packages/vantui-doc/src/pagination/README.md

@@ -0,0 +1,141 @@
+#  Pagination 分页
+
+### 介绍
+
+当数据量较多时，采用分页的形式分隔长列表。
+
+### 安装
+
+``` javascript
+import { Pagination } from '@antmjs/vantui';
+```    
+
+### 基础用法
+
+通过modelValue来绑定当前页码时，组件为受控状态，分页显示取决于传入的modelValue，一般搭配onChange使用。
+不需要受控时，可通过defaultCurrentPage指定当前页码
+
+``` jsx
+import React, { useState } from 'react'
+import { Pagination } from '@antmjs/vantui';
+
+const App = () => {
+  const [currentPage1, setCurrentPage1] = useState(1)
+  const pageChange1 = (v: any) => {
+    const c = v
+    setCurrentPage1(c)
+  }
+  return (
+    <Pagination
+      modelValue={currentPage1}
+      totalItems="25"
+      itemsPerPage="5"
+      onChange={pageChange1}
+    />
+  )
+}
+export default App;
+```
+
+### 简单模式
+
+将 mode 设置为 "simple" 来切换到简单模式，此时分页器不会展示具体的页码按钮。
+
+``` tsx
+import React, { useState } from 'react'
+import { Pagination } from '@antmjs/vantui';
+
+const App = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: any) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      modelValue={currentPage2} 
+      pageCount={12} 
+      mode="simple" 
+      onChange={pageChange2} 
+    />
+  )
+}
+export default App;
+```
+
+### 显示省略号
+
+设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
+
+``` tsx
+import React, { useState } from 'react'
+import { Pagination } from '@antmjs/vantui';
+
+const App = () => {
+  const [currentPage3, setCurrentPage3] = useState(1)
+  const pageChange3 = (v: any) => {
+    const c = v
+    setCurrentPage3(c)
+  }
+  return (
+    <Pagination
+      modelValue={currentPage3}
+      totalItems="125"
+      showPageSize="3"
+      forceEllipses
+      onChange={pageChange3}
+    />
+  )
+}
+export default App;
+```
+
+### 自定义按钮
+
+通过pageNodeRender传入自定义方法
+
+``` tsx
+import React, { useState } from 'react'
+import { Pagination,Icon } from '@antmjs/vantui';
+
+const App = () => {
+  const [currentPage4, setCurrentPage4] = useState(1)
+  const pageChange4 = (v: any) => {
+    const c = v
+    setCurrentPage4(c)
+  }
+  const pageNodeRender = (page: any) => {
+    return <div>{page.number == 3 ? 'hot' : page.text}</div>
+  }
+  return (
+    <Pagination
+      modelValue={currentPage4}
+      totalItems="500"
+      showPageSize="5"
+      onChange={pageChange4}
+      pageNodeRender={pageNodeRender} 
+      prevText={<Icon name="left"/>} 
+      nextText={<Icon name="right"/>}
+    />
+  )
+}
+export default App;
+```
+### PaginationProps [[详情]](https://github.com/AntmJS/vantui/tree/main/packages/vantui/types/pagination.d.ts)   
+
+| 参数 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| defaultValue | 默认页码 | _&nbsp;&nbsp;number<br/>_ | 1 | `false` |
+| modelValue | 当前页码 | _&nbsp;&nbsp;number<br/>_ | 1 | `true` |
+| mode | - | _&nbsp;&nbsp;"multi"&nbsp;&brvbar;&nbsp;"simple"<br/>_ | multi | `false` |
+| prevText | 自定义上一页按钮内容 | _&nbsp;&nbsp;React.ReactNode<br/>_ | 上一页 | `false` |
+| nextText | 自定义下一页按钮内容 | _&nbsp;&nbsp;React.ReactNode<br/>_ | 下一页 | `false` |
+| pageCount | 总页数 | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;number<br/>_ | 传入或者根据数据量计算 | `true` |
+| totalItems | 总记录数 | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;number<br/>_ | 0 | `false` |
+| itemsPerPage | 每页数量 | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;number<br/>_ | 10 | `false` |
+| showPageSize | 显示页码个数 | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;number<br/>_ | 5 | `false` |
+| forceEllipses | 是否展示省略号 | _&nbsp;&nbsp;boolean<br/>_ | false | `false` |
+| pageNodeRender | 自定义渲染页码结构, 入参数为number页数、text文本、 active选中状态 | _&nbsp;&nbsp;(page:&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;number:&nbsp;number<br/>&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;string<br/>&nbsp;&nbsp;&nbsp;&nbsp;active:&nbsp;boolean<br/>&nbsp;&nbsp;})&nbsp;=>&nbsp;React.ReactNode<br/>_ | - | `false` |
+| onChange | 页码改变的时候触发 | _&nbsp;&nbsp;(currPage:&nbsp;number)&nbsp;=>&nbsp;void<br/>_ | - | `true` |
+| updatecurrent | - | _&nbsp;&nbsp;(currPage:&nbsp;number)&nbsp;=>&nbsp;void<br/>_ | - | `false` |
+

packages/vantui-doc/vant.config.js

@@ -284,6 +284,10 @@ module.exports = {
       {
         title: '导航组件',
         items: [
+          {
+            path:'pagination',
+            title: 'Pagination 分页',
+          },
           {
             path: 'grid',
             title: 'Grid 宫格',

packages/vantui/src/pagination/index.less

@@ -0,0 +1,53 @@
+@import '../style/var.less';
+
+.van-pagination {
+  display: flex;
+  font-size: @pagination-font-size;
+  color: @pagination-color;
+  &-contain {
+    display: flex;
+  }
+  &-simple {
+    height: 78px;
+    width: 248px;
+    line-height: 78px;
+    text-align: center;
+  }
+  &-prev,
+  &-item,
+  &-next {
+    height: 78px;
+    min-width: 78px;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: @white;
+    border-radius: @pagination-item-border-radius;
+    border: @pagination-item-border-width solid @pagination-item-border-color;
+    cursor: pointer;
+  }
+  &-prev,
+  &-item {
+    border-right: none;
+  }
+  &-prev,
+  &-next {
+    padding: @pagination-prev-next-padding;
+  }
+  .simple-border {
+    border-right: @pagination-item-border-width solid
+      @pagination-item-border-color;
+  }
+  .active {
+    color: @white;
+    border: none;
+    background: @pagination-active-background-color;
+  }
+  .disabled {
+    color: @pagination-disable-color;
+    background-color: @pagination-disable-background-color;
+    cursor: not-allowed;
+  }
+}