@imposium-hub/components 2.5.11-10 → 2.5.11-11
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/dist/cjs/components/data-table/Paginator.js +35 -14
- package/dist/cjs/components/data-table/Paginator.js.map +1 -1
- package/dist/esm/components/data-table/Paginator.js +35 -14
- package/dist/esm/components/data-table/Paginator.js.map +1 -1
- package/package.json +1 -1
- package/src/components/data-table/Paginator.tsx +37 -15
|
@@ -51,29 +51,49 @@ var Paginator = function (_a) {
|
|
|
51
51
|
var manualPagination = _a.manualPagination, pageCount = _a.pageCount, pageIndex = _a.pageIndex, pageSize = _a.pageSize, pageOptions = _a.pageOptions, totalItems = _a.totalItems, canPreviousPage = _a.canPreviousPage, canNextPage = _a.canNextPage, gotoPage = _a.gotoPage, previousPage = _a.previousPage, nextPage = _a.nextPage, setPageSize = _a.setPageSize, itemsPerPage = _a.itemsPerPage, onItemsPerPage = _a.onItemsPerPage;
|
|
52
52
|
var _b = __read(React.useState(pageIndex), 2), getPageIndex = _b[0], setPageIndex = _b[1];
|
|
53
53
|
var _c = __read(React.useState(itemsPerPage), 2), getItemsPerPage = _c[0], setItemsPerPage = _c[1];
|
|
54
|
+
var _d = __read(React.useState(pageCount), 2), getPageCount = _d[0], setPageCount = _d[1];
|
|
55
|
+
var _e = __read(React.useState(''), 2), inputPageIndex = _e[0], setInputPageIndex = _e[1];
|
|
56
|
+
var _f = __read(React.useState(''), 2), inputItemsPerPage = _f[0], setInputItemsPerPage = _f[1];
|
|
57
|
+
React.useEffect(function () {
|
|
58
|
+
if (pageCount === 0) {
|
|
59
|
+
setPageCount(1);
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
setPageCount(pageCount);
|
|
63
|
+
}
|
|
64
|
+
}, [pageCount]);
|
|
54
65
|
React.useEffect(function () {
|
|
55
66
|
if (pageIndex !== getPageIndex) {
|
|
56
67
|
setPageIndex(pageIndex);
|
|
68
|
+
setInputPageIndex('');
|
|
57
69
|
}
|
|
58
|
-
|
|
70
|
+
if (itemsPerPage !== getItemsPerPage) {
|
|
71
|
+
setItemsPerPage(itemsPerPage);
|
|
72
|
+
setInputItemsPerPage('');
|
|
73
|
+
}
|
|
74
|
+
}, [pageIndex, itemsPerPage]);
|
|
59
75
|
var onItemsPerPageBlur = function () {
|
|
60
76
|
clearTimeout(textInputTimeout);
|
|
61
|
-
|
|
77
|
+
if (inputItemsPerPage !== '') {
|
|
78
|
+
onItemsPerPage(inputItemsPerPage);
|
|
79
|
+
}
|
|
62
80
|
};
|
|
63
81
|
var onGoToPageBlur = function () {
|
|
64
82
|
clearTimeout(textInputTimeout);
|
|
65
|
-
|
|
83
|
+
if (inputPageIndex !== '') {
|
|
84
|
+
gotoPage(inputPageIndex, pageSize);
|
|
85
|
+
}
|
|
66
86
|
};
|
|
67
87
|
var onItemsPerPageKeyDown = function (e) {
|
|
68
|
-
if (e.key === 'Enter') {
|
|
88
|
+
if (e.key === 'Enter' && inputItemsPerPage !== '') {
|
|
69
89
|
clearTimeout(textInputTimeout);
|
|
70
|
-
onItemsPerPage(
|
|
90
|
+
onItemsPerPage(inputItemsPerPage);
|
|
71
91
|
}
|
|
72
92
|
};
|
|
73
93
|
var onGoToPageKeyDown = function (e) {
|
|
74
|
-
if (e.key === 'Enter') {
|
|
94
|
+
if (e.key === 'Enter' && inputPageIndex !== '') {
|
|
75
95
|
clearTimeout(textInputTimeout);
|
|
76
|
-
gotoPage(
|
|
96
|
+
gotoPage(inputPageIndex, pageSize);
|
|
77
97
|
}
|
|
78
98
|
};
|
|
79
99
|
return (React.createElement("section", { className: 'ip-table-pagination' },
|
|
@@ -81,7 +101,7 @@ var Paginator = function (_a) {
|
|
|
81
101
|
React.createElement(Button_1.default, { style: 'subtle', size: 'small', tooltip: 'Go to first page', disabled: !canPreviousPage, onClick: function () { return gotoPage(1, pageSize); } }, icons_1.ICON_ANGLE_DOUBLE_LEFT),
|
|
82
102
|
React.createElement(Button_1.default, { style: 'subtle', size: 'small', tooltip: 'Go to previous page', disabled: !canPreviousPage, onClick: function () { return previousPage(); } }, icons_1.ICON_ANGLE_LEFT),
|
|
83
103
|
React.createElement(Button_1.default, { style: 'subtle', size: 'small', tooltip: 'Go to next page', disabled: !canNextPage, onClick: function () { return nextPage(); } }, icons_1.ICON_ANGLE_RIGHT),
|
|
84
|
-
React.createElement(Button_1.default, { style: 'subtle', size: 'small', tooltip: 'Go to last page', disabled: !canNextPage, onClick: function () { return gotoPage(
|
|
104
|
+
React.createElement(Button_1.default, { style: 'subtle', size: 'small', tooltip: 'Go to last page', disabled: !canNextPage, onClick: function () { return gotoPage(getPageCount, pageSize); } }, icons_1.ICON_ANGLE_DOUBLE_RIGHT),
|
|
85
105
|
"\u00A0\u00A0",
|
|
86
106
|
React.createElement("span", null,
|
|
87
107
|
copy_1.assets.table.page,
|
|
@@ -89,20 +109,21 @@ var Paginator = function (_a) {
|
|
|
89
109
|
React.createElement("strong", null,
|
|
90
110
|
getPageIndex,
|
|
91
111
|
" of ",
|
|
92
|
-
|
|
112
|
+
getPageCount),
|
|
93
113
|
"\u00A0\u00A0"),
|
|
94
114
|
React.createElement("span", null,
|
|
95
115
|
copy_1.assets.table.goToPage,
|
|
96
116
|
"\u00A0\u00A0",
|
|
97
|
-
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getPageIndex.toString(), onChange: function (e) {
|
|
117
|
+
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getPageIndex.toString(), value: inputPageIndex, onChange: function (e) {
|
|
98
118
|
var input = e.target.value;
|
|
99
119
|
var inputNum = Number(input);
|
|
100
120
|
var next;
|
|
101
121
|
clearTimeout(textInputTimeout);
|
|
102
|
-
|
|
122
|
+
setInputPageIndex(input);
|
|
123
|
+
if (!input || inputNum < 1 || inputNum > getPageCount) {
|
|
103
124
|
return;
|
|
104
125
|
}
|
|
105
|
-
if (inputNum >= 1 && inputNum <=
|
|
126
|
+
if (inputNum >= 1 && inputNum <= getPageCount) {
|
|
106
127
|
next = inputNum;
|
|
107
128
|
}
|
|
108
129
|
textInputTimeout = window.setTimeout(function () { return gotoPage(next, pageSize); }, 1000);
|
|
@@ -111,14 +132,14 @@ var Paginator = function (_a) {
|
|
|
111
132
|
React.createElement("span", null,
|
|
112
133
|
copy_1.assets.table.itemsPerPage,
|
|
113
134
|
"\u00A0\u00A0",
|
|
114
|
-
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getItemsPerPage.toString(),
|
|
135
|
+
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getItemsPerPage.toString(), value: inputItemsPerPage, onChange: function (e) {
|
|
115
136
|
var input = e.target.value;
|
|
116
137
|
var inputNum = Number(input);
|
|
117
138
|
clearTimeout(textInputTimeout);
|
|
139
|
+
setInputItemsPerPage(input);
|
|
118
140
|
if (!input || inputNum < 1) {
|
|
119
141
|
return;
|
|
120
142
|
}
|
|
121
|
-
setItemsPerPage(inputNum);
|
|
122
143
|
textInputTimeout = window.setTimeout(function () { return onItemsPerPage(inputNum); }, 1000);
|
|
123
144
|
}, onBlur: function () { return onItemsPerPageBlur(); }, onKeyDown: function (e) { return onItemsPerPageKeyDown(e); } }))),
|
|
124
145
|
React.createElement("span", { className: 'total-assets' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.js","sourceRoot":"","sources":["../../../../src/components/data-table/Paginator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,4DAAsC;AAEtC,+CAK+B;AAE/B,6CAAsD;AACtD,IAAI,gBAAwB,CAAC;AAE7B,IAAM,SAAS,GAAkB,UAAC,EAejC;QAdG,gBAAgB,sBAAA,EAChB,SAAS,eAAA,EACT,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,eAAe,qBAAA,EACf,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,cAAc,oBAAA;IAER,IAAA,KAAA,OAA+B,KAAK,CAAC,QAAQ,CAAS,SAAS,CAAC,IAAA,EAA/D,YAAY,QAAA,EAAE,YAAY,QAAqC,CAAC;IACjE,IAAA,KAAA,OAAqC,KAAK,CAAC,QAAQ,CAAS,YAAY,CAAC,IAAA,EAAxE,eAAe,QAAA,EAAE,eAAe,QAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"Paginator.js","sourceRoot":"","sources":["../../../../src/components/data-table/Paginator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,29 +6,49 @@ let textInputTimeout;
|
|
|
6
6
|
const Paginator = ({ manualPagination, pageCount, pageIndex, pageSize, pageOptions, totalItems, canPreviousPage, canNextPage, gotoPage, previousPage, nextPage, setPageSize, itemsPerPage, onItemsPerPage }) => {
|
|
7
7
|
const [getPageIndex, setPageIndex] = React.useState(pageIndex);
|
|
8
8
|
const [getItemsPerPage, setItemsPerPage] = React.useState(itemsPerPage);
|
|
9
|
+
const [getPageCount, setPageCount] = React.useState(pageCount);
|
|
10
|
+
const [inputPageIndex, setInputPageIndex] = React.useState('');
|
|
11
|
+
const [inputItemsPerPage, setInputItemsPerPage] = React.useState('');
|
|
12
|
+
React.useEffect(() => {
|
|
13
|
+
if (pageCount === 0) {
|
|
14
|
+
setPageCount(1);
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
setPageCount(pageCount);
|
|
18
|
+
}
|
|
19
|
+
}, [pageCount]);
|
|
9
20
|
React.useEffect(() => {
|
|
10
21
|
if (pageIndex !== getPageIndex) {
|
|
11
22
|
setPageIndex(pageIndex);
|
|
23
|
+
setInputPageIndex('');
|
|
12
24
|
}
|
|
13
|
-
|
|
25
|
+
if (itemsPerPage !== getItemsPerPage) {
|
|
26
|
+
setItemsPerPage(itemsPerPage);
|
|
27
|
+
setInputItemsPerPage('');
|
|
28
|
+
}
|
|
29
|
+
}, [pageIndex, itemsPerPage]);
|
|
14
30
|
const onItemsPerPageBlur = () => {
|
|
15
31
|
clearTimeout(textInputTimeout);
|
|
16
|
-
|
|
32
|
+
if (inputItemsPerPage !== '') {
|
|
33
|
+
onItemsPerPage(inputItemsPerPage);
|
|
34
|
+
}
|
|
17
35
|
};
|
|
18
36
|
const onGoToPageBlur = () => {
|
|
19
37
|
clearTimeout(textInputTimeout);
|
|
20
|
-
|
|
38
|
+
if (inputPageIndex !== '') {
|
|
39
|
+
gotoPage(inputPageIndex, pageSize);
|
|
40
|
+
}
|
|
21
41
|
};
|
|
22
42
|
const onItemsPerPageKeyDown = (e) => {
|
|
23
|
-
if (e.key === 'Enter') {
|
|
43
|
+
if (e.key === 'Enter' && inputItemsPerPage !== '') {
|
|
24
44
|
clearTimeout(textInputTimeout);
|
|
25
|
-
onItemsPerPage(
|
|
45
|
+
onItemsPerPage(inputItemsPerPage);
|
|
26
46
|
}
|
|
27
47
|
};
|
|
28
48
|
const onGoToPageKeyDown = (e) => {
|
|
29
|
-
if (e.key === 'Enter') {
|
|
49
|
+
if (e.key === 'Enter' && inputPageIndex !== '') {
|
|
30
50
|
clearTimeout(textInputTimeout);
|
|
31
|
-
gotoPage(
|
|
51
|
+
gotoPage(inputPageIndex, pageSize);
|
|
32
52
|
}
|
|
33
53
|
};
|
|
34
54
|
return (React.createElement("section", { className: 'ip-table-pagination' },
|
|
@@ -36,7 +56,7 @@ const Paginator = ({ manualPagination, pageCount, pageIndex, pageSize, pageOptio
|
|
|
36
56
|
React.createElement(Button, { style: 'subtle', size: 'small', tooltip: 'Go to first page', disabled: !canPreviousPage, onClick: () => gotoPage(1, pageSize) }, ICON_ANGLE_DOUBLE_LEFT),
|
|
37
57
|
React.createElement(Button, { style: 'subtle', size: 'small', tooltip: 'Go to previous page', disabled: !canPreviousPage, onClick: () => previousPage() }, ICON_ANGLE_LEFT),
|
|
38
58
|
React.createElement(Button, { style: 'subtle', size: 'small', tooltip: 'Go to next page', disabled: !canNextPage, onClick: () => nextPage() }, ICON_ANGLE_RIGHT),
|
|
39
|
-
React.createElement(Button, { style: 'subtle', size: 'small', tooltip: 'Go to last page', disabled: !canNextPage, onClick: () => gotoPage(
|
|
59
|
+
React.createElement(Button, { style: 'subtle', size: 'small', tooltip: 'Go to last page', disabled: !canNextPage, onClick: () => gotoPage(getPageCount, pageSize) }, ICON_ANGLE_DOUBLE_RIGHT),
|
|
40
60
|
"\u00A0\u00A0",
|
|
41
61
|
React.createElement("span", null,
|
|
42
62
|
copy.table.page,
|
|
@@ -44,20 +64,21 @@ const Paginator = ({ manualPagination, pageCount, pageIndex, pageSize, pageOptio
|
|
|
44
64
|
React.createElement("strong", null,
|
|
45
65
|
getPageIndex,
|
|
46
66
|
" of ",
|
|
47
|
-
|
|
67
|
+
getPageCount),
|
|
48
68
|
"\u00A0\u00A0"),
|
|
49
69
|
React.createElement("span", null,
|
|
50
70
|
copy.table.goToPage,
|
|
51
71
|
"\u00A0\u00A0",
|
|
52
|
-
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getPageIndex.toString(), onChange: (e) => {
|
|
72
|
+
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getPageIndex.toString(), value: inputPageIndex, onChange: (e) => {
|
|
53
73
|
const input = e.target.value;
|
|
54
74
|
const inputNum = Number(input);
|
|
55
75
|
let next;
|
|
56
76
|
clearTimeout(textInputTimeout);
|
|
57
|
-
|
|
77
|
+
setInputPageIndex(input);
|
|
78
|
+
if (!input || inputNum < 1 || inputNum > getPageCount) {
|
|
58
79
|
return;
|
|
59
80
|
}
|
|
60
|
-
if (inputNum >= 1 && inputNum <=
|
|
81
|
+
if (inputNum >= 1 && inputNum <= getPageCount) {
|
|
61
82
|
next = inputNum;
|
|
62
83
|
}
|
|
63
84
|
textInputTimeout = window.setTimeout(() => gotoPage(next, pageSize), 1000);
|
|
@@ -66,14 +87,14 @@ const Paginator = ({ manualPagination, pageCount, pageIndex, pageSize, pageOptio
|
|
|
66
87
|
React.createElement("span", null,
|
|
67
88
|
copy.table.itemsPerPage,
|
|
68
89
|
"\u00A0\u00A0",
|
|
69
|
-
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getItemsPerPage.toString(),
|
|
90
|
+
React.createElement("input", { className: 'paginator-input', type: 'number', placeholder: getItemsPerPage.toString(), value: inputItemsPerPage, onChange: (e) => {
|
|
70
91
|
const input = e.target.value;
|
|
71
92
|
const inputNum = Number(input);
|
|
72
93
|
clearTimeout(textInputTimeout);
|
|
94
|
+
setInputItemsPerPage(input);
|
|
73
95
|
if (!input || inputNum < 1) {
|
|
74
96
|
return;
|
|
75
97
|
}
|
|
76
|
-
setItemsPerPage(inputNum);
|
|
77
98
|
textInputTimeout = window.setTimeout(() => onItemsPerPage(inputNum), 1000);
|
|
78
99
|
}, onBlur: () => onItemsPerPageBlur(), onKeyDown: (e) => onItemsPerPageKeyDown(e) }))),
|
|
79
100
|
React.createElement("span", { className: 'total-assets' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.js","sourceRoot":"","sources":["../../../../src/components/data-table/Paginator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EACH,sBAAsB,EACtB,eAAe,EACf,uBAAuB,EACvB,gBAAgB,EACnB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACtD,IAAI,gBAAwB,CAAC;AAE7B,MAAM,SAAS,GAAkB,CAAC,EAC9B,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EACV,eAAe,EACf,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,cAAc,EACjB,EAAE,EAAE;IACD,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,SAAS,CAAC,CAAC;IACvE,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Paginator.js","sourceRoot":"","sources":["../../../../src/components/data-table/Paginator.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -29,34 +29,55 @@ const Paginator: React.FC<any> = ({
|
|
|
29
29
|
}) => {
|
|
30
30
|
const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
|
|
31
31
|
const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
|
|
32
|
+
const [getPageCount, setPageCount] = React.useState<number>(pageCount);
|
|
33
|
+
const [inputPageIndex, setInputPageIndex] = React.useState<string>('');
|
|
34
|
+
const [inputItemsPerPage, setInputItemsPerPage] = React.useState<string>('');
|
|
35
|
+
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
if (pageCount === 0) {
|
|
38
|
+
setPageCount(1);
|
|
39
|
+
} else {
|
|
40
|
+
setPageCount(pageCount);
|
|
41
|
+
}
|
|
42
|
+
}, [pageCount]);
|
|
32
43
|
|
|
33
44
|
React.useEffect(() => {
|
|
34
45
|
if (pageIndex !== getPageIndex) {
|
|
35
46
|
setPageIndex(pageIndex);
|
|
47
|
+
setInputPageIndex('');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (itemsPerPage !== getItemsPerPage) {
|
|
51
|
+
setItemsPerPage(itemsPerPage);
|
|
52
|
+
setInputItemsPerPage('');
|
|
36
53
|
}
|
|
37
|
-
}, [pageIndex]);
|
|
54
|
+
}, [pageIndex, itemsPerPage]);
|
|
38
55
|
|
|
39
56
|
const onItemsPerPageBlur = () => {
|
|
40
57
|
clearTimeout(textInputTimeout);
|
|
41
|
-
|
|
58
|
+
if (inputItemsPerPage !== '') {
|
|
59
|
+
onItemsPerPage(inputItemsPerPage);
|
|
60
|
+
}
|
|
42
61
|
};
|
|
43
62
|
|
|
44
63
|
const onGoToPageBlur = () => {
|
|
45
64
|
clearTimeout(textInputTimeout);
|
|
46
|
-
|
|
65
|
+
if (inputPageIndex !== '') {
|
|
66
|
+
gotoPage(inputPageIndex, pageSize);
|
|
67
|
+
}
|
|
47
68
|
};
|
|
48
69
|
|
|
49
70
|
const onItemsPerPageKeyDown = (e) => {
|
|
50
|
-
if (e.key === 'Enter') {
|
|
71
|
+
if (e.key === 'Enter' && inputItemsPerPage !== '') {
|
|
51
72
|
clearTimeout(textInputTimeout);
|
|
52
|
-
onItemsPerPage(
|
|
73
|
+
onItemsPerPage(inputItemsPerPage);
|
|
53
74
|
}
|
|
54
75
|
};
|
|
55
76
|
|
|
56
77
|
const onGoToPageKeyDown = (e) => {
|
|
57
|
-
if (e.key === 'Enter') {
|
|
78
|
+
if (e.key === 'Enter' && inputPageIndex !== '') {
|
|
58
79
|
clearTimeout(textInputTimeout);
|
|
59
|
-
gotoPage(
|
|
80
|
+
gotoPage(inputPageIndex, pageSize);
|
|
60
81
|
}
|
|
61
82
|
};
|
|
62
83
|
|
|
@@ -92,14 +113,14 @@ const Paginator: React.FC<any> = ({
|
|
|
92
113
|
size='small'
|
|
93
114
|
tooltip='Go to last page'
|
|
94
115
|
disabled={!canNextPage}
|
|
95
|
-
onClick={() => gotoPage(
|
|
116
|
+
onClick={() => gotoPage(getPageCount, pageSize)}>
|
|
96
117
|
{ICON_ANGLE_DOUBLE_RIGHT}
|
|
97
118
|
</Button>
|
|
98
119
|
|
|
99
120
|
<span>
|
|
100
121
|
{copy.table.page}
|
|
101
122
|
<strong>
|
|
102
|
-
{getPageIndex} of {
|
|
123
|
+
{getPageIndex} of {getPageCount}
|
|
103
124
|
</strong>
|
|
104
125
|
|
|
105
126
|
</span>
|
|
@@ -109,18 +130,19 @@ const Paginator: React.FC<any> = ({
|
|
|
109
130
|
className='paginator-input'
|
|
110
131
|
type='number'
|
|
111
132
|
placeholder={getPageIndex.toString()}
|
|
133
|
+
value={inputPageIndex}
|
|
112
134
|
onChange={(e) => {
|
|
113
135
|
const input = e.target.value;
|
|
114
136
|
const inputNum = Number(input);
|
|
115
137
|
let next: number;
|
|
116
138
|
|
|
117
139
|
clearTimeout(textInputTimeout);
|
|
118
|
-
|
|
119
|
-
if (!input || inputNum < 1 || inputNum >
|
|
140
|
+
setInputPageIndex(input);
|
|
141
|
+
if (!input || inputNum < 1 || inputNum > getPageCount) {
|
|
120
142
|
return;
|
|
121
143
|
}
|
|
122
144
|
|
|
123
|
-
if (inputNum >= 1 && inputNum <=
|
|
145
|
+
if (inputNum >= 1 && inputNum <= getPageCount) {
|
|
124
146
|
next = inputNum;
|
|
125
147
|
}
|
|
126
148
|
|
|
@@ -140,19 +162,19 @@ const Paginator: React.FC<any> = ({
|
|
|
140
162
|
className='paginator-input'
|
|
141
163
|
type='number'
|
|
142
164
|
placeholder={getItemsPerPage.toString()}
|
|
143
|
-
|
|
165
|
+
value={inputItemsPerPage}
|
|
144
166
|
onChange={(e) => {
|
|
145
167
|
const input = e.target.value;
|
|
146
168
|
const inputNum = Number(input);
|
|
147
169
|
|
|
148
170
|
clearTimeout(textInputTimeout);
|
|
149
171
|
|
|
172
|
+
setInputItemsPerPage(input);
|
|
173
|
+
|
|
150
174
|
if (!input || inputNum < 1) {
|
|
151
175
|
return;
|
|
152
176
|
}
|
|
153
177
|
|
|
154
|
-
setItemsPerPage(inputNum);
|
|
155
|
-
|
|
156
178
|
textInputTimeout = window.setTimeout(
|
|
157
179
|
() => onItemsPerPage(inputNum),
|
|
158
180
|
1000
|