react-component-data-table - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

css/Pagination.css

+.pagination {
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+  padding: 0;
+  user-select: none; }
+  .pagination li {
+    padding: 8px 12px;
+    border-radius: 4px;
+    list-style: none; }
+    .pagination li a {
+      color: black;
+      outline: none;
+      text-decoration: none; }
+  .pagination li.disabled {
+    color: gray;
+    cursor: not-allowed; }
+    .pagination li.disabled a {
+      pointer-events: none;
+      color: gray; }
+  .pagination li.cur {
+    background-color: #ee6e73; }
+    .pagination li.cur a {
+      color: white; }

components/DataTableWithPagination.js

@@ -71,7 +71,11 @@ "use strict";
 		value: function getGlobalRowIndex(localRowIndex) {
-			var index = this.refs['pagination'].pageIndex * this.refs['pagination'].pageSize;
-			if (this.refs['pagination'].startPageNumber === 0) {
-				return index + localRowIndex + 1;
+			var pagination = this.refs['pagination'];
+			if (pagination) {
+				var index = this.refs['pagination'].pageIndex * this.refs['pagination'].pageSize;
+				if (this.refs['pagination'].startPageNumber === 0) {
+					return index + localRowIndex + 1;
+				}
+				return index + localRowIndex;
 			}
-			return index + localRowIndex;
+			return localRowIndex + 1;
 		}
@@ -78,0 +82,0 @@ }, {

components/Pagination.js

@@ -57,3 +57,3 @@ "use strict";
   * @property {?Number} pageSize [ 10 ] - 每页记录数
-  * @property {Function} onPageChange - 分页事件监听
+  * @property {?Function} onPageChange [ ()=>null ] - 分页事件监听
   * @property {Number} total - 总记录数
@@ -63,2 +63,4 @@ * @property {?Object} style - 样式
   * @property {?Number} displayPageCount [ 5 ] - 最多可以显示多少页面
+  * @property {?Function} renderNextPage [ ()=>(">") ] - `>`按钮样式
+  * @property {?Function} renderPrevPage [ ()=>("<") ] - `<`按钮样式
   * */
@@ -142,3 +144,3 @@ function Pagination(props) {
 							}, href: "javascript:void(0)" },
-						_react2.default.createElement("i", { className: "fa fa-angle-left" })
+						this.props.renderPrevPage()
 					)
@@ -190,3 +192,3 @@ ),
 							}, href: "javascript:void(0)" },
-						_react2.default.createElement("i", { className: "fa fa-angle-right" })
+						this.props.renderNextPage()
 					)
@@ -207,2 +209,3 @@ )
    * 当前页码
+   * @readonly
    * */
@@ -218,2 +221,3 @@
    * 每页记录数
+   * @readonly
    * */
@@ -229,2 +233,3 @@
    * 起始分页页码
+   * @readonly
    * */
@@ -246,7 +251,9 @@
 	pageSize: _propTypes2.default.number,
-	onPageChange: _propTypes2.default.func.isRequired,
+	onPageChange: _propTypes2.default.func,
 	total: _propTypes2.default.number.isRequired,
 	style: _propTypes2.default.object,
 	className: _propTypes2.default.any,
-	displayPageCount: _propTypes2.default.number
+	displayPageCount: _propTypes2.default.number,
+	renderNextPage: _propTypes2.default.func,
+	renderPrevPage: _propTypes2.default.func
 };
@@ -257,5 +264,14 @@ Pagination.defaultProps = {
 	pageSize: 10,
+	onPageChange: function onPageChange() {
+		return null;
+	},
 	className: "pagination",
-	displayPageCount: 5
+	displayPageCount: 5,
+	renderNextPage: function renderNextPage() {
+		return ">";
+	},
+	renderPrevPage: function renderPrevPage() {
+		return "<";
+	}
 };
 exports.default = Pagination;

css/DataTable.css

 .data-table {
-  border-left: solid 1px silver;
-  border-top: solid 1px silver; }
+  border: solid 1px silver;
+  padding: 0;
+  border-collapse: collapse; }
+  .data-table thead {
+    background-color: silver; }

package.json

 {
   "name": "react-component-data-table",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
@@ -56,4 +56,5 @@ "main": "index.js",
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "classnames": "^2.2.4"
   }
 }

README.md

@@ -36,2 +36,4 @@ # react-component-data-table
 -   [x] Pagination
+-   [x] Pagination - 自定义上下页翻页样式
+-   [ ] Pagination - 自定义页码样式
 -   [x] DataTableWithPagination
@@ -229,3 +231,3 @@ -   [x] DataTableWithPagination 添加索引显示
 -   `pageSize` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** [ 10 ] - 每页记录数
--   `onPageChange` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** 分页事件监听
+-   `onPageChange` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [ ()=>null ] - 分页事件监听
 -   `total` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 总记录数
@@ -235,1 +237,3 @@ -   `style` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 样式
 -   `displayPageCount` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** [ 5 ] - 最多可以显示多少页面
+-   `renderNextPage` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [ ()=>(">") ] - `>`按钮样式
+-   `renderPrevPage` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [ ()=>("<") ] - `<`按钮样式

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34283

4.72%

Number of package files

10

11.11%

Lines of code

588

8.69%

Number of lines in readme file

237

1.72%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

4

33.33%

No dependency changes