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

package/build/cjs/blocks/LogoRotator/Item.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { LogoRotatorBlockProps } from '../../models';
+import type { LogoRotatorSwapAnimation } from './utils';
 type Props = {
     src: string;
     url?: string;
-    hidden: boolean;
+    previousSrc?: string;
+    previousUrl?: string;
+    swapAnimation: LogoRotatorSwapAnimation;
     colSizes: LogoRotatorBlockProps['colSizes'];
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
-export declare const Item: ({ url, src, hidden, colSizes }: Props) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ url, src, hidden, colSizes }: Props) => JSX.Element>;
+export declare const Item: ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }: Props) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }: Props) => JSX.Element>;
 export default _default;

package/build/cjs/blocks/LogoRotator/Item.js

@@ -7,18 +7,23 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
+const utils_2 = require("./utils");
 const b = (0, utils_1.block)('logo-rotator-block');
 const defaultColSizes = { all: 3 };
-const Item = ({ url, src, hidden, colSizes }) => {
-    const renderItem = react_1.default.useMemo(() => {
-        if (url) {
-            return (react_1.default.createElement(uikit_1.Link, { href: url, className: b('item', { hidden }) },
-                react_1.default.createElement(components_1.Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
+const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', (0, utils_2.getLayerModifiers)(layer, swapAnimation))}`;
+const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
+    const renderLayer = (layerSrc, layer, layerUrl) => {
+        const image = react_1.default.createElement(components_1.Image, { src: layerSrc, className: b('image'), alt: "", "aria-hidden": "true" });
+        if (layerUrl) {
+            return (react_1.default.createElement(uikit_1.Link, { href: layerUrl, className: getLayerClassName(layer, swapAnimation, true) }, image));
         }
-        return (react_1.default.createElement("div", { className: b('item', { hidden }) },
-            react_1.default.createElement(components_1.Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
-    }, [hidden, src, url]);
-    return react_1.default.createElement(grid_1.Col, { sizes: colSizes || defaultColSizes }, renderItem);
+        return react_1.default.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
+    };
+    const isSwapping = Boolean(previousSrc);
+    return (react_1.default.createElement(grid_1.Col, { sizes: colSizes || defaultColSizes },
+        react_1.default.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+            previousSrc && renderLayer(previousSrc, 'from', previousUrl),
+            renderLayer(src, previousSrc ? 'to' : 'current', url))));
 };
 exports.Item = Item;
 exports.default = react_1.default.memo(exports.Item);

package/build/cjs/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/cjs/blocks/LogoRotator/LogoRotator.js

@@ -6,12 +6,16 @@ const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
+const constants_1 = require("../../constants");
 const grid_1 = require("../../grid");
+const useWindowBreakpoint_1 = tslib_1.__importDefault(require("../../hooks/useWindowBreakpoint"));
 const utils_1 = require("../../utils");
 const Item_1 = tslib_1.__importDefault(require("./Item"));
+const utils_2 = require("./utils");
 const b = (0, utils_1.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--) {
@@ -21,46 +25,47 @@ const pickRandomSlots = (slotIndices, count) => {
     return shuffled.slice(0, count);
 };
 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 = utils_2.DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
+    const breakpoint = (0, useWindowBreakpoint_1.default)();
+    const activeCount = countDesktop !== undefined && breakpoint >= constants_1.BREAKPOINTS.md ? countDesktop : countMobile;
     // Индексы логотипов, которые участвуют в ротации (не статичные)
     const rotatableIndices = (0, react_1.useMemo)(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
     // Инициализация слотов: статичные вставляются в начало, остальные по порядку
-    const [slots, setSlots] = (0, react_1.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] = (0, react_1.useState)(() => Array(count).fill(false));
-    const nextIndexRef = (0, react_1.useRef)(count - 1);
-    const isHoveredRef = (0, react_1.useRef)(false);
+    const [slots, setSlots] = (0, react_1.useState)(() => (0, utils_2.getInitialSlots)(items, activeCount));
+    const [transitions, setTransitions] = (0, react_1.useState)(() => emptyTransitions(activeCount));
+    const nextIndexRef = (0, react_1.useRef)(activeCount - 1);
+    const hoveredSlotIndicesRef = (0, react_1.useRef)(new Set());
     // Держим актуальные slots в ref, чтобы не пересоздавать интервал при каждом изменении
     const slotsRef = (0, react_1.useRef)(slots);
     (0, react_1.useEffect)(() => {
         slotsRef.current = slots;
     }, [slots]);
+    (0, react_1.useEffect)(() => {
+        const initialSlots = (0, utils_2.getInitialSlots)(items, activeCount);
+        slotsRef.current = initialSlots;
+        setSlots(initialSlots);
+        setTransitions(emptyTransitions(activeCount));
+        nextIndexRef.current = activeCount - 1;
+        hoveredSlotIndicesRef.current.clear();
+    }, [activeCount, items]);
+    const handleSlotMouseEnter = (0, react_1.useCallback)((slotIndex) => {
+        hoveredSlotIndicesRef.current.add(slotIndex);
+    }, []);
+    const handleSlotMouseLeave = (0, react_1.useCallback)((slotIndex) => {
+        hoveredSlotIndicesRef.current.delete(slotIndex);
+    }, []);
     (0, react_1.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;
@@ -68,35 +73,56 @@ 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);
+            }, utils_2.SWAP_ANIMATION_DURATIONS[swapAnimation]);
         }, 2000);
         return () => {
             clearInterval(interval);
@@ -104,29 +130,49 @@ const LogoRotatorBlock = (props) => {
                 clearTimeout(timeout);
             }
         };
-    }, [count, items, maxRotateCount, minRotateCount, rotatableIndices]);
-    const renderItems = (0, react_1.useMemo)(() => slots.map((slot, index) => (react_1.default.createElement(Item_1.default, { 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 = (0, react_1.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_1.default.createElement(Item_1.default, { 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_1.default.createElement(AnimateBlock_1.default, { className: b({ theme }), animate: animated },
-        react_1.default.createElement("div", { className: b('root'), onMouseEnter: () => {
-                isHoveredRef.current = true;
-            }, onMouseLeave: () => {
-                isHoveredRef.current = false;
-            } },
+        react_1.default.createElement("div", { className: b('root') },
             hasTitle && (react_1.default.createElement(components_1.Title, { title: titleProps, className: b('title'), colSizes: { all: 12 } })),
             rowMode ? (react_1.default.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_1.default.createElement(uikit_1.Link, { key: index, href: item.url, className: b('row-item', { hidden: hidden[index] }) },
-                        react_1.default.createElement(components_1.ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
-                }
-                return (react_1.default.createElement("div", { key: index, className: b('row-item', { hidden: hidden[index] }) },
-                    react_1.default.createElement(components_1.ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                const renderRowLayer = (layerItem, layer) => {
+                    const layerClassName = b('logo-layer', (0, utils_2.getLayerModifiers)(layer, swapAnimation));
+                    if (layerItem.url) {
+                        return (react_1.default.createElement(uikit_1.Link, { href: layerItem.url, className: `${b('row-item-link')} ${layerClassName}` },
+                            react_1.default.createElement(components_1.ImageBase, { src: layerItem.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                    }
+                    return (react_1.default.createElement("div", { className: layerClassName },
+                        react_1.default.createElement(components_1.ImageBase, { src: layerItem.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                };
+                const content = (react_1.default.createElement(react_1.default.Fragment, null,
+                    previousItem && renderRowLayer(previousItem, 'from'),
+                    renderRowLayer(item, previousItem ? 'to' : 'current')));
+                return (react_1.default.createElement("div", { key: index, className: b('row-item', { swapping: Boolean(previousItem) }), onMouseEnter: () => handleSlotMouseEnter(index), onMouseLeave: () => handleSlotMouseLeave(index) }, content));
             }))) : (react_1.default.createElement(grid_1.Grid, { className: b('items') },
                 react_1.default.createElement(grid_1.Row, { className: b('row') }, renderItems))))));
 };

package/build/cjs/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/cjs/blocks/LogoRotator/schema.js

@@ -5,7 +5,7 @@ const common_1 = require("../../schema/validators/common");
 exports.LogoRotatorBlock = {
     'logo-rotator-block': {
         additionalProperties: false,
-        required: ['items', 'count'],
+        required: ['items', 'countMobile'],
         properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { title: {
                 oneOf: [
                     {
@@ -27,12 +27,17 @@ exports.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: common_1.containerSizesObject,

package/build/cjs/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/cjs/blocks/LogoRotator/utils.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitialSlots = exports.getLayerModifiers = exports.SWAP_ANIMATION_DURATIONS = exports.DEFAULT_SWAP_ANIMATION = void 0;
+exports.DEFAULT_SWAP_ANIMATION = 'fade';
+exports.SWAP_ANIMATION_DURATIONS = {
+    fade: 1100,
+    morph: 500,
+};
+const getLayerModifiers = (layer, swapAnimation) => {
+    const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
+    const modifiers = { [layer]: true };
+    if (animationModifier) {
+        modifiers[animationModifier] = true;
+    }
+    return modifiers;
+};
+exports.getLayerModifiers = getLayerModifiers;
+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;
+};
+exports.getInitialSlots = getInitialSlots;

package/build/cjs/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/build/esm/blocks/LogoRotator/Item.d.ts

@@ -1,12 +1,17 @@
 import React from 'react';
 import { LogoRotatorBlockProps } from '../../models';
+import type { LogoRotatorSwapAnimation } from './utils';
 import './LogoRotator.css';
 type Props = {
     src: string;
     url?: string;
-    hidden: boolean;
+    previousSrc?: string;
+    previousUrl?: string;
+    swapAnimation: LogoRotatorSwapAnimation;
     colSizes: LogoRotatorBlockProps['colSizes'];
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
-export declare const Item: ({ url, src, hidden, colSizes }: Props) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ url, src, hidden, colSizes }: Props) => JSX.Element>;
+export declare const Item: ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }: Props) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }: Props) => JSX.Element>;
 export default _default;

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

@@ -3,18 +3,23 @@ import { Link } from '@gravity-ui/uikit';
 import { Image } from '../../components';
 import { Col } from '../../grid';
 import { block } from '../../utils';
+import { getLayerModifiers } from './utils';
 import './LogoRotator.css';
 const b = block('logo-rotator-block');
 const defaultColSizes = { all: 3 };
-export const Item = ({ url, src, hidden, colSizes }) => {
-    const renderItem = React.useMemo(() => {
-        if (url) {
-            return (React.createElement(Link, { href: url, className: b('item', { hidden }) },
-                React.createElement(Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
+const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', getLayerModifiers(layer, swapAnimation))}`;
+export const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
+    const renderLayer = (layerSrc, layer, layerUrl) => {
+        const image = React.createElement(Image, { src: layerSrc, className: b('image'), alt: "", "aria-hidden": "true" });
+        if (layerUrl) {
+            return (React.createElement(Link, { href: layerUrl, className: getLayerClassName(layer, swapAnimation, true) }, image));
         }
-        return (React.createElement("div", { className: b('item', { hidden }) },
-            React.createElement(Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
-    }, [hidden, src, url]);
-    return React.createElement(Col, { sizes: colSizes || defaultColSizes }, renderItem);
+        return React.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
+    };
+    const isSwapping = Boolean(previousSrc);
+    return (React.createElement(Col, { sizes: colSizes || defaultColSizes },
+        React.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+            previousSrc && renderLayer(previousSrc, 'from', previousUrl),
+            renderLayer(src, previousSrc ? 'to' : 'current', url))));
 };
 export default React.memo(Item);