@doyourjob/gravity-ui-page-constructor 5.31.228 → 5.31.231

package/build/esm/blocks/Scroller/Scroller.js

@@ -1,9 +1,26 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { AnimateBlock } from '../../components';
-import { BREAKPOINTS } from '../../constants';
 import { block } from '../../utils';
 import './Scroller.css';
 const b = block('scroller-block');
+const getChild = (parent, index) => {
+    const child = parent.children[index];
+    return child instanceof HTMLElement ? child : null;
+};
+const getCenteredChildIndex = (content) => {
+    const midLine = content.getBoundingClientRect().left + content.clientWidth / 2;
+    for (let i = 0; i < content.children.length; i++) {
+        const rect = content.children[i].getBoundingClientRect();
+        if (rect.left <= midLine && rect.right >= midLine) {
+            return i;
+        }
+    }
+    return 0;
+};
+const scrollToChild = (content, child, behavior = 'smooth') => {
+    const left = child.offsetLeft - (content.offsetWidth - child.offsetWidth) / 2;
+    content.scrollTo({ left, behavior });
+};
 const PlayIcon = () => {
     return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
         React.createElement("path", { d: "M13.765 9.83831L20.3154 13.7086C21.2977 14.289 21.298 15.7102 20.3159 16.2911L13.7714 20.1618C12.7719 20.7529 11.5086 20.033 11.5078 18.8718L11.502 11.1309C11.5011 9.96894 12.7646 9.24725 13.765 9.83831Z", fill: "currentColor" })));
@@ -13,7 +30,8 @@ const PauseIcon = () => {
         React.createElement("path", { d: "M12.5 10C13.3284 10 14 10.6716 14 11.5V18.5C14 19.3284 13.3284 20 12.5 20C11.6716 20 11 19.3284 11 18.5V11.5C11 10.6716 11.6716 10 12.5 10ZM17.5 10C18.3284 10 19 10.6716 19 11.5V18.5C19 19.3284 18.3284 20 17.5 20C16.6716 20 16 19.3284 16 18.5V11.5C16 10.6716 16.6716 10 17.5 10Z", fill: "currentColor" })));
 };
 export const ScrollerBlock = (props) => {
-    const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll, autoScrollInterval = 3000, } = props;
+    const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
+    const childCount = React.Children.count(children);
     const rootRef = useRef(null);
     const contentRef = useRef(null);
     const [currentElement, setCurrentElement] = useState(0);
@@ -32,28 +50,12 @@ export const ScrollerBlock = (props) => {
                 content.style.setProperty('left', `${-space}px`);
                 content.style.setProperty('width', `calc(100% + ${2 * space}px)`);
             }
-            if (scrollSnapCenter && window.innerWidth >= BREAKPOINTS.md) {
-                content.style.setProperty('--scroller-edge-margin', `${content.clientWidth / 3}px`);
-            }
-            else {
-                content.style.removeProperty('--scroller-edge-margin');
-            }
         };
         const determineCurrentElement = () => {
-            var _a;
-            const childCount = ((_a = content === null || content === void 0 ? void 0 : content.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
             if (!content || childCount <= 1) {
                 return;
             }
-            const currentMidLine = content.clientWidth / 2;
-            [...content.children].find((child, index) => {
-                const childRect = child.getBoundingClientRect();
-                if (currentMidLine > childRect.left && currentMidLine < childRect.right) {
-                    setCurrentElement(index);
-                    return true;
-                }
-                return false;
-            });
+            setCurrentElement(getCenteredChildIndex(content) % childCount);
         };
         updateSize();
         determineCurrentElement();
@@ -63,23 +65,69 @@ export const ScrollerBlock = (props) => {
             window.removeEventListener('resize', updateSize);
             content === null || content === void 0 ? void 0 : content.removeEventListener('scroll', determineCurrentElement);
         };
-    }, [fullWidth, scrollSnapCenter]);
+    }, [fullWidth, childCount, children]);
+    useEffect(() => {
+        const content = contentRef.current;
+        if (!content || !infinite || childCount <= 1) {
+            return () => { };
+        }
+        const middleCenterIndex = Math.floor(childCount * 1.5);
+        const copyStartIndex = childCount;
+        const endCopyStartIndex = childCount * 2;
+        const scrollToMiddle = () => {
+            const middleChild = getChild(content, middleCenterIndex);
+            if (middleChild) {
+                content.scrollTo(middleChild.offsetLeft + content.offsetWidth / 2 - middleChild.offsetWidth / 2, 0);
+            }
+        };
+        const handleInfiniteScroll = () => {
+            const scrollLeft = content.scrollLeft;
+            const endCopyChild = getChild(content, endCopyStartIndex);
+            const copyStartChild = getChild(content, copyStartIndex);
+            if (endCopyChild && scrollLeft > endCopyChild.offsetLeft) {
+                const delta = endCopyChild.offsetLeft - scrollLeft;
+                const resetChild = getChild(content, copyStartIndex);
+                if (resetChild) {
+                    content.scrollTo(resetChild.offsetLeft + delta, 0);
+                }
+            }
+            if (copyStartChild && scrollLeft < copyStartChild.offsetLeft - content.clientWidth) {
+                const endChild = getChild(content, endCopyStartIndex);
+                if (endChild) {
+                    content.scrollTo(endChild.offsetLeft - content.clientWidth, 0);
+                }
+            }
+        };
+        content.addEventListener('scroll', handleInfiniteScroll, { passive: true });
+        scrollToMiddle();
+        return () => {
+            content.removeEventListener('scroll', handleInfiniteScroll);
+        };
+    }, [infinite, childCount]);
     useEffect(() => {
         if (autoScroll) {
             setIsPaused(false);
         }
     }, [autoScroll]);
-    const childCount = React.Children.count(children);
     const scrollToNext = useCallback(() => {
         const content = contentRef.current;
-        if (!content) {
+        if (!content || childCount <= 1) {
+            return;
+        }
+        if (infinite) {
+            const centeredIndex = getCenteredChildIndex(content);
+            const nextElement = getChild(content, centeredIndex + 1);
+            if (nextElement) {
+                scrollToChild(content, nextElement);
+            }
             return;
         }
         const nextIndex = (currentElement + 1) % childCount;
-        const nextElement = content.children[nextIndex];
-        const nextIndexLeft = nextElement.offsetLeft - (content.offsetWidth - nextElement.offsetWidth) / 2;
-        content.scrollTo({ left: nextIndexLeft, behavior: 'smooth' });
-    }, [childCount, currentElement]);
+        const nextElement = getChild(content, nextIndex);
+        if (nextElement) {
+            scrollToChild(content, nextElement);
+        }
+    }, [childCount, currentElement, infinite]);
     useEffect(() => {
         let timeout = null;
         if (!isPaused) {
@@ -95,7 +143,13 @@ export const ScrollerBlock = (props) => {
     }, [isPaused, currentElement, autoScrollInterval, scrollToNext]);
     return (React.createElement(AnimateBlock, { className: b({ fullWidth }), animate: animated },
         React.createElement("div", { className: b('root'), ref: rootRef },
-            React.createElement("div", { className: b('content', { gapLong, fullWidth, scrollSnapCenter }), ref: contentRef }, React.Children.map(children, (child, index) => (React.createElement("div", { key: index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child))))),
+            React.createElement("div", { className: b('content', {
+                    gapLong,
+                    fullWidth,
+                    'scroll-snap-center': infinite ? false : scrollSnapCenter,
+                }), ref: contentRef }, (infinite ? [0, 1, 2] : [0])
+                .map((mi) => React.Children.map(children, (child, index) => (React.createElement("div", { key: mi * childCount + index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child))))
+                .flat())),
         autoScroll && childCount > 0 && (React.createElement("div", { className: b('pagination-container') },
             React.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (React.createElement("div", { key: index, className: b('pip', { active: index === currentElement }) },
                 React.createElement("div", { style: {

package/build/esm/blocks/Scroller/schema.d.ts

@@ -1,18 +1,29 @@
+export declare const ScrollerControlsProps: {
+    infinite: {
+        type: string;
+    };
+    scrollSnapCenter: {
+        type: string;
+    };
+    autoScroll: {
+        type: string;
+    };
+    autoScrollInterval: {
+        type: string;
+    };
+};
 export declare const ScrollerBlock: {
     'scroller-block': {
         additionalProperties: boolean;
         required: boolean;
         properties: {
-            widths: {
+            children: {
                 type: string;
                 items: {
-                    type: string;
+                    $ref: string;
                 };
             };
-            gapLong: {
-                type: string;
-            };
-            fullWidth: {
+            infinite: {
                 type: string;
             };
             scrollSnapCenter: {
@@ -21,12 +32,21 @@ export declare const ScrollerBlock: {
             autoScroll: {
                 type: string;
             };
-            children: {
+            autoScrollInterval: {
+                type: string;
+            };
+            widths: {
                 type: string;
                 items: {
-                    $ref: string;
+                    type: string;
                 };
             };
+            gapLong: {
+                type: string;
+            };
+            fullWidth: {
+                type: string;
+            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/Scroller/schema.js

@@ -1,9 +1,23 @@
 import { AnimatableProps, BaseProps, ChildrenCardsProps } from '../../schema/validators/common';
+export const ScrollerControlsProps = {
+    infinite: {
+        type: 'boolean',
+    },
+    scrollSnapCenter: {
+        type: 'boolean',
+    },
+    autoScroll: {
+        type: 'boolean',
+    },
+    autoScrollInterval: {
+        type: 'number',
+    },
+};
 export const ScrollerBlock = {
     'scroller-block': {
         additionalProperties: false,
         required: false,
-        properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { widths: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { widths: {
                 type: 'array',
                 items: {
                     type: 'string',
@@ -12,10 +26,6 @@ export const ScrollerBlock = {
                 type: 'boolean',
             }, fullWidth: {
                 type: 'boolean',
-            }, scrollSnapCenter: {
-                type: 'boolean',
-            }, autoScroll: {
-                type: 'boolean',
-            }, children: ChildrenCardsProps }),
+            } }), ScrollerControlsProps), { children: ChildrenCardsProps }),
     },
 };

package/build/esm/blocks/WhatsNew/WhatsNew.js

@@ -5,12 +5,12 @@ import { block } from '../../utils';
 import ScrollerBlock from '../Scroller/Scroller';
 import './WhatsNew.css';
 const b = block('whats-new-block');
-const WhatsNew = ({ title, items, footnote, links, animated }) => {
+const WhatsNew = ({ title, items, footnote, links, animated, infinite, scrollSnapCenter, autoScroll, autoScrollInterval, }) => {
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
         React.createElement("div", { className: b('root') },
             title && (React.createElement("div", { className: b('head') },
                 React.createElement("h2", { className: b('title') }, title))),
-            React.createElement(ScrollerBlock, { fullWidth: true, scrollSnapCenter: true, autoScroll: true }, items.map((item, index) => (React.createElement(NewsCard, Object.assign({ key: index }, item))))),
+            React.createElement(ScrollerBlock, { fullWidth: true, infinite: infinite, scrollSnapCenter: scrollSnapCenter, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (React.createElement(NewsCard, Object.assign({ key: index }, item))))),
             (footnote || (links === null || links === void 0 ? void 0 : links.length)) && (React.createElement("div", { className: b('footer') },
                 footnote && React.createElement("div", { className: b('footnote') }, footnote),
                 (links === null || links === void 0 ? void 0 : links.length) ? (React.createElement("div", { className: b('links') }, links.map((link, index) => (React.createElement("a", { key: index, href: link.url, className: b('link'), target: "_blank", rel: "noopener noreferrer" },

package/build/esm/blocks/WhatsNew/schema.d.ts

@@ -56,6 +56,18 @@ export declare const WhatsNewBlock: {
                     };
                 };
             };
+            infinite: {
+                type: string;
+            };
+            scrollSnapCenter: {
+                type: string;
+            };
+            autoScroll: {
+                type: string;
+            };
+            autoScrollInterval: {
+                type: string;
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/esm/blocks/WhatsNew/schema.js

@@ -1,9 +1,10 @@
 import { AnimatableProps, BlockBaseProps, BlockHeaderProps } from '../../schema/validators/common';
+import { ScrollerControlsProps } from '../Scroller/schema';
 export const WhatsNewBlock = {
     'whats-new-block': {
         additionalProperties: false,
         required: ['items'],
-        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { items: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), ScrollerControlsProps), { items: {
                 type: 'array',
                 items: {
                     type: 'object',

package/build/esm/models/constructor-items/blocks.d.ts

@@ -298,7 +298,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {
 export interface LogoRotatorBlockProps extends Animatable {
     title?: TitleItemBaseProps | string;
     items: {
-        url: string;
+        url?: string;
         src: string;
         isStatic?: boolean;
     }[];
@@ -359,6 +359,7 @@ export interface ScrollerBlockProps extends Animatable {
     widths?: string[];
     gapLong?: boolean;
     fullWidth?: boolean;
+    infinite?: boolean;
     scrollSnapCenter?: boolean;
     autoScroll?: boolean;
     autoScrollInterval?: number;
@@ -641,7 +642,7 @@ export interface BenchmarkBlockProps extends Animatable {
         postfix?: string;
     }[];
 }
-export interface WhatsNewBlockProps extends Animatable {
+export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'scrollSnapCenter' | 'autoScroll' | 'autoScrollInterval'> {
     title?: string;
     items: NewsCardProps[];
     footnote?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.228",
+  "version": "5.31.231",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {