@progress/kendo-react-data-tools 7.5.0-develop.2 → 7.5.0-develop.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/dist/cdn/js/kendo-react-datatools.js +1 -1
- package/index.d.mts +31 -11
- package/index.d.ts +31 -11
- package/navigation/TableKeyboardNavigation.js +1 -1
- package/navigation/TableKeyboardNavigation.mjs +121 -91
- package/navigation/utils.js +1 -1
- package/navigation/utils.mjs +101 -75
- package/package-metadata.mjs +1 -1
- package/package.json +11 -11
- package/pager/Pager.js +1 -1
- package/pager/Pager.mjs +107 -103
- package/selection/TableSelection.js +1 -1
- package/selection/TableSelection.mjs +79 -69
- package/selection/utils.js +1 -1
- package/selection/utils.mjs +85 -84
package/navigation/utils.mjs
CHANGED
|
@@ -6,107 +6,133 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import { FOCUSABLE_ELEMENTS as
|
|
10
|
-
import { KEYBOARD_NAV_DATA_LEVEL as
|
|
11
|
-
const _ = (e, t, r = "cell") => `${t}_${e}_${r}`,
|
|
9
|
+
import { FOCUSABLE_ELEMENTS as i, TABBABLE_ELEMENTS as g } from "@progress/kendo-react-common";
|
|
10
|
+
import { KEYBOARD_NAV_DATA_LEVEL as s, KEYBOARD_NAV_DATA_ID as f, KEYBOARD_NAV_DATA_SCOPE as I, KEYBOARD_NAV_DATA_HEADER as N, KEYBOARD_NAV_DATA_BODY as v, KEYBOARD_NAV_FILTER_COL_SUFFIX as b } from "./constants.mjs";
|
|
11
|
+
const _ = (e, t, r = "cell") => `${t}_${e}_${r}`, D = (e) => {
|
|
12
12
|
if (e)
|
|
13
|
-
return parseInt(e.getAttribute(
|
|
14
|
-
},
|
|
13
|
+
return parseInt(e.getAttribute(s) || "", 10);
|
|
14
|
+
}, d = (e) => {
|
|
15
15
|
if (!e)
|
|
16
16
|
return;
|
|
17
|
-
const t = e.getAttribute(
|
|
17
|
+
const t = e.getAttribute(f);
|
|
18
18
|
return t || void 0;
|
|
19
|
-
},
|
|
20
|
-
const
|
|
19
|
+
}, u = (e) => e ? !!e.getAttribute(f) : !1, x = (e, t = { level: 0 }) => e.querySelector(`[${s}='${t.level}']`), m = (e) => e && e.parentElement && e.parentElement.closest(`[${s}]`), A = (e, t) => e.querySelector(`[${f}='${t}']`), p = (e) => e && e.parentElement && e.parentElement.closest(`[${I}]`), $ = (e) => e.querySelector(`[${N}]`), y = (e) => e.querySelector(`[${v}]`), V = (e) => e.querySelector(".k-grid-norecords"), B = (e, t) => {
|
|
20
|
+
const {
|
|
21
|
+
scope: r,
|
|
22
|
+
navigationStateRef: n,
|
|
23
|
+
contextStateRef: l
|
|
24
|
+
} = e;
|
|
25
|
+
if (!n.current || !r)
|
|
26
|
+
return;
|
|
27
|
+
const o = R(n.current.navigationMatrix), c = A(r, o);
|
|
28
|
+
E({ elementForFocus: c, contextStateRef: l, event: t });
|
|
29
|
+
}, C = (e, t = { focusable: !1 }) => {
|
|
30
|
+
const r = t.focusable ? i : g;
|
|
21
31
|
return Array.from(e.querySelectorAll(r.join(",")));
|
|
22
|
-
},
|
|
32
|
+
}, h = (e, t = { level: 0 }) => {
|
|
23
33
|
if (!e)
|
|
24
34
|
return [];
|
|
25
|
-
const r =
|
|
35
|
+
const r = i.map((n) => n + `[${s}='${t.level}']`).join(",");
|
|
26
36
|
return Array.from(e.querySelectorAll(r));
|
|
27
|
-
},
|
|
28
|
-
const t =
|
|
29
|
-
(r) => r + `[${
|
|
37
|
+
}, F = (e = { level: 0 }) => {
|
|
38
|
+
const t = i.map(
|
|
39
|
+
(r) => r + `[${s}='${e.level}']`
|
|
30
40
|
).join(",");
|
|
31
41
|
return (r) => r.matches(t);
|
|
32
|
-
},
|
|
33
|
-
const { elementForFocus: t, event: r, contextStateRef:
|
|
34
|
-
if (
|
|
35
|
-
r.preventDefault();
|
|
36
|
-
const
|
|
37
|
-
|
|
42
|
+
}, E = (e) => {
|
|
43
|
+
const { elementForFocus: t, event: r, contextStateRef: n, prevElement: l } = e;
|
|
44
|
+
if (n.current && t && t.focus) {
|
|
45
|
+
r == null || r.preventDefault();
|
|
46
|
+
const o = t.querySelector(".k-checkbox-wrap .k-checkbox");
|
|
47
|
+
o && o.focus ? o.focus() : t.focus(), u(t) && (t.setAttribute("tabIndex", "0"), n.current.activeId = d(t)), l && u(l) && l.setAttribute("tabIndex", "-1");
|
|
38
48
|
}
|
|
39
|
-
},
|
|
49
|
+
}, S = (e) => e.current ? e.current.idPrefix : "", L = (e, t, r, n, l) => {
|
|
40
50
|
if (!r)
|
|
41
51
|
return [];
|
|
42
|
-
let
|
|
43
|
-
for (;
|
|
44
|
-
const c =
|
|
52
|
+
let o = e + (l ? -1 : 1);
|
|
53
|
+
for (; o >= 0 && o < n.length; ) {
|
|
54
|
+
const c = n[o][t];
|
|
45
55
|
if (c !== r)
|
|
46
|
-
return [c, [
|
|
47
|
-
|
|
56
|
+
return [c, [o, t]];
|
|
57
|
+
o = o + (l ? -1 : 1);
|
|
48
58
|
}
|
|
49
59
|
return [];
|
|
50
|
-
},
|
|
60
|
+
}, O = (e, t, r, n, l) => {
|
|
51
61
|
if (!r)
|
|
52
62
|
return [];
|
|
53
|
-
let
|
|
54
|
-
for (;
|
|
55
|
-
const c =
|
|
63
|
+
let o = t + (l ? -1 : 1);
|
|
64
|
+
for (; o >= 0 && o < n[e].length; ) {
|
|
65
|
+
const c = n[e][o];
|
|
56
66
|
if (c !== r)
|
|
57
|
-
return [c, [e,
|
|
58
|
-
|
|
67
|
+
return [c, [e, o]];
|
|
68
|
+
o = o + (l ? -1 : 1);
|
|
59
69
|
}
|
|
60
70
|
return [];
|
|
61
|
-
},
|
|
71
|
+
}, a = (e, t) => {
|
|
62
72
|
if (t) {
|
|
63
73
|
for (let r = 0; r < e.length; r++)
|
|
64
|
-
for (let
|
|
65
|
-
if (e[r][
|
|
66
|
-
return [r,
|
|
74
|
+
for (let n = 0; n < e[r].length; n++)
|
|
75
|
+
if (e[r][n] === t)
|
|
76
|
+
return [r, n];
|
|
67
77
|
}
|
|
68
|
-
},
|
|
78
|
+
}, T = (e) => e.current ? e.current.navigationMatrix.length : 0, R = (e) => e.flat().find((t) => t.endsWith("cell")), Y = (e) => e.flat().reverse().find((t) => t.endsWith("cell")), k = (e, t) => e[t][0], j = (e, t) => Array.from(e[t]).reverse()[0], q = (e) => e ? `${e}${b}` : "", P = (e, t, r) => {
|
|
79
|
+
let n;
|
|
80
|
+
if (e.current && e.current.prevNavigationIndexes) {
|
|
81
|
+
const [l, o] = e.current.prevNavigationIndexes;
|
|
82
|
+
t[l][o] === r ? n = e.current.prevNavigationIndexes : n = a(t, r);
|
|
83
|
+
} else
|
|
84
|
+
n = a(t, r);
|
|
85
|
+
return n;
|
|
86
|
+
}, H = {
|
|
69
87
|
generateNavigatableId: _,
|
|
70
|
-
getNavigatableId:
|
|
71
|
-
getNavigatableLevel:
|
|
72
|
-
getNavigatableElement:
|
|
73
|
-
getClosestNavigatableElement:
|
|
74
|
-
getActiveNavDataElement:
|
|
75
|
-
getClosestScope:
|
|
76
|
-
getHeaderElement:
|
|
77
|
-
getBodyElement:
|
|
78
|
-
getFocusableElements:
|
|
79
|
-
getNavigatableElements:
|
|
80
|
-
filterNavigatableElements:
|
|
81
|
-
focusElement:
|
|
82
|
-
getIdPrefix:
|
|
83
|
-
isNavigatable:
|
|
84
|
-
findNextIdByRowIndex:
|
|
85
|
-
findNextIdByCellIndex:
|
|
86
|
-
findId:
|
|
87
|
-
getNextNavigationIndex:
|
|
88
|
-
getFilterColumnId:
|
|
88
|
+
getNavigatableId: d,
|
|
89
|
+
getNavigatableLevel: D,
|
|
90
|
+
getNavigatableElement: x,
|
|
91
|
+
getClosestNavigatableElement: m,
|
|
92
|
+
getActiveNavDataElement: A,
|
|
93
|
+
getClosestScope: p,
|
|
94
|
+
getHeaderElement: $,
|
|
95
|
+
getBodyElement: y,
|
|
96
|
+
getFocusableElements: C,
|
|
97
|
+
getNavigatableElements: h,
|
|
98
|
+
filterNavigatableElements: F,
|
|
99
|
+
focusElement: E,
|
|
100
|
+
getIdPrefix: S,
|
|
101
|
+
isNavigatable: u,
|
|
102
|
+
findNextIdByRowIndex: L,
|
|
103
|
+
findNextIdByCellIndex: O,
|
|
104
|
+
findId: a,
|
|
105
|
+
getNextNavigationIndex: T,
|
|
106
|
+
getFilterColumnId: q,
|
|
107
|
+
focusFirstDataElement: B
|
|
89
108
|
};
|
|
90
109
|
export {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
110
|
+
F as filterNavigatableElements,
|
|
111
|
+
a as findId,
|
|
112
|
+
O as findNextIdByCellIndex,
|
|
113
|
+
L as findNextIdByRowIndex,
|
|
114
|
+
E as focusElement,
|
|
115
|
+
B as focusFirstDataElement,
|
|
96
116
|
_ as generateNavigatableId,
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
117
|
+
A as getActiveNavDataElement,
|
|
118
|
+
y as getBodyElement,
|
|
119
|
+
m as getClosestNavigatableElement,
|
|
120
|
+
p as getClosestScope,
|
|
121
|
+
P as getCurrentIdIndexes,
|
|
122
|
+
q as getFilterColumnId,
|
|
123
|
+
R as getFirstDataCell,
|
|
124
|
+
k as getFirstRowDataCell,
|
|
125
|
+
C as getFocusableElements,
|
|
126
|
+
$ as getHeaderElement,
|
|
127
|
+
S as getIdPrefix,
|
|
128
|
+
Y as getLastDataCell,
|
|
129
|
+
j as getLastRowDataCell,
|
|
130
|
+
x as getNavigatableElement,
|
|
131
|
+
h as getNavigatableElements,
|
|
132
|
+
d as getNavigatableId,
|
|
133
|
+
D as getNavigatableLevel,
|
|
134
|
+
T as getNextNavigationIndex,
|
|
135
|
+
V as getNoRecordsElement,
|
|
136
|
+
u as isNavigatable,
|
|
137
|
+
H as tableKeyboardNavigationTools
|
|
112
138
|
};
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-data-tools",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1715351765,
|
|
14
14
|
version: "",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-data-tools",
|
|
3
|
-
"version": "7.5.0-develop.
|
|
3
|
+
"version": "7.5.0-develop.20",
|
|
4
4
|
"description": "Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,17 +23,17 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-data-query": "^1.0.0",
|
|
26
|
-
"@progress/kendo-drawing": "^1.
|
|
26
|
+
"@progress/kendo-drawing": "^1.20.1",
|
|
27
27
|
"@progress/kendo-licensing": "^1.3.4",
|
|
28
|
-
"@progress/kendo-react-animation": "7.5.0-develop.
|
|
29
|
-
"@progress/kendo-react-buttons": "7.5.0-develop.
|
|
30
|
-
"@progress/kendo-react-common": "7.5.0-develop.
|
|
31
|
-
"@progress/kendo-react-dateinputs": "7.5.0-develop.
|
|
32
|
-
"@progress/kendo-react-dropdowns": "7.5.0-develop.
|
|
33
|
-
"@progress/kendo-react-inputs": "7.5.0-develop.
|
|
34
|
-
"@progress/kendo-react-intl": "7.5.0-develop.
|
|
35
|
-
"@progress/kendo-react-popup": "7.5.0-develop.
|
|
36
|
-
"@progress/kendo-svg-icons": "^
|
|
28
|
+
"@progress/kendo-react-animation": "7.5.0-develop.20",
|
|
29
|
+
"@progress/kendo-react-buttons": "7.5.0-develop.20",
|
|
30
|
+
"@progress/kendo-react-common": "7.5.0-develop.20",
|
|
31
|
+
"@progress/kendo-react-dateinputs": "7.5.0-develop.20",
|
|
32
|
+
"@progress/kendo-react-dropdowns": "7.5.0-develop.20",
|
|
33
|
+
"@progress/kendo-react-inputs": "7.5.0-develop.20",
|
|
34
|
+
"@progress/kendo-react-intl": "7.5.0-develop.20",
|
|
35
|
+
"@progress/kendo-react-popup": "7.5.0-develop.20",
|
|
36
|
+
"@progress/kendo-svg-icons": "^3.0.0",
|
|
37
37
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
38
38
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
39
39
|
},
|
package/pager/Pager.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),i=require("prop-types"),H=require("./PagerNumericButtons.js"),J=require("./PagerInput.js"),Q=require("./PagerPageSizes.js"),X=require("@progress/kendo-react-buttons"),e=require("../messages/index.js"),v=require("@progress/kendo-react-intl"),r=require("@progress/kendo-react-common"),u=require("@progress/kendo-svg-icons"),Y=require("../package-metadata.js");function Z(h){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const s in h)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(h,s);Object.defineProperty(g,s,t.get?t:{enumerable:!0,get:()=>h[s]})}}return g.default=h,Object.freeze(g)}const p=Z(G),x=600,ee=768,M=class M extends p.Component{constructor(g){super(g),this._element=null,this.onPageChange=(s,t)=>{const n={target:this,syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,targetEvent:t,...s};this.props.onPageChange&&this.props.onPageChange.call(void 0,n)},this.changePage=(s,t)=>{this.props.onPageChange&&s>0&&s<=this.totalPages&&this.props.onPageChange({target:this,skip:(s-1)*this.props.take,take:this.props.take,syntheticEvent:t,nativeEvent:t.nativeEvent,targetEvent:t})},this.onWindowResize=()=>{const s=this.element;if(!s||!this.props.responsive)return;const t=s.offsetWidth;t<x?this.setState({showPagerSizes:!1}):t>=x&&t<ee?this.setState({showPagerInfo:!1,showPagerSizes:!0}):this.setState({showPagerInfo:!0,showPagerSizes:!0})},this.onKeyDown=s=>{const t=this.element,n=s.keyCode;!t||!this.props.navigatable||((n===r.Keys.home||s.metaKey&&n===r.Keys.left)&&this.changePage(1,s),(n===r.Keys.end||s.metaKey&&n===r.Keys.right)&&this.changePage(this.totalPages,s),document.activeElement===t?(n===r.Keys.enter&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t)),(n===r.Keys.left||n===r.Keys.up)&&this.changePage(this.currentPage-1,s),(n===r.Keys.right||n===r.Keys.down)&&this.changePage(this.currentPage+1,s)):(n===r.Keys.esc&&(t.focus(),r.disableNavigatableContainer(t)),r.keepFocusInContainer(s,t,r.TABBABLE_ELEMENTS)))},r.validatePackage(Y.packageMetadata),this.state={showPagerSizes:!0,showPagerInfo:!0,innerNavigateActive:!1}}get isRtl(){return this.props.dir==="rtl"}get currentPage(){return Math.floor(this.props.skip/this.props.take)+1}get element(){return this._element}componentDidMount(){window.addEventListener("resize",this.onWindowResize),this.onWindowResize()}componentWillUnmount(){window.removeEventListener("resize",this.onWindowResize)}render(){const{showPagerSizes:g,showPagerInfo:s}=this.state,{skip:t,take:n,total:d,pageSizes:P,size:c,responsive:K,messagesMap:a,dir:_,style:D,pageSizeValue:F,previousNext:j,className:W,navigatable:y,disabled:f}=this.props,l=v.provideLocalizationService(this),k=v.provideIntlService(this),o=this.currentPage,$=this.props.type==="numeric"?p.createElement(H.PagerNumericButtons,{type:K&&!g?"dropdown":"numbers",buttonCount:this.props.buttonCount||0,totalPages:this.totalPages,currentPage:this.currentPage,pageChange:this.changePage,messagesMap:this.props.messagesMap,size:c,navigatable:y}):p.createElement(J.PagerInput,{buttonCount:this.props.buttonCount||0,totalPages:this.totalPages,currentPage:o,pageChange:this.changePage,messagesMap:a,size:c,navigatable:y}),S=a?a(e.pagerFirstPage):{messageKey:e.pagerFirstPage,defaultMessage:e.messages[e.pagerFirstPage]},R=a?a(e.pagerPreviousPage):{messageKey:e.pagerPreviousPage,defaultMessage:e.messages[e.pagerPreviousPage]},I=a?a(e.pagerNextPage):{messageKey:e.pagerNextPage,defaultMessage:e.messages[e.pagerNextPage]},z=a?a(e.pagerLastPage):{messageKey:e.pagerLastPage,defaultMessage:e.messages[e.pagerLastPage]},E=a?a(e.pagerInfo):{messageKey:e.pagerInfo,defaultMessage:e.messages[e.pagerInfo]},w=a?a(e.pagerAriaKeyshortcuts):{messageKey:e.pagerAriaKeyshortcuts,defaultMessage:e.messages[e.pagerAriaKeyshortcuts]},C=a?a(e.pagerPage):{messageKey:e.pagerPage,defaultMessage:e.messages[e.pagerPage]},L=a?a(e.pagerOf):{messageKey:e.pagerOf,defaultMessage:e.messages[e.pagerOf]},b=a?a(e.pagerTotalPages):{messageKey:e.pagerTotalPages,defaultMessage:e.messages[e.pagerTotalPages]},V=`${l.toLanguageString(C.messageKey,C.defaultMessage)} ${k.format(l.toLanguageString(b.messageKey,b.defaultMessage),[o])} ${l.toLanguageString(L.messageKey,L.defaultMessage)} ${k.format(l.toLanguageString(b.messageKey,b.defaultMessage),[this.totalPages])}`;let N,A,O,T;j&&(N=this.renderButton(1,"k-pager-nav k-pager-first"+(o===1&&!f?" k-disabled":""),l.toLanguageString(S.messageKey,S.defaultMessage),this.isRtl?"caret-alt-to-right":"caret-alt-to-left",this.isRtl?u.caretAltToRightIcon:u.caretAltToLeftIcon,o===1?!0:void 0),A=this.renderButton(o-1,"k-pager-nav"+(o===1&&!f?" k-disabled":""),l.toLanguageString(R.messageKey,R.defaultMessage),this.isRtl?"caret-alt-right":"caret-alt-left",this.isRtl?u.caretAltRightIcon:u.caretAltLeftIcon,o===1?!0:void 0),O=this.renderButton(o+1,"k-pager-nav"+(o>=this.totalPages&&!f?" k-disabled":""),l.toLanguageString(I.messageKey,I.defaultMessage),this.isRtl?"caret-alt-left":"caret-alt-right",this.isRtl?u.caretAltLeftIcon:u.caretAltRightIcon,o>=this.totalPages?!0:void 0),T=this.renderButton(this.totalPages,"k-pager-nav k-pager-last"+(o>=this.totalPages&&!f?" k-disabled":""),l.toLanguageString(z.messageKey,z.defaultMessage),this.isRtl?"caret-alt-to-left":"caret-alt-to-right",this.isRtl?u.caretAltToLeftIcon:u.caretAltToRightIcon,o>=this.totalPages?!0:void 0));const q=P&&p.createElement(Q.PagerPageSizes,{pageChange:this.onPageChange,pageSize:n,pageSizes:P,value:F,messagesMap:a,size:c,navigatable:y}),B=this.props.info&&p.createElement("span",{className:"k-pager-info"},k.format(l.toLanguageString(E.messageKey,E.defaultMessage),[Math.min(t+1,d),Math.min(t+n,d),d]));return p.createElement("div",{className:r.classNames("k-pager",{[`k-pager-${r.kendoThemeMaps.sizeMap[c]||c}`]:c,"k-disabled":f},W),style:D,role:"application","aria-roledescription":"pager",dir:_,"aria-keyshortcuts":l.toLanguageString(w.messageKey,w.defaultMessage),"aria-label":V,ref:U=>this._element=U,tabIndex:y?0:void 0,onKeyDown:this.onKeyDown},p.createElement("div",{className:r.classNames("k-pager-numbers-wrap")},N,A,$,O,T),K?g&&q:q,K?s&&B:B)}renderButton(g,s,t,n,d,P){return p.createElement(X.Button,{fillMode:"flat",themeColor:"base",size:this.props.size,rounded:null,className:s,icon:n,svgIcon:d,title:t,role:"button","aria-disabled":P,tabIndex:this.props.navigatable?-1:void 0,onClick:c=>{c.preventDefault(),this.changePage(g,c)}})}get totalPages(){return Math.ceil((this.props.total||0)/this.props.take)}};M.propTypes={className:i.string,style:i.object,total:i.number.isRequired,skip:i.number.isRequired,take:i.number.isRequired,buttonCount:i.number,info:i.bool,type:i.oneOf(["numeric","input"]),pageSizes:i.arrayOf(i.oneOfType([i.string,i.number])),previousNext:i.bool,onPageChange:i.func,messagesMap:i.func,size:i.oneOf([null,"small","medium","large"]),dir:i.string,disabled:i.bool},M.defaultProps={buttonCount:10,info:!0,type:"numeric",size:"medium",disabled:!1};let m=M;v.registerForIntl(m);v.registerForLocalization(m);exports.Pager=m;
|
package/pager/Pager.mjs
CHANGED
|
@@ -7,27 +7,27 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as h from "react";
|
|
10
|
-
import
|
|
11
|
-
import { PagerNumericButtons as
|
|
12
|
-
import { PagerInput as
|
|
13
|
-
import { PagerPageSizes as
|
|
14
|
-
import { Button as
|
|
15
|
-
import { pagerFirstPage as
|
|
16
|
-
import { provideLocalizationService as
|
|
17
|
-
import { Keys as n, focusFirstFocusableChild as
|
|
18
|
-
import { caretAltToRightIcon as
|
|
19
|
-
import { packageMetadata as
|
|
20
|
-
const
|
|
10
|
+
import a from "prop-types";
|
|
11
|
+
import { PagerNumericButtons as ie } from "./PagerNumericButtons.mjs";
|
|
12
|
+
import { PagerInput as re } from "./PagerInput.mjs";
|
|
13
|
+
import { PagerPageSizes as oe } from "./PagerPageSizes.mjs";
|
|
14
|
+
import { Button as ne } from "@progress/kendo-react-buttons";
|
|
15
|
+
import { pagerFirstPage as b, messages as l, pagerPreviousPage as k, pagerNextPage as S, pagerLastPage as K, pagerInfo as E, pagerAriaKeyshortcuts as z, pagerPage as w, pagerOf as C, pagerTotalPages as R } from "../messages/index.mjs";
|
|
16
|
+
import { provideLocalizationService as ge, provideIntlService as le, registerForIntl as he, registerForLocalization as pe } from "@progress/kendo-react-intl";
|
|
17
|
+
import { Keys as n, focusFirstFocusableChild as ue, enableNavigatableContainer as ce, disableNavigatableContainer as me, keepFocusInContainer as de, TABBABLE_ELEMENTS as fe, validatePackage as Pe, classNames as V, kendoThemeMaps as Me } from "@progress/kendo-react-common";
|
|
18
|
+
import { caretAltToRightIcon as U, caretAltToLeftIcon as j, caretAltRightIcon as G, caretAltLeftIcon as H } from "@progress/kendo-svg-icons";
|
|
19
|
+
import { packageMetadata as ve } from "../package-metadata.mjs";
|
|
20
|
+
const J = 600, ye = 768, M = class M extends h.Component {
|
|
21
21
|
constructor(p) {
|
|
22
22
|
super(p), this._element = null, this.onPageChange = (t, e) => {
|
|
23
|
-
const
|
|
23
|
+
const i = {
|
|
24
24
|
target: this,
|
|
25
25
|
syntheticEvent: e.syntheticEvent,
|
|
26
26
|
nativeEvent: e.nativeEvent,
|
|
27
27
|
targetEvent: e,
|
|
28
28
|
...t
|
|
29
29
|
};
|
|
30
|
-
this.props.onPageChange && this.props.onPageChange.call(void 0,
|
|
30
|
+
this.props.onPageChange && this.props.onPageChange.call(void 0, i);
|
|
31
31
|
}, this.changePage = (t, e) => {
|
|
32
32
|
this.props.onPageChange && t > 0 && t <= this.totalPages && this.props.onPageChange({
|
|
33
33
|
target: this,
|
|
@@ -42,11 +42,11 @@ const H = 600, ve = 768, P = class P extends h.Component {
|
|
|
42
42
|
if (!t || !this.props.responsive)
|
|
43
43
|
return;
|
|
44
44
|
const e = t.offsetWidth;
|
|
45
|
-
e <
|
|
45
|
+
e < J ? this.setState({ showPagerSizes: !1 }) : e >= J && e < ye ? this.setState({ showPagerInfo: !1, showPagerSizes: !0 }) : this.setState({ showPagerInfo: !0, showPagerSizes: !0 });
|
|
46
46
|
}, this.onKeyDown = (t) => {
|
|
47
|
-
const e = this.element,
|
|
48
|
-
!e || !this.props.navigatable || ((
|
|
49
|
-
},
|
|
47
|
+
const e = this.element, i = t.keyCode;
|
|
48
|
+
!e || !this.props.navigatable || ((i === n.home || t.metaKey && i === n.left) && this.changePage(1, t), (i === n.end || t.metaKey && i === n.right) && this.changePage(this.totalPages, t), document.activeElement === e ? (i === n.enter && (ue(e), ce(e)), (i === n.left || i === n.up) && this.changePage(this.currentPage - 1, t), (i === n.right || i === n.down) && this.changePage(this.currentPage + 1, t)) : (i === n.esc && (e.focus(), me(e)), de(t, e, fe)));
|
|
49
|
+
}, Pe(ve), this.state = { showPagerSizes: !0, showPagerInfo: !0, innerNavigateActive: !1 };
|
|
50
50
|
}
|
|
51
51
|
get isRtl() {
|
|
52
52
|
return this.props.dir === "rtl";
|
|
@@ -78,32 +78,33 @@ const H = 600, ve = 768, P = class P extends h.Component {
|
|
|
78
78
|
render() {
|
|
79
79
|
const { showPagerSizes: p, showPagerInfo: t } = this.state, {
|
|
80
80
|
skip: e,
|
|
81
|
-
take:
|
|
81
|
+
take: i,
|
|
82
82
|
total: u,
|
|
83
|
-
pageSizes:
|
|
83
|
+
pageSizes: m,
|
|
84
84
|
size: g,
|
|
85
|
-
responsive:
|
|
85
|
+
responsive: v,
|
|
86
86
|
messagesMap: s,
|
|
87
|
-
dir:
|
|
88
|
-
style:
|
|
89
|
-
pageSizeValue:
|
|
90
|
-
previousNext:
|
|
91
|
-
className:
|
|
92
|
-
navigatable:
|
|
93
|
-
|
|
94
|
-
|
|
87
|
+
dir: Q,
|
|
88
|
+
style: X,
|
|
89
|
+
pageSizeValue: Y,
|
|
90
|
+
previousNext: Z,
|
|
91
|
+
className: ee,
|
|
92
|
+
navigatable: d,
|
|
93
|
+
disabled: c
|
|
94
|
+
} = this.props, o = ge(this), y = le(this), r = this.currentPage, te = this.props.type === "numeric" ? /* @__PURE__ */ h.createElement(
|
|
95
|
+
ie,
|
|
95
96
|
{
|
|
96
|
-
type:
|
|
97
|
+
type: v && !p ? "dropdown" : "numbers",
|
|
97
98
|
buttonCount: this.props.buttonCount || 0,
|
|
98
99
|
totalPages: this.totalPages,
|
|
99
100
|
currentPage: this.currentPage,
|
|
100
101
|
pageChange: this.changePage,
|
|
101
102
|
messagesMap: this.props.messagesMap,
|
|
102
103
|
size: g,
|
|
103
|
-
navigatable:
|
|
104
|
+
navigatable: d
|
|
104
105
|
}
|
|
105
106
|
) : /* @__PURE__ */ h.createElement(
|
|
106
|
-
|
|
107
|
+
re,
|
|
107
108
|
{
|
|
108
109
|
buttonCount: this.props.buttonCount || 0,
|
|
109
110
|
totalPages: this.totalPages,
|
|
@@ -111,112 +112,113 @@ const H = 600, ve = 768, P = class P extends h.Component {
|
|
|
111
112
|
pageChange: this.changePage,
|
|
112
113
|
messagesMap: s,
|
|
113
114
|
size: g,
|
|
114
|
-
navigatable:
|
|
115
|
+
navigatable: d
|
|
115
116
|
}
|
|
116
|
-
),
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
)} ${
|
|
117
|
+
), L = s ? s(b) : { messageKey: b, defaultMessage: l[b] }, I = s ? s(k) : { messageKey: k, defaultMessage: l[k] }, N = s ? s(S) : { messageKey: S, defaultMessage: l[S] }, A = s ? s(K) : { messageKey: K, defaultMessage: l[K] }, B = s ? s(E) : { messageKey: E, defaultMessage: l[E] }, T = s ? s(z) : { messageKey: z, defaultMessage: l[z] }, x = s ? s(w) : { messageKey: w, defaultMessage: l[w] }, O = s ? s(C) : { messageKey: C, defaultMessage: l[C] }, f = s ? s(R) : { messageKey: R, defaultMessage: l[R] }, se = `${o.toLanguageString(
|
|
118
|
+
x.messageKey,
|
|
119
|
+
x.defaultMessage
|
|
120
|
+
)} ${y.format(
|
|
120
121
|
o.toLanguageString(
|
|
121
122
|
f.messageKey,
|
|
122
123
|
f.defaultMessage
|
|
123
124
|
),
|
|
124
125
|
[r]
|
|
125
126
|
)} ${o.toLanguageString(
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
)} ${
|
|
127
|
+
O.messageKey,
|
|
128
|
+
O.defaultMessage
|
|
129
|
+
)} ${y.format(
|
|
129
130
|
o.toLanguageString(
|
|
130
131
|
f.messageKey,
|
|
131
132
|
f.defaultMessage
|
|
132
133
|
),
|
|
133
134
|
[this.totalPages]
|
|
134
135
|
)}`;
|
|
135
|
-
let
|
|
136
|
-
|
|
136
|
+
let D, F, W, _;
|
|
137
|
+
Z && (D = this.renderButton(
|
|
137
138
|
1,
|
|
138
|
-
"k-pager-nav k-pager-first" + (r === 1 ? " k-disabled" : ""),
|
|
139
|
-
o.toLanguageString(
|
|
139
|
+
"k-pager-nav k-pager-first" + (r === 1 && !c ? " k-disabled" : ""),
|
|
140
|
+
o.toLanguageString(L.messageKey, L.defaultMessage),
|
|
140
141
|
this.isRtl ? "caret-alt-to-right" : "caret-alt-to-left",
|
|
141
|
-
this.isRtl ?
|
|
142
|
+
this.isRtl ? U : j,
|
|
142
143
|
r === 1 ? !0 : void 0
|
|
143
|
-
),
|
|
144
|
+
), F = this.renderButton(
|
|
144
145
|
r - 1,
|
|
145
|
-
"k-pager-nav" + (r === 1 ? " k-disabled" : ""),
|
|
146
|
-
o.toLanguageString(
|
|
146
|
+
"k-pager-nav" + (r === 1 && !c ? " k-disabled" : ""),
|
|
147
|
+
o.toLanguageString(I.messageKey, I.defaultMessage),
|
|
147
148
|
this.isRtl ? "caret-alt-right" : "caret-alt-left",
|
|
148
|
-
this.isRtl ?
|
|
149
|
+
this.isRtl ? G : H,
|
|
149
150
|
r === 1 ? !0 : void 0
|
|
150
|
-
),
|
|
151
|
+
), W = this.renderButton(
|
|
151
152
|
r + 1,
|
|
152
|
-
"k-pager-nav" + (r >= this.totalPages ? " k-disabled" : ""),
|
|
153
|
-
o.toLanguageString(
|
|
153
|
+
"k-pager-nav" + (r >= this.totalPages && !c ? " k-disabled" : ""),
|
|
154
|
+
o.toLanguageString(N.messageKey, N.defaultMessage),
|
|
154
155
|
this.isRtl ? "caret-alt-left" : "caret-alt-right",
|
|
155
|
-
this.isRtl ?
|
|
156
|
+
this.isRtl ? H : G,
|
|
156
157
|
r >= this.totalPages ? !0 : void 0
|
|
157
|
-
),
|
|
158
|
+
), _ = this.renderButton(
|
|
158
159
|
this.totalPages,
|
|
159
|
-
"k-pager-nav k-pager-last" + (r >= this.totalPages ? " k-disabled" : ""),
|
|
160
|
-
o.toLanguageString(
|
|
160
|
+
"k-pager-nav k-pager-last" + (r >= this.totalPages && !c ? " k-disabled" : ""),
|
|
161
|
+
o.toLanguageString(A.messageKey, A.defaultMessage),
|
|
161
162
|
this.isRtl ? "caret-alt-to-left" : "caret-alt-to-right",
|
|
162
|
-
this.isRtl ?
|
|
163
|
+
this.isRtl ? j : U,
|
|
163
164
|
r >= this.totalPages ? !0 : void 0
|
|
164
165
|
));
|
|
165
|
-
const
|
|
166
|
-
|
|
166
|
+
const $ = m && /* @__PURE__ */ h.createElement(
|
|
167
|
+
oe,
|
|
167
168
|
{
|
|
168
169
|
pageChange: this.onPageChange,
|
|
169
|
-
pageSize:
|
|
170
|
-
pageSizes:
|
|
171
|
-
value:
|
|
170
|
+
pageSize: i,
|
|
171
|
+
pageSizes: m,
|
|
172
|
+
value: Y,
|
|
172
173
|
messagesMap: s,
|
|
173
174
|
size: g,
|
|
174
|
-
navigatable:
|
|
175
|
+
navigatable: d
|
|
175
176
|
}
|
|
176
|
-
),
|
|
177
|
+
), q = this.props.info && /* @__PURE__ */ h.createElement("span", { className: "k-pager-info" }, y.format(o.toLanguageString(B.messageKey, B.defaultMessage), [
|
|
177
178
|
Math.min(e + 1, u),
|
|
178
|
-
Math.min(e +
|
|
179
|
+
Math.min(e + i, u),
|
|
179
180
|
u
|
|
180
181
|
]));
|
|
181
182
|
return /* @__PURE__ */ h.createElement(
|
|
182
183
|
"div",
|
|
183
184
|
{
|
|
184
|
-
className:
|
|
185
|
+
className: V(
|
|
185
186
|
"k-pager",
|
|
186
187
|
{
|
|
187
|
-
[`k-pager-${
|
|
188
|
+
[`k-pager-${Me.sizeMap[g] || g}`]: g,
|
|
189
|
+
"k-disabled": c
|
|
188
190
|
},
|
|
189
|
-
|
|
191
|
+
ee
|
|
190
192
|
),
|
|
191
|
-
style:
|
|
193
|
+
style: X,
|
|
192
194
|
role: "application",
|
|
193
195
|
"aria-roledescription": "pager",
|
|
194
|
-
dir:
|
|
195
|
-
"aria-keyshortcuts": o.toLanguageString(
|
|
196
|
-
"aria-label":
|
|
197
|
-
ref: (
|
|
198
|
-
tabIndex:
|
|
196
|
+
dir: Q,
|
|
197
|
+
"aria-keyshortcuts": o.toLanguageString(T.messageKey, T.defaultMessage),
|
|
198
|
+
"aria-label": se,
|
|
199
|
+
ref: (ae) => this._element = ae,
|
|
200
|
+
tabIndex: d ? 0 : void 0,
|
|
199
201
|
onKeyDown: this.onKeyDown
|
|
200
202
|
},
|
|
201
|
-
/* @__PURE__ */ h.createElement("div", { className:
|
|
202
|
-
|
|
203
|
-
|
|
203
|
+
/* @__PURE__ */ h.createElement("div", { className: V("k-pager-numbers-wrap") }, D, F, te, W, _),
|
|
204
|
+
v ? p && $ : $,
|
|
205
|
+
v ? t && q : q
|
|
204
206
|
);
|
|
205
207
|
}
|
|
206
|
-
renderButton(p, t, e,
|
|
208
|
+
renderButton(p, t, e, i, u, m) {
|
|
207
209
|
return /* @__PURE__ */ h.createElement(
|
|
208
|
-
|
|
210
|
+
ne,
|
|
209
211
|
{
|
|
210
212
|
fillMode: "flat",
|
|
211
213
|
themeColor: "base",
|
|
212
214
|
size: this.props.size,
|
|
213
215
|
rounded: null,
|
|
214
216
|
className: t,
|
|
215
|
-
icon:
|
|
217
|
+
icon: i,
|
|
216
218
|
svgIcon: u,
|
|
217
219
|
title: e,
|
|
218
220
|
role: "button",
|
|
219
|
-
"aria-disabled":
|
|
221
|
+
"aria-disabled": m,
|
|
220
222
|
tabIndex: this.props.navigatable ? -1 : void 0,
|
|
221
223
|
onClick: (g) => {
|
|
222
224
|
g.preventDefault(), this.changePage(p, g);
|
|
@@ -228,33 +230,35 @@ const H = 600, ve = 768, P = class P extends h.Component {
|
|
|
228
230
|
return Math.ceil((this.props.total || 0) / this.props.take);
|
|
229
231
|
}
|
|
230
232
|
};
|
|
231
|
-
|
|
232
|
-
className:
|
|
233
|
-
style:
|
|
234
|
-
total:
|
|
235
|
-
skip:
|
|
236
|
-
take:
|
|
237
|
-
buttonCount:
|
|
238
|
-
info:
|
|
239
|
-
type:
|
|
240
|
-
pageSizes:
|
|
241
|
-
|
|
242
|
-
|
|
233
|
+
M.propTypes = {
|
|
234
|
+
className: a.string,
|
|
235
|
+
style: a.object,
|
|
236
|
+
total: a.number.isRequired,
|
|
237
|
+
skip: a.number.isRequired,
|
|
238
|
+
take: a.number.isRequired,
|
|
239
|
+
buttonCount: a.number,
|
|
240
|
+
info: a.bool,
|
|
241
|
+
type: a.oneOf(["numeric", "input"]),
|
|
242
|
+
pageSizes: a.arrayOf(a.oneOfType([
|
|
243
|
+
a.string,
|
|
244
|
+
a.number
|
|
243
245
|
])),
|
|
244
|
-
previousNext:
|
|
245
|
-
onPageChange:
|
|
246
|
-
messagesMap:
|
|
247
|
-
size:
|
|
248
|
-
dir:
|
|
249
|
-
|
|
246
|
+
previousNext: a.bool,
|
|
247
|
+
onPageChange: a.func,
|
|
248
|
+
messagesMap: a.func,
|
|
249
|
+
size: a.oneOf([null, "small", "medium", "large"]),
|
|
250
|
+
dir: a.string,
|
|
251
|
+
disabled: a.bool
|
|
252
|
+
}, M.defaultProps = {
|
|
250
253
|
buttonCount: 10,
|
|
251
254
|
info: !0,
|
|
252
255
|
type: "numeric",
|
|
253
|
-
size: "medium"
|
|
256
|
+
size: "medium",
|
|
257
|
+
disabled: !1
|
|
254
258
|
};
|
|
255
|
-
let
|
|
256
|
-
|
|
257
|
-
|
|
259
|
+
let P = M;
|
|
260
|
+
he(P);
|
|
261
|
+
pe(P);
|
|
258
262
|
export {
|
|
259
|
-
|
|
263
|
+
P as Pager
|
|
260
264
|
};
|