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