@semcore/pagination 16.0.0-prerelease.4 → 16.0.0-prerelease.7
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/lib/esm/Pagination.mjs +324 -252
- 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/package.json +10 -10
package/lib/esm/Pagination.mjs
CHANGED
|
@@ -1,167 +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 { Flex
|
|
12
|
-
import
|
|
13
|
-
import { Text
|
|
14
|
-
import
|
|
15
|
-
import { Hint
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import { localizedMessages
|
|
20
|
-
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 = (
|
|
21
22
|
/*__reshadow_css_start__*/
|
|
22
|
-
(
|
|
23
|
+
(sstyled.insert(
|
|
23
24
|
/*__inner_css_start__*/
|
|
24
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%)}",
|
|
25
26
|
"k9sct_gg_"
|
|
26
27
|
), {
|
|
27
|
-
__SPagination: "___SPagination_k9sct_gg_",
|
|
28
|
-
__SLabel: "___SLabel_k9sct_gg_",
|
|
29
|
-
_size_l: "_size_l_k9sct_gg_",
|
|
30
|
-
__STotalPages: "___STotalPages_k9sct_gg_",
|
|
31
|
-
__STotalPagesLabel: "___STotalPagesLabel_k9sct_gg_",
|
|
32
|
-
__SPageInput: "___SPageInput_k9sct_gg_",
|
|
33
|
-
__SPageInputAddon: "___SPageInputAddon_k9sct_gg_",
|
|
34
|
-
_withGap: "__withGap_k9sct_gg_",
|
|
35
|
-
__SNextPage: "___SNextPage_k9sct_gg_",
|
|
36
|
-
__SPrevPage: "___SPrevPage_k9sct_gg_",
|
|
37
|
-
__STotalLastPages: "___STotalLastPages_k9sct_gg_"
|
|
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_"
|
|
38
39
|
})
|
|
39
|
-
)
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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", {
|
|
48
54
|
// Crutch, so as not to take out `dirtyCurrentPage` in props
|
|
49
55
|
dirtyCurrentPage: void 0
|
|
50
|
-
})
|
|
56
|
+
});
|
|
57
|
+
_defineProperty(_assertThisInitialized(_this), "pageInputAddonRef", /* @__PURE__ */ React.createRef());
|
|
58
|
+
_defineProperty(_assertThisInitialized(_this), "returnLostFocus", function() {
|
|
51
59
|
setTimeout(function() {
|
|
52
|
-
if (document.activeElement
|
|
53
|
-
|
|
54
|
-
|
|
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();
|
|
55
67
|
}
|
|
56
68
|
}, 0);
|
|
57
|
-
})
|
|
58
|
-
|
|
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({
|
|
59
77
|
dirtyCurrentPage: void 0
|
|
60
|
-
}), e.returnLostFocus());
|
|
61
|
-
}), s(u(e), "handlePageValueChange", function(t) {
|
|
62
|
-
var a = e.state.dirtyCurrentPage;
|
|
63
|
-
Number.isNaN(Number(t)) && (t = a), e.setState({
|
|
64
|
-
dirtyCurrentPage: t
|
|
65
78
|
});
|
|
66
|
-
|
|
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() {
|
|
67
91
|
setTimeout(function() {
|
|
68
|
-
if (
|
|
69
|
-
var
|
|
70
|
-
|
|
71
|
-
dirtyCurrentPage:
|
|
92
|
+
if (_this.pageInputAddonRef.current !== document.activeElement) {
|
|
93
|
+
var currentPage = _this.asProps.currentPage;
|
|
94
|
+
_this.setState({
|
|
95
|
+
dirtyCurrentPage: currentPage
|
|
72
96
|
});
|
|
73
97
|
}
|
|
74
98
|
}, 0);
|
|
75
|
-
})
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
var
|
|
80
|
-
|
|
81
|
-
})
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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;
|
|
88
118
|
return {
|
|
89
|
-
disabled
|
|
90
|
-
onClick: function() {
|
|
91
|
-
return
|
|
119
|
+
disabled,
|
|
120
|
+
onClick: function onClick() {
|
|
121
|
+
return _this.handlePageChange(1);
|
|
92
122
|
},
|
|
93
|
-
getI18nText
|
|
94
|
-
size
|
|
123
|
+
getI18nText,
|
|
124
|
+
size
|
|
95
125
|
};
|
|
96
|
-
})
|
|
97
|
-
|
|
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;
|
|
98
130
|
return {
|
|
99
|
-
currentPage
|
|
100
|
-
disabled
|
|
101
|
-
onClick: function() {
|
|
102
|
-
return
|
|
131
|
+
currentPage,
|
|
132
|
+
disabled,
|
|
133
|
+
onClick: function onClick() {
|
|
134
|
+
return _this.handlePageChange(currentPage - 1);
|
|
103
135
|
},
|
|
104
|
-
getI18nText
|
|
105
|
-
ref:
|
|
106
|
-
size
|
|
136
|
+
getI18nText,
|
|
137
|
+
ref: _this.nextPageButtonRef,
|
|
138
|
+
size
|
|
107
139
|
};
|
|
108
|
-
})
|
|
109
|
-
|
|
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);
|
|
110
144
|
return {
|
|
111
|
-
currentPage
|
|
112
|
-
disabled
|
|
113
|
-
onClick: function() {
|
|
114
|
-
return
|
|
145
|
+
currentPage,
|
|
146
|
+
disabled,
|
|
147
|
+
onClick: function onClick() {
|
|
148
|
+
return _this.handlePageChange(currentPage + 1);
|
|
115
149
|
},
|
|
116
|
-
getI18nText
|
|
117
|
-
ref:
|
|
118
|
-
size
|
|
150
|
+
getI18nText,
|
|
151
|
+
ref: _this.prevPageButtonRef,
|
|
152
|
+
size
|
|
119
153
|
};
|
|
120
|
-
})
|
|
121
|
-
|
|
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;
|
|
122
157
|
return {
|
|
123
|
-
getI18nText
|
|
124
|
-
locale
|
|
125
|
-
size
|
|
158
|
+
getI18nText,
|
|
159
|
+
locale,
|
|
160
|
+
size
|
|
126
161
|
};
|
|
127
|
-
})
|
|
162
|
+
});
|
|
163
|
+
_defineProperty(_assertThisInitialized(_this), "getPageInputAddonProps", function() {
|
|
128
164
|
return {
|
|
129
|
-
onClick:
|
|
130
|
-
ref:
|
|
131
|
-
onBlur:
|
|
165
|
+
onClick: _this.handlePageInputIconClick,
|
|
166
|
+
ref: _this.pageInputAddonRef,
|
|
167
|
+
onBlur: _this.handlePageValueBlur
|
|
132
168
|
};
|
|
133
|
-
})
|
|
134
|
-
|
|
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;
|
|
135
173
|
return {
|
|
136
174
|
min: 1,
|
|
137
|
-
max:
|
|
138
|
-
disabled:
|
|
139
|
-
value:
|
|
140
|
-
onBlur:
|
|
141
|
-
onChange:
|
|
142
|
-
onKeyDown:
|
|
143
|
-
getI18nText
|
|
144
|
-
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
|
|
145
183
|
};
|
|
146
|
-
})
|
|
147
|
-
|
|
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, {
|
|
148
188
|
style: "decimal"
|
|
149
189
|
});
|
|
150
190
|
return {
|
|
151
|
-
totalPages
|
|
152
|
-
children:
|
|
153
|
-
isLastOrSingle:
|
|
154
|
-
onClick: function() {
|
|
155
|
-
return
|
|
191
|
+
totalPages,
|
|
192
|
+
children: formatter.format(totalPages),
|
|
193
|
+
isLastOrSingle: currentPage === totalPages,
|
|
194
|
+
onClick: function onClick() {
|
|
195
|
+
return _this.handlePageChange(totalPages);
|
|
156
196
|
},
|
|
157
|
-
getI18nText
|
|
158
|
-
size
|
|
197
|
+
getI18nText,
|
|
198
|
+
size
|
|
159
199
|
};
|
|
160
|
-
})
|
|
200
|
+
});
|
|
201
|
+
return _this;
|
|
161
202
|
}
|
|
162
|
-
|
|
203
|
+
_createClass(PaginationRoot2, [{
|
|
163
204
|
key: "uncontrolledProps",
|
|
164
|
-
value: function() {
|
|
205
|
+
value: function uncontrolledProps() {
|
|
165
206
|
return {
|
|
166
207
|
totalPages: null,
|
|
167
208
|
currentPage: null
|
|
@@ -169,177 +210,208 @@ var H = ["styles", "getI18nText", "totalPages", "isLastOrSingle", "children"], M
|
|
|
169
210
|
}
|
|
170
211
|
}, {
|
|
171
212
|
key: "componentDidUpdate",
|
|
172
|
-
value: function(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
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
|
+
}
|
|
176
219
|
}
|
|
177
220
|
}, {
|
|
178
221
|
key: "render",
|
|
179
|
-
value: function() {
|
|
180
|
-
var
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
"
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
}), /* @__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", {
|
|
189
234
|
"aria-live": "polite",
|
|
190
|
-
role: "status"
|
|
191
|
-
}),
|
|
235
|
+
"role": "status"
|
|
236
|
+
}), getI18nText("pageInputLabel"), " ", currentPage));
|
|
192
237
|
}
|
|
193
|
-
}])
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
238
|
+
}]);
|
|
239
|
+
return PaginationRoot2;
|
|
240
|
+
}(Component);
|
|
241
|
+
_defineProperty(PaginationRoot, "displayName", "Pagination");
|
|
242
|
+
_defineProperty(PaginationRoot, "defaultProps", function() {
|
|
197
243
|
return {
|
|
198
244
|
defaultCurrentPage: 1,
|
|
199
245
|
defaultTotalPages: 1,
|
|
200
|
-
i18n:
|
|
246
|
+
i18n: localizedMessages,
|
|
201
247
|
locale: "en",
|
|
202
248
|
size: "m"
|
|
203
249
|
};
|
|
204
250
|
});
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
var
|
|
208
|
-
|
|
209
|
-
var
|
|
210
|
-
function
|
|
211
|
-
|
|
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);
|
|
212
259
|
}
|
|
213
|
-
|
|
260
|
+
_createClass(FirstPage2, [{
|
|
214
261
|
key: "render",
|
|
215
|
-
value: function() {
|
|
216
|
-
var
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
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));
|
|
220
268
|
}
|
|
221
|
-
}])
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
269
|
+
}]);
|
|
270
|
+
return FirstPage2;
|
|
271
|
+
}(Component);
|
|
272
|
+
_defineProperty(FirstPage, "defaultProps", function(props) {
|
|
273
|
+
var hintContent = props.getI18nText("firstPage");
|
|
225
274
|
return {
|
|
226
|
-
children: /* @__PURE__ */
|
|
227
|
-
tag:
|
|
228
|
-
title:
|
|
275
|
+
children: /* @__PURE__ */ React.createElement(Button.Addon, {
|
|
276
|
+
tag: Hint,
|
|
277
|
+
title: hintContent,
|
|
229
278
|
timeout: [250, 50],
|
|
230
279
|
__excludeProps: ["aria-label"]
|
|
231
|
-
}, /* @__PURE__ */
|
|
280
|
+
}, /* @__PURE__ */ React.createElement(ChevronDoubleLeft, null))
|
|
232
281
|
};
|
|
233
282
|
});
|
|
234
|
-
var
|
|
235
|
-
|
|
236
|
-
var
|
|
237
|
-
function
|
|
238
|
-
|
|
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);
|
|
239
289
|
}
|
|
240
|
-
|
|
290
|
+
_createClass(PrevPage2, [{
|
|
241
291
|
key: "render",
|
|
242
|
-
value: function() {
|
|
243
|
-
var
|
|
244
|
-
|
|
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))));
|
|
245
296
|
}
|
|
246
|
-
}])
|
|
247
|
-
|
|
248
|
-
|
|
297
|
+
}]);
|
|
298
|
+
return PrevPage2;
|
|
299
|
+
}(Component);
|
|
300
|
+
_defineProperty(PrevPage, "defaultProps", function(props) {
|
|
249
301
|
return {
|
|
250
|
-
children:
|
|
302
|
+
children: props.getI18nText("prevPageLabel")
|
|
251
303
|
};
|
|
252
304
|
});
|
|
253
|
-
var
|
|
254
|
-
|
|
255
|
-
var
|
|
256
|
-
function
|
|
257
|
-
|
|
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);
|
|
258
311
|
}
|
|
259
|
-
|
|
312
|
+
_createClass(NextPage2, [{
|
|
260
313
|
key: "render",
|
|
261
|
-
value: function() {
|
|
262
|
-
var
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
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))));
|
|
267
321
|
}
|
|
268
|
-
}])
|
|
269
|
-
|
|
270
|
-
|
|
322
|
+
}]);
|
|
323
|
+
return NextPage2;
|
|
324
|
+
}(Component);
|
|
325
|
+
_defineProperty(NextPage, "defaultProps", function(props) {
|
|
271
326
|
return {
|
|
272
|
-
children:
|
|
327
|
+
children: props.getI18nText("nextPageLabel")
|
|
273
328
|
};
|
|
274
329
|
});
|
|
275
|
-
var
|
|
276
|
-
|
|
277
|
-
var
|
|
278
|
-
function
|
|
279
|
-
|
|
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);
|
|
280
336
|
}
|
|
281
|
-
|
|
337
|
+
_createClass(TotalPages2, [{
|
|
282
338
|
key: "render",
|
|
283
|
-
value: function() {
|
|
284
|
-
var
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
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
|
|
291
352
|
})
|
|
292
|
-
},
|
|
293
|
-
"aria-label":
|
|
294
|
-
lastPageNumber:
|
|
353
|
+
}, other)), children) : /* @__PURE__ */ React.createElement(STotalPages, _ref12.cn("STotalPages", _objectSpread({}, assignProps({
|
|
354
|
+
"aria-label": getI18nText("lastPage", {
|
|
355
|
+
lastPageNumber: totalPages
|
|
295
356
|
})
|
|
296
|
-
},
|
|
357
|
+
}, _ref5)))));
|
|
297
358
|
}
|
|
298
|
-
}])
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
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;
|
|
304
368
|
}
|
|
305
|
-
},
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
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);
|
|
314
382
|
}
|
|
315
|
-
|
|
383
|
+
_createClass(PageInput2, [{
|
|
316
384
|
key: "render",
|
|
317
|
-
value: function() {
|
|
318
|
-
var
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
},
|
|
327
|
-
|
|
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)
|
|
328
399
|
})));
|
|
329
400
|
}
|
|
330
|
-
}])
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
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
|
|
341
413
|
}]
|
|
342
414
|
});
|
|
343
415
|
export {
|
|
344
|
-
|
|
416
|
+
Pagination as default
|
|
345
417
|
};
|