@progress/kendo-react-scrollview 8.1.0-develop.9 → 8.1.0
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/ScrollView.js +1 -1
- package/ScrollView.mjs +66 -67
- package/dist/cdn/js/kendo-react-scrollview.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +2 -2
package/ScrollView.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 A=require("react"),r=require("prop-types"),o=require("@progress/kendo-react-common"),_=require("./package-metadata.js"),k=require("@progress/kendo-svg-icons");function z(c){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const d=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(g,i,d.get?d:{enumerable:!0,get:()=>c[i]})}}return g.default=c,Object.freeze(g)}const e=z(A),N=e.forwardRef((c,g)=>{o.validatePackage(_.packageMetadata);const{className:i,style:d,children:E,pagerOverlay:b=m.pageOverlay,pageable:S=m.pageable,arrows:P=m.arrows,endless:n=m.endless,activeView:T=m.activeView,automaticViewChange:V=m.automaticViewChange,automaticViewChangeInterval:R=m.automaticViewChangeInterval}=c,[t,s]=e.useState(T||1),v=e.useRef(null),w=e.useRef(null),y=e.useRef(null),l=e.Children.toArray(E),C=o.useRtl(v,c.dir),u=C==="rtl",I=e.useCallback(()=>{v.current&&v.current.focus()},[]),j=e.useCallback(()=>({element:v.current,focus:I}),[I]);e.useImperativeHandle(g,j);const h=e.useCallback(()=>{n?t>1?s(t-1):s(l.length):t>1&&s(t-1)},[t,l.length,n]),p=e.useCallback(()=>{n?t<l.length?s(t+1):s(1):t<l.length&&s(t+1)},[t,l.length,n]);e.useEffect(()=>{let a=l.length;w.current&&(w.current.style.setProperty("--kendo-scrollview-views",`${a}`),w.current.style.setProperty("--kendo-scrollview-current",`${t}`))},[l,t,C]);function O(){y.current&&clearTimeout(y.current)}e.useEffect(()=>{if(V)return O(),y.current=setTimeout(()=>s(a=>a===l.length?n?1:a:a+1),R),()=>{O()}},[V,R,l.length,t,n]);const D=e.useCallback(a=>{switch(a.keyCode){case o.Keys.left:a.preventDefault(),u?p():h();break;case o.Keys.right:a.preventDefault(),u?h():p();break}},[u,p,h]),q=e.useMemo(()=>o.classNames("k-scrollview",{"k-scrollview-light":b==="light","k-scrollview-dark":b==="dark"},i),[i,b]),x=e.Children.map(E||null,(a,f)=>e.createElement("div",{className:"k-scrollview-view","aria-hidden":t!==f+1},a)),K=e.useCallback(()=>{let a;return a=t>1,(n||a)&&l.length>0},[t,l.length,n]),M=e.useCallback(()=>{let a;return a=t<l.length,(n||a)&&l.length>0},[t,l.length,n]);return e.createElement("div",{className:q,style:d,ref:v,tabIndex:0,dir:C,onKeyDown:D},e.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:w},x),e.createElement("div",{className:"k-scrollview-elements"},P&&e.createElement(e.Fragment,null,K()&&e.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:h},e.createElement(o.IconWrap,{name:u?"chevron-right":"chevron-left",icon:u?k.chevronRightIcon:k.chevronLeftIcon,size:"xxxlarge"})),M()&&e.createElement("span",{className:"k-scrollview-next",onClick:p},e.createElement(o.IconWrap,{name:u?"chevron-left":"chevron-right",icon:u?k.chevronLeftIcon:k.chevronRightIcon,size:"xxxlarge"}))),S&&e.createElement("div",{className:"k-scrollview-nav-wrap"},e.createElement("div",{className:"k-scrollview-nav"},l.map((a,f)=>e.createElement("span",{className:o.classNames("k-link",{"k-primary":t===f+1}),key:f+1,onClick:()=>s(f+1)}))))),e.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}))});N.propTypes={activeView:r.number,arrows:r.bool,automaticViewChange:r.bool,automaticViewChangeInterval:r.number,children:r.any,className:r.string,dir:r.string,endless:r.bool,pageable:r.bool,pageOverlay:r.string,style:r.object};const m={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};N.displayName="KendoScrollView";exports.ScrollView=N;
|
package/ScrollView.mjs
CHANGED
|
@@ -8,121 +8,121 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as e from "react";
|
|
10
10
|
import r from "prop-types";
|
|
11
|
-
import { validatePackage as
|
|
12
|
-
import { packageMetadata as
|
|
11
|
+
import { validatePackage as $, useRtl as j, Keys as N, classNames as V, IconWrap as R } from "@progress/kendo-react-common";
|
|
12
|
+
import { packageMetadata as F } from "./package-metadata.mjs";
|
|
13
13
|
import { chevronRightIcon as I, chevronLeftIcon as x } from "@progress/kendo-svg-icons";
|
|
14
|
-
const
|
|
15
|
-
|
|
14
|
+
const P = e.forwardRef((p, T) => {
|
|
15
|
+
$(F);
|
|
16
16
|
const {
|
|
17
17
|
className: d,
|
|
18
|
-
style:
|
|
18
|
+
style: A,
|
|
19
19
|
children: k,
|
|
20
|
-
pagerOverlay:
|
|
21
|
-
pageable:
|
|
22
|
-
arrows:
|
|
23
|
-
endless: n,
|
|
24
|
-
activeView:
|
|
25
|
-
automaticViewChange: y,
|
|
26
|
-
automaticViewChangeInterval:
|
|
27
|
-
} = p, [t, s] = e.useState(
|
|
20
|
+
pagerOverlay: w = o.pageOverlay,
|
|
21
|
+
pageable: D = o.pageable,
|
|
22
|
+
arrows: K = o.arrows,
|
|
23
|
+
endless: n = o.endless,
|
|
24
|
+
activeView: O = o.activeView,
|
|
25
|
+
automaticViewChange: y = o.automaticViewChange,
|
|
26
|
+
automaticViewChangeInterval: C = o.automaticViewChangeInterval
|
|
27
|
+
} = p, [t, s] = e.useState(O || 1), i = e.useRef(null), u = e.useRef(null), f = e.useRef(null), l = e.Children.toArray(k), h = j(i, p.dir), c = h === "rtl", b = e.useCallback(
|
|
28
28
|
() => {
|
|
29
|
-
|
|
29
|
+
i.current && i.current.focus();
|
|
30
30
|
},
|
|
31
31
|
[]
|
|
32
|
-
),
|
|
32
|
+
), S = e.useCallback(
|
|
33
33
|
() => ({
|
|
34
|
-
element:
|
|
35
|
-
focus:
|
|
34
|
+
element: i.current,
|
|
35
|
+
focus: b
|
|
36
36
|
}),
|
|
37
|
-
[
|
|
37
|
+
[b]
|
|
38
38
|
);
|
|
39
|
-
e.useImperativeHandle(
|
|
40
|
-
const
|
|
41
|
-
n ? t > 1 ? s(t - 1) : s(
|
|
42
|
-
}, [t,
|
|
43
|
-
n ? t <
|
|
44
|
-
}, [t,
|
|
39
|
+
e.useImperativeHandle(T, S);
|
|
40
|
+
const v = e.useCallback(() => {
|
|
41
|
+
n ? t > 1 ? s(t - 1) : s(l.length) : t > 1 && s(t - 1);
|
|
42
|
+
}, [t, l.length, n]), g = e.useCallback(() => {
|
|
43
|
+
n ? t < l.length ? s(t + 1) : s(1) : t < l.length && s(t + 1);
|
|
44
|
+
}, [t, l.length, n]);
|
|
45
45
|
e.useEffect(() => {
|
|
46
|
-
let
|
|
47
|
-
|
|
48
|
-
}, [
|
|
46
|
+
let a = l.length;
|
|
47
|
+
u.current && (u.current.style.setProperty("--kendo-scrollview-views", `${a}`), u.current.style.setProperty("--kendo-scrollview-current", `${t}`));
|
|
48
|
+
}, [l, t, h]);
|
|
49
49
|
function E() {
|
|
50
|
-
|
|
50
|
+
f.current && clearTimeout(f.current);
|
|
51
51
|
}
|
|
52
52
|
e.useEffect(() => {
|
|
53
53
|
if (y)
|
|
54
|
-
return E(),
|
|
55
|
-
() => s((
|
|
56
|
-
|
|
54
|
+
return E(), f.current = setTimeout(
|
|
55
|
+
() => s((a) => a === l.length ? n ? 1 : a : a + 1),
|
|
56
|
+
C
|
|
57
57
|
), () => {
|
|
58
58
|
E();
|
|
59
59
|
};
|
|
60
|
-
}, [y,
|
|
61
|
-
const
|
|
62
|
-
(
|
|
63
|
-
switch (
|
|
60
|
+
}, [y, C, l.length, t, n]);
|
|
61
|
+
const z = e.useCallback(
|
|
62
|
+
(a) => {
|
|
63
|
+
switch (a.keyCode) {
|
|
64
64
|
case N.left:
|
|
65
|
-
|
|
65
|
+
a.preventDefault(), c ? g() : v();
|
|
66
66
|
break;
|
|
67
67
|
case N.right:
|
|
68
|
-
|
|
68
|
+
a.preventDefault(), c ? v() : g();
|
|
69
69
|
break;
|
|
70
70
|
}
|
|
71
71
|
},
|
|
72
|
-
[c,
|
|
73
|
-
),
|
|
74
|
-
() =>
|
|
72
|
+
[c, g, v]
|
|
73
|
+
), B = e.useMemo(
|
|
74
|
+
() => V(
|
|
75
75
|
"k-scrollview",
|
|
76
76
|
{
|
|
77
|
-
"k-scrollview-light":
|
|
78
|
-
"k-scrollview-dark":
|
|
77
|
+
"k-scrollview-light": w === "light",
|
|
78
|
+
"k-scrollview-dark": w === "dark"
|
|
79
79
|
},
|
|
80
80
|
d
|
|
81
81
|
),
|
|
82
|
-
[d,
|
|
83
|
-
),
|
|
82
|
+
[d, w]
|
|
83
|
+
), H = e.Children.map(k || null, (a, m) => /* @__PURE__ */ e.createElement(
|
|
84
84
|
"div",
|
|
85
85
|
{
|
|
86
86
|
className: "k-scrollview-view",
|
|
87
|
-
"aria-hidden": t !==
|
|
87
|
+
"aria-hidden": t !== m + 1
|
|
88
88
|
},
|
|
89
|
-
|
|
90
|
-
)),
|
|
91
|
-
let
|
|
92
|
-
return
|
|
93
|
-
}, [t,
|
|
94
|
-
let
|
|
95
|
-
return
|
|
96
|
-
}, [t,
|
|
97
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
98
|
-
|
|
89
|
+
a
|
|
90
|
+
)), L = e.useCallback(() => {
|
|
91
|
+
let a;
|
|
92
|
+
return a = t > 1, (n || a) && l.length > 0;
|
|
93
|
+
}, [t, l.length, n]), M = e.useCallback(() => {
|
|
94
|
+
let a;
|
|
95
|
+
return a = t < l.length, (n || a) && l.length > 0;
|
|
96
|
+
}, [t, l.length, n]);
|
|
97
|
+
return /* @__PURE__ */ e.createElement("div", { className: B, style: A, ref: i, tabIndex: 0, dir: h, onKeyDown: z }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: u }, H), /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, K && /* @__PURE__ */ e.createElement(e.Fragment, null, L() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-prev", "aria-label": "previous", onClick: v }, /* @__PURE__ */ e.createElement(
|
|
98
|
+
R,
|
|
99
99
|
{
|
|
100
100
|
name: c ? "chevron-right" : "chevron-left",
|
|
101
101
|
icon: c ? I : x,
|
|
102
102
|
size: "xxxlarge"
|
|
103
103
|
}
|
|
104
|
-
)),
|
|
105
|
-
|
|
104
|
+
)), M() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-next", onClick: g }, /* @__PURE__ */ e.createElement(
|
|
105
|
+
R,
|
|
106
106
|
{
|
|
107
107
|
name: c ? "chevron-left" : "chevron-right",
|
|
108
108
|
icon: c ? x : I,
|
|
109
109
|
size: "xxxlarge"
|
|
110
110
|
}
|
|
111
|
-
))),
|
|
111
|
+
))), D && /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav-wrap" }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav" }, l.map((a, m) => /* @__PURE__ */ e.createElement(
|
|
112
112
|
"span",
|
|
113
113
|
{
|
|
114
|
-
className:
|
|
114
|
+
className: V(
|
|
115
115
|
"k-link",
|
|
116
116
|
{
|
|
117
|
-
"k-primary": t ===
|
|
117
|
+
"k-primary": t === m + 1
|
|
118
118
|
}
|
|
119
119
|
),
|
|
120
|
-
key:
|
|
121
|
-
onClick: () => s(
|
|
120
|
+
key: m + 1,
|
|
121
|
+
onClick: () => s(m + 1)
|
|
122
122
|
}
|
|
123
123
|
))))), /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", "aria-atomic": "true", className: "k-sr-only" }));
|
|
124
124
|
});
|
|
125
|
-
|
|
125
|
+
P.propTypes = {
|
|
126
126
|
activeView: r.number,
|
|
127
127
|
arrows: r.bool,
|
|
128
128
|
automaticViewChange: r.bool,
|
|
@@ -135,7 +135,7 @@ h.propTypes = {
|
|
|
135
135
|
pageOverlay: r.string,
|
|
136
136
|
style: r.object
|
|
137
137
|
};
|
|
138
|
-
const
|
|
138
|
+
const o = {
|
|
139
139
|
activeView: 1,
|
|
140
140
|
arrows: !0,
|
|
141
141
|
automaticViewChange: !0,
|
|
@@ -144,8 +144,7 @@ const F = {
|
|
|
144
144
|
pageable: !0,
|
|
145
145
|
pageOverlay: "none"
|
|
146
146
|
};
|
|
147
|
-
|
|
148
|
-
h.displayName = "KendoScrollView";
|
|
147
|
+
P.displayName = "KendoScrollView";
|
|
149
148
|
export {
|
|
150
|
-
|
|
149
|
+
P as ScrollView
|
|
151
150
|
};
|
|
@@ -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
|
-
!function(e,
|
|
8
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactScrollview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons)}(this,(function(e,t,r,a,l){"use strict";function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=n(t);const s={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},o=c.forwardRef(((e,t)=>{a.validatePackage(s);const{className:r,style:n,children:o,pagerOverlay:u=i.pageOverlay,pageable:m=i.pageable,arrows:v=i.arrows,endless:p=i.endless,activeView:g=i.activeView,automaticViewChange:d=i.automaticViewChange,automaticViewChangeInterval:h=i.automaticViewChangeInterval}=e,[f,w]=c.useState(g||1),k=c.useRef(null),y=c.useRef(null),b=c.useRef(null),C=c.Children.toArray(o),E=a.useRtl(k,e.dir),N="rtl"===E,I=c.useCallback((()=>{k.current&&k.current.focus()}),[]),V=c.useCallback((()=>({element:k.current,focus:I})),[I]);c.useImperativeHandle(t,V);const O=c.useCallback((()=>{p?w(f>1?f-1:C.length):f>1&&w(f-1)}),[f,C.length,p]),R=c.useCallback((()=>{p?f<C.length?w(f+1):w(1):f<C.length&&w(f+1)}),[f,C.length,p]);function x(){b.current&&clearTimeout(b.current)}c.useEffect((()=>{let e=C.length;y.current&&(y.current.style.setProperty("--kendo-scrollview-views",`${e}`),y.current.style.setProperty("--kendo-scrollview-current",`${f}`))}),[C,f,E]),c.useEffect((()=>{if(d)return x(),b.current=setTimeout((()=>w((e=>e===C.length?p?1:e:e+1))),h),()=>{x()}}),[d,h,C.length,f,p]);const K=c.useCallback((e=>{switch(e.keyCode){case a.Keys.left:e.preventDefault(),N?R():O();break;case a.Keys.right:e.preventDefault(),N?O():R()}}),[N,R,O]),D=c.useMemo((()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===u,"k-scrollview-dark":"dark"===u},r)),[r,u]),T=c.Children.map(o||null,((e,t)=>c.createElement("div",{className:"k-scrollview-view","aria-hidden":f!==t+1},e))),j=c.useCallback((()=>{let e;return e=f>1,(p||e)&&C.length>0}),[f,C.length,p]),P=c.useCallback((()=>{let e;return e=f<C.length,(p||e)&&C.length>0}),[f,C.length,p]);return c.createElement("div",{className:D,style:n,ref:k,tabIndex:0,dir:E,onKeyDown:K},c.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:y},T),c.createElement("div",{className:"k-scrollview-elements"},v&&c.createElement(c.Fragment,null,j()&&c.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:O},c.createElement(a.IconWrap,{name:N?"chevron-right":"chevron-left",icon:N?l.chevronRightIcon:l.chevronLeftIcon,size:"xxxlarge"})),P()&&c.createElement("span",{className:"k-scrollview-next",onClick:R},c.createElement(a.IconWrap,{name:N?"chevron-left":"chevron-right",icon:N?l.chevronLeftIcon:l.chevronRightIcon,size:"xxxlarge"}))),m&&c.createElement("div",{className:"k-scrollview-nav-wrap"},c.createElement("div",{className:"k-scrollview-nav"},C.map(((e,t)=>c.createElement("span",{className:a.classNames("k-link",{"k-primary":f===t+1}),key:t+1,onClick:()=>w(t+1)})))))),c.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}))}));o.propTypes={activeView:r.number,arrows:r.bool,automaticViewChange:r.bool,automaticViewChangeInterval:r.number,children:r.any,className:r.string,dir:r.string,endless:r.bool,pageable:r.bool,pageOverlay:r.string,style:r.object};const i={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};o.displayName="KendoScrollView",e.ScrollView=o}));
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-scrollview",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1719467650,
|
|
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-scrollview",
|
|
3
|
-
"version": "8.1.0
|
|
3
|
+
"version": "8.1.0",
|
|
4
4
|
"description": "React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-common": "8.1.0
|
|
26
|
+
"@progress/kendo-react-common": "8.1.0",
|
|
27
27
|
"@progress/kendo-svg-icons": "^3.0.0",
|
|
28
28
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
29
29
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|