@doyourjob/gravity-ui-page-constructor 5.31.253 → 5.31.256

package/build/esm/blocks/LogoRotator/LogoRotator.css

@@ -30,19 +30,44 @@ unpredictable css rules order in build */
   gap: 16px;
 }
 .pc-logo-rotator-block__item {
+  position: relative;
   display: block;
   height: 100px;
-  transition: opacity 0.5s ease 0.1s;
-  opacity: 1;
-}
-.pc-logo-rotator-block__item_hidden {
-  opacity: 0;
+  overflow: hidden;
 }
 @media (max-width: 769px) {
   .pc-logo-rotator-block__item {
     height: 80px;
   }
 }
+.pc-logo-rotator-block__item-link, .pc-logo-rotator-block__row-item-link {
+  display: block;
+  height: 100%;
+}
+.pc-logo-rotator-block__logo-layer {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.pc-logo-rotator-block__item_swapping .pc-logo-rotator-block__logo-layer, .pc-logo-rotator-block__row-item_swapping .pc-logo-rotator-block__logo-layer {
+  position: absolute;
+  inset: 0;
+}
+.pc-logo-rotator-block__logo-layer_from {
+  pointer-events: none;
+}
+.pc-logo-rotator-block__logo-layer_fade-from {
+  animation: logo-rotator-fade-out 0.5s ease 0.1s both;
+}
+.pc-logo-rotator-block__logo-layer_fade-to {
+  animation: logo-rotator-fade-in 0.5s ease 0.6s both;
+}
+.pc-logo-rotator-block__logo-layer_morph-from {
+  animation: logo-rotator-morph-out 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.pc-logo-rotator-block__logo-layer_morph-to {
+  animation: logo-rotator-morph-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
 .pc-logo-rotator-block__image {
   display: block;
   width: 100%;
@@ -57,13 +82,57 @@ unpredictable css rules order in build */
   gap: 46px 16px;
 }
 .pc-logo-rotator-block__row-item {
+  position: relative;
   display: block;
   height: 36px;
   min-width: 160px;
   flex: 1;
-  transition: opacity 0.5s ease 0.1s;
-  opacity: 1;
+  overflow: hidden;
 }
-.pc-logo-rotator-block__row-item_hidden {
-  opacity: 0;
+
+@keyframes logo-rotator-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes logo-rotator-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes logo-rotator-morph-out {
+  from {
+    clip-path: inset(0 0 0 0);
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+  to {
+    clip-path: inset(0 100% 0 0);
+    transform: translateX(-8%) scaleX(0.9);
+    opacity: 0;
+  }
+}
+@keyframes logo-rotator-morph-in {
+  from {
+    clip-path: inset(0 0 0 100%);
+    transform: translateX(8%) scaleX(0.9);
+    opacity: 0;
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pc-logo-rotator-block__logo-layer_fade-from, .pc-logo-rotator-block__logo-layer_fade-to, .pc-logo-rotator-block__logo-layer_morph-from, .pc-logo-rotator-block__logo-layer_morph-to {
+    animation-duration: 1ms;
+    animation-delay: 0ms;
+  }
 }

package/build/esm/blocks/LogoRotator/LogoRotator.js

@@ -1,14 +1,18 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link } from '@gravity-ui/uikit';
 import { ImageBase, Title } from '../../components';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import { BREAKPOINTS } from '../../constants';
 import { Grid, Row } from '../../grid';
+import useWindowBreakpoint from '../../hooks/useWindowBreakpoint';
 import { block } from '../../utils';
 import Item from './Item';
+import { DEFAULT_SWAP_ANIMATION, SWAP_ANIMATION_DURATIONS, getInitialSlots, getLayerModifiers, } from './utils';
 import './LogoRotator.css';
 const b = block('logo-rotator-block');
 const DEFAULT_MIN_ROTATE_COUNT = 2;
 const DEFAULT_MAX_ROTATE_COUNT = 4;
+const emptyTransitions = (count) => Array(count).fill(undefined);
 const pickRandomSlots = (slotIndices, count) => {
     const shuffled = [...slotIndices];
     for (let i = shuffled.length - 1; i > 0; i--) {
@@ -18,46 +22,47 @@ const pickRandomSlots = (slotIndices, count) => {
     return shuffled.slice(0, count);
 };
 export const LogoRotatorBlock = (props) => {
-    const { animated, title, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, colSizes, rowMode, } = props;
+    const { animated, title, theme, items, countMobile, countDesktop, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
+    const breakpoint = useWindowBreakpoint();
+    const activeCount = countDesktop !== undefined && breakpoint >= BREAKPOINTS.md ? countDesktop : countMobile;
     // Индексы логотипов, которые участвуют в ротации (не статичные)
     const rotatableIndices = useMemo(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
     // Инициализация слотов: статичные вставляются в начало, остальные по порядку
-    const [slots, setSlots] = useState(() => {
-        var _a;
-        const staticIdxList = items
-            .map((item, i) => (item.isStatic ? i : -1))
-            .filter((i) => i !== -1);
-        const rotatableIdxList = items
-            .map((item, i) => (item.isStatic ? -1 : i))
-            .filter((i) => i !== -1);
-        const initial = [];
-        let rotatablePointer = 0;
-        for (let slot = 0; slot < count; slot++) {
-            if (slot < staticIdxList.length) {
-                initial.push(staticIdxList[slot]);
-            }
-            else {
-                initial.push((_a = rotatableIdxList[rotatablePointer++]) !== null && _a !== void 0 ? _a : 0);
-            }
-        }
-        return initial;
-    });
-    const [hidden, setHidden] = useState(() => Array(count).fill(false));
-    const nextIndexRef = useRef(count - 1);
-    const isHoveredRef = useRef(false);
+    const [slots, setSlots] = useState(() => getInitialSlots(items, activeCount));
+    const [transitions, setTransitions] = useState(() => emptyTransitions(activeCount));
+    const nextIndexRef = useRef(activeCount - 1);
+    const hoveredSlotIndicesRef = useRef(new Set());
     // Держим актуальные slots в ref, чтобы не пересоздавать интервал при каждом изменении
     const slotsRef = useRef(slots);
     useEffect(() => {
         slotsRef.current = slots;
     }, [slots]);
+    useEffect(() => {
+        const initialSlots = getInitialSlots(items, activeCount);
+        slotsRef.current = initialSlots;
+        setSlots(initialSlots);
+        setTransitions(emptyTransitions(activeCount));
+        nextIndexRef.current = activeCount - 1;
+        hoveredSlotIndicesRef.current.clear();
+    }, [activeCount, items]);
+    const handleSlotMouseEnter = useCallback((slotIndex) => {
+        hoveredSlotIndicesRef.current.add(slotIndex);
+    }, []);
+    const handleSlotMouseLeave = useCallback((slotIndex) => {
+        hoveredSlotIndicesRef.current.delete(slotIndex);
+    }, []);
     useEffect(() => {
         let timeout = null;
         const interval = setInterval(() => {
-            if (isHoveredRef.current)
-                return;
-            // Выбираем только не-статичные слоты для замены
-            const rotatableSlotIndices = slotsRef.current
-                .map((itemIdx, slotIdx) => { var _a; return (((_a = items[itemIdx]) === null || _a === void 0 ? void 0 : _a.isStatic) ? -1 : slotIdx); })
+            const currentSlots = slotsRef.current;
+            // Выбираем только не-статичные слоты, на которые не наведен указатель
+            const rotatableSlotIndices = currentSlots
+                .map((itemIdx, slotIdx) => {
+                var _a;
+                return ((_a = items[itemIdx]) === null || _a === void 0 ? void 0 : _a.isStatic) || hoveredSlotIndicesRef.current.has(slotIdx)
+                    ? -1
+                    : slotIdx;
+            })
                 .filter((i) => i !== -1);
             if (rotatableSlotIndices.length === 0)
                 return;
@@ -65,35 +70,56 @@ export const LogoRotatorBlock = (props) => {
             const rotateMax = Math.max(minRotateCount, maxRotateCount);
             const rotateCount = rotateMin + Math.floor(Math.random() * (rotateMax - rotateMin + 1));
             const slotIndices = pickRandomSlots(rotatableSlotIndices, Math.min(rotateCount, rotatableSlotIndices.length));
-            setHidden((prev) => {
+            let available = rotatableIndices.filter((i) => !currentSlots.includes(i));
+            const blockedTargetSrcs = new Set();
+            const nextTransitions = [];
+            slotIndices.forEach((slotIndex) => {
+                var _a, _b;
+                if (available.length === 0)
+                    return;
+                const currentItemIndex = currentSlots[slotIndex];
+                const currentSrc = (_a = items[currentItemIndex]) === null || _a === void 0 ? void 0 : _a.src;
+                const slotAvailable = available.filter((i) => {
+                    var _a;
+                    const src = (_a = items[i]) === null || _a === void 0 ? void 0 : _a.src;
+                    return src !== currentSrc && !blockedTargetSrcs.has(src);
+                });
+                if (slotAvailable.length === 0)
+                    return;
+                const newValue = slotAvailable[nextIndexRef.current % slotAvailable.length];
+                nextIndexRef.current++;
+                available = available.filter((i) => i !== newValue);
+                const newSrc = (_b = items[newValue]) === null || _b === void 0 ? void 0 : _b.src;
+                if (newSrc) {
+                    blockedTargetSrcs.add(newSrc);
+                }
+                nextTransitions.push({ slotIndex, from: currentItemIndex, to: newValue });
+            });
+            if (nextTransitions.length === 0)
+                return;
+            setTransitions((prev) => {
                 const next = [...prev];
-                slotIndices.forEach((slotIndex) => {
-                    next[slotIndex] = true;
+                nextTransitions.forEach(({ slotIndex, from, to }) => {
+                    next[slotIndex] = { from, to };
                 });
                 return next;
             });
             timeout = setTimeout(() => {
                 setSlots((prevSlots) => {
                     const newSlots = [...prevSlots];
-                    let available = rotatableIndices.filter((i) => !newSlots.includes(i));
-                    slotIndices.forEach((slotIndex) => {
-                        if (available.length === 0)
-                            return;
-                        const newValue = available[nextIndexRef.current % available.length];
-                        nextIndexRef.current++;
-                        newSlots[slotIndex] = newValue;
-                        available = available.filter((i) => i !== newValue);
+                    nextTransitions.forEach(({ slotIndex, to }) => {
+                        newSlots[slotIndex] = to;
                     });
                     return newSlots;
                 });
-                setHidden((prev) => {
+                setTransitions((prev) => {
                     const next = [...prev];
-                    slotIndices.forEach((slotIndex) => {
-                        next[slotIndex] = false;
+                    nextTransitions.forEach(({ slotIndex }) => {
+                        next[slotIndex] = undefined;
                     });
                     return next;
                 });
-            }, 500);
+            }, SWAP_ANIMATION_DURATIONS[swapAnimation]);
         }, 2000);
         return () => {
             clearInterval(interval);
@@ -101,29 +127,49 @@ export const LogoRotatorBlock = (props) => {
                 clearTimeout(timeout);
             }
         };
-    }, [count, items, maxRotateCount, minRotateCount, rotatableIndices]);
-    const renderItems = useMemo(() => slots.map((slot, index) => (React.createElement(Item, { key: index, colSizes: colSizes, url: items[slot].url, src: items[slot].src, hidden: hidden[index] }))), [colSizes, hidden, items, slots]);
+    }, [activeCount, items, maxRotateCount, minRotateCount, rotatableIndices, swapAnimation]);
+    const renderItems = useMemo(() => slots.map((slot, index) => {
+        var _a;
+        const transition = transitions[index];
+        const item = items[(_a = transition === null || transition === void 0 ? void 0 : transition.to) !== null && _a !== void 0 ? _a : slot];
+        const previousItem = transition ? items[transition.from] : undefined;
+        return (React.createElement(Item, { key: index, colSizes: colSizes, url: item.url, src: item.src, previousUrl: previousItem === null || previousItem === void 0 ? void 0 : previousItem.url, previousSrc: previousItem === null || previousItem === void 0 ? void 0 : previousItem.src, swapAnimation: swapAnimation, onMouseEnter: () => handleSlotMouseEnter(index), onMouseLeave: () => handleSlotMouseLeave(index) }));
+    }), [
+        colSizes,
+        handleSlotMouseEnter,
+        handleSlotMouseLeave,
+        items,
+        slots,
+        swapAnimation,
+        transitions,
+    ]);
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: 'l' }
         : title;
     const hasTitle = Boolean(title);
     return (React.createElement(AnimateBlock, { className: b({ theme }), animate: animated },
-        React.createElement("div", { className: b('root'), onMouseEnter: () => {
-                isHoveredRef.current = true;
-            }, onMouseLeave: () => {
-                isHoveredRef.current = false;
-            } },
+        React.createElement("div", { className: b('root') },
             hasTitle && (React.createElement(Title, { title: titleProps, className: b('title'), colSizes: { all: 12 } })),
             rowMode ? (React.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
-                const item = items[slot];
-                if (!item)
+                var _a;
+                const transition = transitions[index];
+                const item = items[(_a = transition === null || transition === void 0 ? void 0 : transition.to) !== null && _a !== void 0 ? _a : slot];
+                const previousItem = transition ? items[transition.from] : undefined;
+                if (item === undefined)
                     return null;
-                if (item.url) {
-                    return (React.createElement(Link, { key: index, href: item.url, className: b('row-item', { hidden: hidden[index] }) },
-                        React.createElement(ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
-                }
-                return (React.createElement("div", { key: index, className: b('row-item', { hidden: hidden[index] }) },
-                    React.createElement(ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                const renderRowLayer = (layerItem, layer) => {
+                    const layerClassName = b('logo-layer', getLayerModifiers(layer, swapAnimation));
+                    if (layerItem.url) {
+                        return (React.createElement(Link, { href: layerItem.url, className: `${b('row-item-link')} ${layerClassName}` },
+                            React.createElement(ImageBase, { src: layerItem.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                    }
+                    return (React.createElement("div", { className: layerClassName },
+                        React.createElement(ImageBase, { src: layerItem.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                };
+                const content = (React.createElement(React.Fragment, null,
+                    previousItem && renderRowLayer(previousItem, 'from'),
+                    renderRowLayer(item, previousItem ? 'to' : 'current')));
+                return (React.createElement("div", { key: index, className: b('row-item', { swapping: Boolean(previousItem) }), onMouseEnter: () => handleSlotMouseEnter(index), onMouseLeave: () => handleSlotMouseLeave(index) }, content));
             }))) : (React.createElement(Grid, { className: b('items') },
                 React.createElement(Row, { className: b('row') }, renderItems))))));
 };

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

@@ -182,7 +182,10 @@ export declare const LogoRotatorBlock: {
                     };
                 };
             };
-            count: {
+            countMobile: {
+                type: string;
+            };
+            countDesktop: {
                 type: string;
             };
             minRotateCount: {
@@ -191,6 +194,10 @@ export declare const LogoRotatorBlock: {
             maxRotateCount: {
                 type: string;
             };
+            swapAnimation: {
+                type: string;
+                enum: string[];
+            };
             colSizes: {
                 type: string;
                 additionalProperties: {

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

@@ -2,7 +2,7 @@ import { AnimatableProps, BaseProps, ThemeProps, TitleProps, containerSizesObjec
 export const LogoRotatorBlock = {
     'logo-rotator-block': {
         additionalProperties: false,
-        required: ['items', 'count'],
+        required: ['items', 'countMobile'],
         properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { title: {
                 oneOf: [
                     {
@@ -24,12 +24,17 @@ export const LogoRotatorBlock = {
                         isStatic: { type: 'boolean' },
                     },
                 },
-            }, count: {
+            }, countMobile: {
+                type: 'number',
+            }, countDesktop: {
                 type: 'number',
             }, minRotateCount: {
                 type: 'number',
             }, maxRotateCount: {
                 type: 'number',
+            }, swapAnimation: {
+                type: 'string',
+                enum: ['fade', 'morph'],
             }, colSizes: {
                 type: 'object',
                 additionalProperties: containerSizesObject,

package/build/esm/blocks/LogoRotator/utils.d.ts

@@ -0,0 +1,7 @@
+import { LogoRotatorBlockProps } from '../../models';
+export type LogoRotatorLayer = 'current' | 'from' | 'to';
+export type LogoRotatorSwapAnimation = NonNullable<LogoRotatorBlockProps['swapAnimation']>;
+export declare const DEFAULT_SWAP_ANIMATION: LogoRotatorSwapAnimation;
+export declare const SWAP_ANIMATION_DURATIONS: Record<LogoRotatorSwapAnimation, number>;
+export declare const getLayerModifiers: (layer: LogoRotatorLayer, swapAnimation: LogoRotatorSwapAnimation) => Record<string, boolean>;
+export declare const getInitialSlots: (items: LogoRotatorBlockProps['items'], count: number) => number[];

package/build/esm/blocks/LogoRotator/utils.js

@@ -0,0 +1,31 @@
+export const DEFAULT_SWAP_ANIMATION = 'fade';
+export const SWAP_ANIMATION_DURATIONS = {
+    fade: 1100,
+    morph: 500,
+};
+export const getLayerModifiers = (layer, swapAnimation) => {
+    const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
+    const modifiers = { [layer]: true };
+    if (animationModifier) {
+        modifiers[animationModifier] = true;
+    }
+    return modifiers;
+};
+export const getInitialSlots = (items, count) => {
+    var _a;
+    const staticIdxList = items.map((item, i) => (item.isStatic ? i : -1)).filter((i) => i !== -1);
+    const rotatableIdxList = items
+        .map((item, i) => (item.isStatic ? -1 : i))
+        .filter((i) => i !== -1);
+    const initial = [];
+    let rotatablePointer = 0;
+    for (let slot = 0; slot < count; slot++) {
+        if (slot < staticIdxList.length) {
+            initial.push(staticIdxList[slot]);
+        }
+        else {
+            initial.push((_a = rotatableIdxList[rotatablePointer++]) !== null && _a !== void 0 ? _a : 0);
+        }
+    }
+    return initial;
+};

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

@@ -302,9 +302,11 @@ export interface LogoRotatorBlockProps extends Animatable {
         src: string;
         isStatic?: boolean;
     }[];
-    count: number;
+    countMobile: number;
+    countDesktop?: number;
     minRotateCount?: number;
     maxRotateCount?: number;
+    swapAnimation?: 'fade' | 'morph';
     colSizes?: Partial<Record<GridColumnSize, number>>;
     theme?: TextTheme;
     rowMode?: boolean;

package/package.json

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