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

package/dist/npm/ScrollView.js

@@ -1,180 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollView = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("./package-metadata");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-/**
- * Represents the [KendoReact ScrollView component]({% slug overview_scrollview %}).
- *
- * @example
- * ```jsx
- * const App = () => {
- *   const items: any[] = [
- *     { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
- *     { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
- *     { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
- *   ];
- *   return (
- *     <ScrollView style={{width: 512, height: 384}}>
- *       {items.map((item, index) => {
- *         return (
- *           <div className="image-with-text" key={index}>
- *             <p>Showing image {item.position} of {items.length}.</p>
- *             <img
- *               src={item.url}
- *               alt={'Photo'}
- *               style={{width: 512, height: 384}}
- *               draggable={false}
- *             />
- *           </div>
- *         );
- *       })}
- *     </ScrollView>
- *   );
- * };
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-exports.ScrollView = React.forwardRef(function (props, target) {
-    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-    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;
-    var _a = React.useState(activeView || 1), active = _a[0], setActive = _a[1];
-    var elementRef = React.useRef(null);
-    var wrapElementRef = React.useRef(null);
-    var timeoutRef = React.useRef(null);
-    var data = React.Children.toArray(children);
-    var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
-    var isRtl = dir === 'rtl';
-    var focusElement = React.useCallback(function () {
-        if (elementRef.current) {
-            elementRef.current.focus();
-        }
-    }, []);
-    var getImperativeHandle = React.useCallback(function () { return ({
-        element: elementRef.current,
-        focus: focusElement
-    }); }, [focusElement]);
-    React.useImperativeHandle(target, getImperativeHandle);
-    var prev = React.useCallback(function () {
-        if (!endless) {
-            active > 1 && setActive(active - 1);
-        }
-        else {
-            active > 1 ? setActive(active - 1) : setActive(data.length);
-        }
-    }, [active, data.length, endless]);
-    var next = React.useCallback(function () {
-        if (!endless) {
-            active < data.length && setActive(active + 1);
-        }
-        else {
-            active < data.length ? setActive(active + 1) : setActive(1);
-        }
-    }, [active, data.length, endless]);
-    React.useEffect(function () {
-        var viewsCount = data.length;
-        if (wrapElementRef.current) {
-            wrapElementRef.current.style.setProperty('--kendo-scrollview-views', "".concat(viewsCount));
-            wrapElementRef.current.style.setProperty('--kendo-scrollview-current', "".concat(active));
-        }
-    }, [data, active, dir]);
-    function resetTimeout() {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-    }
-    React.useEffect(function () {
-        if (automaticViewChange) {
-            resetTimeout();
-            timeoutRef.current = setTimeout(function () { return setActive(function (prevIndex) { return prevIndex === data.length ?
-                endless ?
-                    1 :
-                    prevIndex
-                : prevIndex + 1; }); }, automaticViewChangeInterval);
-            return function () {
-                resetTimeout();
-            };
-        }
-    }, [automaticViewChange, automaticViewChangeInterval, data.length, active, endless]);
-    var handleKeyDown = React.useCallback(function (event) {
-        switch (event.keyCode) {
-            case kendo_react_common_1.Keys.left:
-                event.preventDefault();
-                if (!isRtl) {
-                    prev();
-                }
-                else {
-                    next();
-                }
-                break;
-            case kendo_react_common_1.Keys.right:
-                event.preventDefault();
-                if (!isRtl) {
-                    next();
-                }
-                else {
-                    prev();
-                }
-                break;
-            default:
-                break;
-        }
-    }, [isRtl, next, prev]);
-    var scrollViewClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-scrollview', {
-        'k-scrollview-light': pagerOverlay === 'light',
-        'k-scrollview-dark': pagerOverlay === 'dark'
-    }, className); }, [className, pagerOverlay]);
-    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)); });
-    var displayLeftArrow = React.useCallback(function () {
-        var isNotBorderItem;
-        isNotBorderItem = active > 1;
-        return (endless || isNotBorderItem) && data.length > 0;
-    }, [active, data.length, endless]);
-    var displayRightArrow = React.useCallback(function () {
-        var isNotBorderItem;
-        isNotBorderItem = active < data.length;
-        return (endless || isNotBorderItem) && data.length > 0;
-    }, [active, data.length, endless]);
-    return (React.createElement("div", { className: scrollViewClasses, style: style, ref: elementRef, tabIndex: 0, dir: dir, onKeyDown: handleKeyDown },
-        React.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: wrapElementRef }, content),
-        React.createElement("div", { className: "k-scrollview-elements" },
-            arrows && (React.createElement(React.Fragment, null,
-                displayLeftArrow() && React.createElement("span", { className: "k-scrollview-prev", "aria-label": "previous", onClick: prev },
-                    React.createElement(kendo_react_common_1.IconWrap, { name: isRtl ? 'chevron-right' : 'chevron-left', icon: isRtl ? kendo_svg_icons_1.chevronRightIcon : kendo_svg_icons_1.chevronLeftIcon, size: 'xxxlarge' })),
-                displayRightArrow() && React.createElement("span", { className: "k-scrollview-next", onClick: next },
-                    React.createElement(kendo_react_common_1.IconWrap, { name: isRtl ? 'chevron-left' : 'chevron-right', icon: isRtl ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon, size: 'xxxlarge' })))),
-            pageable && (React.createElement("div", { className: "k-scrollview-nav-wrap" },
-                React.createElement("div", { className: "k-scrollview-nav" }, data.map(function (_, index) {
-                    return (React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-link', {
-                            'k-primary': active === index + 1
-                        }), key: index + 1, onClick: function () { return setActive(index + 1); } }));
-                })))))));
-});
-exports.ScrollView.propTypes = {
-    activeView: PropTypes.number,
-    arrows: PropTypes.bool,
-    automaticViewChange: PropTypes.bool,
-    automaticViewChangeInterval: PropTypes.number,
-    children: PropTypes.any,
-    className: PropTypes.string,
-    dir: PropTypes.string,
-    endless: PropTypes.bool,
-    pageable: PropTypes.bool,
-    pageOverlay: PropTypes.string,
-    style: PropTypes.object
-};
-var defaultProps = {
-    activeView: 1,
-    arrows: true,
-    automaticViewChange: true,
-    automaticViewChangeInterval: 5000,
-    endless: false,
-    pageable: true,
-    pageOverlay: 'none'
-};
-exports.ScrollView.defaultProps = defaultProps;
-exports.ScrollView.displayName = 'KendoScrollView';

package/dist/npm/ScrollViewProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/main.d.ts

@@ -1,2 +0,0 @@
-export * from './ScrollView';
-export * from './ScrollViewProps';

package/dist/npm/main.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ScrollView"), exports);
-__exportStar(require("./ScrollViewProps"), exports);

package/dist/npm/package-metadata.d.ts

@@ -1,5 +0,0 @@
-import { PackageMetadata } from '@progress/kendo-licensing';
-/**
- * @hidden
- */
-export declare const packageMetadata: PackageMetadata;

package/dist/npm/package-metadata.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.packageMetadata = void 0;
-/**
- * @hidden
- */
-exports.packageMetadata = {
-    name: '@progress/kendo-react-scrollview',
-    productName: 'KendoReact',
-    productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1700065152,
-    version: '',
-    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'
-};

package/dist/systemjs/kendo-react-scrollview.js

@@ -1 +0,0 @@
-System.register("@progress/kendo-react-scrollview",["@progress/kendo-react-common","@progress/kendo-svg-icons","prop-types","react"],function(e,t){var r={},c={},l={},o={};return Object.defineProperty(r,"__esModule",{value:!0}),Object.defineProperty(c,"__esModule",{value:!0}),Object.defineProperty(l,"__esModule",{value:!0}),Object.defineProperty(o,"__esModule",{value:!0}),{setters:[function(t){Object.keys(t).forEach(function(e){r[e]=t[e]})},function(t){Object.keys(t).forEach(function(e){c[e]=t[e]})},function(t){Object.keys(t).forEach(function(e){l[e]=t[e]})},function(t){Object.keys(t).forEach(function(e){o[e]=t[e]})}],execute:function(){e((()=>{"use strict";var n={850:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ScrollView=void 0;var C=r(954),n=r(895),x=r(811),j=r(811),N=r(363),P=r(233);t.ScrollView=C.forwardRef(function(e,t){(0,j.validatePackage)(N.packageMetadata);var r=e.className,n=e.style,a=e.children,c=e.pagerOverlay,l=e.pageable,o=e.arrows,i=e.endless,s=e.activeView,u=e.automaticViewChange,v=e.automaticViewChangeInterval,s=C.useState(s||1),f=s[0],d=s[1],p=C.useRef(null),m=C.useRef(null),g=C.useRef(null),h=C.Children.toArray(a),s=(0,x.useRtl)(p,e.dir),k="rtl"===s,w=C.useCallback(function(){p.current&&p.current.focus()},[]),e=C.useCallback(function(){return{element:p.current,focus:w}},[w]),b=(C.useImperativeHandle(t,e),C.useCallback(function(){i?d(1<f?f-1:h.length):1<f&&d(f-1)},[f,h.length,i])),y=C.useCallback(function(){i?f<h.length?d(f+1):d(1):f<h.length&&d(f+1)},[f,h.length,i]);function _(){g.current&&clearTimeout(g.current)}C.useEffect(function(){var e=h.length;m.current&&(m.current.style.setProperty("--kendo-scrollview-views","".concat(e)),m.current.style.setProperty("--kendo-scrollview-current","".concat(f)))},[h,f,s]),C.useEffect(function(){if(u)return _(),g.current=setTimeout(function(){return d(function(e){return e===h.length?i?1:e:e+1})},v),function(){_()}},[u,v,h.length,f,i]);var t=C.useCallback(function(e){switch(e.keyCode){case x.Keys.left:e.preventDefault(),(k?y:b)();break;case x.Keys.right:e.preventDefault(),(k?b:y)()}},[k,y,b]),e=C.useMemo(function(){return(0,x.classNames)("k-scrollview",{"k-scrollview-light":"light"===c,"k-scrollview-dark":"dark"===c},r)},[r,c]),a=C.Children.map(a||null,function(e,t){return C.createElement("div",{className:"k-scrollview-view","aria-hidden":f!==t+1},e)}),O=C.useCallback(function(){return(i||1<f)&&0<h.length},[f,h.length,i]),E=C.useCallback(function(){var e=f<h.length;return(i||e)&&0<h.length},[f,h.length,i]);return C.createElement("div",{className:e,style:n,ref:p,tabIndex:0,dir:s,onKeyDown:t},C.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:m},a),C.createElement("div",{className:"k-scrollview-elements"},o&&C.createElement(C.Fragment,null,O()&&C.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:b},C.createElement(x.IconWrap,{name:k?"chevron-right":"chevron-left",icon:k?P.chevronRightIcon:P.chevronLeftIcon,size:"xxxlarge"})),E()&&C.createElement("span",{className:"k-scrollview-next",onClick:y},C.createElement(x.IconWrap,{name:k?"chevron-left":"chevron-right",icon:k?P.chevronLeftIcon:P.chevronRightIcon,size:"xxxlarge"}))),l&&C.createElement("div",{className:"k-scrollview-nav-wrap"},C.createElement("div",{className:"k-scrollview-nav"},h.map(function(e,t){return C.createElement("span",{className:(0,x.classNames)("k-link",{"k-primary":f===t+1}),key:t+1,onClick:function(){return d(t+1)}})})))))}),t.ScrollView.propTypes={activeView:n.number,arrows:n.bool,automaticViewChange:n.bool,automaticViewChangeInterval:n.number,children:n.any,className:n.string,dir:n.string,endless:n.bool,pageable:n.bool,pageOverlay:n.string,style:n.object},t.ScrollView.defaultProps={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"},t.ScrollView.displayName="KendoScrollView"},271:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},468:function(e,t,r){var n=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){e[n=void 0===n?r:n]=t[r]}),a=this&&this.__exportStar||function(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||n(t,e,r)};Object.defineProperty(t,"__esModule",{value:!0}),a(r(850),t),a(r(271),t)},363:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.packageMetadata=void 0,t.packageMetadata={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1700065152,version:"",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"}},811:e=>{e.exports=r},233:e=>{e.exports=c},895:e=>{e.exports=l},954:e=>{e.exports=o}},a={};return function e(t){var r=a[t];return void 0!==r||(r=a[t]={exports:{}},n[t].call(r.exports,r,r.exports,e)),r.exports}(468)})())}}});

package/e2e-next/basic.tests.ts

@@ -1,24 +0,0 @@
-import { Browser } from '@progress/kendo-e2e';
-import { LOCATORS } from '../../../e2eUtils/const';
-
-let browser: Browser;
-
-beforeAll(() => {
-  browser = new Browser();
-});
-
-beforeEach(async () => {
-  await browser.navigateTo('http://localhost:3000/scrollview/overview');
-});
-
-afterEach(async () => {
-  expect(await browser.getErrorLogs()).toEqual([]);
-});
-
-afterAll(async () => {
-  await browser.close();
-});
-
-it('should not have errors', async () => {
-  expect(await browser.isVisible(LOCATORS.SCROLLVIEW)).toBe(true);
-});