v2.0.0

Author: bplok20010

.gitignore

@@ -1 +1,5 @@
 /node_modules
+/lib
+/cjs
+/esm
+/dist

.prettierignore

@@ -0,0 +1 @@
+*.md

.prettierrc

@@ -0,0 +1,18 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"endOfLine": "auto",
+	"htmlWhitespaceSensitivity": "css",
+	"insertPragma": false,
+	"jsxBracketSameLine": false,
+	"jsxSingleQuote": false,
+	"printWidth": 100,
+	"proseWrap": "preserve",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"trailingComma": "es5",
+	"useTabs": true
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 react-widget
+Copyright (c) 2018-2020 react-widget-pagination
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,74 +1,248 @@
-# react-widget-pagination
+# Pagination
 
-## Install
+Pagination分页组件
+
+## 安装
 
 `npm install --save react-widget-pagination`
 
 
-## Options
+## 使用
+
+```js
+import React from "react";
+import Pagination from "react-widget-pagination";
+import "react-widget-pagination/style";
+
+export default function App() {
+  return (
+    <div
+      className="App"
+      style={{
+        padding: 100
+      }}
+    >
+        <Pagination total={1000} showSizeChanger showTotal showQuickJumper />
+    </div>
+  );
+}
+
 
 ```
-static propTypes = {
-        className: PropTypes.string,
-        prefixCls: PropTypes.string,
-        small: PropTypes.bool,
-        total: PropTypes.number.isRequired,
-        defaultCurrent: PropTypes.number,
-        current: PropTypes.number,
-        defaultPageSize: PropTypes.number,
-        pageSize: PropTypes.number,
-        pageRange: PropTypes.number,
-        pageSizeOptions: PropTypes.array,
-        onPageSizeChange: PropTypes.func,
-        onChange: PropTypes.func,
-        layout: PropTypes.array,
-        totalRender: PropTypes.func,
-        prevBtnRender: PropTypes.func,
-        nextBtnRender: PropTypes.func,
-        itemRender: PropTypes.func,
-        pageSizeOptionRender: PropTypes.func,
-        jumperRender: PropTypes.func,
-        showPrevMore: PropTypes.bool,
-        showNextMore: PropTypes.bool,
-        selectComponent: PropTypes.any,
-    };
 
-    static defaultProps = {
-        prefixCls: 'rw-pagination',
-        small: false,
-        total: 0,
-        showSizeChanger: false,
-        pageSizeOptions: [10, 20, 30, 40],
-        pageRange: 5,//必须是奇数，界面上最多显示7页
-        //total, sizes, prev, pager, next, jumper
-        layout: ['total', 'sizes', 'prev', 'pager', 'next', 'jumper'],
-        totalRender: function (total, pn, ps) {
-            return `共 ${total} 条`;
-        },
-        pageSizeOptionRender: function (v) {
-            return `${v} 条/页`;
-        },
-        jumperRender: null,
-        prevBtnRender: () => '上一页',
-        nextBtnRender: () => '下一页',
-        itemRender: null,
-        showPrevMore: true,
-        showNextMore: true,
-        selectComponent: Select,
+
+### Interfaces
+
+```ts
+import React from "react";
+export declare type PaginationLayout = "total" | "sizeChanger" | "prev" | "pager" | "next" | "jumper";
+export declare type ItemType = "page" | "prev" | "next" | "prevMore" | "nextMore";
+export interface TotalRenderProps {
+    page: number;
+    total: number;
+    pageSize: number;
+    disabled: boolean;
+    range: [number, number];
+}
+export interface SizeChangerProps {
+    options: Array<number>;
+    setPageSize: (pageSize: number) => void;
+    pageSize: number;
+    page: number;
+    total: number;
+    disabled: boolean;
+}
+export interface JumperProps {
+    page: number;
+    pageSize: number;
+    total: number;
+    setPage: (page: number) => void;
+    disabled: boolean;
+}
+export declare function SizeChanger(props: SizeChangerProps): JSX.Element;
+export declare function Jumper(props: JumperProps): JSX.Element;
+export interface PaginationProps {
+    /** 样式前缀 */
+    prefixCls?: string;
+    /** 样式名称 */
+    className?: string;
+    /** 样式属性 */
+    style?: React.CSSProperties;
+    /** 数据总数：默认为：0 */
+    total?: number;
+    /** 当前页数(受控) */
+    current?: number;
+    /** 默认的当前页数 */
+    defaultCurrent?: number;
+    /** 每页条数(受控) */
+    pageSize?: number;
+    /** 默认的每页条数 */
+    defaultPageSize?: number;
+    /** 指定每页可以显示多少条 */
+    pageSizeOptions?: Array<number>;
+    /** 禁用分页 */
+    disabled?: boolean;
+    /** 只有一页时是否隐藏分页器 */
+    hideOnSinglePage?: boolean;
+    /** 是否展示 pageSize 选择器 */
+    showSizeChanger?: boolean;
+    /** 自定义渲染 pageSize 选择器 */
+    sizeChangerRender?: (props: SizeChangerProps) => React.ReactNode;
+    /** 是否显示快速跳转至某页输入框 */
+    showQuickJumper?: boolean;
+    /** 自定义渲染快速跳转至某页输入框 */
+    quickJumperRender?: (props: JumperProps) => React.ReactNode;
+    /** 是否显示总条数信息，默认：共 x 条，每页 y 条 */
+    showTotal?: boolean;
+    /** 自定义显示总条数信息 */
+    totalRender?: (props: TotalRenderProps) => React.ReactNode;
+    /** 显示页码数，默认为：5，该数值为奇数 */
+    pageRange?: number;
+    /** 自定义显示布局顺序及内置模块 */
+    layout?: PaginationLayout[];
+    /** 自定义渲染页码的内容 */
+    itemRender?: (page: number, type: ItemType, originalElement: React.ReactNode) => React.ReactNode;
+    /** 页数改变的回调 */
+    onChange?: (page: number, pageSize: number) => void;
+    /** 每页条数改变的回调 */
+    onPageSizeChange?: (pageSize: number, page: number) => void;
+}
+export interface PaginationState {
+    pageSize: number;
+    current: number;
+}
+export declare class Pagination extends React.Component<PaginationProps, PaginationState> {
+    static defaultProps: PaginationProps;
+    static getDerivedStateFromProps(props: PaginationProps, state: PaginationState): {
+        current: number;
+        pageSize: number;
     };
+    state: Readonly<PaginationState>;
+    setPage(page: number): void;
+    prev: () => void;
+    next: () => void;
+    protected onItemEnter(callback: () => void, e: React.KeyboardEvent): void;
+    getTotalPages(pageSize?: number): number;
+    getPageItemClassName(page: number): any;
+    setPageSize: (pageSize: number) => void;
+    protected renderPager(): JSX.Element[];
+    getCurrentRange(): [number, number];
+    protected renderLayoutTotal(): JSX.Element | null;
+    protected renderLayoutSizeChanger(): JSX.Element | null;
+    protected renderLayoutPrev(): JSX.Element;
+    protected renderLayoutPager(): JSX.Element[];
+    protected renderLayoutNext(): JSX.Element;
+    protected renderLayoutJumper(): JSX.Element | null;
+    render(): JSX.Element | null;
+}
+export default Pagination;
 
 ```
 
-## Useage
+### defaultProps
+```js
+{
+    prefixCls: "rw-pagination",
+	total: 0,
+	hideOnSinglePage: false,
+	showSizeChanger: false,
+	pageSizeOptions: [10, 20, 50, 100],
+	pageRange: 5,
+	layout: ["total", "prev", "pager", "next", "sizeChanger", "jumper"],
+	totalRender: function (props: TotalRenderProps) {
+		return `共 ${props.total} 条，每页 ${props.pageSize} 条`;
+	},
 
+}
 ```
 
-<Pagination
-                    total={1000}
-                    style={{
-                        width: 260,
-                        height: 300
-                    }}
-                />
+### 基础样式
+
+```css
+.rw-pagination {
+	display: flex;
+	align-items: center;
+}
+
+.rw-pagination > div:not(:last-child) {
+	margin-right: 6px;
+}
+
+.rw-pagination-item {
+	padding: 5px 10px;
+	user-select: none;
+	background: #fff;
+	border: 1px solid #d9d9d9;
+	outline: 0;
+	border-radius: 2px;
+	cursor: pointer;
+	line-height: 20px;
+}
+
+.rw-pagination-item-next-more,
+.rw-pagination-item-prev-more {
+	font-size: 12px;
+}
+
+.rw-pagination-icon-left,
+.rw-pagination-icon-right {
+	display: none;
+}
 
-```
+.rw-pagination-item:focus,
+.rw-pagination-item:hover {
+	border-color: #40a9ff;
+}
+
+.rw-pagination-item:active {
+	background-color: #eaeaea;
+	border-color: #dcdee0;
+}
+
+.rw-pagination-item-disabled,
+.rw-pagination-item-disabled:active {
+	color: rgba(0, 0, 0, 0.25);
+	border-color: #d9d9d9;
+	background-color: #fff;
+	cursor: not-allowed;
+}
+
+.rw-pagination-item-disabled:hover {
+	border-color: #d9d9d9;
+}
+
+.rw-pagination-item-active,
+.rw-pagination-item-active:active {
+	background: #40a9ff;
+	color: #fff;
+	border-color: #40a9ff;
+	cursor: default;
+}
+
+.rw-pagination-quick-jumper input {
+	width: 45px;
+	margin: 0 6px;
+	padding: 5px 10px;
+	border-radius: 2px;
+	border: 1px solid #d9d9d9;
+}
+
+.rw-pagination-size-changer select {
+	padding: 5px 10px;
+	border-radius: 2px;
+	border: 1px solid #d9d9d9;
+}
+
+.rw-pagination-disabled .rw-pagination-item {
+	background: #f5f5f5;
+	border-color: #d9d9d9;
+	cursor: not-allowed;
+}
+
+.rw-pagination-disabled .rw-pagination-item-active {
+	background: #dbdbdb;
+	border-color: transparent;
+}
+
+
+```

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = api => {
+	const isTest = api.env("test");
+	if (!isTest) return {};
+
+	return {
+		presets: [
+			[
+				"babel-preset-packez",
+				{
+					modules: "cjs",
+				},
+			],
+		],
+	};
+};

docs/asset-manifest.json

@@ -0,0 +1,7 @@
+{
+  "index.css": "static/css/index.1f18a912.chunk.css",
+  "index.js": "static/js/index.1f18a912.chunk.js",
+  "runtime-index.js": "static/js/runtime-index.92eae014.js",
+  "static/js/2.68d5c405.chunk.js": "static/js/2.68d5c405.chunk.js",
+  "index.html": "index.html"
+}

docs/index.html

@@ -1,25 +1 @@
-<!DOCTYPE html>
-<html style="width:100%; height:100%; overflow:hidden;">
-
-<head>
-    <meta charset="utf-8">
-    <title>scrollview</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
-    <style type="text/css">
-        .demo {
-            width: 1200px;
-            height: 500px;
-            margin: 100px auto;
-            background: #FFF;
-            font-size: 12px;
-            overflow: auto;
-        }
-    </style>
-<link href="static\css\index.a46d9cf2.css" rel="stylesheet"></head>
-
-<body style="background:#F5F5F5">
-    <div class="demo" id="demo">
-    </div>
-<script src="static\js\vendors.226cb6a9.chunk.js"></script><script src="static\js\index.0853f3d2.js"></script></body>
-
-</html>
+<!doctype html><html s><head><meta charset="utf-8"/><title>Pagination</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style></style><link href="static/css/index.1f18a912.chunk.css" rel="stylesheet"></head><body><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.68d5c405.chunk.js"></script><script src="static/js/index.1f18a912.chunk.js"></script></body></html>