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

Comparing version 1.3.0 to 1.3.1

assets/css/data-table.css

+/**
+ * Created by jean.h.ma on 12/03/2018.
+ */
+.data-table {
+  border-radius: 5px;
+  background-color: white;
+  border-collapse: collapse;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  padding: 2px; }
+  .data-table thead {
+    background-color: silver; }
+    .data-table thead th {
+      background-image: linear-gradient(#646f7f, #4a5564);
+      color: white;
+      font-family: 'Patua One', 'cursive';
+      text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+      font-size: 16px;
+      padding: 20px; }
+      .data-table thead th > div {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center; }
+        .data-table thead th > div > div {
+          height: 100%; }
+    .data-table thead th:first-child {
+      border-top-left-radius: 5px; }
+    .data-table thead th:last-child {
+      border-top-right-radius: 5px; }
+  .data-table tbody tr td {
+    font-size: 13px;
+    padding: 20px;
+    color: #5f6062;
+    border-bottom: 1px solid #e0e0e0; }
+  .data-table tbody tr:nth-child(2n) {
+    background-color: #f0f3f5; }
+
+.data-table-fixed-head thead {
+  display: flex;
+  width: 100%; }
+  .data-table-fixed-head thead tr {
+    width: 100%;
+    display: flex; }
+    .data-table-fixed-head thead tr th {
+      flex: 1 0 auto; }
+
+.data-table-fixed-head tbody {
+  display: flex;
+  flex-direction: column;
+  overflow: auto; }
+  .data-table-fixed-head tbody tr {
+    width: 100%;
+    display: flex;
+    flex: 0 0 auto; }
+    .data-table-fixed-head tbody tr td {
+      flex: 1 0 auto; }
+
+.data-table-sort {
+  display: flex;
+  flex-direction: column;
+  margin-left: 5px; }
+  .data-table-sort img {
+    width: 10px;
+    height: 10px; }
+  .data-table-sort a {
+    display: flex;
+    opacity: 0.2; }
+  .data-table-sort a:first-child {
+    align-items: flex-end; }
+    .data-table-sort a:first-child img {
+      transform: rotate(180deg); }
+  .data-table-sort a:last-child {
+    align-items: flex-start; }
+  .data-table-sort a.active {
+    opacity: 1; }
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+  padding: 0;
+  user-select: none; }
+  .pagination li {
+    list-style: none;
+    display: flex;
+    align-items: center; }
+    .pagination li a {
+      color: #5f6062;
+      outline: none;
+      text-decoration: none;
+      padding: 8px 12px;
+      border-radius: 4px;
+      display: block; }
+  .pagination li.disabled {
+    cursor: not-allowed;
+    opacity: 0.5; }
+    .pagination li.disabled a {
+      pointer-events: none;
+      color: gray; }
+  .pagination li.cur a {
+    color: white;
+    background-color: #ee6e73; }

components/DataTable.js

@@ -19,6 +19,2 @@ "use strict";
 
-var _classnames = require("classnames");
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _Sort = require("./Sort");
@@ -245,3 +241,3 @@
 					ref: "table",
-					className: (0, _classnames2.default)('data-table', this.props.fixedHead && "data-table-fixed-head", this.props.className),
+					className: this.props.className,
 					style: this.props.style },
@@ -248,0 +244,0 @@ _react2.default.createElement(

components/Pagination.js

@@ -17,6 +17,2 @@ "use strict";
 
-var _classnames = require("classnames");
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -142,3 +138,3 @@
 					"li",
-					{ className: (0, _classnames2.default)(disabledPrevButton ? "disabled" : '') },
+					{ className: disabledPrevButton ? "disabled" : '' },
 					_react2.default.createElement(
@@ -167,3 +163,3 @@ "a",
 						{
-							className: (0, _classnames2.default)(_this2.state.pageIndex === num ? "cur" : ''),
+							className: _this2.state.pageIndex === num ? "cur" : '',
 							key: num },
@@ -191,3 +187,3 @@ _react2.default.createElement(
 					"li",
-					{ className: (0, _classnames2.default)(disabledNextButton ? "disabled" : "") },
+					{ className: disabledNextButton ? "disabled" : "" },
 					_react2.default.createElement(
@@ -274,6 +270,6 @@ "a",
 	},
-	className: "pagination",
 	displayPageCount: 5,
 	renderNextPage: function renderNextPage() {
-		return _react2.default.createElement("img", { style: { width: 20, height: 20, transform: 'rotate(180deg)' }, src: require('../assets/img/angle-left.svg') });
+		return _react2.default.createElement("img", { style: { width: 20, height: 20, transform: 'rotate(180deg)' },
+			src: require('../assets/img/angle-left.svg') });
 	},
@@ -280,0 +276,0 @@ renderPrevPage: function renderPrevPage() {

components/Sort.js

@@ -17,6 +17,2 @@ "use strict";
 
-var _classnames = require("classnames");
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,3 +49,3 @@
 					style: this.props.style,
-					className: (0, _classnames2.default)('data-table-sort', this.props.className) },
+					className: this.props.className },
 				_react2.default.createElement(
@@ -56,0 +52,0 @@ "a",

package.json

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

README.md

@@ -36,3 +36,3 @@ # react-component-data-table
 //如果需要自定义样式,请替换为自己的样式文件即可
-import 'react-component-data-table/asstes/css/DataTable.css'
+import 'react-component-data-table/asstes/css/data-table.css'
 import {DataTable,Pagination,DataTableWithPagination} from 'react-component-data-table'
@@ -43,2 +43,6 @@ ```
 
+### 1.3.1
+
+-   调整了自带样式,所有的组件在使用的时候必须指定对应样式
+
 ### 1.3.0
@@ -45,0 +49,0 @@

assets/css/DataTable.css

-.pagination {
-  display: flex;
-  flex-direction: row;
-  margin: 0;
-  padding: 0;
-  user-select: none; }
-  .pagination li {
-    list-style: none;
-    display: flex;
-    align-items: center; }
-    .pagination li a {
-      color: #5f6062;
-      outline: none;
-      text-decoration: none;
-      padding: 8px 12px;
-      border-radius: 4px;
-      display: block; }
-  .pagination li.disabled {
-    cursor: not-allowed;
-    opacity: 0.5; }
-    .pagination li.disabled a {
-      pointer-events: none;
-      color: gray; }
-  .pagination li.cur a {
-    color: white;
-    background-color: #ee6e73; }
-
-.data-table-sort {
-  display: flex;
-  flex-direction: column;
-  margin-left: 5px; }
-  .data-table-sort img {
-    width: 10px;
-    height: 10px; }
-  .data-table-sort a {
-    display: flex;
-    opacity: 0.2; }
-  .data-table-sort a:first-child {
-    align-items: flex-end; }
-    .data-table-sort a:first-child img {
-      transform: rotate(180deg); }
-  .data-table-sort a:last-child {
-    align-items: flex-start; }
-  .data-table-sort a.active {
-    opacity: 1; }
-
-.data-table {
-  border-radius: 5px;
-  background-color: white;
-  border-collapse: collapse;
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-  padding: 2px; }
-  .data-table thead {
-    background-color: silver; }
-    .data-table thead th {
-      background-image: linear-gradient(#646f7f, #4a5564);
-      color: white;
-      font-family: 'Patua One', 'cursive';
-      text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
-      font-size: 16px;
-      padding: 20px; }
-      .data-table thead th > div {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center; }
-        .data-table thead th > div > div {
-          height: 100%; }
-    .data-table thead th:first-child {
-      border-top-left-radius: 5px; }
-    .data-table thead th:last-child {
-      border-top-right-radius: 5px; }
-  .data-table tbody tr td {
-    font-size: 13px;
-    padding: 20px;
-    color: #5f6062;
-    border-bottom: 1px solid #e0e0e0; }
-  .data-table tbody tr:nth-child(2n) {
-    background-color: #f0f3f5; }
-
-.data-table-fixed-head thead {
-  display: flex;
-  width: 100%; }
-  .data-table-fixed-head thead tr {
-    width: 100%;
-    display: flex; }
-    .data-table-fixed-head thead tr th {
-      flex: 1 0 auto; }
-
-.data-table-fixed-head tbody {
-  display: flex;
-  flex-direction: column;
-  overflow: auto; }
-  .data-table-fixed-head tbody tr {
-    width: 100%;
-    display: flex;
-    flex: 0 0 auto; }
-    .data-table-fixed-head tbody tr td {
-      flex: 1 0 auto; }

assets/css/Pagination.css

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

assets/css/Sort.css

-.data-table-sort {
-  display: flex;
-  flex-direction: column;
-  margin-left: 5px; }
-  .data-table-sort img {
-    width: 10px;
-    height: 10px; }
-  .data-table-sort a {
-    display: flex;
-    opacity: 0.2; }
-  .data-table-sort a:first-child {
-    align-items: flex-end; }
-    .data-table-sort a:first-child img {
-      transform: rotate(180deg); }
-  .data-table-sort a:last-child {
-    align-items: flex-start; }
-  .data-table-sort a.active {
-    opacity: 1; }

No alert changes

Improved metrics

Dependency count

3

-25%

Number of lines in readme file

331

1.22%

Worsened metrics

Total package byte prevSize

48707

-2.94%

Number of package files

14

-12.5%

Lines of code

906

-4.93%

No dependency changes