@ajna/涂鸦
目录
版本
安装
无
npm i @ajna/pagination
雅伦
yarn add @ajna/pagination
带有所有选项的演示
看这个沙盒里
构成部分
倾斜
| Prop | 说明 | 类型 | 默认 | 需求 |
|---|---|---|---|---|
| 页面 | 页数总数 | 编号 | 对 | |
| 当前页 | 当前选择的页面 | 编号 | 对 | |
| 页面更改 | 在返回所选最后一页的更改处理器上 | (当前页:数字) | 对 | |
| 已失效 | 如果页标上的所有项目禁用或不禁用, 则解码 | 布尔 | 虚假 | 没有 |
安装器
这是一个 弹性 组件,所以任何 弹性程序 已接受
倾斜 页面组
这是一个 堆栈 组件,所以任何 堆叠选项 已接受
倾斜 上一个
这是一个 按钮 组件,所以任何 按钮方案 已接受
下一个
这是一个 按钮 组件,所以任何 按钮方案 已接受
接头
这是一个 按钮 组件,所以任何 按钮方案 已接受
分隔符
这是一个 按钮 组件,所以任何 按钮方案 已接受
钩子
图片
选项
| Prop | 说明 | 类型 | 默认 | 需求 |
|---|---|---|---|---|
| 初始状态 | 标记值的初始状态 | 初始状态 | 对 | |
| 共计 | 从您消费的终点计数 | 编号 | 未定义 | 没有 |
| 限制 | 限制会减少要显示的页面量 | 限制 | 未定义 | 没有 |
| 页面 | 如果手动设定页数, 则优先 | 编号 | 未定义 | 没有 |
返回的数值
| Prop | 说明 | 类型 | 默认 |
|---|---|---|---|
| 页:1 | 生成的偏移值 | 编号 | 0 个 |
| 页次 | 要渲染的页面数组 | 编号[] | [ |
| 页面 | 页数总数 | 编号 | 0 个 |
| 当前页 | 当前选择的页面 | 编号 | |
| 页面大小 | 每页物品数量 | 编号 | 未定义 |
| 已失效 | 如果页标上的所有项目禁用或不禁用, 则解码 | 布尔 | 虚假 |
| 设置 | 已失效值的设置器 | 调度“ 特定状态行动” | |
| 已失效 | 已失效值的设置器 | 调度“ 特定状态行动” | |
| 当前设置 | 当前 Page 值的设置器 | 调度“ 特定状态行动” |
使用量
最小值
这是你需要的最起码的设置 把它弄起来工作
import React, { FC, ChangeEvent, useEffect, useState } from "react";
import { ChakraProvider } from "@chakra-ui/react";
import {
Pagination,
usePagination,
PaginationNext,
PaginationPage,
PaginationPrevious,
PaginationContainer,
PaginationPageGroup,
} from "@ajna/pagination";
const Minimal: FC = () => {
const {
currentPage,
setCurrentPage,
pagesCount,
pages
} = usePagination({
pagesCount: 12,
initialState: { currentPage: 1 },
});
return (
<ChakraProvider>
<Pagination
pagesCount={pagesCount}
currentPage={currentPage}
onPageChange={setCurrentPage}
>
<PaginationContainer>
<PaginationPrevious>Previous</PaginationPrevious>
<PaginationPageGroup>
{pages.map((page: number) => (
<PaginationPage
key={`pagination_page_${page}`}
page={page}
/>
))}
</PaginationPageGroup>
<PaginationNext>Next</PaginationNext>
</PaginationContainer>
</Pagination>
</ChakraProvider>
);
};
export default Demo;
样式
这个 颜色( c) prop 将包含当前选中页面的道具 所有其他道具将适用于每一页
<PaginationPage
w={7}
bg="red.300"
fontSize="sm"
_hover={{
bg: "green.300"
}}
_current={{
w: 7,
bg: "green.300"
fontSize: "sm"
_hover: {
bg: "blue.300"
},
}}
>
<PaginationPrevious
bg="blue.500"
w="20rem"
//...any button prop
>
Previous
</PaginationPrevious>
<PaginationNext
w={7}
bg="red.300"
fontSize="sm"
//...any button prop
>
Next
</PaginationNext>
<PaginationContainer
bg="blue.500"
w="full"
//...any flex prop
>
...
</PaginationContainer>
<PaginationPageGroup
bg="blue.500"
w="full"
//...any stack prop
>
...
</PaginationPageGroup>
残疾
它提供了一种商品禁用道具,可以同时禁用/启用您所有的发卡组件
const { isDisabled, setIsDisabled } = usePagination({
initialState: { isDisabled: false }
});
const handleDisableClick = () => {
return setIsDisabled((oldState) => !oldState);
};
<Pagination
isDisabled={isDisabled}
>
页面大小
它提供了一个商品页面大小 设置和获取器
const { pageSize, setPageSize } = usePagination({
initialState: { pageSize: 5 },
});
const handlePageSizeChange = (event: ChangeEvent<HTMLSelectElement>) => {
const pageSize = Number(event.target.value);
setPageSize(pageSize);
};
限制
您可以通过路过来修剪所显示的页面的挂载 两者 限制 与此同时 有话要说 两者,否则将不适用限制
const { pages } = usePagination({
limits: {
outer: outerLimit,
inner: innerLimit,
},
});
分隔符
附加, 您可以自定义限制时使用的分隔符组件
<PaginationPageGroup separator={<PaginationSeparator _hover={{ bg: 'purple.500' }} bg='teal.500'>}>
{pages.map((page: number) => (
<PaginationPage key={`pagination_page_${page}`} page={page} />
))}
</PaginationPageGroup>
折减
可能你正在消费的API 与一个 页:1 一个是用来计算和供养你的 页面大小 财务报告和审定财务报表 当前页 数值
用下一个公式计算:
[currentPage * pageSize - pageSize]
currentPage === 1 && pageSize === 5 // offset = 0;
currentPage === 2 && pageSize === 5 // offset = 5;
currentPage === 3 && pageSize === 5 // offset = 10;
const { offset, pageSize } = usePagination({
initialState: { pageSize: 5 },
});
fetchUsingOffset(pageSize, offset).then((data) => {
// use data
});
共计
记住,如果你知道 共计 请求的终点项目数量,不是 一个奇怪的东西要返回, 你可以使用它生成 页次 给你的
const { pages, pagesCount } = usePaginator({
total: 4021,
initialState: { pageSize: 5 }
});
<Pagination
pagesCount={pagesCount}
>
<PaginationPageGroup>
{pages.map((page: number) => (
<PaginationPage key={`pagination_page_${page}`} page={page} />
))}
</PaginationPageGroup>
完全使用实例
在此示例中, 您可以看到正在应用的库提供的所有可能特性 以显示 10 个 pickmons 名称, 并具有播放页面大小和禁用状态的能力
import React, { FC, ChangeEvent, useEffect, useState } from "react";
import { Grid, Center, Select, Text, Button, Stack } from "@chakra-ui/react";
import {
Pagination,
usePagination,
PaginationPage,
PaginationNext,
PaginationPrevious,
PaginationPageGroup,
PaginationContainer,
PaginationSeparator,
} from "@ajna/pagination";
const fetchPokemons = async (
pageSize: number,
offset: number
): Promise<any> => {
return await fetch(
`https://pokeapi.co/api/v2/pokemon?limit=${pageSize}&offset=${offset}`
).then(async (res) => await res.json());
};
const Full: FC = () => {
// states
const [pokemonsTotal, setPokemonsTotal] = useState<number | undefined>(
undefined
);
const [pokemons, setPokemons] = useState<any[]>([]);
// constants
const outerLimit = 2;
const innerLimit = 2;
// pagination hook
const {
pages,
pagesCount,
offset,
currentPage,
setCurrentPage,
setIsDisabled,
isDisabled,
pageSize,
setPageSize,
} = usePagination({
total: pokemonsTotal,
limits: {
outer: outerLimit,
inner: innerLimit,
},
initialState: {
pageSize: 5,
isDisabled: false,
currentPage: 1,
},
});
// effects
useEffect(() => {
fetchPokemons(pageSize, offset)
.then((pokemons) => {
setPokemonsTotal(pokemons.count);
setPokemons(pokemons.results);
})
.catch((error) => console.error("App =>", error));
}, [currentPage, pageSize, offset]);
// handlers
const handlePageChange = (nextPage: number): void => {
// -> request new data using the page number
setCurrentPage(nextPage);
console.log("request new data with ->", nextPage);
};
const handlePageSizeChange = (
event: ChangeEvent<HTMLSelectElement>
): void => {
const pageSize = Number(event.target.value);
setPageSize(pageSize);
};
const handleDisableClick = (): void => {
setIsDisabled((oldState) => !oldState);
};
return (
<Stack>
<Pagination
pagesCount={pagesCount}
currentPage={currentPage}
isDisabled={isDisabled}
onPageChange={handlePageChange}
>
<PaginationContainer
align="center"
justify="space-between"
p={4}
w="full"
>
<PaginationPrevious
_hover={{
bg: "yellow.400",
}}
bg="yellow.300"
isDisabled
onClick={() => console.warn("I'm clicking the previous")}
>
<Text>Previous</Text>
</PaginationPrevious>
<PaginationPageGroup
isInline
align="center"
separator={
<PaginationSeparator
isDisabled
onClick={() => console.warn("I'm clicking the separator")}
bg="blue.300"
fontSize="sm"
w={7}
jumpSize={11}
/>
}
>
{pages.map((page: number) => (
<PaginationPage
w={7}
bg="red.300"
key={`pagination_page_${page}`}
page={page}
onClick={() => console.warn("Im clicking the page")}
fontSize="sm"
_hover={{
bg: "green.300",
}}
_current={{
bg: "green.300",
fontSize: "sm",
w: 7,
}}
/>
))}
</PaginationPageGroup>
<PaginationNext
_hover={{
bg: "yellow.400",
}}
bg="yellow.300"
onClick={() => console.warn("I'm clicking the next")}
>
<Text>Next</Text>
</PaginationNext>
</PaginationContainer>
</Pagination>
<Center w="full">
<Button
_hover={{
bg: "purple.400",
}}
bg="purple.300"
onClick={handleDisableClick}
>
Disable ON / OFF
</Button>
<Select ml={3} onChange={handlePageSizeChange} w={40}>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</Select>
</Center>
<Grid
gap={3}
mt={20}
px={20}
templateColumns="repeat(5, 1fr)"
templateRows="repeat(2, 1fr)"
>
{pokemons?.map(({ name }) => (
<Center key={name} bg="green.100" p={4}>
<Text>{name}</Text>
</Center>
))}
</Grid>
</Stack>
);
};
export default Full;