@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.
@@ -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: 1692795158,
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
  };
@@ -141,7 +141,14 @@ export interface PagerProps {
141
141
  */
142
142
  dir?: string;
143
143
  }
144
- export declare class Pager extends React.Component<PagerProps> {
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
  */
@@ -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
- element.classList.remove('k-pager-mobile-md');
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
- element.classList.add('k-pager-mobile-md');
81
- element.classList.remove('k-pager-mobile-sm');
79
+ _this.setState({ showPagerInfo: false, showPagerSizes: true });
82
80
  }
83
81
  else {
84
- element.classList.remove('k-pager-mobile-md');
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.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap, pageSizeValue = _b.pageSizeValue;
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, currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap, size: this.props.size }));
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", { className: classNames('k-picker k-dropdown-list k-dropdown k-rounded-md', (_a = {},
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: 1692795158,
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
- export declare class Pager extends React.Component<PagerProps> {
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
  */
@@ -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
- element.classList.remove('k-pager-mobile-md');
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
- element.classList.add('k-pager-mobile-md');
84
- element.classList.remove('k-pager-mobile-sm');
82
+ _this.setState({ showPagerInfo: false, showPagerSizes: true });
85
83
  }
86
84
  else {
87
- element.classList.remove('k-pager-mobile-md');
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.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap, pageSizeValue = _b.pageSizeValue;
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, currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap, size: this.props.size }));
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", { className: (0, kendo_react_common_1.classNames)('k-picker k-dropdown-list k-dropdown k-rounded-md', (_a = {},
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)));