qbs-react-grid 1.0.40 → 1.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Pagination.js +34 -36
- package/es/qbsTable/QbsTable.js +1 -1
- package/lib/Pagination.js +34 -36
- package/lib/qbsTable/QbsTable.js +1 -1
- package/package.json +1 -1
- package/src/Pagination.tsx +27 -28
- package/src/qbsTable/QbsTable.tsx +2 -1
package/es/Pagination.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import { getRowDisplayRange } from './qbsTable/utilities/tablecalc';
|
|
3
3
|
var PageIndex = function PageIndex(_ref) {
|
|
4
|
-
var
|
|
4
|
+
var currentPage = _ref.currentPage,
|
|
5
5
|
handleFirst = _ref.handleFirst,
|
|
6
6
|
pageCount = _ref.pageCount;
|
|
7
|
-
console.log(
|
|
7
|
+
console.log(currentPage, 'insdie subfunction');
|
|
8
8
|
var renderPageNumbers = function renderPageNumbers() {
|
|
9
|
-
console.log(
|
|
9
|
+
console.log(currentPage, 'insdie last function');
|
|
10
10
|
var pageNumbers = [];
|
|
11
11
|
|
|
12
12
|
// Add ellipsis if necessary
|
|
13
|
-
if (
|
|
13
|
+
if (currentPage > 3) {
|
|
14
14
|
pageNumbers.push('...');
|
|
15
15
|
}
|
|
16
|
-
for (var i = Math.max(1,
|
|
16
|
+
for (var i = Math.max(1, currentPage - 2); i <= Math.min(pageCount, currentPage + 2); i++) {
|
|
17
17
|
pageNumbers.push(i);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
// Add ellipsis if necessary
|
|
21
|
-
if (
|
|
21
|
+
if (currentPage < pageCount - 2) {
|
|
22
22
|
pageNumbers.push('...');
|
|
23
23
|
}
|
|
24
24
|
return pageNumbers.map(function (pageNumber) {
|
|
@@ -27,10 +27,10 @@ var PageIndex = function PageIndex(_ref) {
|
|
|
27
27
|
onClick: function onClick() {
|
|
28
28
|
return handleFirst(pageNumber);
|
|
29
29
|
},
|
|
30
|
-
className: "block-item " + (pageNumber ===
|
|
30
|
+
className: "block-item " + (pageNumber === currentPage ? 'selected' : '')
|
|
31
31
|
}, pageNumber) : /*#__PURE__*/React.createElement("span", {
|
|
32
32
|
key: pageNumber,
|
|
33
|
-
className: "block-item " + (pageNumber ===
|
|
33
|
+
className: "block-item " + (pageNumber === currentPage ? 'selected' : '')
|
|
34
34
|
}, pageNumber));
|
|
35
35
|
});
|
|
36
36
|
};
|
|
@@ -49,46 +49,44 @@ var Pagination = function Pagination(_ref2) {
|
|
|
49
49
|
_paginationProps$rows = paginationProps.rowsPerPage,
|
|
50
50
|
rowsPerPage = _paginationProps$rows === void 0 ? 10 : _paginationProps$rows,
|
|
51
51
|
onPagination = paginationProps.onPagination;
|
|
52
|
-
var _useState = useState(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
var _useState2 = useState(rowsPerPage),
|
|
56
|
-
rowsPerPageState = _useState2[0],
|
|
57
|
-
setRowsPerPageState = _useState2[1];
|
|
52
|
+
var _useState = useState(rowsPerPage),
|
|
53
|
+
rowsPerPageState = _useState[0],
|
|
54
|
+
setRowsPerPageState = _useState[1];
|
|
58
55
|
var dropData = dropOptions != null ? dropOptions : [10, 20, 50, 100, 200];
|
|
59
|
-
var
|
|
60
|
-
pageCount =
|
|
61
|
-
setPageCount =
|
|
56
|
+
var _useState2 = useState(1),
|
|
57
|
+
pageCount = _useState2[0],
|
|
58
|
+
setPageCount = _useState2[1];
|
|
62
59
|
var handleRowsPerPage = function handleRowsPerPage(e) {
|
|
63
60
|
var value = parseInt(e.target.value);
|
|
64
61
|
setRowsPerPageState(value);
|
|
65
|
-
onRowsPerPage === null || onRowsPerPage === void 0 ? void 0 : onRowsPerPage(value,
|
|
62
|
+
onRowsPerPage === null || onRowsPerPage === void 0 ? void 0 : onRowsPerPage(value, currentPage);
|
|
66
63
|
};
|
|
67
64
|
var handleFirst = function handleFirst(index) {
|
|
68
|
-
setCurrenIndex(index);
|
|
69
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(index,
|
|
65
|
+
// setCurrenIndex(index);
|
|
66
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(index, currentPage);
|
|
70
67
|
};
|
|
71
68
|
var handleLast = function handleLast() {
|
|
72
69
|
var value = pageCount != null ? pageCount : 0;
|
|
73
|
-
setCurrenIndex(value);
|
|
74
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(value,
|
|
70
|
+
// setCurrenIndex(value);
|
|
71
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(value, currentPage);
|
|
75
72
|
};
|
|
76
|
-
useEffect(
|
|
77
|
-
|
|
78
|
-
}, [currentPage]);
|
|
73
|
+
// useEffect(() => {
|
|
74
|
+
// setCurrenIndex(currentPage);
|
|
75
|
+
// }, [currentPage]);
|
|
76
|
+
|
|
79
77
|
useEffect(function () {
|
|
80
78
|
var calculatedPageCount = Math.ceil(total / rowsPerPageState);
|
|
81
79
|
setPageCount(calculatedPageCount);
|
|
82
80
|
}, [total, rowsPerPageState]);
|
|
83
81
|
var handlePrevious = function handlePrevious() {
|
|
84
|
-
setCurrenIndex(
|
|
85
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(
|
|
82
|
+
// setCurrenIndex(currentPage - 1);
|
|
83
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentPage - 1, currentPage);
|
|
86
84
|
};
|
|
87
85
|
var handleNext = function handleNext() {
|
|
88
|
-
setCurrenIndex(
|
|
89
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(
|
|
86
|
+
// setCurrenIndex(currentPage + 1);
|
|
87
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentPage + 1, currentPage);
|
|
90
88
|
};
|
|
91
|
-
console.log(
|
|
89
|
+
console.log(currentPage, 'outside function');
|
|
92
90
|
return /*#__PURE__*/React.createElement("div", {
|
|
93
91
|
className: 'qbs-table-custom-pagination',
|
|
94
92
|
style: {
|
|
@@ -101,7 +99,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
101
99
|
className: "qbs-table-pagination-right-block"
|
|
102
100
|
}, /*#__PURE__*/React.createElement("button", {
|
|
103
101
|
className: "qbs-table-icon-container",
|
|
104
|
-
disabled:
|
|
102
|
+
disabled: currentPage == 1,
|
|
105
103
|
onClick: function onClick() {
|
|
106
104
|
return handleFirst(1);
|
|
107
105
|
}
|
|
@@ -119,7 +117,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
119
117
|
"stroke-linejoin": "round"
|
|
120
118
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
121
119
|
className: "qbs-table-icon-container",
|
|
122
|
-
disabled:
|
|
120
|
+
disabled: currentPage < 2,
|
|
123
121
|
onClick: function onClick() {
|
|
124
122
|
return handlePrevious();
|
|
125
123
|
}
|
|
@@ -138,13 +136,13 @@ var Pagination = function Pagination(_ref2) {
|
|
|
138
136
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
139
137
|
className: "block-container"
|
|
140
138
|
}, /*#__PURE__*/React.createElement(PageIndex, {
|
|
141
|
-
key:
|
|
142
|
-
|
|
139
|
+
key: currentPage,
|
|
140
|
+
currentPage: currentPage,
|
|
143
141
|
handleFirst: handleFirst,
|
|
144
142
|
pageCount: pageCount
|
|
145
143
|
})), /*#__PURE__*/React.createElement("button", {
|
|
146
144
|
className: "qbs-table-icon-container",
|
|
147
|
-
disabled:
|
|
145
|
+
disabled: currentPage >= pageCount - 1,
|
|
148
146
|
onClick: function onClick() {
|
|
149
147
|
return handleNext();
|
|
150
148
|
}
|
|
@@ -162,7 +160,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
162
160
|
"stroke-linejoin": "round"
|
|
163
161
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
164
162
|
className: "qbs-table-icon-container",
|
|
165
|
-
disabled:
|
|
163
|
+
disabled: currentPage == pageCount,
|
|
166
164
|
onClick: function onClick() {
|
|
167
165
|
return handleLast();
|
|
168
166
|
}
|
package/es/qbsTable/QbsTable.js
CHANGED
|
@@ -152,7 +152,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
152
152
|
}, []);
|
|
153
153
|
useEffect(function () {
|
|
154
154
|
handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
|
|
155
|
-
}, [columns
|
|
155
|
+
}, [columns]);
|
|
156
156
|
var handleClear = function handleClear(_ref2) {
|
|
157
157
|
setCheckedKeys([]);
|
|
158
158
|
handleChecked([]);
|
package/lib/Pagination.js
CHANGED
|
@@ -7,24 +7,24 @@ var _tablecalc = require("./qbsTable/utilities/tablecalc");
|
|
|
7
7
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
8
8
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
9
9
|
var PageIndex = function PageIndex(_ref) {
|
|
10
|
-
var
|
|
10
|
+
var currentPage = _ref.currentPage,
|
|
11
11
|
handleFirst = _ref.handleFirst,
|
|
12
12
|
pageCount = _ref.pageCount;
|
|
13
|
-
console.log(
|
|
13
|
+
console.log(currentPage, 'insdie subfunction');
|
|
14
14
|
var renderPageNumbers = function renderPageNumbers() {
|
|
15
|
-
console.log(
|
|
15
|
+
console.log(currentPage, 'insdie last function');
|
|
16
16
|
var pageNumbers = [];
|
|
17
17
|
|
|
18
18
|
// Add ellipsis if necessary
|
|
19
|
-
if (
|
|
19
|
+
if (currentPage > 3) {
|
|
20
20
|
pageNumbers.push('...');
|
|
21
21
|
}
|
|
22
|
-
for (var i = Math.max(1,
|
|
22
|
+
for (var i = Math.max(1, currentPage - 2); i <= Math.min(pageCount, currentPage + 2); i++) {
|
|
23
23
|
pageNumbers.push(i);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
// Add ellipsis if necessary
|
|
27
|
-
if (
|
|
27
|
+
if (currentPage < pageCount - 2) {
|
|
28
28
|
pageNumbers.push('...');
|
|
29
29
|
}
|
|
30
30
|
return pageNumbers.map(function (pageNumber) {
|
|
@@ -33,10 +33,10 @@ var PageIndex = function PageIndex(_ref) {
|
|
|
33
33
|
onClick: function onClick() {
|
|
34
34
|
return handleFirst(pageNumber);
|
|
35
35
|
},
|
|
36
|
-
className: "block-item " + (pageNumber ===
|
|
36
|
+
className: "block-item " + (pageNumber === currentPage ? 'selected' : '')
|
|
37
37
|
}, pageNumber) : /*#__PURE__*/_react["default"].createElement("span", {
|
|
38
38
|
key: pageNumber,
|
|
39
|
-
className: "block-item " + (pageNumber ===
|
|
39
|
+
className: "block-item " + (pageNumber === currentPage ? 'selected' : '')
|
|
40
40
|
}, pageNumber));
|
|
41
41
|
});
|
|
42
42
|
};
|
|
@@ -55,46 +55,44 @@ var Pagination = function Pagination(_ref2) {
|
|
|
55
55
|
_paginationProps$rows = paginationProps.rowsPerPage,
|
|
56
56
|
rowsPerPage = _paginationProps$rows === void 0 ? 10 : _paginationProps$rows,
|
|
57
57
|
onPagination = paginationProps.onPagination;
|
|
58
|
-
var _useState = (0, _react.useState)(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
var _useState2 = (0, _react.useState)(rowsPerPage),
|
|
62
|
-
rowsPerPageState = _useState2[0],
|
|
63
|
-
setRowsPerPageState = _useState2[1];
|
|
58
|
+
var _useState = (0, _react.useState)(rowsPerPage),
|
|
59
|
+
rowsPerPageState = _useState[0],
|
|
60
|
+
setRowsPerPageState = _useState[1];
|
|
64
61
|
var dropData = dropOptions != null ? dropOptions : [10, 20, 50, 100, 200];
|
|
65
|
-
var
|
|
66
|
-
pageCount =
|
|
67
|
-
setPageCount =
|
|
62
|
+
var _useState2 = (0, _react.useState)(1),
|
|
63
|
+
pageCount = _useState2[0],
|
|
64
|
+
setPageCount = _useState2[1];
|
|
68
65
|
var handleRowsPerPage = function handleRowsPerPage(e) {
|
|
69
66
|
var value = parseInt(e.target.value);
|
|
70
67
|
setRowsPerPageState(value);
|
|
71
|
-
onRowsPerPage === null || onRowsPerPage === void 0 ? void 0 : onRowsPerPage(value,
|
|
68
|
+
onRowsPerPage === null || onRowsPerPage === void 0 ? void 0 : onRowsPerPage(value, currentPage);
|
|
72
69
|
};
|
|
73
70
|
var handleFirst = function handleFirst(index) {
|
|
74
|
-
setCurrenIndex(index);
|
|
75
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(index,
|
|
71
|
+
// setCurrenIndex(index);
|
|
72
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(index, currentPage);
|
|
76
73
|
};
|
|
77
74
|
var handleLast = function handleLast() {
|
|
78
75
|
var value = pageCount != null ? pageCount : 0;
|
|
79
|
-
setCurrenIndex(value);
|
|
80
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(value,
|
|
76
|
+
// setCurrenIndex(value);
|
|
77
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(value, currentPage);
|
|
81
78
|
};
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}, [currentPage]);
|
|
79
|
+
// useEffect(() => {
|
|
80
|
+
// setCurrenIndex(currentPage);
|
|
81
|
+
// }, [currentPage]);
|
|
82
|
+
|
|
85
83
|
(0, _react.useEffect)(function () {
|
|
86
84
|
var calculatedPageCount = Math.ceil(total / rowsPerPageState);
|
|
87
85
|
setPageCount(calculatedPageCount);
|
|
88
86
|
}, [total, rowsPerPageState]);
|
|
89
87
|
var handlePrevious = function handlePrevious() {
|
|
90
|
-
setCurrenIndex(
|
|
91
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(
|
|
88
|
+
// setCurrenIndex(currentPage - 1);
|
|
89
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentPage - 1, currentPage);
|
|
92
90
|
};
|
|
93
91
|
var handleNext = function handleNext() {
|
|
94
|
-
setCurrenIndex(
|
|
95
|
-
onPagination === null || onPagination === void 0 ? void 0 : onPagination(
|
|
92
|
+
// setCurrenIndex(currentPage + 1);
|
|
93
|
+
onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentPage + 1, currentPage);
|
|
96
94
|
};
|
|
97
|
-
console.log(
|
|
95
|
+
console.log(currentPage, 'outside function');
|
|
98
96
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
99
97
|
className: 'qbs-table-custom-pagination',
|
|
100
98
|
style: {
|
|
@@ -107,7 +105,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
107
105
|
className: "qbs-table-pagination-right-block"
|
|
108
106
|
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
109
107
|
className: "qbs-table-icon-container",
|
|
110
|
-
disabled:
|
|
108
|
+
disabled: currentPage == 1,
|
|
111
109
|
onClick: function onClick() {
|
|
112
110
|
return handleFirst(1);
|
|
113
111
|
}
|
|
@@ -125,7 +123,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
125
123
|
"stroke-linejoin": "round"
|
|
126
124
|
}))), /*#__PURE__*/_react["default"].createElement("button", {
|
|
127
125
|
className: "qbs-table-icon-container",
|
|
128
|
-
disabled:
|
|
126
|
+
disabled: currentPage < 2,
|
|
129
127
|
onClick: function onClick() {
|
|
130
128
|
return handlePrevious();
|
|
131
129
|
}
|
|
@@ -144,13 +142,13 @@ var Pagination = function Pagination(_ref2) {
|
|
|
144
142
|
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
145
143
|
className: "block-container"
|
|
146
144
|
}, /*#__PURE__*/_react["default"].createElement(PageIndex, {
|
|
147
|
-
key:
|
|
148
|
-
|
|
145
|
+
key: currentPage,
|
|
146
|
+
currentPage: currentPage,
|
|
149
147
|
handleFirst: handleFirst,
|
|
150
148
|
pageCount: pageCount
|
|
151
149
|
})), /*#__PURE__*/_react["default"].createElement("button", {
|
|
152
150
|
className: "qbs-table-icon-container",
|
|
153
|
-
disabled:
|
|
151
|
+
disabled: currentPage >= pageCount - 1,
|
|
154
152
|
onClick: function onClick() {
|
|
155
153
|
return handleNext();
|
|
156
154
|
}
|
|
@@ -168,7 +166,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
168
166
|
"stroke-linejoin": "round"
|
|
169
167
|
}))), /*#__PURE__*/_react["default"].createElement("button", {
|
|
170
168
|
className: "qbs-table-icon-container",
|
|
171
|
-
disabled:
|
|
169
|
+
disabled: currentPage == pageCount,
|
|
172
170
|
onClick: function onClick() {
|
|
173
171
|
return handleLast();
|
|
174
172
|
}
|
package/lib/qbsTable/QbsTable.js
CHANGED
|
@@ -159,7 +159,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
159
159
|
}, []);
|
|
160
160
|
(0, _react.useEffect)(function () {
|
|
161
161
|
handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
|
|
162
|
-
}, [columns
|
|
162
|
+
}, [columns]);
|
|
163
163
|
var handleClear = function handleClear(_ref2) {
|
|
164
164
|
setCheckedKeys([]);
|
|
165
165
|
handleChecked([]);
|
package/package.json
CHANGED
package/src/Pagination.tsx
CHANGED
|
@@ -13,24 +13,24 @@ type PageProps = {
|
|
|
13
13
|
onPagination?: (row: number, page: number) => void;
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
|
-
const PageIndex = ({
|
|
17
|
-
console.log(
|
|
16
|
+
const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
|
|
17
|
+
console.log(currentPage, 'insdie subfunction');
|
|
18
18
|
const renderPageNumbers = () => {
|
|
19
|
-
console.log(
|
|
19
|
+
console.log(currentPage, 'insdie last function');
|
|
20
20
|
|
|
21
21
|
const pageNumbers: any = [];
|
|
22
22
|
|
|
23
23
|
// Add ellipsis if necessary
|
|
24
|
-
if (
|
|
24
|
+
if (currentPage > 3) {
|
|
25
25
|
pageNumbers.push('...');
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
for (let i = Math.max(1,
|
|
28
|
+
for (let i = Math.max(1, currentPage - 2); i <= Math.min(pageCount, currentPage + 2); i++) {
|
|
29
29
|
pageNumbers.push(i);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
// Add ellipsis if necessary
|
|
33
|
-
if (
|
|
33
|
+
if (currentPage < pageCount - 2) {
|
|
34
34
|
pageNumbers.push('...');
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -40,14 +40,14 @@ const PageIndex = ({ currentIndex, handleFirst, pageCount }) => {
|
|
|
40
40
|
<span
|
|
41
41
|
key={pageNumber}
|
|
42
42
|
onClick={() => handleFirst(pageNumber)}
|
|
43
|
-
className={`block-item ${pageNumber ===
|
|
43
|
+
className={`block-item ${pageNumber === currentPage ? 'selected' : ''}`}
|
|
44
44
|
>
|
|
45
45
|
{pageNumber}
|
|
46
46
|
</span>
|
|
47
47
|
) : (
|
|
48
48
|
<span
|
|
49
49
|
key={pageNumber}
|
|
50
|
-
className={`block-item ${pageNumber ===
|
|
50
|
+
className={`block-item ${pageNumber === currentPage ? 'selected' : ''}`}
|
|
51
51
|
>
|
|
52
52
|
{pageNumber}
|
|
53
53
|
</span>
|
|
@@ -68,7 +68,6 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
|
|
|
68
68
|
onPagination
|
|
69
69
|
} = paginationProps;
|
|
70
70
|
|
|
71
|
-
const [currentIndex, setCurrenIndex] = useState<number>(currentPage ?? 1);
|
|
72
71
|
const [rowsPerPageState, setRowsPerPageState] = useState(rowsPerPage);
|
|
73
72
|
|
|
74
73
|
const dropData = dropOptions ?? [10, 20, 50, 100, 200];
|
|
@@ -76,21 +75,21 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
|
|
|
76
75
|
const handleRowsPerPage = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
77
76
|
const value = parseInt(e.target.value);
|
|
78
77
|
setRowsPerPageState(value);
|
|
79
|
-
onRowsPerPage?.(value,
|
|
78
|
+
onRowsPerPage?.(value, currentPage);
|
|
80
79
|
};
|
|
81
80
|
const handleFirst = (index: number) => {
|
|
82
|
-
setCurrenIndex(index);
|
|
83
|
-
onPagination?.(index,
|
|
81
|
+
// setCurrenIndex(index);
|
|
82
|
+
onPagination?.(index, currentPage);
|
|
84
83
|
};
|
|
85
84
|
|
|
86
85
|
const handleLast = () => {
|
|
87
86
|
const value = pageCount ?? 0;
|
|
88
|
-
setCurrenIndex(value);
|
|
89
|
-
onPagination?.(value,
|
|
87
|
+
// setCurrenIndex(value);
|
|
88
|
+
onPagination?.(value, currentPage);
|
|
90
89
|
};
|
|
91
|
-
useEffect(() => {
|
|
92
|
-
|
|
93
|
-
}, [currentPage]);
|
|
90
|
+
// useEffect(() => {
|
|
91
|
+
// setCurrenIndex(currentPage);
|
|
92
|
+
// }, [currentPage]);
|
|
94
93
|
|
|
95
94
|
useEffect(() => {
|
|
96
95
|
const calculatedPageCount = Math.ceil(total / rowsPerPageState);
|
|
@@ -98,14 +97,14 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
|
|
|
98
97
|
}, [total, rowsPerPageState]);
|
|
99
98
|
|
|
100
99
|
const handlePrevious = () => {
|
|
101
|
-
setCurrenIndex(
|
|
102
|
-
onPagination?.(
|
|
100
|
+
// setCurrenIndex(currentPage - 1);
|
|
101
|
+
onPagination?.(currentPage - 1, currentPage);
|
|
103
102
|
};
|
|
104
103
|
const handleNext = () => {
|
|
105
|
-
setCurrenIndex(
|
|
106
|
-
onPagination?.(
|
|
104
|
+
// setCurrenIndex(currentPage + 1);
|
|
105
|
+
onPagination?.(currentPage + 1, currentPage);
|
|
107
106
|
};
|
|
108
|
-
console.log(
|
|
107
|
+
console.log(currentPage, 'outside function');
|
|
109
108
|
|
|
110
109
|
return (
|
|
111
110
|
<div
|
|
@@ -122,7 +121,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
|
|
|
122
121
|
<div className="qbs-table-pagination-right-block">
|
|
123
122
|
<button
|
|
124
123
|
className="qbs-table-icon-container"
|
|
125
|
-
disabled={
|
|
124
|
+
disabled={currentPage == 1}
|
|
126
125
|
onClick={() => handleFirst(1)}
|
|
127
126
|
>
|
|
128
127
|
<svg
|
|
@@ -143,7 +142,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
|
|
|
143
142
|
</button>
|
|
144
143
|
<button
|
|
145
144
|
className="qbs-table-icon-container"
|
|
146
|
-
disabled={
|
|
145
|
+
disabled={currentPage < 2}
|
|
147
146
|
onClick={() => handlePrevious()}
|
|
148
147
|
>
|
|
149
148
|
<svg
|
|
@@ -164,15 +163,15 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
|
|
|
164
163
|
</button>
|
|
165
164
|
<div className="block-container">
|
|
166
165
|
<PageIndex
|
|
167
|
-
key={
|
|
168
|
-
|
|
166
|
+
key={currentPage}
|
|
167
|
+
currentPage={currentPage}
|
|
169
168
|
handleFirst={handleFirst}
|
|
170
169
|
pageCount={pageCount}
|
|
171
170
|
/>
|
|
172
171
|
</div>
|
|
173
172
|
<button
|
|
174
173
|
className="qbs-table-icon-container"
|
|
175
|
-
disabled={
|
|
174
|
+
disabled={currentPage >= pageCount - 1}
|
|
176
175
|
onClick={() => handleNext()}
|
|
177
176
|
>
|
|
178
177
|
<svg
|
|
@@ -193,7 +192,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
|
|
|
193
192
|
</button>
|
|
194
193
|
<button
|
|
195
194
|
className="qbs-table-icon-container"
|
|
196
|
-
disabled={
|
|
195
|
+
disabled={currentPage == pageCount}
|
|
197
196
|
onClick={() => handleLast()}
|
|
198
197
|
>
|
|
199
198
|
<svg
|