@doyourjob/gravity-ui-page-constructor 5.31.264 → 5.31.266

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

@@ -7,11 +7,15 @@ 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 { DEFAULT_SWAP_ANIMATION, SWAP_ANIMATION_DURATIONS, getActiveBreakpointValue, getInitialSlots, getLayerModifiers, getLogoRotatorColSizes, } from './utils';
 import './LogoRotator.css';
 const b = block('logo-rotator-block');
 const DEFAULT_MIN_ROTATE_COUNT = 2;
 const DEFAULT_MAX_ROTATE_COUNT = 4;
+const GRID_COLUMNS_COUNT = 12;
+const MIN_COLUMN_COUNT = 2;
+const MAX_COLUMN_COUNT = 7;
+const ROW_MODE_ITEM_MIN_WIDTH = 160;
 const emptyTransitions = (count) => Array(count).fill(undefined);
 const pickRandomSlots = (slotIndices, count) => {
     const shuffled = [...slotIndices];
@@ -21,10 +25,58 @@ const pickRandomSlots = (slotIndices, count) => {
     }
     return shuffled.slice(0, count);
 };
+const getFiniteCssValue = (value) => {
+    const result = Number.parseFloat(value);
+    return Number.isFinite(result) ? result : 0;
+};
+const getSupportedColumnCount = (columns) => {
+    const columnCount = Math.min(Math.max(Math.floor(columns), MIN_COLUMN_COUNT), MAX_COLUMN_COUNT);
+    return String(columnCount);
+};
+const getActiveGridColumnCount = (colSizes, breakpoint) => {
+    const activeColSize = getActiveBreakpointValue(getLogoRotatorColSizes(colSizes), breakpoint);
+    return getSupportedColumnCount(GRID_COLUMNS_COUNT / activeColSize);
+};
+const getRowModeColumnCount = (width, gap) => {
+    const columns = Math.floor((width + gap) / (ROW_MODE_ITEM_MIN_WIDTH + gap));
+    return getSupportedColumnCount(columns);
+};
+const getActiveCount = (count, columnCount) => count[columnCount];
+const noop = () => { };
+const useRowModeColumnCount = (rowMode, breakpoint, rowItemsRef) => {
+    const [columnCount, setColumnCount] = useState(getSupportedColumnCount(MIN_COLUMN_COUNT));
+    useEffect(() => {
+        if (!rowMode) {
+            setColumnCount(getSupportedColumnCount(MIN_COLUMN_COUNT));
+            return noop;
+        }
+        const rowItems = rowItemsRef.current;
+        if (!rowItems)
+            return noop;
+        const updateColumnCount = (width) => {
+            const nextColumnCount = breakpoint <= BREAKPOINTS.md
+                ? getSupportedColumnCount(MIN_COLUMN_COUNT)
+                : getRowModeColumnCount(width, getFiniteCssValue(window.getComputedStyle(rowItems).columnGap));
+            setColumnCount((currentColumnCount) => currentColumnCount === nextColumnCount ? currentColumnCount : nextColumnCount);
+        };
+        updateColumnCount(rowItems.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return noop;
+        const observer = new ResizeObserver(([entry]) => {
+            updateColumnCount(entry.contentRect.width);
+        });
+        observer.observe(rowItems);
+        return () => observer.disconnect();
+    }, [breakpoint, rowItemsRef, rowMode]);
+    return columnCount;
+};
 export const LogoRotatorBlock = (props) => {
-    const { animated, title, text, theme, items, countMobile, countDesktop, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
+    const { animated, title, text, theme, items, count, 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 rowItemsRef = useRef(null);
+    const rowModeColumnCount = useRowModeColumnCount(rowMode, breakpoint, rowItemsRef);
+    const gridColumnCount = useMemo(() => getActiveGridColumnCount(colSizes, breakpoint), [breakpoint, colSizes]);
+    const activeCount = getActiveCount(count, rowMode ? rowModeColumnCount : gridColumnCount);
     // Индексы логотипов, которые участвуют в ротации (не статичные)
     const rotatableIndices = useMemo(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
     // Инициализация слотов: статичные вставляются в начало, остальные по порядку
@@ -148,7 +200,7 @@ export const LogoRotatorBlock = (props) => {
             title || text ? (React.createElement("div", { className: b('head') },
                 title && React.createElement("h2", { className: b('title') }, title),
                 text && React.createElement("div", { className: b('text') }, text))) : null,
-            rowMode ? (React.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
+            rowMode ? (React.createElement("div", { className: b('row-items'), ref: rowItemsRef }, 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];

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

@@ -32,11 +32,13 @@ export declare const LogoRotatorBlock: {
                     };
                 };
             };
-            countMobile: {
-                type: string;
-            };
-            countDesktop: {
+            count: {
                 type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: Record<string, {
+                    type: 'number';
+                }>;
             };
             minRotateCount: {
                 type: string;

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

@@ -1,8 +1,16 @@
 import { AnimatableProps, BaseProps, ThemeProps, containerSizesObject, } from '../../schema/validators/common';
+const countColumns = ['2', '3', '4', '5', '6', '7'];
+const countByColumnsProperties = countColumns.reduce((acc, columns) => (Object.assign(Object.assign({}, acc), { [columns]: { type: 'number' } })), {});
+const countByColumns = {
+    type: 'object',
+    additionalProperties: false,
+    required: countColumns,
+    properties: countByColumnsProperties,
+};
 export const LogoRotatorBlock = {
     'logo-rotator-block': {
         additionalProperties: false,
-        required: ['items', 'countMobile'],
+        required: ['items', 'count'],
         properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { title: {
                 type: 'string',
             }, text: {
@@ -19,11 +27,7 @@ export const LogoRotatorBlock = {
                         isStatic: { type: 'boolean' },
                     },
                 },
-            }, countMobile: {
-                type: 'number',
-            }, countDesktop: {
-                type: 'number',
-            }, minRotateCount: {
+            }, count: countByColumns, minRotateCount: {
                 type: 'number',
             }, maxRotateCount: {
                 type: 'number',

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

@@ -1,7 +1,14 @@
+import { GridColumnSize, GridColumnSizesType } from '../../grid';
 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 getActiveBreakpointValue: <T>(values: Partial<Record<GridColumnSize, T>> & {
+    all: T;
+}, breakpoint: number) => T | (undefined & T);
+export declare const getLogoRotatorColSizes: (colSizes: LogoRotatorBlockProps['colSizes']) => GridColumnSizesType & {
+    all: 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

@@ -1,8 +1,39 @@
+import { BREAKPOINTS } from '../../constants';
+import { GridColumnSize } from '../../grid';
 export const DEFAULT_SWAP_ANIMATION = 'fade';
 export const SWAP_ANIMATION_DURATIONS = {
     fade: 1100,
     morph: 500,
 };
+const defaultColSizes = { all: 3 };
+const maxMobileColSize = 6;
+const gridBreakpoints = [
+    [GridColumnSize.All, BREAKPOINTS.xs],
+    [GridColumnSize.Sm, BREAKPOINTS.sm],
+    [GridColumnSize.Md, BREAKPOINTS.md],
+    [GridColumnSize.Lg, BREAKPOINTS.lg],
+    [GridColumnSize.Xl, BREAKPOINTS.xl],
+];
+export const getActiveBreakpointValue = (values, breakpoint) => {
+    let result = values.all;
+    gridBreakpoints.forEach(([size, minWidth]) => {
+        const value = values[size];
+        if (breakpoint >= minWidth && value !== undefined) {
+            result = value;
+        }
+    });
+    return result;
+};
+export const getLogoRotatorColSizes = (colSizes) => {
+    const sizes = Object.assign(Object.assign({}, defaultColSizes), colSizes);
+    [GridColumnSize.All, GridColumnSize.Sm].forEach((size) => {
+        const colSize = sizes[size];
+        if (colSize !== undefined) {
+            sizes[size] = Math.min(colSize, maxMobileColSize);
+        }
+    });
+    return sizes;
+};
 export const getLayerModifiers = (layer, swapAnimation) => {
     const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
     const modifiers = { [layer]: true };

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

@@ -204,6 +204,7 @@ export interface SwitchingTitleProps {
 export type HeaderButtonType = Pick<ButtonProps, 'url' | 'text' | 'img' | 'theme' | 'primary' | 'size' | 'extraProps'>;
 export interface HeaderBlockProps {
     title: string;
+    titleSize?: TitleTextSize;
     switchingTitle?: SwitchingTitleProps;
     topTags?: HeaderTag[];
     bottomTags?: HeaderTag[];
@@ -301,6 +302,8 @@ export interface QuestionBlockItemProps extends QuestionItem {
 }
 export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
+export type LogoRotatorColumnCount = '2' | '3' | '4' | '5' | '6' | '7';
+export type LogoRotatorCountConfig = Record<LogoRotatorColumnCount, number>;
 export interface LogoRotatorBlockProps extends Animatable {
     title?: string;
     text?: string;
@@ -309,8 +312,7 @@ export interface LogoRotatorBlockProps extends Animatable {
         src: string;
         isStatic?: boolean;
     }[];
-    countMobile: number;
-    countDesktop?: number;
+    count: LogoRotatorCountConfig;
     minRotateCount?: number;
     maxRotateCount?: number;
     swapAnimation?: 'fade' | 'morph';

package/build/esm/sub-blocks/MiniCaseCard/MiniCaseCard.css

@@ -48,11 +48,6 @@ unpredictable css rules order in build */
   flex-flow: row wrap;
   gap: 8px;
 }
-@media (max-width: 769px) {
-  .pc-mini-case-card__tags {
-    flex-wrap: wrap;
-  }
-}
 .pc-mini-case-card__tag {
   display: flex;
   align-items: center;

package/package.json

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