Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 2145394f 编写于 作者: L lkjh3214 提交者： GitHub
浏览文件
操作

fix: pagination 文档优化(#161) 

Co-authored-by: Nlkjh3214 <13121007159@163.com>
上级 0d881c82
隐藏空白更改
内联 并排
Showing with 101 addition and 71 deletion
src/packages/pagination/demo.tsx
浏览文件 @ 2145394f
import React, { useState } from 'react'
import Pagination from '@/packages/pagination'
import Icon from '@/packages/icon'
import { useTranslate } from '../../sites/assets/locale'
interface T {
ce5c5446: string
c38a08ef: string
b840c88f: string
a74a1fd4: string
}
const PaginationDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
ce5c5446: '基础用法',
c38a08ef: '简单模式',
b840c88f: '显示省略号',
a74a1fd4: '自定义按钮',
},
'zh-TW': {
ce5c5446: '基礎用法',
c38a08ef: '簡單模式',
b840c88f: '顯示省略號',
a74a1fd4: '自定義按鈕',
},
'en-US': {
ce5c5446: 'Basic usage',
c38a08ef: 'Simple mode',
b840c88f: 'Show ellipsis',
a74a1fd4: 'Custom button',
},
})
const [currentPage1, setCurrent1] = useState(1)
const [currentPage2, setCurrent2] = useState(1)
const [currentPage3, setCurrent3] = useState(1)
......@@ -24,25 +52,25 @@ const PaginationDemo = () => {
setCurrent4(c)
}
const pageNodeRender = (item: any) => {
return <div>{item.number == 3 ? 'hot' : item.text}</div>
return <div>{item.number === 3 ? 'hot' : item.text}</div>
}
return (
<div className="demo">
<h2>基础用法</h2>
<h2>{translated.ce5c5446}</h2>
<Pagination
modelValue={currentPage1}
totalItems="25"
itemsPerPage="5"
onChange={pageChange1}
/>
<h2>简单模式</h2>
<h2>{translated.c38a08ef}</h2>
<Pagination
modelValue={currentPage2}
pageCount={12}
mode="simple"
onChange={pageChange2}
/>
<h2>显示省略号</h2>
<h2>{translated.b840c88f}</h2>
<Pagination
modelValue={currentPage3}
totalItems="125"
......@@ -50,7 +78,7 @@ const PaginationDemo = () => {
forceEllipses
onChange={pageChange3}
/>
<h2>自定义按钮</h2>
<h2>{translated.a74a1fd4}</h2>
<Pagination
modelValue={currentPage4}
totalItems="500"
......
src/packages/pagination/doc.en-US.md
浏览文件 @ 2145394f
# Pagination 分页
# Pagination
### 介绍
### Intro
当数据量较多时，采用分页的形式分隔长列表。
When the amount of data is too much, use pagination to separate the data.
### 安装
### Install
``` javascript
import { Pagination } from '@nutui/nutui-react';
```
### 基础用法
通过modelValue来绑定当前页码时，组件为受控状态，分页显示取决于传入的modelValue，一般搭配onChange使用。
不需要受控时，可通过defaultCurrentPage指定当前页码
### Basic Usage
When the current page number is bound by modelValue, the component is in a controlled state, and the paging display depends on the incoming modelValue, which is generally used with onChange.
When it does not need to be controlled, the current page number can be specified through defaultCurrentPage
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -35,8 +37,8 @@ const App = () => {
export default App;
```
:::
### 简单模式
将 mode 设置为 "simple" 来切换到简单模式，此时分页器不会展示具体的页码按钮。
### Simple mode
Pagination can be switched to simple mode with simple mode attribute, and pagination cann't display specific page buttons.
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -61,8 +63,8 @@ export default App;
```
:::
### 显示省略号
设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
### Show ellipses
The ellipses button will display after with force-ellipses attribute, click it can jump quickly.
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -87,8 +89,8 @@ const App = () => {
export default App;
```
:::
### 自定义按钮
通过pageNodeRender传入自定义方法，入参数为page:{ number:页数, text:"文本", active:"选中状态" }
### Custom Button
Pass in a custom method through pageNodeRender, parameters: { number: "page number", text: "page text", active: "active page" }
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -101,7 +103,7 @@ const App = () => {
setCurrentPage4(c)
}
const pageNodeRender = (page: any) => {
return <div>{page.number == 3 ? 'hot' : page.text}</div>
return <div>{page.number === 3 ? 'hot' : page.text}</div>
}
return (
<Pagination
......@@ -123,22 +125,22 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
| -------------- | -------------------------------- | ------------------------- | ----------------- |
| modelValue | 当前页码 | Number | - |
| defaultValue | 当前页码 | Number | 1 |
| mode | 显示模式,可选值为：multi，simple | String | multi |
| prevText | 自定义上一页按钮内容 | String \| React.ReactNode | 上一页 |
| nextText | 自定义下一页按钮内容 | String \| React.ReactNode | 下一页 |
| pageCount | 总页数 | String \| Number | 传入/根据页数计算 |
| totalItems | 总记录数 | String \| Number | 0 |
| itemsPerPage | 每页记录数 | String \| Number | 10 |
| showPageSize | 显示的页码个数 | String \| Number | 5 |
| forceEllipses | 是否显示省略号 | Boolean | false |
| pageNodeRender | 用于自定义页码的结构 | (page) => React.ReactNode | - |
| modelValue | current page number | Number | - |
| defaultValue | default page number | Number | 1 |
| mode | Display mode, optional values are: `multi`,`simple` | String | multi |
| prevText | Customize previous page button content | String \| React.ReactNode | Previous |
| nextText | Customize next page button content | String \| React.ReactNode | Next |
| pageCount | total pages | String \| Number | Incoming/calculating based on page count |
| totalItems | total | String \| Number | 0 |
| itemsPerPage | records per page | String \| Number | 10 |
| showPageSize | number of pages displayed | String \| Number | 5 |
| forceEllipses | Whether to show ellipsis | Boolean | false |
| pageNodeRender | Used to customize page number content | (page) => React.ReactNode | - |
### Events
| 事件名 | 说明 | 回调参数 |
| Event | Description | Arguments |
| -------- | -------------- | -------- |
| onChange | 页码改变时触发 | value |
| onChange | when the page number changes | value |
src/packages/pagination/doc.md
浏览文件 @ 2145394f
......@@ -101,7 +101,7 @@ const App = () => {
setCurrentPage4(c)
}
const pageNodeRender = (page: any) => {
return <div>{page.number == 3 ? 'hot' : page.text}</div>
return <div>{page.number === 3 ? 'hot' : page.text}</div>
}
return (
<Pagination
......
src/packages/pagination/doc.zh-TW.md
浏览文件 @ 2145394f
# Pagination 分页
# Pagination 分頁
### 介绍
### 介紹
当数据量较多时，采用分页的形式分隔长列表。
當數據量較多時，採用分頁的形式分隔長列表。
### 安装
### 安裝
``` javascript
import { Pagination } from '@nutui/nutui-react';
```
### 基础用法
通过modelValue来绑定当前页码时，组件为受控状态，分页显示取决于传入的modelValue，一般搭配onChange使用。
不需要受控时，可通过defaultCurrentPage指定当前页码
### 基礎用法
通過modelValue來綁定當前頁碼時，組件為受控狀態，分頁顯示取決於傳入的modelValue，一般搭配onChange使用。
不需要受控時，可通過defaultCurrentPage指定當前頁碼
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -35,8 +35,8 @@ const App = () => {
export default App;
```
:::
### 简单模式
将 mode 设置为 "simple" 来切换到简单模式，此时分页器不会展示具体的页码按钮。
### 簡單模式
將 mode 設置為 "simple" 來切換到簡單模式，此時分頁器不會展示具體的頁碼按鈕。
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -61,8 +61,8 @@ export default App;
```
:::
### 显示省略号
设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
### 顯示省略號
設置 force-ellipses 後會展示省略號按鈕，點擊後可以快速跳轉。
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -87,8 +87,8 @@ const App = () => {
export default App;
```
:::
### 自定义按钮
通过pageNodeRender传入自定义方法，入参数为page:{ number:页数, text:"文本", active:"选中状态" }
### 自定義按鈕
通過pageNodeRender傳入自定義方法，入參數為page:{ number:頁數, text:"文本", active:"選中狀態" }
:::demo
``` tsx
import React, { useState } from 'react'
......@@ -101,7 +101,7 @@ const App = () => {
setCurrentPage4(c)
}
const pageNodeRender = (page: any) => {
return <div>{page.number == 3 ? 'hot' : page.text}</div>
return <div>{page.number === 3 ? 'hot' : page.text}</div>
}
return (
<Pagination
......@@ -123,22 +123,22 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| 屬性 | 說明 | 類型 | 預設值 |
| -------------- | -------------------------------- | ------------------------- | ----------------- |
| modelValue | 当前页码 | Number | - |
| defaultValue | 当前页码 | Number | 1 |
| mode | 显示模式,可选值为：multi，simple | String | multi |
| prevText | 自定义上一页按钮内容 | String \| React.ReactNode | 上一页 |
| nextText | 自定义下一页按钮内容 | String \| React.ReactNode | 下一页 |
| pageCount | 总页数 | String \| Number | 传入/根据页数计算 |
| totalItems | 总记录数 | String \| Number | 0 |
| itemsPerPage | 每页记录数 | String \| Number | 10 |
| showPageSize | 显示的页码个数 | String \| Number | 5 |
| forceEllipses | 是否显示省略号 | Boolean | false |
| pageNodeRender | 用于自定义页码的结构 | (page) => React.ReactNode | - |
| modelValue | 當前頁碼 | Number | - |
| defaultValue | 當前頁碼 | Number | 1 |
| mode | 顯示模式,可選值為：multi，simple | String | multi |
| prevText | 自定義上一頁按鈕內容 | String \| React.ReactNode | 上一頁 |
| nextText | 自定義下一頁按鈕內容 | String \| React.ReactNode | 下一頁 |
| pageCount | 總頁數 | String \| Number | 傳入/根據頁數計算 |
| totalItems | 總記錄數 | String \| Number | 0 |
| itemsPerPage | 每頁記錄數 | String \| Number | 10 |
| showPageSize | 顯示的頁碼個數 | String \| Number | 5 |
| forceEllipses | 是否顯示省略號 | Boolean | false |
| pageNodeRender | 用於自定義頁碼的結構 | (page) => React.ReactNode | - |
### Events
| 事件名 | 说明 | 回调参数 |
| 事件名稱 | 說明 | 回調參數 |
| -------- | -------------- | -------- |
| onChange | 页码改变时触发 | value |
src/packages/pagination/pagination.tsx
浏览文件 @ 2145394f
......@@ -60,19 +60,19 @@ export const Pagination: FunctionComponent<
} = props
const [currentPage, setCurrent] = useState(1)
const [pages, setPages] = useState<any>([])
const [pages, setPages] = useState<unknown[]>([])
const [countRef, setCountRef] = useState(Number(pageCount))
const paginationBem = bem('pagination')
// 计算页面的数量
const computedCountRef = () => {
const num =
Number(pageCount) || Math.ceil(Number(totalItems) / Number(itemsPerPage))
return isNaN(num) ? 1 : Math.max(1, num)
return Number.isNaN(num) ? 1 : Math.max(1, num)
}
// 生成pages数组，用来遍历
const computedPages = (_currentPage?: number, _countRef?: number) => {
if (mode == 'simple') return []
if (mode === 'simple') return []
const items = []
const pageCount = _countRef || countRef // 总的页面数量
const pageSize = Number(showPageSize) // 展示的页面个数
......@@ -91,7 +91,7 @@ export const Pagination: FunctionComponent<
}
// 遍历生成数组
for (let i = startPage; i <= endPage; i++) {
const page = setPage(i, i, _current == i)
const page = setPage(i, i, _current === i)
items.push(page)
}
// 判断是否有折叠
......@@ -113,11 +113,11 @@ export const Pagination: FunctionComponent<
// 是否传入modelValue
if (!('modelValue' in props)) {
setCurrent(Number(curPage))
if (curPage != currentPage) {
if (curPage !== currentPage) {
setPages(computedPages(curPage))
}
}
if (curPage != currentPage) {
if (curPage !== currentPage) {
updatecurrent && updatecurrent(curPage)
}
if (isSelect) onChange && onChange(curPage)
......@@ -149,13 +149,13 @@ export const Pagination: FunctionComponent<
<div className={`${paginationBem('')} ${className}`} {...rest}>
<div
className={`${paginationBem('prev')} ${
mode == 'multi' ? '' : 'simple-border'
} ${currentPage == 1 ? 'disabled' : ''}`}
mode === 'multi' ? '' : 'simple-border'
} ${currentPage === 1 ? 'disabled' : ''}`}
onClick={(e) => selectPage(Number(currentPage) - 1, true)}
>
{locale.pagination.prev || prevText}
</div>
{mode == 'multi' ? (
{mode === 'multi' ? (
<div className={`${paginationBem('contain')}`}>
{pages.map((item: any, index: number) => {
return (
......@@ -176,7 +176,7 @@ export const Pagination: FunctionComponent<
) : (
''
)}
{mode == 'simple' ? (
{mode === 'simple' ? (
<div className={`${paginationBem('contain')}`}>
<div className={`${paginationBem('simple')}`}>
{currentPage}/{countRef}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或