@progress/kendo-react-scrollview 10.1.1-develop.1 → 10.2.0-develop.10
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-scrollview.js +1 -1
- package/index.d.mts +62 -3
- package/index.d.ts +62 -3
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +4 -4
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!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"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactScrollview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactIntl)}(this,(function(e,t,r,a,n,l){"use strict";function c(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 o=c(t);const s={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.
|
|
15
|
+
!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"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactScrollview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactIntl)}(this,(function(e,t,r,a,n,l){"use strict";function c(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 o=c(t);const s={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},i="scrollview.previous",u="scrollview.next",g={[i]:"Previous",[u]:"Next"},m=o.forwardRef(((e,t)=>{const r=!a.validatePackage(s,{component:"ScrollView"}),{className:c,style:m,children:p,pagerOverlay:d=v.pageOverlay,pageable:h=v.pageable,arrows:w=v.arrows,endless:k=v.endless,activeView:f=v.activeView,automaticViewChange:b=v.automaticViewChange,automaticViewChangeInterval:y=v.automaticViewChangeInterval}=e,[C,E]=o.useState(f||1),N=o.useRef(null),I=o.useRef(null),x=o.useRef(null),V=o.Children.toArray(p),K=a.useRtl(N,e.dir),R="rtl"===K,O=l.useLocalization(),S=o.useCallback((()=>{N.current&&N.current.focus()}),[]),D=o.useCallback((()=>({element:N.current,focus:S})),[S]);o.useImperativeHandle(t,D);const T=o.useCallback((()=>{k?E(C>1?C-1:V.length):C>1&&E(C-1)}),[C,V.length,k]),j=o.useCallback((()=>{k?C<V.length?E(C+1):E(1):C<V.length&&E(C+1)}),[C,V.length,k]),L=o.useCallback((e=>{var t,r;const a=e.target;a.classList.contains("k-scrollview-prev")?(T(),!((k||C>2)&&V.length>0)&&(null==(t=N.current)||t.focus())):a.classList.contains("k-scrollview-next")&&(j(),!((k||C<V.length-1)&&V.length>0)&&(null==(r=N.current)||r.focus()))}),[C,V.length,k]);function P(){x.current&&clearTimeout(x.current)}o.useEffect((()=>{const e=V.length;I.current&&(I.current.style.setProperty("--kendo-scrollview-views",`${e}`),I.current.style.setProperty("--kendo-scrollview-current",`${C}`))}),[V,C,K]),o.useEffect((()=>{if(b)return P(),x.current=setTimeout((()=>E((e=>e===V.length?k?1:e:e+1))),y),()=>{P()}}),[b,y,V.length,C,k]);const q=o.useCallback((e=>{switch(e.key){case a.KEYS.left:e.preventDefault(),R?j():T();break;case a.KEYS.right:e.preventDefault(),R?T():j();break;case a.KEYS.space:case a.KEYS.enter:e.preventDefault(),L(e)}}),[R,j,T]),z=o.useMemo((()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===d,"k-scrollview-dark":"dark"===d},c)),[c,d]),Y=o.Children.map(p||null,((e,t)=>o.createElement("div",{className:"k-scrollview-view","aria-hidden":C!==t+1},e))),A=o.useCallback((()=>{let e;return e=C>1,(k||e)&&V.length>0}),[C,V.length,k]),U=o.useCallback((()=>{let e;return e=C<V.length,(k||e)&&V.length>0}),[C,V.length,k]);return o.createElement("div",{className:z,style:m,ref:N,tabIndex:0,dir:K,onKeyDown:q},o.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:I},Y),o.createElement("div",{className:"k-scrollview-elements"},w&&o.createElement(o.Fragment,null,A()&&o.createElement("span",{className:"k-scrollview-prev","aria-label":O.toLanguageString(u,g[u]),role:"button",tabIndex:0,onClick:T,onKeyDown:q},o.createElement(a.IconWrap,{name:R?"chevron-right":"chevron-left",icon:R?n.chevronRightIcon:n.chevronLeftIcon,size:"xxxlarge"})),U()&&o.createElement("span",{className:"k-scrollview-next","aria-label":O.toLanguageString(i,g[i]),role:"button",tabIndex:0,onClick:j,onKeyDown:q},o.createElement(a.IconWrap,{name:R?"chevron-left":"chevron-right",icon:R?n.chevronLeftIcon:n.chevronRightIcon,size:"xxxlarge"}))),h&&o.createElement("div",{className:"k-scrollview-nav-wrap"},o.createElement("div",{className:"k-scrollview-nav"},V.map(((e,t)=>o.createElement("span",{className:a.classNames("k-link",{"k-primary":C===t+1}),key:t+1,onClick:()=>E(t+1)})))))),o.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}),r&&o.createElement(a.WatermarkOverlay,null))}));m.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 v={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};m.displayName="KendoScrollView",e.ScrollView=m}));
|
package/index.d.mts
CHANGED
|
@@ -60,56 +60,115 @@ export declare interface ScrollViewHandle {
|
|
|
60
60
|
*/
|
|
61
61
|
export declare interface ScrollViewProps {
|
|
62
62
|
/**
|
|
63
|
-
* Represents the current active view ([see example]({% slug activeview_scrollview %})).
|
|
63
|
+
* Represents the current active view ([see example]({% slug activeview_scrollview %})).
|
|
64
|
+
* Defaults to `1`.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* ```jsx
|
|
68
|
+
* <ScrollView activeView={2} />
|
|
69
|
+
* ```
|
|
64
70
|
*/
|
|
65
71
|
activeView?: number;
|
|
66
72
|
/**
|
|
67
|
-
* Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
|
|
73
|
+
* Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
|
|
74
|
+
* Defaults to `true`.
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```jsx
|
|
78
|
+
* <ScrollView arrows={false} />
|
|
79
|
+
* ```
|
|
68
80
|
*/
|
|
69
81
|
arrows?: boolean;
|
|
70
82
|
/**
|
|
71
83
|
* Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
|
|
72
84
|
* Defaults to `true`.
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```jsx
|
|
88
|
+
* <ScrollView automaticViewChange={false} />
|
|
89
|
+
* ```
|
|
73
90
|
*/
|
|
74
91
|
automaticViewChange?: boolean;
|
|
75
92
|
/**
|
|
76
93
|
* Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
|
|
77
94
|
* Defaults to `5000`.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```jsx
|
|
98
|
+
* <ScrollView automaticViewChangeInterval={3000} />
|
|
99
|
+
* ```
|
|
78
100
|
*/
|
|
79
101
|
automaticViewChangeInterval?: number;
|
|
80
102
|
/**
|
|
81
103
|
* Sets the ScrollView children elements.
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* ```jsx
|
|
107
|
+
* <ScrollView>
|
|
108
|
+
* <div>Page 1</div>
|
|
109
|
+
* <div>Page 2</div>
|
|
110
|
+
* </ScrollView>
|
|
111
|
+
* ```
|
|
82
112
|
*/
|
|
83
113
|
children?: React.ReactNode;
|
|
84
114
|
/**
|
|
85
115
|
* Specifies a list of CSS classes that will be added to the ScrollView.
|
|
116
|
+
*
|
|
117
|
+
* @example
|
|
118
|
+
* ```jsx
|
|
119
|
+
* <ScrollView className="custom-scrollview" />
|
|
120
|
+
* ```
|
|
86
121
|
*/
|
|
87
122
|
className?: string;
|
|
88
123
|
/**
|
|
89
124
|
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
|
|
125
|
+
*
|
|
126
|
+
* @example
|
|
127
|
+
* ```jsx
|
|
128
|
+
* <ScrollView dir="rtl" />
|
|
129
|
+
* ```
|
|
90
130
|
*/
|
|
91
131
|
dir?: string;
|
|
92
132
|
/**
|
|
93
133
|
* Toggles the endless scrolling mode in which the data items are endlessly looped
|
|
94
134
|
* ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
|
|
135
|
+
*
|
|
136
|
+
* @example
|
|
137
|
+
* ```jsx
|
|
138
|
+
* <ScrollView endless={true} />
|
|
139
|
+
* ```
|
|
95
140
|
*/
|
|
96
141
|
endless?: boolean;
|
|
97
142
|
/**
|
|
98
143
|
* Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
|
|
144
|
+
*
|
|
145
|
+
* @example
|
|
146
|
+
* ```jsx
|
|
147
|
+
* <ScrollView pageable={false} />
|
|
148
|
+
* ```
|
|
99
149
|
*/
|
|
100
150
|
pageable?: boolean;
|
|
101
151
|
/**
|
|
102
152
|
* Sets the pager overlay ([see example]({% slug paging_scrollview %})).
|
|
103
153
|
*
|
|
104
|
-
*
|
|
154
|
+
* The possible values are:
|
|
105
155
|
* * `none`(Default) — No overlay is set.
|
|
106
156
|
* * `dark` — Dark overlay is set.
|
|
107
157
|
* * `light` — Light overlay is set.
|
|
108
158
|
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```jsx
|
|
161
|
+
* <ScrollView pagerOverlay="dark" />
|
|
162
|
+
* ```
|
|
109
163
|
*/
|
|
110
164
|
pagerOverlay?: 'dark' | 'light' | 'none';
|
|
111
165
|
/**
|
|
112
166
|
* Sets additional CSS styles to the ScrollView.
|
|
167
|
+
*
|
|
168
|
+
* @example
|
|
169
|
+
* ```jsx
|
|
170
|
+
* <ScrollView style={{ width: '100%' }} />
|
|
171
|
+
* ```
|
|
113
172
|
*/
|
|
114
173
|
style?: React.CSSProperties;
|
|
115
174
|
}
|
package/index.d.ts
CHANGED
|
@@ -60,56 +60,115 @@ export declare interface ScrollViewHandle {
|
|
|
60
60
|
*/
|
|
61
61
|
export declare interface ScrollViewProps {
|
|
62
62
|
/**
|
|
63
|
-
* Represents the current active view ([see example]({% slug activeview_scrollview %})).
|
|
63
|
+
* Represents the current active view ([see example]({% slug activeview_scrollview %})).
|
|
64
|
+
* Defaults to `1`.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* ```jsx
|
|
68
|
+
* <ScrollView activeView={2} />
|
|
69
|
+
* ```
|
|
64
70
|
*/
|
|
65
71
|
activeView?: number;
|
|
66
72
|
/**
|
|
67
|
-
* Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
|
|
73
|
+
* Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
|
|
74
|
+
* Defaults to `true`.
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```jsx
|
|
78
|
+
* <ScrollView arrows={false} />
|
|
79
|
+
* ```
|
|
68
80
|
*/
|
|
69
81
|
arrows?: boolean;
|
|
70
82
|
/**
|
|
71
83
|
* Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
|
|
72
84
|
* Defaults to `true`.
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```jsx
|
|
88
|
+
* <ScrollView automaticViewChange={false} />
|
|
89
|
+
* ```
|
|
73
90
|
*/
|
|
74
91
|
automaticViewChange?: boolean;
|
|
75
92
|
/**
|
|
76
93
|
* Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
|
|
77
94
|
* Defaults to `5000`.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```jsx
|
|
98
|
+
* <ScrollView automaticViewChangeInterval={3000} />
|
|
99
|
+
* ```
|
|
78
100
|
*/
|
|
79
101
|
automaticViewChangeInterval?: number;
|
|
80
102
|
/**
|
|
81
103
|
* Sets the ScrollView children elements.
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* ```jsx
|
|
107
|
+
* <ScrollView>
|
|
108
|
+
* <div>Page 1</div>
|
|
109
|
+
* <div>Page 2</div>
|
|
110
|
+
* </ScrollView>
|
|
111
|
+
* ```
|
|
82
112
|
*/
|
|
83
113
|
children?: React.ReactNode;
|
|
84
114
|
/**
|
|
85
115
|
* Specifies a list of CSS classes that will be added to the ScrollView.
|
|
116
|
+
*
|
|
117
|
+
* @example
|
|
118
|
+
* ```jsx
|
|
119
|
+
* <ScrollView className="custom-scrollview" />
|
|
120
|
+
* ```
|
|
86
121
|
*/
|
|
87
122
|
className?: string;
|
|
88
123
|
/**
|
|
89
124
|
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
|
|
125
|
+
*
|
|
126
|
+
* @example
|
|
127
|
+
* ```jsx
|
|
128
|
+
* <ScrollView dir="rtl" />
|
|
129
|
+
* ```
|
|
90
130
|
*/
|
|
91
131
|
dir?: string;
|
|
92
132
|
/**
|
|
93
133
|
* Toggles the endless scrolling mode in which the data items are endlessly looped
|
|
94
134
|
* ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
|
|
135
|
+
*
|
|
136
|
+
* @example
|
|
137
|
+
* ```jsx
|
|
138
|
+
* <ScrollView endless={true} />
|
|
139
|
+
* ```
|
|
95
140
|
*/
|
|
96
141
|
endless?: boolean;
|
|
97
142
|
/**
|
|
98
143
|
* Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
|
|
144
|
+
*
|
|
145
|
+
* @example
|
|
146
|
+
* ```jsx
|
|
147
|
+
* <ScrollView pageable={false} />
|
|
148
|
+
* ```
|
|
99
149
|
*/
|
|
100
150
|
pageable?: boolean;
|
|
101
151
|
/**
|
|
102
152
|
* Sets the pager overlay ([see example]({% slug paging_scrollview %})).
|
|
103
153
|
*
|
|
104
|
-
*
|
|
154
|
+
* The possible values are:
|
|
105
155
|
* * `none`(Default) — No overlay is set.
|
|
106
156
|
* * `dark` — Dark overlay is set.
|
|
107
157
|
* * `light` — Light overlay is set.
|
|
108
158
|
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```jsx
|
|
161
|
+
* <ScrollView pagerOverlay="dark" />
|
|
162
|
+
* ```
|
|
109
163
|
*/
|
|
110
164
|
pagerOverlay?: 'dark' | 'light' | 'none';
|
|
111
165
|
/**
|
|
112
166
|
* Sets additional CSS styles to the ScrollView.
|
|
167
|
+
*
|
|
168
|
+
* @example
|
|
169
|
+
* ```jsx
|
|
170
|
+
* <ScrollView style={{ width: '100%' }} />
|
|
171
|
+
* ```
|
|
113
172
|
*/
|
|
114
173
|
style?: React.CSSProperties;
|
|
115
174
|
}
|
package/package-metadata.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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745314107,version:"10.2.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "10.
|
|
13
|
+
publishDate: 1745314107,
|
|
14
|
+
version: "10.2.0-develop.10",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-scrollview",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.2.0-develop.10",
|
|
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",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.5.1",
|
|
29
|
-
"@progress/kendo-react-common": "10.
|
|
30
|
-
"@progress/kendo-react-intl": "10.
|
|
29
|
+
"@progress/kendo-react-common": "10.2.0-develop.10",
|
|
30
|
+
"@progress/kendo-react-intl": "10.2.0-develop.10",
|
|
31
31
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
32
32
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
33
33
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"package": {
|
|
54
54
|
"productName": "KendoReact",
|
|
55
55
|
"productCode": "KENDOUIREACT",
|
|
56
|
-
"publishDate":
|
|
56
|
+
"publishDate": 1745314107,
|
|
57
57
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
58
58
|
}
|
|
59
59
|
},
|