@progress/kendo-react-scrollview 6.1.1-dev.202311151536 → 7.0.0-develop.1

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/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ export * from './ScrollView';
6
+ export * from './ScrollViewProps';
package/index.js ADDED
@@ -0,0 +1,5 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),q=require("prop-types"),o=require("@progress/kendo-react-common"),h=require("@progress/kendo-svg-icons");function O(s){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const i in s)if(i!=="default"){const d=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(m,i,d.get?d:{enumerable:!0,get:()=>s[i]})}}return m.default=s,Object.freeze(m)}const e=O(M),a=O(q),L={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},k=e.forwardRef((s,m)=>{o.validatePackage(L);const{className:i,style:d,children:E,pagerOverlay:b,pageable:P,arrows:D,endless:n,activeView:T,automaticViewChange:N,automaticViewChangeInterval:R}=s,[t,c]=e.useState(T||1),g=e.useRef(null),p=e.useRef(null),y=e.useRef(null),r=e.Children.toArray(E),C=o.useRtl(g,s.dir),u=C==="rtl",I=e.useCallback(()=>{g.current&&g.current.focus()},[]),S=e.useCallback(()=>({element:g.current,focus:I}),[I]);e.useImperativeHandle(m,S);const f=e.useCallback(()=>{n?t>1?c(t-1):c(r.length):t>1&&c(t-1)},[t,r.length,n]),w=e.useCallback(()=>{n?t<r.length?c(t+1):c(1):t<r.length&&c(t+1)},[t,r.length,n]);e.useEffect(()=>{let l=r.length;p.current&&(p.current.style.setProperty("--kendo-scrollview-views",`${l}`),p.current.style.setProperty("--kendo-scrollview-current",`${t}`))},[r,t,C]);function V(){y.current&&clearTimeout(y.current)}e.useEffect(()=>{if(N)return V(),y.current=setTimeout(()=>c(l=>l===r.length?n?1:l:l+1),R),()=>{V()}},[N,R,r.length,t,n]);const K=e.useCallback(l=>{switch(l.keyCode){case o.Keys.left:l.preventDefault(),u?w():f();break;case o.Keys.right:l.preventDefault(),u?f():w();break}},[u,w,f]),j=e.useMemo(()=>o.classNames("k-scrollview",{"k-scrollview-light":b==="light","k-scrollview-dark":b==="dark"},i),[i,b]),_=e.Children.map(E||null,(l,v)=>e.createElement("div",{className:"k-scrollview-view","aria-hidden":t!==v+1},l)),x=e.useCallback(()=>{let l;return l=t>1,(n||l)&&r.length>0},[t,r.length,n]),A=e.useCallback(()=>{let l;return l=t<r.length,(n||l)&&r.length>0},[t,r.length,n]);return e.createElement("div",{className:j,style:d,ref:g,tabIndex:0,dir:C,onKeyDown:K},e.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:p},_),e.createElement("div",{className:"k-scrollview-elements"},D&&e.createElement(e.Fragment,null,x()&&e.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:f},e.createElement(o.IconWrap,{name:u?"chevron-right":"chevron-left",icon:u?h.chevronRightIcon:h.chevronLeftIcon,size:"xxxlarge"})),A()&&e.createElement("span",{className:"k-scrollview-next",onClick:w},e.createElement(o.IconWrap,{name:u?"chevron-left":"chevron-right",icon:u?h.chevronLeftIcon:h.chevronRightIcon,size:"xxxlarge"}))),P&&e.createElement("div",{className:"k-scrollview-nav-wrap"},e.createElement("div",{className:"k-scrollview-nav"},r.map((l,v)=>e.createElement("span",{className:o.classNames("k-link",{"k-primary":t===v+1}),key:v+1,onClick:()=>c(v+1)}))))))});k.propTypes={activeView:a.number,arrows:a.bool,automaticViewChange:a.bool,automaticViewChangeInterval:a.number,children:a.any,className:a.string,dir:a.string,endless:a.bool,pageable:a.bool,pageOverlay:a.string,style:a.object};const z={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};k.defaultProps=z;k.displayName="KendoScrollView";exports.ScrollView=k;
package/index.mjs ADDED
@@ -0,0 +1,153 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import * as e from "react";
6
+ import * as r from "prop-types";
7
+ import { validatePackage as B, useRtl as H, Keys as N, classNames as R, IconWrap as V } from "@progress/kendo-react-common";
8
+ import { chevronRightIcon as I, chevronLeftIcon as D } from "@progress/kendo-svg-icons";
9
+ const $ = {
10
+ name: "@progress/kendo-react-scrollview",
11
+ productName: "KendoReact",
12
+ productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
13
+ publishDate: 1700494211,
14
+ version: "",
15
+ licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
16
+ }, d = e.forwardRef((f, K) => {
17
+ B($);
18
+ const {
19
+ className: h,
20
+ style: P,
21
+ children: k,
22
+ pagerOverlay: w,
23
+ pageable: T,
24
+ arrows: x,
25
+ endless: s,
26
+ activeView: O,
27
+ automaticViewChange: C,
28
+ automaticViewChangeInterval: y
29
+ } = f, [t, n] = e.useState(O || 1), o = e.useRef(null), m = e.useRef(null), g = e.useRef(null), a = e.Children.toArray(k), p = H(o, f.dir), c = p === "rtl", b = e.useCallback(
30
+ () => {
31
+ o.current && o.current.focus();
32
+ },
33
+ []
34
+ ), A = e.useCallback(
35
+ () => ({
36
+ element: o.current,
37
+ focus: b
38
+ }),
39
+ [b]
40
+ );
41
+ e.useImperativeHandle(K, A);
42
+ const u = e.useCallback(() => {
43
+ s ? t > 1 ? n(t - 1) : n(a.length) : t > 1 && n(t - 1);
44
+ }, [t, a.length, s]), v = e.useCallback(() => {
45
+ s ? t < a.length ? n(t + 1) : n(1) : t < a.length && n(t + 1);
46
+ }, [t, a.length, s]);
47
+ e.useEffect(() => {
48
+ let l = a.length;
49
+ m.current && (m.current.style.setProperty("--kendo-scrollview-views", `${l}`), m.current.style.setProperty("--kendo-scrollview-current", `${t}`));
50
+ }, [a, t, p]);
51
+ function E() {
52
+ g.current && clearTimeout(g.current);
53
+ }
54
+ e.useEffect(() => {
55
+ if (C)
56
+ return E(), g.current = setTimeout(
57
+ () => n((l) => l === a.length ? s ? 1 : l : l + 1),
58
+ y
59
+ ), () => {
60
+ E();
61
+ };
62
+ }, [C, y, a.length, t, s]);
63
+ const L = e.useCallback(
64
+ (l) => {
65
+ switch (l.keyCode) {
66
+ case N.left:
67
+ l.preventDefault(), c ? v() : u();
68
+ break;
69
+ case N.right:
70
+ l.preventDefault(), c ? u() : v();
71
+ break;
72
+ }
73
+ },
74
+ [c, v, u]
75
+ ), M = e.useMemo(
76
+ () => R(
77
+ "k-scrollview",
78
+ {
79
+ "k-scrollview-light": w === "light",
80
+ "k-scrollview-dark": w === "dark"
81
+ },
82
+ h
83
+ ),
84
+ [h, w]
85
+ ), S = e.Children.map(k || null, (l, i) => /* @__PURE__ */ e.createElement(
86
+ "div",
87
+ {
88
+ className: "k-scrollview-view",
89
+ "aria-hidden": t !== i + 1
90
+ },
91
+ l
92
+ )), U = e.useCallback(() => {
93
+ let l;
94
+ return l = t > 1, (s || l) && a.length > 0;
95
+ }, [t, a.length, s]), z = e.useCallback(() => {
96
+ let l;
97
+ return l = t < a.length, (s || l) && a.length > 0;
98
+ }, [t, a.length, s]);
99
+ return /* @__PURE__ */ e.createElement("div", { className: M, style: P, ref: o, tabIndex: 0, dir: p, onKeyDown: L }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: m }, S), /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, x && /* @__PURE__ */ e.createElement(e.Fragment, null, U() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-prev", "aria-label": "previous", onClick: u }, /* @__PURE__ */ e.createElement(
100
+ V,
101
+ {
102
+ name: c ? "chevron-right" : "chevron-left",
103
+ icon: c ? I : D,
104
+ size: "xxxlarge"
105
+ }
106
+ )), z() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-next", onClick: v }, /* @__PURE__ */ e.createElement(
107
+ V,
108
+ {
109
+ name: c ? "chevron-left" : "chevron-right",
110
+ icon: c ? D : I,
111
+ size: "xxxlarge"
112
+ }
113
+ ))), T && /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav-wrap" }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav" }, a.map((l, i) => /* @__PURE__ */ e.createElement(
114
+ "span",
115
+ {
116
+ className: R(
117
+ "k-link",
118
+ {
119
+ "k-primary": t === i + 1
120
+ }
121
+ ),
122
+ key: i + 1,
123
+ onClick: () => n(i + 1)
124
+ }
125
+ ))))));
126
+ });
127
+ d.propTypes = {
128
+ activeView: r.number,
129
+ arrows: r.bool,
130
+ automaticViewChange: r.bool,
131
+ automaticViewChangeInterval: r.number,
132
+ children: r.any,
133
+ className: r.string,
134
+ dir: r.string,
135
+ endless: r.bool,
136
+ pageable: r.bool,
137
+ pageOverlay: r.string,
138
+ style: r.object
139
+ };
140
+ const j = {
141
+ activeView: 1,
142
+ arrows: !0,
143
+ automaticViewChange: !0,
144
+ automaticViewChangeInterval: 5e3,
145
+ endless: !1,
146
+ pageable: !0,
147
+ pageOverlay: "none"
148
+ };
149
+ d.defaultProps = j;
150
+ d.displayName = "KendoScrollView";
151
+ export {
152
+ d as ScrollView
153
+ };
@@ -0,0 +1,9 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { PackageMetadata } from '@progress/kendo-licensing';
6
+ /**
7
+ * @hidden
8
+ */
9
+ export declare const packageMetadata: PackageMetadata;
package/package.json CHANGED
@@ -1,22 +1,29 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-scrollview",
3
+ "version": "7.0.0-develop.1",
3
4
  "description": "React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package",
4
- "version": "6.1.1-dev.202311151536",
5
- "repository": {
6
- "type": "git",
7
- "url": "https://github.com/telerik/kendo-react.git"
5
+ "author": "Progress",
6
+ "license": "SEE LICENSE IN LICENSE.md",
7
+ "homepage": "https://www.telerik.com/kendo-react-ui",
8
+ "main": "./index.js",
9
+ "types": "./index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "import": "./index.mjs",
13
+ "require": "./index.js"
14
+ }
15
+ },
16
+ "sideEffects": false,
17
+ "peerDependencies": {
18
+ "@progress/kendo-licensing": "^1.3.0",
19
+ "@progress/kendo-react-common": "7.0.0-develop.1",
20
+ "@progress/kendo-svg-icons": "^2.0.0",
21
+ "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
22
+ "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
8
23
  },
9
- "main": "dist/npm/main.js",
10
- "types": "dist/npm/main.d.ts",
11
- "module": "dist/es/main.js",
12
- "jsnext:main": "dist/es/main.js",
13
- "scripts": {
14
- "test": "cd ../../ && npm run test -- --testPathPattern=/packages/scrollview/.*",
15
- "e2e": "cd ../../ && npx jest --maxWorkers=4 --config jest.e2e.js packages/scrollview/e2e/",
16
- "start": "gulp start",
17
- "build-package": "gulp build-package"
24
+ "dependencies": {
25
+ "prop-types": "^15.6.0"
18
26
  },
19
- "homepage": "https://www.telerik.com/kendo-react-ui",
20
27
  "keywords": [
21
28
  "Kendo UI",
22
29
  "React",
@@ -29,32 +36,15 @@
29
36
  "React component",
30
37
  "Telerik"
31
38
  ],
32
- "peerDependencies": {
33
- "@progress/kendo-licensing": "^1.3.0",
34
- "@progress/kendo-svg-icons": "^2.0.0",
35
- "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
36
- "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
37
- },
38
- "devDependencies": {
39
- "@progress/kendo-drawing": "^1.17.2",
40
- "@progress/kendo-licensing": "^1.3.0",
41
- "@progress/kendo-react-animation": "6.1.1-dev.202311151536",
42
- "@progress/kendo-react-buttons": "6.1.1-dev.202311151536",
43
- "@progress/kendo-react-inputs": "6.1.1-dev.202311151536",
44
- "@progress/kendo-react-intl": "6.1.1-dev.202311151536",
45
- "@progress/kendo-svg-icons": "^2.0.0"
46
- },
47
- "dependencies": {
48
- "@progress/kendo-react-common": "6.1.1-dev.202311151536",
49
- "prop-types": "^15.6.0"
50
- },
51
39
  "@progress": {
52
40
  "friendlyName": "ScrollView",
53
41
  "framework": "KendoReact"
54
42
  },
55
- "author": "Progress",
56
- "license": "SEE LICENSE IN LICENSE.md",
43
+ "repository": {
44
+ "type": "git",
45
+ "url": "https://github.com/telerik/kendo-react.git"
46
+ },
57
47
  "publishConfig": {
58
48
  "access": "public"
59
49
  }
60
- }
50
+ }
package/about.md DELETED
@@ -1,3 +0,0 @@
1
- <a href="https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview&utm_content=banner" target="_blank">
2
- <img src="https://www.telerik.com/kendo-react-ui/components/npm-banner.svg" alt="KendoReact NPM Banner">
3
- </a>
@@ -1,48 +0,0 @@
1
- import * as React from 'react';
2
- import { ScrollViewProps } from './ScrollViewProps';
3
- /**
4
- * The ScrollView ref.
5
- */
6
- export interface ScrollViewHandle {
7
- /**
8
- * The ScrollView element.
9
- */
10
- element: HTMLDivElement | null;
11
- /**
12
- * Focus the ScrollView.
13
- */
14
- focus: () => void;
15
- }
16
- /**
17
- * Represents the [KendoReact ScrollView component]({% slug overview_scrollview %}).
18
- *
19
- * @example
20
- * ```jsx
21
- * const App = () => {
22
- * const items: any[] = [
23
- * { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
24
- * { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
25
- * { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
26
- * ];
27
- * return (
28
- * <ScrollView style={{width: 512, height: 384}}>
29
- * {items.map((item, index) => {
30
- * return (
31
- * <div className="image-with-text" key={index}>
32
- * <p>Showing image {item.position} of {items.length}.</p>
33
- * <img
34
- * src={item.url}
35
- * alt={'Photo'}
36
- * style={{width: 512, height: 384}}
37
- * draggable={false}
38
- * />
39
- * </div>
40
- * );
41
- * })}
42
- * </ScrollView>
43
- * );
44
- * };
45
- * ReactDOM.render(<App />, document.querySelector('my-app'));
46
- * ```
47
- */
48
- export declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollViewHandle | null>>;
@@ -1,177 +0,0 @@
1
- import * as React from 'react';
2
- import * as PropTypes from 'prop-types';
3
- import { classNames, Keys, useRtl, IconWrap } from '@progress/kendo-react-common';
4
- import { validatePackage } from '@progress/kendo-react-common';
5
- import { packageMetadata } from './package-metadata';
6
- import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
7
- /**
8
- * Represents the [KendoReact ScrollView component]({% slug overview_scrollview %}).
9
- *
10
- * @example
11
- * ```jsx
12
- * const App = () => {
13
- * const items: any[] = [
14
- * { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
15
- * { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
16
- * { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
17
- * ];
18
- * return (
19
- * <ScrollView style={{width: 512, height: 384}}>
20
- * {items.map((item, index) => {
21
- * return (
22
- * <div className="image-with-text" key={index}>
23
- * <p>Showing image {item.position} of {items.length}.</p>
24
- * <img
25
- * src={item.url}
26
- * alt={'Photo'}
27
- * style={{width: 512, height: 384}}
28
- * draggable={false}
29
- * />
30
- * </div>
31
- * );
32
- * })}
33
- * </ScrollView>
34
- * );
35
- * };
36
- * ReactDOM.render(<App />, document.querySelector('my-app'));
37
- * ```
38
- */
39
- export var ScrollView = React.forwardRef(function (props, target) {
40
- validatePackage(packageMetadata);
41
- var className = props.className, style = props.style, children = props.children, pagerOverlay = props.pagerOverlay, pageable = props.pageable, arrows = props.arrows, endless = props.endless, activeView = props.activeView, automaticViewChange = props.automaticViewChange, automaticViewChangeInterval = props.automaticViewChangeInterval;
42
- var _a = React.useState(activeView || 1), active = _a[0], setActive = _a[1];
43
- var elementRef = React.useRef(null);
44
- var wrapElementRef = React.useRef(null);
45
- var timeoutRef = React.useRef(null);
46
- var data = React.Children.toArray(children);
47
- var dir = useRtl(elementRef, props.dir);
48
- var isRtl = dir === 'rtl';
49
- var focusElement = React.useCallback(function () {
50
- if (elementRef.current) {
51
- elementRef.current.focus();
52
- }
53
- }, []);
54
- var getImperativeHandle = React.useCallback(function () { return ({
55
- element: elementRef.current,
56
- focus: focusElement
57
- }); }, [focusElement]);
58
- React.useImperativeHandle(target, getImperativeHandle);
59
- var prev = React.useCallback(function () {
60
- if (!endless) {
61
- active > 1 && setActive(active - 1);
62
- }
63
- else {
64
- active > 1 ? setActive(active - 1) : setActive(data.length);
65
- }
66
- }, [active, data.length, endless]);
67
- var next = React.useCallback(function () {
68
- if (!endless) {
69
- active < data.length && setActive(active + 1);
70
- }
71
- else {
72
- active < data.length ? setActive(active + 1) : setActive(1);
73
- }
74
- }, [active, data.length, endless]);
75
- React.useEffect(function () {
76
- var viewsCount = data.length;
77
- if (wrapElementRef.current) {
78
- wrapElementRef.current.style.setProperty('--kendo-scrollview-views', "".concat(viewsCount));
79
- wrapElementRef.current.style.setProperty('--kendo-scrollview-current', "".concat(active));
80
- }
81
- }, [data, active, dir]);
82
- function resetTimeout() {
83
- if (timeoutRef.current) {
84
- clearTimeout(timeoutRef.current);
85
- }
86
- }
87
- React.useEffect(function () {
88
- if (automaticViewChange) {
89
- resetTimeout();
90
- timeoutRef.current = setTimeout(function () { return setActive(function (prevIndex) { return prevIndex === data.length ?
91
- endless ?
92
- 1 :
93
- prevIndex
94
- : prevIndex + 1; }); }, automaticViewChangeInterval);
95
- return function () {
96
- resetTimeout();
97
- };
98
- }
99
- }, [automaticViewChange, automaticViewChangeInterval, data.length, active, endless]);
100
- var handleKeyDown = React.useCallback(function (event) {
101
- switch (event.keyCode) {
102
- case Keys.left:
103
- event.preventDefault();
104
- if (!isRtl) {
105
- prev();
106
- }
107
- else {
108
- next();
109
- }
110
- break;
111
- case Keys.right:
112
- event.preventDefault();
113
- if (!isRtl) {
114
- next();
115
- }
116
- else {
117
- prev();
118
- }
119
- break;
120
- default:
121
- break;
122
- }
123
- }, [isRtl, next, prev]);
124
- var scrollViewClasses = React.useMemo(function () { return classNames('k-scrollview', {
125
- 'k-scrollview-light': pagerOverlay === 'light',
126
- 'k-scrollview-dark': pagerOverlay === 'dark'
127
- }, className); }, [className, pagerOverlay]);
128
- var content = React.Children.map(children || null, function (child, index) { return (React.createElement("div", { className: "k-scrollview-view", "aria-hidden": active === index + 1 ? false : true }, child)); });
129
- var displayLeftArrow = React.useCallback(function () {
130
- var isNotBorderItem;
131
- isNotBorderItem = active > 1;
132
- return (endless || isNotBorderItem) && data.length > 0;
133
- }, [active, data.length, endless]);
134
- var displayRightArrow = React.useCallback(function () {
135
- var isNotBorderItem;
136
- isNotBorderItem = active < data.length;
137
- return (endless || isNotBorderItem) && data.length > 0;
138
- }, [active, data.length, endless]);
139
- return (React.createElement("div", { className: scrollViewClasses, style: style, ref: elementRef, tabIndex: 0, dir: dir, onKeyDown: handleKeyDown },
140
- React.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: wrapElementRef }, content),
141
- React.createElement("div", { className: "k-scrollview-elements" },
142
- arrows && (React.createElement(React.Fragment, null,
143
- displayLeftArrow() && React.createElement("span", { className: "k-scrollview-prev", "aria-label": "previous", onClick: prev },
144
- React.createElement(IconWrap, { name: isRtl ? 'chevron-right' : 'chevron-left', icon: isRtl ? chevronRightIcon : chevronLeftIcon, size: 'xxxlarge' })),
145
- displayRightArrow() && React.createElement("span", { className: "k-scrollview-next", onClick: next },
146
- React.createElement(IconWrap, { name: isRtl ? 'chevron-left' : 'chevron-right', icon: isRtl ? chevronLeftIcon : chevronRightIcon, size: 'xxxlarge' })))),
147
- pageable && (React.createElement("div", { className: "k-scrollview-nav-wrap" },
148
- React.createElement("div", { className: "k-scrollview-nav" }, data.map(function (_, index) {
149
- return (React.createElement("span", { className: classNames('k-link', {
150
- 'k-primary': active === index + 1
151
- }), key: index + 1, onClick: function () { return setActive(index + 1); } }));
152
- })))))));
153
- });
154
- ScrollView.propTypes = {
155
- activeView: PropTypes.number,
156
- arrows: PropTypes.bool,
157
- automaticViewChange: PropTypes.bool,
158
- automaticViewChangeInterval: PropTypes.number,
159
- children: PropTypes.any,
160
- className: PropTypes.string,
161
- dir: PropTypes.string,
162
- endless: PropTypes.bool,
163
- pageable: PropTypes.bool,
164
- pageOverlay: PropTypes.string,
165
- style: PropTypes.object
166
- };
167
- var defaultProps = {
168
- activeView: 1,
169
- arrows: true,
170
- automaticViewChange: true,
171
- automaticViewChangeInterval: 5000,
172
- endless: false,
173
- pageable: true,
174
- pageOverlay: 'none'
175
- };
176
- ScrollView.defaultProps = defaultProps;
177
- ScrollView.displayName = 'KendoScrollView';
@@ -1,59 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * Represents the props of the [KendoReact ScrollView component]({% slug overview_scrollview %}).
4
- */
5
- export interface ScrollViewProps {
6
- /**
7
- * Represents the current active view ([see example]({% slug activeview_scrollview %})). Defaults to `1`.
8
- */
9
- activeView?: number;
10
- /**
11
- * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})). Defaults to `true`.
12
- */
13
- arrows?: boolean;
14
- /**
15
- * Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
16
- * Defaults to `true`.
17
- */
18
- automaticViewChange?: boolean;
19
- /**
20
- * Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
21
- * Defaults to `5000`.
22
- */
23
- automaticViewChangeInterval?: number;
24
- /**
25
- * Sets the ScrollView children elements.
26
- */
27
- children?: React.ReactNode;
28
- /**
29
- * Specifies a list of CSS classes that will be added to the ScrollView.
30
- */
31
- className?: string;
32
- /**
33
- * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
34
- */
35
- dir?: string;
36
- /**
37
- * Toggles the endless scrolling mode in which the data items are endlessly looped
38
- * ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
39
- */
40
- endless?: boolean;
41
- /**
42
- * Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
43
- */
44
- pageable?: boolean;
45
- /**
46
- * Sets the pager overlay ([see example]({% slug paging_scrollview %})).
47
- *
48
- * * The possible values are:
49
- * * `none`(Default) &mdash; No overlay is set.
50
- * * `dark` &mdash; Dark overlay is set.
51
- * * `light` &mdash; Light overlay is set.
52
- *
53
- */
54
- pagerOverlay?: 'dark' | 'light' | 'none';
55
- /**
56
- * Sets additional CSS styles to the ScrollView.
57
- */
58
- style?: React.CSSProperties;
59
- }
@@ -1 +0,0 @@
1
- export {};
package/dist/es/main.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './ScrollView';
2
- export * from './ScrollViewProps';
package/dist/es/main.js DELETED
@@ -1,2 +0,0 @@
1
- export * from './ScrollView';
2
- export * from './ScrollViewProps';
@@ -1,5 +0,0 @@
1
- import { PackageMetadata } from '@progress/kendo-licensing';
2
- /**
3
- * @hidden
4
- */
5
- export declare const packageMetadata: PackageMetadata;
@@ -1,11 +0,0 @@
1
- /**
2
- * @hidden
3
- */
4
- export var packageMetadata = {
5
- name: '@progress/kendo-react-scrollview',
6
- productName: 'KendoReact',
7
- productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1700061261,
9
- version: '',
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
- };