@semcore/pagination 4.51.0-prerelease.2 → 16.0.0-prerelease.10
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/CHANGELOG.md +3 -3
- package/lib/cjs/Pagination.js +16 -17
- package/lib/cjs/Pagination.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/es6/Pagination.js +16 -16
- package/lib/es6/Pagination.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/esm/Pagination.mjs +326 -255
- package/lib/esm/index.mjs +2 -2
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +32 -32
- package/lib/esm/translations/de.json.mjs +23 -16
- package/lib/esm/translations/en.json.mjs +23 -16
- package/lib/esm/translations/es.json.mjs +23 -16
- package/lib/esm/translations/fr.json.mjs +23 -16
- package/lib/esm/translations/it.json.mjs +23 -16
- package/lib/esm/translations/ja.json.mjs +23 -16
- package/lib/esm/translations/ko.json.mjs +23 -16
- package/lib/esm/translations/nl.json.mjs +23 -16
- package/lib/esm/translations/pl.json.mjs +23 -16
- package/lib/esm/translations/pt.json.mjs +23 -16
- package/lib/esm/translations/ru.json.mjs +14 -10
- package/lib/esm/translations/sv.json.mjs +23 -16
- package/lib/esm/translations/tr.json.mjs +23 -16
- package/lib/esm/translations/vi.json.mjs +23 -16
- package/lib/esm/translations/zh.json.mjs +23 -16
- package/lib/types/index.d.ts +1 -1
- package/package.json +10 -13
package/lib/esm/Pagination.mjs
CHANGED
|
@@ -1,168 +1,208 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { sstyled
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import {
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
|
|
21
|
-
var
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
4
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
5
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
7
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
10
|
+
import React from "react";
|
|
11
|
+
import { Flex, ScreenReaderOnly } from "@semcore/flex-box";
|
|
12
|
+
import InputNumber from "@semcore/input-number";
|
|
13
|
+
import { Text } from "@semcore/typography";
|
|
14
|
+
import Button, { ButtonLink } from "@semcore/button";
|
|
15
|
+
import { Hint } from "@semcore/tooltip";
|
|
16
|
+
import ChevronDoubleLeft from "@semcore/icon/ChevronDoubleLeft/m";
|
|
17
|
+
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
18
|
+
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
19
|
+
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
20
|
+
var _excluded = ["styles", "getI18nText", "totalPages", "isLastOrSingle", "children"];
|
|
21
|
+
var style = (
|
|
22
22
|
/*__reshadow_css_start__*/
|
|
23
|
-
(
|
|
23
|
+
(sstyled.insert(
|
|
24
24
|
/*__inner_css_start__*/
|
|
25
|
-
".
|
|
26
|
-
"
|
|
25
|
+
".___SPagination_k9sct_gg_{justify-content:flex-start;align-items:center}.___SPagination_k9sct_gg_.__withGap_k9sct_gg_{gap:var(--intergalactic-spacing-4x, 16px)}.___SPagination_k9sct_gg_.__withGap_k9sct_gg_._size_l_k9sct_gg_{gap:var(--intergalactic-spacing-5x, 20px)}.___SNextPage_k9sct_gg_,.___SPrevPage_k9sct_gg_{align-self:center;margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNextPage_k9sct_gg_._size_l_k9sct_gg_,.___SPrevPage_k9sct_gg_._size_l_k9sct_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SLabel_k9sct_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SLabel_k9sct_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-4x, 16px)}.___SLabel_k9sct_gg_._size_l_k9sct_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-5x, 20px)}.___STotalPages_k9sct_gg_{align-self:center;line-height:normal;color:var(--intergalactic-text-link, #006dca)}.___STotalPagesLabel_k9sct_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-1x, 4px);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_k9sct_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_k9sct_gg_._size_l_k9sct_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SPageInput_k9sct_gg_{max-width:68px;margin-left:var(--intergalactic-spacing-1x, 4px)}.___SPageInput_k9sct_gg_._size_l_k9sct_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPageInput_k9sct_gg_:focus-within .___SPageInputAddon_k9sct_gg_{opacity:1;clip:initial;position:static}.___SPageInputAddon_k9sct_gg_{opacity:0;clip:rect(1px,1px,1px,1px);position:absolute}.___SLabel_k9sct_gg_,.___STotalPagesLabel_k9sct_gg_,.___STotalPages_k9sct_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SLabel_k9sct_gg_._size_l_k9sct_gg_,.___STotalPagesLabel_k9sct_gg_._size_l_k9sct_gg_,.___STotalPages_k9sct_gg_._size_l_k9sct_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}",
|
|
26
|
+
"k9sct_gg_"
|
|
27
27
|
), {
|
|
28
|
-
__SPagination: "
|
|
29
|
-
__SLabel: "
|
|
30
|
-
_size_l: "
|
|
31
|
-
__STotalPages: "
|
|
32
|
-
__STotalPagesLabel: "
|
|
33
|
-
__SPageInput: "
|
|
34
|
-
__SPageInputAddon: "
|
|
35
|
-
_withGap: "
|
|
36
|
-
__SNextPage: "
|
|
37
|
-
__SPrevPage: "
|
|
38
|
-
__STotalLastPages: "
|
|
28
|
+
"__SPagination": "___SPagination_k9sct_gg_",
|
|
29
|
+
"__SLabel": "___SLabel_k9sct_gg_",
|
|
30
|
+
"_size_l": "_size_l_k9sct_gg_",
|
|
31
|
+
"__STotalPages": "___STotalPages_k9sct_gg_",
|
|
32
|
+
"__STotalPagesLabel": "___STotalPagesLabel_k9sct_gg_",
|
|
33
|
+
"__SPageInput": "___SPageInput_k9sct_gg_",
|
|
34
|
+
"__SPageInputAddon": "___SPageInputAddon_k9sct_gg_",
|
|
35
|
+
"_withGap": "__withGap_k9sct_gg_",
|
|
36
|
+
"__SNextPage": "___SNextPage_k9sct_gg_",
|
|
37
|
+
"__SPrevPage": "___SPrevPage_k9sct_gg_",
|
|
38
|
+
"__STotalLastPages": "___STotalLastPages_k9sct_gg_"
|
|
39
39
|
})
|
|
40
|
-
)
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
40
|
+
);
|
|
41
|
+
var PaginationRoot = /* @__PURE__ */ function(_Component) {
|
|
42
|
+
_inherits(PaginationRoot2, _Component);
|
|
43
|
+
var _super = _createSuper(PaginationRoot2);
|
|
44
|
+
function PaginationRoot2() {
|
|
45
|
+
var _this;
|
|
46
|
+
_classCallCheck(this, PaginationRoot2);
|
|
47
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
48
|
+
args[_key] = arguments[_key];
|
|
49
|
+
}
|
|
50
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
51
|
+
_defineProperty(_assertThisInitialized(_this), "nextPageButtonRef", /* @__PURE__ */ React.createRef());
|
|
52
|
+
_defineProperty(_assertThisInitialized(_this), "prevPageButtonRef", /* @__PURE__ */ React.createRef());
|
|
53
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
49
54
|
// Crutch, so as not to take out `dirtyCurrentPage` in props
|
|
50
55
|
dirtyCurrentPage: void 0
|
|
51
|
-
})
|
|
56
|
+
});
|
|
57
|
+
_defineProperty(_assertThisInitialized(_this), "pageInputAddonRef", /* @__PURE__ */ React.createRef());
|
|
58
|
+
_defineProperty(_assertThisInitialized(_this), "returnLostFocus", function() {
|
|
52
59
|
setTimeout(function() {
|
|
53
|
-
if (document.activeElement
|
|
54
|
-
|
|
55
|
-
|
|
60
|
+
if (document.activeElement !== document.body) return;
|
|
61
|
+
var prevPageButton = _this.prevPageButtonRef.current;
|
|
62
|
+
var nextPageButton = _this.nextPageButtonRef.current;
|
|
63
|
+
if (prevPageButton && !prevPageButton.disabled) {
|
|
64
|
+
prevPageButton.focus();
|
|
65
|
+
} else if (nextPageButton && !nextPageButton.disabled) {
|
|
66
|
+
nextPageButton.focus();
|
|
56
67
|
}
|
|
57
68
|
}, 0);
|
|
58
|
-
})
|
|
59
|
-
|
|
69
|
+
});
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "handlePageChange", function(currentPage) {
|
|
71
|
+
currentPage = Number(currentPage);
|
|
72
|
+
if (Number.isNaN(currentPage)) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
_this.handlers.currentPage(currentPage);
|
|
76
|
+
_this.setState({
|
|
60
77
|
dirtyCurrentPage: void 0
|
|
61
|
-
}), e.returnLostFocus());
|
|
62
|
-
}), l(c(e), "handlePageValueChange", function(t) {
|
|
63
|
-
var a = e.state.dirtyCurrentPage;
|
|
64
|
-
Number.isNaN(Number(t)) && (t = a), e.setState({
|
|
65
|
-
dirtyCurrentPage: t
|
|
66
78
|
});
|
|
67
|
-
|
|
79
|
+
_this.returnLostFocus();
|
|
80
|
+
});
|
|
81
|
+
_defineProperty(_assertThisInitialized(_this), "handlePageValueChange", function(value) {
|
|
82
|
+
var dirtyCurrentPage = _this.state.dirtyCurrentPage;
|
|
83
|
+
if (Number.isNaN(Number(value))) {
|
|
84
|
+
value = dirtyCurrentPage;
|
|
85
|
+
}
|
|
86
|
+
_this.setState({
|
|
87
|
+
dirtyCurrentPage: value
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
_defineProperty(_assertThisInitialized(_this), "handlePageValueBlur", function() {
|
|
68
91
|
setTimeout(function() {
|
|
69
|
-
if (
|
|
70
|
-
var
|
|
71
|
-
|
|
72
|
-
dirtyCurrentPage:
|
|
92
|
+
if (_this.pageInputAddonRef.current !== document.activeElement) {
|
|
93
|
+
var currentPage = _this.asProps.currentPage;
|
|
94
|
+
_this.setState({
|
|
95
|
+
dirtyCurrentPage: currentPage
|
|
73
96
|
});
|
|
74
97
|
}
|
|
75
98
|
}, 0);
|
|
76
|
-
})
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
var
|
|
81
|
-
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
99
|
+
});
|
|
100
|
+
_defineProperty(_assertThisInitialized(_this), "getDirtyCurrentPage", function() {
|
|
101
|
+
var dirtyCurrentPage = _this.state.dirtyCurrentPage;
|
|
102
|
+
var totalPages = _this.asProps.totalPages;
|
|
103
|
+
var finalValue = dirtyCurrentPage > totalPages ? totalPages : dirtyCurrentPage;
|
|
104
|
+
return finalValue <= 0 ? 1 : finalValue;
|
|
105
|
+
});
|
|
106
|
+
_defineProperty(_assertThisInitialized(_this), "handlePageInputIconClick", function() {
|
|
107
|
+
var dirtyCurrentPage = _this.getDirtyCurrentPage();
|
|
108
|
+
_this.handlePageChange(dirtyCurrentPage);
|
|
109
|
+
});
|
|
110
|
+
_defineProperty(_assertThisInitialized(_this), "handlePageInputKeyDown", function(event) {
|
|
111
|
+
if (event.key !== "Enter") return;
|
|
112
|
+
var dirtyCurrentPage = _this.getDirtyCurrentPage();
|
|
113
|
+
_this.handlePageChange(dirtyCurrentPage);
|
|
114
|
+
});
|
|
115
|
+
_defineProperty(_assertThisInitialized(_this), "getFirstPageProps", function() {
|
|
116
|
+
var _this$asProps = _this.asProps, currentPage = _this$asProps.currentPage, getI18nText = _this$asProps.getI18nText, size = _this$asProps.size;
|
|
117
|
+
var disabled = currentPage <= 1;
|
|
89
118
|
return {
|
|
90
|
-
disabled
|
|
91
|
-
onClick: function() {
|
|
92
|
-
return
|
|
119
|
+
disabled,
|
|
120
|
+
onClick: function onClick() {
|
|
121
|
+
return _this.handlePageChange(1);
|
|
93
122
|
},
|
|
94
|
-
getI18nText
|
|
95
|
-
size
|
|
123
|
+
getI18nText,
|
|
124
|
+
size
|
|
96
125
|
};
|
|
97
|
-
})
|
|
98
|
-
|
|
126
|
+
});
|
|
127
|
+
_defineProperty(_assertThisInitialized(_this), "getPrevPageProps", function() {
|
|
128
|
+
var _this$asProps2 = _this.asProps, currentPage = _this$asProps2.currentPage, getI18nText = _this$asProps2.getI18nText, size = _this$asProps2.size;
|
|
129
|
+
var disabled = currentPage <= 1;
|
|
99
130
|
return {
|
|
100
|
-
currentPage
|
|
101
|
-
disabled
|
|
102
|
-
onClick: function() {
|
|
103
|
-
return
|
|
131
|
+
currentPage,
|
|
132
|
+
disabled,
|
|
133
|
+
onClick: function onClick() {
|
|
134
|
+
return _this.handlePageChange(currentPage - 1);
|
|
104
135
|
},
|
|
105
|
-
getI18nText
|
|
106
|
-
ref:
|
|
107
|
-
size
|
|
136
|
+
getI18nText,
|
|
137
|
+
ref: _this.nextPageButtonRef,
|
|
138
|
+
size
|
|
108
139
|
};
|
|
109
|
-
})
|
|
110
|
-
|
|
140
|
+
});
|
|
141
|
+
_defineProperty(_assertThisInitialized(_this), "getNextPageProps", function() {
|
|
142
|
+
var _this$asProps3 = _this.asProps, currentPage = _this$asProps3.currentPage, totalPages = _this$asProps3.totalPages, getI18nText = _this$asProps3.getI18nText, size = _this$asProps3.size;
|
|
143
|
+
var disabled = !(currentPage < totalPages);
|
|
111
144
|
return {
|
|
112
|
-
currentPage
|
|
113
|
-
disabled
|
|
114
|
-
onClick: function() {
|
|
115
|
-
return
|
|
145
|
+
currentPage,
|
|
146
|
+
disabled,
|
|
147
|
+
onClick: function onClick() {
|
|
148
|
+
return _this.handlePageChange(currentPage + 1);
|
|
116
149
|
},
|
|
117
|
-
getI18nText
|
|
118
|
-
ref:
|
|
119
|
-
size
|
|
150
|
+
getI18nText,
|
|
151
|
+
ref: _this.prevPageButtonRef,
|
|
152
|
+
size
|
|
120
153
|
};
|
|
121
|
-
})
|
|
122
|
-
|
|
154
|
+
});
|
|
155
|
+
_defineProperty(_assertThisInitialized(_this), "getPageInputProps", function() {
|
|
156
|
+
var _this$asProps4 = _this.asProps, getI18nText = _this$asProps4.getI18nText, locale = _this$asProps4.locale, size = _this$asProps4.size;
|
|
123
157
|
return {
|
|
124
|
-
getI18nText
|
|
125
|
-
locale
|
|
126
|
-
size
|
|
158
|
+
getI18nText,
|
|
159
|
+
locale,
|
|
160
|
+
size
|
|
127
161
|
};
|
|
128
|
-
})
|
|
162
|
+
});
|
|
163
|
+
_defineProperty(_assertThisInitialized(_this), "getPageInputAddonProps", function() {
|
|
129
164
|
return {
|
|
130
|
-
onClick:
|
|
131
|
-
ref:
|
|
132
|
-
onBlur:
|
|
165
|
+
onClick: _this.handlePageInputIconClick,
|
|
166
|
+
ref: _this.pageInputAddonRef,
|
|
167
|
+
onBlur: _this.handlePageValueBlur
|
|
133
168
|
};
|
|
134
|
-
})
|
|
135
|
-
|
|
169
|
+
});
|
|
170
|
+
_defineProperty(_assertThisInitialized(_this), "getPageInputValueProps", function() {
|
|
171
|
+
var dirtyCurrentPage = _this.state.dirtyCurrentPage;
|
|
172
|
+
var _this$asProps5 = _this.asProps, currentPage = _this$asProps5.currentPage, totalPages = _this$asProps5.totalPages, getI18nText = _this$asProps5.getI18nText, size = _this$asProps5.size;
|
|
136
173
|
return {
|
|
137
174
|
min: 1,
|
|
138
|
-
max:
|
|
139
|
-
disabled:
|
|
140
|
-
value:
|
|
141
|
-
onBlur:
|
|
142
|
-
onChange:
|
|
143
|
-
onKeyDown:
|
|
144
|
-
getI18nText
|
|
145
|
-
size
|
|
175
|
+
max: totalPages,
|
|
176
|
+
disabled: totalPages === 1,
|
|
177
|
+
value: dirtyCurrentPage === void 0 ? currentPage : dirtyCurrentPage,
|
|
178
|
+
onBlur: _this.handlePageValueBlur,
|
|
179
|
+
onChange: _this.handlePageValueChange,
|
|
180
|
+
onKeyDown: _this.handlePageInputKeyDown,
|
|
181
|
+
getI18nText,
|
|
182
|
+
size
|
|
146
183
|
};
|
|
147
|
-
})
|
|
148
|
-
|
|
184
|
+
});
|
|
185
|
+
_defineProperty(_assertThisInitialized(_this), "getTotalPagesProps", function() {
|
|
186
|
+
var _this$asProps6 = _this.asProps, currentPage = _this$asProps6.currentPage, totalPages = _this$asProps6.totalPages, getI18nText = _this$asProps6.getI18nText, locale = _this$asProps6.locale, size = _this$asProps6.size;
|
|
187
|
+
var formatter = new Intl.NumberFormat(locale, {
|
|
149
188
|
style: "decimal"
|
|
150
189
|
});
|
|
151
190
|
return {
|
|
152
|
-
totalPages
|
|
153
|
-
children:
|
|
154
|
-
isLastOrSingle:
|
|
155
|
-
onClick: function() {
|
|
156
|
-
return
|
|
191
|
+
totalPages,
|
|
192
|
+
children: formatter.format(totalPages),
|
|
193
|
+
isLastOrSingle: currentPage === totalPages,
|
|
194
|
+
onClick: function onClick() {
|
|
195
|
+
return _this.handlePageChange(totalPages);
|
|
157
196
|
},
|
|
158
|
-
getI18nText
|
|
159
|
-
size
|
|
197
|
+
getI18nText,
|
|
198
|
+
size
|
|
160
199
|
};
|
|
161
|
-
})
|
|
200
|
+
});
|
|
201
|
+
return _this;
|
|
162
202
|
}
|
|
163
|
-
|
|
203
|
+
_createClass(PaginationRoot2, [{
|
|
164
204
|
key: "uncontrolledProps",
|
|
165
|
-
value: function() {
|
|
205
|
+
value: function uncontrolledProps() {
|
|
166
206
|
return {
|
|
167
207
|
totalPages: null,
|
|
168
208
|
currentPage: null
|
|
@@ -170,177 +210,208 @@ var M = ["styles", "getI18nText", "totalPages", "isLastOrSingle", "children"], J
|
|
|
170
210
|
}
|
|
171
211
|
}, {
|
|
172
212
|
key: "componentDidUpdate",
|
|
173
|
-
value: function(
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
213
|
+
value: function componentDidUpdate(prevProps) {
|
|
214
|
+
if (prevProps.currentPage !== void 0 && prevProps.currentPage !== this.asProps.currentPage) {
|
|
215
|
+
this.setState({
|
|
216
|
+
dirtyCurrentPage: void 0
|
|
217
|
+
});
|
|
218
|
+
}
|
|
177
219
|
}
|
|
178
220
|
}, {
|
|
179
221
|
key: "render",
|
|
180
|
-
value: function() {
|
|
181
|
-
var
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
"
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
}), /* @__PURE__ */
|
|
222
|
+
value: function render() {
|
|
223
|
+
var _ref = this.asProps, _ref9;
|
|
224
|
+
var SPagination = Flex;
|
|
225
|
+
var _this$asProps7 = this.asProps, Children = _this$asProps7.Children, hasChildren = _this$asProps7.children, getI18nText = _this$asProps7.getI18nText, currentPage = _this$asProps7.currentPage, _this$asProps7$totalP = _this$asProps7.totalPages, totalPages = _this$asProps7$totalP === void 0 ? 1 : _this$asProps7$totalP;
|
|
226
|
+
return _ref9 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SPagination, _ref9.cn("SPagination", _objectSpread({}, assignProps({
|
|
227
|
+
"flexWrap": "wrap",
|
|
228
|
+
"withGap": !hasChildren,
|
|
229
|
+
"tag": "nav",
|
|
230
|
+
"aria-label": getI18nText("pagination")
|
|
231
|
+
}, _ref))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, totalPages === 1 ? null : /* @__PURE__ */ React.createElement(Flex, _ref9.cn("Flex", {}), /* @__PURE__ */ React.createElement(Pagination.FirstPage, null), /* @__PURE__ */ React.createElement(Pagination.PrevPage, null), /* @__PURE__ */ React.createElement(Pagination.NextPage, null)), /* @__PURE__ */ React.createElement(Flex, _ref9.cn("Flex", {
|
|
232
|
+
"alignItems": "center"
|
|
233
|
+
}), /* @__PURE__ */ React.createElement(Pagination.PageInput, null), /* @__PURE__ */ React.createElement(Pagination.TotalPages, null))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
|
|
190
234
|
"aria-live": "polite",
|
|
191
|
-
role: "status"
|
|
192
|
-
}),
|
|
235
|
+
"role": "status"
|
|
236
|
+
}), getI18nText("pageInputLabel"), " ", currentPage));
|
|
193
237
|
}
|
|
194
|
-
}])
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
238
|
+
}]);
|
|
239
|
+
return PaginationRoot2;
|
|
240
|
+
}(Component);
|
|
241
|
+
_defineProperty(PaginationRoot, "displayName", "Pagination");
|
|
242
|
+
_defineProperty(PaginationRoot, "defaultProps", function() {
|
|
198
243
|
return {
|
|
199
244
|
defaultCurrentPage: 1,
|
|
200
245
|
defaultTotalPages: 1,
|
|
201
|
-
i18n:
|
|
246
|
+
i18n: localizedMessages,
|
|
202
247
|
locale: "en",
|
|
203
248
|
size: "m"
|
|
204
249
|
};
|
|
205
250
|
});
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
var
|
|
209
|
-
|
|
210
|
-
var
|
|
211
|
-
function
|
|
212
|
-
|
|
251
|
+
_defineProperty(PaginationRoot, "style", style);
|
|
252
|
+
_defineProperty(PaginationRoot, "enhance", [i18nEnhance(localizedMessages)]);
|
|
253
|
+
var FirstPage = /* @__PURE__ */ function(_Component2) {
|
|
254
|
+
_inherits(FirstPage2, _Component2);
|
|
255
|
+
var _super2 = _createSuper(FirstPage2);
|
|
256
|
+
function FirstPage2() {
|
|
257
|
+
_classCallCheck(this, FirstPage2);
|
|
258
|
+
return _super2.apply(this, arguments);
|
|
213
259
|
}
|
|
214
|
-
|
|
260
|
+
_createClass(FirstPage2, [{
|
|
215
261
|
key: "render",
|
|
216
|
-
value: function() {
|
|
217
|
-
var
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
262
|
+
value: function render() {
|
|
263
|
+
var _ref2 = this.asProps;
|
|
264
|
+
var getI18nText = this.asProps.getI18nText;
|
|
265
|
+
return /* @__PURE__ */ React.createElement(Button, assignProps({
|
|
266
|
+
"aria-label": getI18nText("firstPage")
|
|
267
|
+
}, _ref2));
|
|
221
268
|
}
|
|
222
|
-
}])
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
269
|
+
}]);
|
|
270
|
+
return FirstPage2;
|
|
271
|
+
}(Component);
|
|
272
|
+
_defineProperty(FirstPage, "defaultProps", function(props) {
|
|
273
|
+
var hintContent = props.getI18nText("firstPage");
|
|
226
274
|
return {
|
|
227
|
-
children: /* @__PURE__ */
|
|
228
|
-
tag:
|
|
229
|
-
title:
|
|
275
|
+
children: /* @__PURE__ */ React.createElement(Button.Addon, {
|
|
276
|
+
tag: Hint,
|
|
277
|
+
title: hintContent,
|
|
230
278
|
timeout: [250, 50],
|
|
231
279
|
__excludeProps: ["aria-label"]
|
|
232
|
-
}, /* @__PURE__ */
|
|
280
|
+
}, /* @__PURE__ */ React.createElement(ChevronDoubleLeft, null))
|
|
233
281
|
};
|
|
234
282
|
});
|
|
235
|
-
var
|
|
236
|
-
|
|
237
|
-
var
|
|
238
|
-
function
|
|
239
|
-
|
|
283
|
+
var PrevPage = /* @__PURE__ */ function(_Component3) {
|
|
284
|
+
_inherits(PrevPage2, _Component3);
|
|
285
|
+
var _super3 = _createSuper(PrevPage2);
|
|
286
|
+
function PrevPage2() {
|
|
287
|
+
_classCallCheck(this, PrevPage2);
|
|
288
|
+
return _super3.apply(this, arguments);
|
|
240
289
|
}
|
|
241
|
-
|
|
290
|
+
_createClass(PrevPage2, [{
|
|
242
291
|
key: "render",
|
|
243
|
-
value: function() {
|
|
244
|
-
var
|
|
245
|
-
|
|
292
|
+
value: function render() {
|
|
293
|
+
var _ref3 = this.asProps, _ref10;
|
|
294
|
+
var SPrevPage = Button;
|
|
295
|
+
return _ref10 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SPrevPage, _ref10.cn("SPrevPage", _objectSpread({}, assignProps({}, _ref3))));
|
|
246
296
|
}
|
|
247
|
-
}])
|
|
248
|
-
|
|
249
|
-
|
|
297
|
+
}]);
|
|
298
|
+
return PrevPage2;
|
|
299
|
+
}(Component);
|
|
300
|
+
_defineProperty(PrevPage, "defaultProps", function(props) {
|
|
250
301
|
return {
|
|
251
|
-
children:
|
|
302
|
+
children: props.getI18nText("prevPageLabel")
|
|
252
303
|
};
|
|
253
304
|
});
|
|
254
|
-
var
|
|
255
|
-
|
|
256
|
-
var
|
|
257
|
-
function
|
|
258
|
-
|
|
305
|
+
var NextPage = /* @__PURE__ */ function(_Component4) {
|
|
306
|
+
_inherits(NextPage2, _Component4);
|
|
307
|
+
var _super4 = _createSuper(NextPage2);
|
|
308
|
+
function NextPage2() {
|
|
309
|
+
_classCallCheck(this, NextPage2);
|
|
310
|
+
return _super4.apply(this, arguments);
|
|
259
311
|
}
|
|
260
|
-
|
|
312
|
+
_createClass(NextPage2, [{
|
|
261
313
|
key: "render",
|
|
262
|
-
value: function() {
|
|
263
|
-
var
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
314
|
+
value: function render() {
|
|
315
|
+
var _ref4 = this.asProps, _ref11;
|
|
316
|
+
var SNextPage = Button;
|
|
317
|
+
return _ref11 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SNextPage, _ref11.cn("SNextPage", _objectSpread({}, assignProps({
|
|
318
|
+
"use": "primary",
|
|
319
|
+
"theme": "info"
|
|
320
|
+
}, _ref4))));
|
|
268
321
|
}
|
|
269
|
-
}])
|
|
270
|
-
|
|
271
|
-
|
|
322
|
+
}]);
|
|
323
|
+
return NextPage2;
|
|
324
|
+
}(Component);
|
|
325
|
+
_defineProperty(NextPage, "defaultProps", function(props) {
|
|
272
326
|
return {
|
|
273
|
-
children:
|
|
327
|
+
children: props.getI18nText("nextPageLabel")
|
|
274
328
|
};
|
|
275
329
|
});
|
|
276
|
-
var
|
|
277
|
-
|
|
278
|
-
var
|
|
279
|
-
function
|
|
280
|
-
|
|
330
|
+
var TotalPages = /* @__PURE__ */ function(_Component5) {
|
|
331
|
+
_inherits(TotalPages2, _Component5);
|
|
332
|
+
var _super5 = _createSuper(TotalPages2);
|
|
333
|
+
function TotalPages2() {
|
|
334
|
+
_classCallCheck(this, TotalPages2);
|
|
335
|
+
return _super5.apply(this, arguments);
|
|
281
336
|
}
|
|
282
|
-
|
|
337
|
+
_createClass(TotalPages2, [{
|
|
283
338
|
key: "render",
|
|
284
|
-
value: function() {
|
|
285
|
-
var
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
339
|
+
value: function render() {
|
|
340
|
+
var _ref5 = this.asProps, _ref12;
|
|
341
|
+
var STotalPages = ButtonLink;
|
|
342
|
+
var STotalPagesLabel = Text;
|
|
343
|
+
var STotalLastPages = Text;
|
|
344
|
+
var _this$asProps8 = this.asProps, styles = _this$asProps8.styles, getI18nText = _this$asProps8.getI18nText, totalPages = _this$asProps8.totalPages, isLastOrSingle = _this$asProps8.isLastOrSingle, children = _this$asProps8.children, other = _objectWithoutProperties(_this$asProps8, _excluded);
|
|
345
|
+
var textSize = other.size === "l" ? "300" : "200";
|
|
346
|
+
return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STotalPagesLabel, _ref12.cn("STotalPagesLabel", {
|
|
347
|
+
"size": textSize
|
|
348
|
+
}), getI18nText("totalPagesLabel")), isLastOrSingle ? /* @__PURE__ */ React.createElement(STotalLastPages, _ref12.cn("STotalLastPages", _objectSpread({
|
|
349
|
+
"size": textSize,
|
|
350
|
+
"aria-label": getI18nText("lastPage", {
|
|
351
|
+
lastPageNumber: totalPages
|
|
292
352
|
})
|
|
293
|
-
},
|
|
294
|
-
"aria-label":
|
|
295
|
-
lastPageNumber:
|
|
353
|
+
}, other)), children) : /* @__PURE__ */ React.createElement(STotalPages, _ref12.cn("STotalPages", _objectSpread({}, assignProps({
|
|
354
|
+
"aria-label": getI18nText("lastPage", {
|
|
355
|
+
lastPageNumber: totalPages
|
|
296
356
|
})
|
|
297
|
-
},
|
|
357
|
+
}, _ref5)))));
|
|
298
358
|
}
|
|
299
|
-
}])
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
359
|
+
}]);
|
|
360
|
+
return TotalPages2;
|
|
361
|
+
}(Component);
|
|
362
|
+
var PageInputValue = function PageInputValue2(props) {
|
|
363
|
+
var _ref6 = arguments[0], _ref13;
|
|
364
|
+
var SPageInputValue = InputNumber.Value;
|
|
365
|
+
return _ref13 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SPageInputValue, _ref13.cn("SPageInputValue", _objectSpread({}, assignProps({
|
|
366
|
+
"onBlur": function onBlur() {
|
|
367
|
+
return false;
|
|
305
368
|
}
|
|
306
|
-
},
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
369
|
+
}, _ref6))));
|
|
370
|
+
};
|
|
371
|
+
var PageInputAddon = function PageInputAddon2(props) {
|
|
372
|
+
var _ref7 = arguments[0], _ref14;
|
|
373
|
+
var SPageInputAddon = InputNumber.Addon;
|
|
374
|
+
return _ref14 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SPageInputAddon, _ref14.cn("SPageInputAddon", _objectSpread({}, assignProps({}, _ref7))));
|
|
375
|
+
};
|
|
376
|
+
var PageInput = /* @__PURE__ */ function(_Component6) {
|
|
377
|
+
_inherits(PageInput2, _Component6);
|
|
378
|
+
var _super6 = _createSuper(PageInput2);
|
|
379
|
+
function PageInput2() {
|
|
380
|
+
_classCallCheck(this, PageInput2);
|
|
381
|
+
return _super6.apply(this, arguments);
|
|
315
382
|
}
|
|
316
|
-
|
|
383
|
+
_createClass(PageInput2, [{
|
|
317
384
|
key: "render",
|
|
318
|
-
value: function() {
|
|
319
|
-
var
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
},
|
|
328
|
-
|
|
385
|
+
value: function render() {
|
|
386
|
+
var _ref8 = this.asProps, _ref15;
|
|
387
|
+
var SPageInput = InputNumber;
|
|
388
|
+
var SLabel = Text;
|
|
389
|
+
var _this$asProps9 = this.asProps, Children = _this$asProps9.Children, getI18nText = _this$asProps9.getI18nText, styles = _this$asProps9.styles, uid = _this$asProps9.uid, locale = _this$asProps9.locale, size = _this$asProps9.size;
|
|
390
|
+
return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SLabel, _ref15.cn("SLabel", {
|
|
391
|
+
"tag": "label",
|
|
392
|
+
"htmlFor": "pagination-input-".concat(uid),
|
|
393
|
+
"size": size
|
|
394
|
+
}), getI18nText("pageInputLabel")), /* @__PURE__ */ React.createElement(SPageInput, _ref15.cn("SPageInput", _objectSpread({}, assignProps({
|
|
395
|
+
"controlsLength": Children.origin ? void 0 : 2,
|
|
396
|
+
"locale": locale
|
|
397
|
+
}, _ref8))), Children.origin ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(Pagination.PageInput.Value, {
|
|
398
|
+
id: "pagination-input-".concat(uid)
|
|
329
399
|
})));
|
|
330
400
|
}
|
|
331
|
-
}])
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
401
|
+
}]);
|
|
402
|
+
return PageInput2;
|
|
403
|
+
}(Component);
|
|
404
|
+
_defineProperty(PageInput, "enhance", [uniqueIDEnhancement()]);
|
|
405
|
+
var Pagination = createComponent(PaginationRoot, {
|
|
406
|
+
PrevPage,
|
|
407
|
+
NextPage,
|
|
408
|
+
FirstPage,
|
|
409
|
+
TotalPages,
|
|
410
|
+
PageInput: [PageInput, {
|
|
411
|
+
Value: PageInputValue,
|
|
412
|
+
Addon: PageInputAddon
|
|
342
413
|
}]
|
|
343
414
|
});
|
|
344
415
|
export {
|
|
345
|
-
|
|
416
|
+
Pagination as default
|
|
346
417
|
};
|