@progress/kendo-react-data-tools 5.17.0-dev.202308231321 → 5.17.0-dev.202308241633
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/cdn/js/kendo-react-data-tools.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/pager/Pager.d.ts +8 -1
- package/dist/es/pager/Pager.js +9 -10
- package/dist/es/pager/PagerNumericButtons.d.ts +1 -0
- package/dist/es/pager/PagerNumericButtons.js +6 -2
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/pager/Pager.d.ts +8 -1
- package/dist/npm/pager/Pager.js +9 -10
- package/dist/npm/pager/PagerNumericButtons.d.ts +1 -0
- package/dist/npm/pager/PagerNumericButtons.js +6 -2
- package/dist/systemjs/kendo-react-data-tools.js +1 -1
- package/package.json +10 -10
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-data-tools',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1692892347,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
11
11
|
};
|
package/dist/es/pager/Pager.d.ts
CHANGED
|
@@ -141,7 +141,14 @@ export interface PagerProps {
|
|
|
141
141
|
*/
|
|
142
142
|
dir?: string;
|
|
143
143
|
}
|
|
144
|
-
|
|
144
|
+
/**
|
|
145
|
+
* @hidden
|
|
146
|
+
*/
|
|
147
|
+
export interface PagerState {
|
|
148
|
+
showPagerSizes?: boolean;
|
|
149
|
+
showPagerInfo?: boolean;
|
|
150
|
+
}
|
|
151
|
+
export declare class Pager extends React.Component<PagerProps, PagerState> {
|
|
145
152
|
/**
|
|
146
153
|
* @hidden
|
|
147
154
|
*/
|
package/dist/es/pager/Pager.js
CHANGED
|
@@ -73,19 +73,17 @@ var Pager = /** @class */ (function (_super) {
|
|
|
73
73
|
}
|
|
74
74
|
var width = element.offsetWidth;
|
|
75
75
|
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
76
|
-
|
|
77
|
-
element.classList.add('k-pager-mobile-sm');
|
|
76
|
+
_this.setState({ showPagerSizes: false });
|
|
78
77
|
}
|
|
79
78
|
else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
|
|
80
|
-
|
|
81
|
-
element.classList.remove('k-pager-mobile-sm');
|
|
79
|
+
_this.setState({ showPagerInfo: false, showPagerSizes: true });
|
|
82
80
|
}
|
|
83
81
|
else {
|
|
84
|
-
|
|
85
|
-
element.classList.remove('k-pager-mobile-sm');
|
|
82
|
+
_this.setState({ showPagerInfo: true, showPagerSizes: true });
|
|
86
83
|
}
|
|
87
84
|
};
|
|
88
85
|
validatePackage(packageMetadata);
|
|
86
|
+
_this.state = { showPagerSizes: true, showPagerInfo: true };
|
|
89
87
|
return _this;
|
|
90
88
|
}
|
|
91
89
|
Object.defineProperty(Pager.prototype, "isRtl", {
|
|
@@ -125,12 +123,13 @@ var Pager = /** @class */ (function (_super) {
|
|
|
125
123
|
Pager.prototype.render = function () {
|
|
126
124
|
var _a;
|
|
127
125
|
var _this = this;
|
|
128
|
-
var _b = this.
|
|
126
|
+
var _b = this.state, showPagerSizes = _b.showPagerSizes, showPagerInfo = _b.showPagerInfo;
|
|
127
|
+
var _c = this.props, skip = _c.skip, take = _c.take, total = _c.total, pageSizes = _c.pageSizes, size = _c.size, responsive = _c.responsive, messagesMap = _c.messagesMap, pageSizeValue = _c.pageSizeValue;
|
|
129
128
|
var localizationService = provideLocalizationService(this);
|
|
130
129
|
var intlService = provideIntlService(this);
|
|
131
130
|
var currentPage = Math.floor(skip / take) + 1;
|
|
132
131
|
var changer = this.props.type === 'numeric' ?
|
|
133
|
-
(React.createElement(PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap, size: this.props.size })) : (React.createElement(PagerInput, { buttonCount: this.props.buttonCount || 0,
|
|
132
|
+
(React.createElement(PagerNumericButtons, { type: (responsive && !showPagerSizes) ? 'dropdown' : 'numbers', buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap, size: this.props.size })) : (React.createElement(PagerInput, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: messagesMap, size: this.props.size }));
|
|
134
133
|
var firstPageMessage = messagesMap ? messagesMap(pagerFirstPage) :
|
|
135
134
|
({ messageKey: pagerFirstPage, defaultMessage: messages[pagerFirstPage] });
|
|
136
135
|
var previousPageMessage = messagesMap ? messagesMap(pagerPreviousPage) :
|
|
@@ -168,8 +167,8 @@ var Pager = /** @class */ (function (_super) {
|
|
|
168
167
|
changer,
|
|
169
168
|
next,
|
|
170
169
|
last),
|
|
171
|
-
pagerPageSizes,
|
|
172
|
-
info));
|
|
170
|
+
responsive ? (showPagerSizes && pagerPageSizes) : pagerPageSizes,
|
|
171
|
+
responsive ? (showPagerInfo && info) : info));
|
|
173
172
|
};
|
|
174
173
|
Pager.prototype.renderButton = function (page, className, title, icon, svgIcon, isDisabled) {
|
|
175
174
|
var _this = this;
|
|
@@ -7,6 +7,7 @@ export interface PagerNumericButtonsProps {
|
|
|
7
7
|
totalPages: number;
|
|
8
8
|
currentPage: number;
|
|
9
9
|
size?: null | 'small' | 'medium' | 'large';
|
|
10
|
+
type?: 'numbers' | 'dropdown';
|
|
10
11
|
pageChange: (page: number, e: React.SyntheticEvent<any>) => any;
|
|
11
12
|
messagesMap?: (messageKey: string) => ({
|
|
12
13
|
messageKey: string;
|
|
@@ -58,13 +58,17 @@ var PagerNumericButtons = /** @class */ (function (_super) {
|
|
|
58
58
|
var numerics = buttons.map(function (page) { return (React.createElement(Button, { className: classNames({ 'k-selected': _this.props.currentPage === page }), key: page, fillMode: 'flat', themeColor: 'primary', size: _this.props.size, rounded: null, role: "button", "aria-label": localizationService.toLanguageString(pageNumberLabelMessage.messageKey, pageNumberLabelMessage.defaultMessage) + ' ' + page, "aria-current": _this.props.currentPage === page ? true : undefined, onClick: function (e) { return _this.handlePageChange(e, page); } }, page)); });
|
|
59
59
|
var options = buttons.map(function (page) { return (React.createElement("option", { key: page }, page)); });
|
|
60
60
|
return (React.createElement(React.Fragment, null,
|
|
61
|
-
React.createElement("select", {
|
|
61
|
+
React.createElement("select", { style: { width: '5em', margin: '0px 1em', display: this.props.type === 'dropdown'
|
|
62
|
+
? 'inline-flex'
|
|
63
|
+
: 'none' }, className: classNames('k-picker k-dropdown-list k-dropdown k-rounded-md', (_a = {},
|
|
62
64
|
_a["k-picker-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
|
|
63
65
|
_a)), "aria-label": localizationService.toLanguageString(mobileSelectMessage.messageKey, mobileSelectMessage.defaultMessage), value: this.props.currentPage, onChange: function (e) { return _this.handleSelectPageChange(e); } },
|
|
64
66
|
prevOptionDots,
|
|
65
67
|
options,
|
|
66
68
|
postOptionDots),
|
|
67
|
-
React.createElement("div", { className: "k-pager-numbers"
|
|
69
|
+
React.createElement("div", { className: "k-pager-numbers", style: { display: this.props.type === 'numbers'
|
|
70
|
+
? ''
|
|
71
|
+
: 'none' } },
|
|
68
72
|
prevDots,
|
|
69
73
|
numerics,
|
|
70
74
|
postDots)));
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-react-data-tools',
|
|
9
9
|
productName: 'KendoReact',
|
|
10
10
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1692892347,
|
|
12
12
|
version: '',
|
|
13
13
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
14
14
|
};
|
|
@@ -141,7 +141,14 @@ export interface PagerProps {
|
|
|
141
141
|
*/
|
|
142
142
|
dir?: string;
|
|
143
143
|
}
|
|
144
|
-
|
|
144
|
+
/**
|
|
145
|
+
* @hidden
|
|
146
|
+
*/
|
|
147
|
+
export interface PagerState {
|
|
148
|
+
showPagerSizes?: boolean;
|
|
149
|
+
showPagerInfo?: boolean;
|
|
150
|
+
}
|
|
151
|
+
export declare class Pager extends React.Component<PagerProps, PagerState> {
|
|
145
152
|
/**
|
|
146
153
|
* @hidden
|
|
147
154
|
*/
|
package/dist/npm/pager/Pager.js
CHANGED
|
@@ -76,19 +76,17 @@ var Pager = /** @class */ (function (_super) {
|
|
|
76
76
|
}
|
|
77
77
|
var width = element.offsetWidth;
|
|
78
78
|
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
79
|
-
|
|
80
|
-
element.classList.add('k-pager-mobile-sm');
|
|
79
|
+
_this.setState({ showPagerSizes: false });
|
|
81
80
|
}
|
|
82
81
|
else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
|
|
83
|
-
|
|
84
|
-
element.classList.remove('k-pager-mobile-sm');
|
|
82
|
+
_this.setState({ showPagerInfo: false, showPagerSizes: true });
|
|
85
83
|
}
|
|
86
84
|
else {
|
|
87
|
-
|
|
88
|
-
element.classList.remove('k-pager-mobile-sm');
|
|
85
|
+
_this.setState({ showPagerInfo: true, showPagerSizes: true });
|
|
89
86
|
}
|
|
90
87
|
};
|
|
91
88
|
(0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
|
|
89
|
+
_this.state = { showPagerSizes: true, showPagerInfo: true };
|
|
92
90
|
return _this;
|
|
93
91
|
}
|
|
94
92
|
Object.defineProperty(Pager.prototype, "isRtl", {
|
|
@@ -128,12 +126,13 @@ var Pager = /** @class */ (function (_super) {
|
|
|
128
126
|
Pager.prototype.render = function () {
|
|
129
127
|
var _a;
|
|
130
128
|
var _this = this;
|
|
131
|
-
var _b = this.
|
|
129
|
+
var _b = this.state, showPagerSizes = _b.showPagerSizes, showPagerInfo = _b.showPagerInfo;
|
|
130
|
+
var _c = this.props, skip = _c.skip, take = _c.take, total = _c.total, pageSizes = _c.pageSizes, size = _c.size, responsive = _c.responsive, messagesMap = _c.messagesMap, pageSizeValue = _c.pageSizeValue;
|
|
132
131
|
var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
|
|
133
132
|
var intlService = (0, kendo_react_intl_1.provideIntlService)(this);
|
|
134
133
|
var currentPage = Math.floor(skip / take) + 1;
|
|
135
134
|
var changer = this.props.type === 'numeric' ?
|
|
136
|
-
(React.createElement(PagerNumericButtons_1.PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap, size: this.props.size })) : (React.createElement(PagerInput_1.PagerInput, { buttonCount: this.props.buttonCount || 0,
|
|
135
|
+
(React.createElement(PagerNumericButtons_1.PagerNumericButtons, { type: (responsive && !showPagerSizes) ? 'dropdown' : 'numbers', buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap, size: this.props.size })) : (React.createElement(PagerInput_1.PagerInput, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: messagesMap, size: this.props.size }));
|
|
137
136
|
var firstPageMessage = messagesMap ? messagesMap(messages_1.pagerFirstPage) :
|
|
138
137
|
({ messageKey: messages_1.pagerFirstPage, defaultMessage: messages_1.messages[messages_1.pagerFirstPage] });
|
|
139
138
|
var previousPageMessage = messagesMap ? messagesMap(messages_1.pagerPreviousPage) :
|
|
@@ -171,8 +170,8 @@ var Pager = /** @class */ (function (_super) {
|
|
|
171
170
|
changer,
|
|
172
171
|
next,
|
|
173
172
|
last),
|
|
174
|
-
pagerPageSizes,
|
|
175
|
-
info));
|
|
173
|
+
responsive ? (showPagerSizes && pagerPageSizes) : pagerPageSizes,
|
|
174
|
+
responsive ? (showPagerInfo && info) : info));
|
|
176
175
|
};
|
|
177
176
|
Pager.prototype.renderButton = function (page, className, title, icon, svgIcon, isDisabled) {
|
|
178
177
|
var _this = this;
|
|
@@ -7,6 +7,7 @@ export interface PagerNumericButtonsProps {
|
|
|
7
7
|
totalPages: number;
|
|
8
8
|
currentPage: number;
|
|
9
9
|
size?: null | 'small' | 'medium' | 'large';
|
|
10
|
+
type?: 'numbers' | 'dropdown';
|
|
10
11
|
pageChange: (page: number, e: React.SyntheticEvent<any>) => any;
|
|
11
12
|
messagesMap?: (messageKey: string) => ({
|
|
12
13
|
messageKey: string;
|
|
@@ -61,13 +61,17 @@ var PagerNumericButtons = /** @class */ (function (_super) {
|
|
|
61
61
|
var numerics = buttons.map(function (page) { return (React.createElement(kendo_react_buttons_1.Button, { className: (0, kendo_react_common_1.classNames)({ 'k-selected': _this.props.currentPage === page }), key: page, fillMode: 'flat', themeColor: 'primary', size: _this.props.size, rounded: null, role: "button", "aria-label": localizationService.toLanguageString(pageNumberLabelMessage.messageKey, pageNumberLabelMessage.defaultMessage) + ' ' + page, "aria-current": _this.props.currentPage === page ? true : undefined, onClick: function (e) { return _this.handlePageChange(e, page); } }, page)); });
|
|
62
62
|
var options = buttons.map(function (page) { return (React.createElement("option", { key: page }, page)); });
|
|
63
63
|
return (React.createElement(React.Fragment, null,
|
|
64
|
-
React.createElement("select", {
|
|
64
|
+
React.createElement("select", { style: { width: '5em', margin: '0px 1em', display: this.props.type === 'dropdown'
|
|
65
|
+
? 'inline-flex'
|
|
66
|
+
: 'none' }, className: (0, kendo_react_common_1.classNames)('k-picker k-dropdown-list k-dropdown k-rounded-md', (_a = {},
|
|
65
67
|
_a["k-picker-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
|
|
66
68
|
_a)), "aria-label": localizationService.toLanguageString(mobileSelectMessage.messageKey, mobileSelectMessage.defaultMessage), value: this.props.currentPage, onChange: function (e) { return _this.handleSelectPageChange(e); } },
|
|
67
69
|
prevOptionDots,
|
|
68
70
|
options,
|
|
69
71
|
postOptionDots),
|
|
70
|
-
React.createElement("div", { className: "k-pager-numbers"
|
|
72
|
+
React.createElement("div", { className: "k-pager-numbers", style: { display: this.props.type === 'numbers'
|
|
73
|
+
? ''
|
|
74
|
+
: 'none' } },
|
|
71
75
|
prevDots,
|
|
72
76
|
numerics,
|
|
73
77
|
postDots)));
|