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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,7 +9,6 @@ const grid_1 = require("../../grid");
9
9
  const utils_1 = require("../../utils");
10
10
  const utils_2 = require("./utils");
11
11
  const b = (0, utils_1.block)('logo-rotator-block');
12
- const defaultColSizes = { all: 3 };
13
12
  const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', (0, utils_2.getLayerModifiers)(layer, swapAnimation))}`;
14
13
  const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
15
14
  const renderLayer = (layerSrc, layer, layerUrl) => {
@@ -20,7 +19,7 @@ const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onM
20
19
  return react_1.default.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
21
20
  };
22
21
  const isSwapping = Boolean(previousSrc);
23
- return (react_1.default.createElement(grid_1.Col, { sizes: colSizes || defaultColSizes },
22
+ return (react_1.default.createElement(grid_1.Col, { sizes: (0, utils_2.getLogoRotatorColSizes)(colSizes) },
24
23
  react_1.default.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
25
24
  previousSrc && renderLayer(previousSrc, 'from', previousUrl),
26
25
  renderLayer(src, previousSrc ? 'to' : 'current', url))));
@@ -132,6 +132,13 @@ unpredictable css rules order in build */
132
132
  flex: 1;
133
133
  overflow: hidden;
134
134
  }
135
+ @media (max-width: 769px) {
136
+ .pc-logo-rotator-block__row-item {
137
+ min-width: 0;
138
+ max-width: calc(50% - 8px);
139
+ flex: 0 0 calc(50% - 8px);
140
+ }
141
+ }
135
142
 
136
143
  @keyframes logo-rotator-fade-out {
137
144
  from {
@@ -15,6 +15,10 @@ const utils_2 = require("./utils");
15
15
  const b = (0, utils_1.block)('logo-rotator-block');
16
16
  const DEFAULT_MIN_ROTATE_COUNT = 2;
17
17
  const DEFAULT_MAX_ROTATE_COUNT = 4;
18
+ const GRID_COLUMNS_COUNT = 12;
19
+ const MIN_COLUMN_COUNT = 2;
20
+ const MAX_COLUMN_COUNT = 7;
21
+ const ROW_MODE_ITEM_MIN_WIDTH = 160;
18
22
  const emptyTransitions = (count) => Array(count).fill(undefined);
19
23
  const pickRandomSlots = (slotIndices, count) => {
20
24
  const shuffled = [...slotIndices];
@@ -24,10 +28,58 @@ const pickRandomSlots = (slotIndices, count) => {
24
28
  }
25
29
  return shuffled.slice(0, count);
26
30
  };
31
+ const getFiniteCssValue = (value) => {
32
+ const result = Number.parseFloat(value);
33
+ return Number.isFinite(result) ? result : 0;
34
+ };
35
+ const getSupportedColumnCount = (columns) => {
36
+ const columnCount = Math.min(Math.max(Math.floor(columns), MIN_COLUMN_COUNT), MAX_COLUMN_COUNT);
37
+ return String(columnCount);
38
+ };
39
+ const getActiveGridColumnCount = (colSizes, breakpoint) => {
40
+ const activeColSize = (0, utils_2.getActiveBreakpointValue)((0, utils_2.getLogoRotatorColSizes)(colSizes), breakpoint);
41
+ return getSupportedColumnCount(GRID_COLUMNS_COUNT / activeColSize);
42
+ };
43
+ const getRowModeColumnCount = (width, gap) => {
44
+ const columns = Math.floor((width + gap) / (ROW_MODE_ITEM_MIN_WIDTH + gap));
45
+ return getSupportedColumnCount(columns);
46
+ };
47
+ const getActiveCount = (count, columnCount) => count[columnCount];
48
+ const noop = () => { };
49
+ const useRowModeColumnCount = (rowMode, breakpoint, rowItemsRef) => {
50
+ const [columnCount, setColumnCount] = (0, react_1.useState)(getSupportedColumnCount(MIN_COLUMN_COUNT));
51
+ (0, react_1.useEffect)(() => {
52
+ if (!rowMode) {
53
+ setColumnCount(getSupportedColumnCount(MIN_COLUMN_COUNT));
54
+ return noop;
55
+ }
56
+ const rowItems = rowItemsRef.current;
57
+ if (!rowItems)
58
+ return noop;
59
+ const updateColumnCount = (width) => {
60
+ const nextColumnCount = breakpoint <= constants_1.BREAKPOINTS.md
61
+ ? getSupportedColumnCount(MIN_COLUMN_COUNT)
62
+ : getRowModeColumnCount(width, getFiniteCssValue(window.getComputedStyle(rowItems).columnGap));
63
+ setColumnCount((currentColumnCount) => currentColumnCount === nextColumnCount ? currentColumnCount : nextColumnCount);
64
+ };
65
+ updateColumnCount(rowItems.clientWidth);
66
+ if (typeof ResizeObserver === 'undefined')
67
+ return noop;
68
+ const observer = new ResizeObserver(([entry]) => {
69
+ updateColumnCount(entry.contentRect.width);
70
+ });
71
+ observer.observe(rowItems);
72
+ return () => observer.disconnect();
73
+ }, [breakpoint, rowItemsRef, rowMode]);
74
+ return columnCount;
75
+ };
27
76
  const LogoRotatorBlock = (props) => {
28
- const { animated, title, text, theme, items, countMobile, countDesktop, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = utils_2.DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
77
+ const { animated, title, text, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = utils_2.DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
29
78
  const breakpoint = (0, useWindowBreakpoint_1.default)();
30
- const activeCount = countDesktop !== undefined && breakpoint >= constants_1.BREAKPOINTS.md ? countDesktop : countMobile;
79
+ const rowItemsRef = (0, react_1.useRef)(null);
80
+ const rowModeColumnCount = useRowModeColumnCount(rowMode, breakpoint, rowItemsRef);
81
+ const gridColumnCount = (0, react_1.useMemo)(() => getActiveGridColumnCount(colSizes, breakpoint), [breakpoint, colSizes]);
82
+ const activeCount = getActiveCount(count, rowMode ? rowModeColumnCount : gridColumnCount);
31
83
  // Индексы логотипов, которые участвуют в ротации (не статичные)
32
84
  const rotatableIndices = (0, react_1.useMemo)(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
33
85
  // Инициализация слотов: статичные вставляются в начало, остальные по порядку
@@ -151,7 +203,7 @@ const LogoRotatorBlock = (props) => {
151
203
  title || text ? (react_1.default.createElement("div", { className: b('head') },
152
204
  title && react_1.default.createElement("h2", { className: b('title') }, title),
153
205
  text && react_1.default.createElement("div", { className: b('text') }, text))) : null,
154
- rowMode ? (react_1.default.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
206
+ rowMode ? (react_1.default.createElement("div", { className: b('row-items'), ref: rowItemsRef }, slots.map((slot, index) => {
155
207
  var _a;
156
208
  const transition = transitions[index];
157
209
  const item = items[(_a = transition === null || transition === void 0 ? void 0 : transition.to) !== null && _a !== void 0 ? _a : slot];
@@ -32,11 +32,13 @@ export declare const LogoRotatorBlock: {
32
32
  };
33
33
  };
34
34
  };
35
- countMobile: {
36
- type: string;
37
- };
38
- countDesktop: {
35
+ count: {
39
36
  type: string;
37
+ additionalProperties: boolean;
38
+ required: string[];
39
+ properties: Record<string, {
40
+ type: 'number';
41
+ }>;
40
42
  };
41
43
  minRotateCount: {
42
44
  type: string;
@@ -2,10 +2,18 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LogoRotatorBlock = void 0;
4
4
  const common_1 = require("../../schema/validators/common");
5
+ const countColumns = ['2', '3', '4', '5', '6', '7'];
6
+ const countByColumnsProperties = countColumns.reduce((acc, columns) => (Object.assign(Object.assign({}, acc), { [columns]: { type: 'number' } })), {});
7
+ const countByColumns = {
8
+ type: 'object',
9
+ additionalProperties: false,
10
+ required: countColumns,
11
+ properties: countByColumnsProperties,
12
+ };
5
13
  exports.LogoRotatorBlock = {
6
14
  'logo-rotator-block': {
7
15
  additionalProperties: false,
8
- required: ['items', 'countMobile'],
16
+ required: ['items', 'count'],
9
17
  properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { title: {
10
18
  type: 'string',
11
19
  }, text: {
@@ -22,11 +30,7 @@ exports.LogoRotatorBlock = {
22
30
  isStatic: { type: 'boolean' },
23
31
  },
24
32
  },
25
- }, countMobile: {
26
- type: 'number',
27
- }, countDesktop: {
28
- type: 'number',
29
- }, minRotateCount: {
33
+ }, count: countByColumns, minRotateCount: {
30
34
  type: 'number',
31
35
  }, maxRotateCount: {
32
36
  type: 'number',
@@ -1,7 +1,14 @@
1
+ import { GridColumnSize, GridColumnSizesType } from '../../grid';
1
2
  import { LogoRotatorBlockProps } from '../../models';
2
3
  export type LogoRotatorLayer = 'current' | 'from' | 'to';
3
4
  export type LogoRotatorSwapAnimation = NonNullable<LogoRotatorBlockProps['swapAnimation']>;
4
5
  export declare const DEFAULT_SWAP_ANIMATION: LogoRotatorSwapAnimation;
5
6
  export declare const SWAP_ANIMATION_DURATIONS: Record<LogoRotatorSwapAnimation, number>;
7
+ export declare const getActiveBreakpointValue: <T>(values: Partial<Record<GridColumnSize, T>> & {
8
+ all: T;
9
+ }, breakpoint: number) => T | (undefined & T);
10
+ export declare const getLogoRotatorColSizes: (colSizes: LogoRotatorBlockProps['colSizes']) => GridColumnSizesType & {
11
+ all: number;
12
+ };
6
13
  export declare const getLayerModifiers: (layer: LogoRotatorLayer, swapAnimation: LogoRotatorSwapAnimation) => Record<string, boolean>;
7
14
  export declare const getInitialSlots: (items: LogoRotatorBlockProps['items'], count: number) => number[];
@@ -1,11 +1,44 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getInitialSlots = exports.getLayerModifiers = exports.SWAP_ANIMATION_DURATIONS = exports.DEFAULT_SWAP_ANIMATION = void 0;
3
+ exports.getInitialSlots = exports.getLayerModifiers = exports.getLogoRotatorColSizes = exports.getActiveBreakpointValue = exports.SWAP_ANIMATION_DURATIONS = exports.DEFAULT_SWAP_ANIMATION = void 0;
4
+ const constants_1 = require("../../constants");
5
+ const grid_1 = require("../../grid");
4
6
  exports.DEFAULT_SWAP_ANIMATION = 'fade';
5
7
  exports.SWAP_ANIMATION_DURATIONS = {
6
8
  fade: 1100,
7
9
  morph: 500,
8
10
  };
11
+ const defaultColSizes = { all: 3 };
12
+ const maxMobileColSize = 6;
13
+ const gridBreakpoints = [
14
+ [grid_1.GridColumnSize.All, constants_1.BREAKPOINTS.xs],
15
+ [grid_1.GridColumnSize.Sm, constants_1.BREAKPOINTS.sm],
16
+ [grid_1.GridColumnSize.Md, constants_1.BREAKPOINTS.md],
17
+ [grid_1.GridColumnSize.Lg, constants_1.BREAKPOINTS.lg],
18
+ [grid_1.GridColumnSize.Xl, constants_1.BREAKPOINTS.xl],
19
+ ];
20
+ const getActiveBreakpointValue = (values, breakpoint) => {
21
+ let result = values.all;
22
+ gridBreakpoints.forEach(([size, minWidth]) => {
23
+ const value = values[size];
24
+ if (breakpoint >= minWidth && value !== undefined) {
25
+ result = value;
26
+ }
27
+ });
28
+ return result;
29
+ };
30
+ exports.getActiveBreakpointValue = getActiveBreakpointValue;
31
+ const getLogoRotatorColSizes = (colSizes) => {
32
+ const sizes = Object.assign(Object.assign({}, defaultColSizes), colSizes);
33
+ [grid_1.GridColumnSize.All, grid_1.GridColumnSize.Sm].forEach((size) => {
34
+ const colSize = sizes[size];
35
+ if (colSize !== undefined) {
36
+ sizes[size] = Math.min(colSize, maxMobileColSize);
37
+ }
38
+ });
39
+ return sizes;
40
+ };
41
+ exports.getLogoRotatorColSizes = getLogoRotatorColSizes;
9
42
  const getLayerModifiers = (layer, swapAnimation) => {
10
43
  const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
11
44
  const modifiers = { [layer]: true };
@@ -301,6 +301,8 @@ export interface QuestionBlockItemProps extends QuestionItem {
301
301
  }
302
302
  export interface BannerBlockProps extends BannerCardProps, Animatable {
303
303
  }
304
+ export type LogoRotatorColumnCount = '2' | '3' | '4' | '5' | '6' | '7';
305
+ export type LogoRotatorCountConfig = Record<LogoRotatorColumnCount, number>;
304
306
  export interface LogoRotatorBlockProps extends Animatable {
305
307
  title?: string;
306
308
  text?: string;
@@ -309,8 +311,7 @@ export interface LogoRotatorBlockProps extends Animatable {
309
311
  src: string;
310
312
  isStatic?: boolean;
311
313
  }[];
312
- countMobile: number;
313
- countDesktop?: number;
314
+ count: LogoRotatorCountConfig;
314
315
  minRotateCount?: number;
315
316
  maxRotateCount?: number;
316
317
  swapAnimation?: 'fade' | 'morph';
@@ -48,11 +48,6 @@ unpredictable css rules order in build */
48
48
  flex-flow: row wrap;
49
49
  gap: 8px;
50
50
  }
51
- @media (max-width: 769px) {
52
- .pc-mini-case-card__tags {
53
- flex-wrap: wrap;
54
- }
55
- }
56
51
  .pc-mini-case-card__tag {
57
52
  display: flex;
58
53
  align-items: center;
@@ -3,10 +3,9 @@ import { Link } from '@gravity-ui/uikit';
3
3
  import { Image } from '../../components';
4
4
  import { Col } from '../../grid';
5
5
  import { block } from '../../utils';
6
- import { getLayerModifiers } from './utils';
6
+ import { getLayerModifiers, getLogoRotatorColSizes } from './utils';
7
7
  import './LogoRotator.css';
8
8
  const b = block('logo-rotator-block');
9
- const defaultColSizes = { all: 3 };
10
9
  const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', getLayerModifiers(layer, swapAnimation))}`;
11
10
  export const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
12
11
  const renderLayer = (layerSrc, layer, layerUrl) => {
@@ -17,7 +16,7 @@ export const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSiz
17
16
  return React.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
18
17
  };
19
18
  const isSwapping = Boolean(previousSrc);
20
- return (React.createElement(Col, { sizes: colSizes || defaultColSizes },
19
+ return (React.createElement(Col, { sizes: getLogoRotatorColSizes(colSizes) },
21
20
  React.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
22
21
  previousSrc && renderLayer(previousSrc, 'from', previousUrl),
23
22
  renderLayer(src, previousSrc ? 'to' : 'current', url))));
@@ -132,6 +132,13 @@ unpredictable css rules order in build */
132
132
  flex: 1;
133
133
  overflow: hidden;
134
134
  }
135
+ @media (max-width: 769px) {
136
+ .pc-logo-rotator-block__row-item {
137
+ min-width: 0;
138
+ max-width: calc(50% - 8px);
139
+ flex: 0 0 calc(50% - 8px);
140
+ }
141
+ }
135
142
 
136
143
  @keyframes logo-rotator-fade-out {
137
144
  from {
@@ -7,11 +7,15 @@ import { Grid, Row } from '../../grid';
7
7
  import useWindowBreakpoint from '../../hooks/useWindowBreakpoint';
8
8
  import { block } from '../../utils';
9
9
  import Item from './Item';
10
- import { DEFAULT_SWAP_ANIMATION, SWAP_ANIMATION_DURATIONS, getInitialSlots, getLayerModifiers, } from './utils';
10
+ import { DEFAULT_SWAP_ANIMATION, SWAP_ANIMATION_DURATIONS, getActiveBreakpointValue, getInitialSlots, getLayerModifiers, getLogoRotatorColSizes, } from './utils';
11
11
  import './LogoRotator.css';
12
12
  const b = block('logo-rotator-block');
13
13
  const DEFAULT_MIN_ROTATE_COUNT = 2;
14
14
  const DEFAULT_MAX_ROTATE_COUNT = 4;
15
+ const GRID_COLUMNS_COUNT = 12;
16
+ const MIN_COLUMN_COUNT = 2;
17
+ const MAX_COLUMN_COUNT = 7;
18
+ const ROW_MODE_ITEM_MIN_WIDTH = 160;
15
19
  const emptyTransitions = (count) => Array(count).fill(undefined);
16
20
  const pickRandomSlots = (slotIndices, count) => {
17
21
  const shuffled = [...slotIndices];
@@ -21,10 +25,58 @@ const pickRandomSlots = (slotIndices, count) => {
21
25
  }
22
26
  return shuffled.slice(0, count);
23
27
  };
28
+ const getFiniteCssValue = (value) => {
29
+ const result = Number.parseFloat(value);
30
+ return Number.isFinite(result) ? result : 0;
31
+ };
32
+ const getSupportedColumnCount = (columns) => {
33
+ const columnCount = Math.min(Math.max(Math.floor(columns), MIN_COLUMN_COUNT), MAX_COLUMN_COUNT);
34
+ return String(columnCount);
35
+ };
36
+ const getActiveGridColumnCount = (colSizes, breakpoint) => {
37
+ const activeColSize = getActiveBreakpointValue(getLogoRotatorColSizes(colSizes), breakpoint);
38
+ return getSupportedColumnCount(GRID_COLUMNS_COUNT / activeColSize);
39
+ };
40
+ const getRowModeColumnCount = (width, gap) => {
41
+ const columns = Math.floor((width + gap) / (ROW_MODE_ITEM_MIN_WIDTH + gap));
42
+ return getSupportedColumnCount(columns);
43
+ };
44
+ const getActiveCount = (count, columnCount) => count[columnCount];
45
+ const noop = () => { };
46
+ const useRowModeColumnCount = (rowMode, breakpoint, rowItemsRef) => {
47
+ const [columnCount, setColumnCount] = useState(getSupportedColumnCount(MIN_COLUMN_COUNT));
48
+ useEffect(() => {
49
+ if (!rowMode) {
50
+ setColumnCount(getSupportedColumnCount(MIN_COLUMN_COUNT));
51
+ return noop;
52
+ }
53
+ const rowItems = rowItemsRef.current;
54
+ if (!rowItems)
55
+ return noop;
56
+ const updateColumnCount = (width) => {
57
+ const nextColumnCount = breakpoint <= BREAKPOINTS.md
58
+ ? getSupportedColumnCount(MIN_COLUMN_COUNT)
59
+ : getRowModeColumnCount(width, getFiniteCssValue(window.getComputedStyle(rowItems).columnGap));
60
+ setColumnCount((currentColumnCount) => currentColumnCount === nextColumnCount ? currentColumnCount : nextColumnCount);
61
+ };
62
+ updateColumnCount(rowItems.clientWidth);
63
+ if (typeof ResizeObserver === 'undefined')
64
+ return noop;
65
+ const observer = new ResizeObserver(([entry]) => {
66
+ updateColumnCount(entry.contentRect.width);
67
+ });
68
+ observer.observe(rowItems);
69
+ return () => observer.disconnect();
70
+ }, [breakpoint, rowItemsRef, rowMode]);
71
+ return columnCount;
72
+ };
24
73
  export const LogoRotatorBlock = (props) => {
25
- 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;
74
+ const { animated, title, text, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
26
75
  const breakpoint = useWindowBreakpoint();
27
- const activeCount = countDesktop !== undefined && breakpoint >= BREAKPOINTS.md ? countDesktop : countMobile;
76
+ const rowItemsRef = useRef(null);
77
+ const rowModeColumnCount = useRowModeColumnCount(rowMode, breakpoint, rowItemsRef);
78
+ const gridColumnCount = useMemo(() => getActiveGridColumnCount(colSizes, breakpoint), [breakpoint, colSizes]);
79
+ const activeCount = getActiveCount(count, rowMode ? rowModeColumnCount : gridColumnCount);
28
80
  // Индексы логотипов, которые участвуют в ротации (не статичные)
29
81
  const rotatableIndices = useMemo(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
30
82
  // Инициализация слотов: статичные вставляются в начало, остальные по порядку
@@ -148,7 +200,7 @@ export const LogoRotatorBlock = (props) => {
148
200
  title || text ? (React.createElement("div", { className: b('head') },
149
201
  title && React.createElement("h2", { className: b('title') }, title),
150
202
  text && React.createElement("div", { className: b('text') }, text))) : null,
151
- rowMode ? (React.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
203
+ rowMode ? (React.createElement("div", { className: b('row-items'), ref: rowItemsRef }, slots.map((slot, index) => {
152
204
  var _a;
153
205
  const transition = transitions[index];
154
206
  const item = items[(_a = transition === null || transition === void 0 ? void 0 : transition.to) !== null && _a !== void 0 ? _a : slot];
@@ -32,11 +32,13 @@ export declare const LogoRotatorBlock: {
32
32
  };
33
33
  };
34
34
  };
35
- countMobile: {
36
- type: string;
37
- };
38
- countDesktop: {
35
+ count: {
39
36
  type: string;
37
+ additionalProperties: boolean;
38
+ required: string[];
39
+ properties: Record<string, {
40
+ type: 'number';
41
+ }>;
40
42
  };
41
43
  minRotateCount: {
42
44
  type: string;
@@ -1,8 +1,16 @@
1
1
  import { AnimatableProps, BaseProps, ThemeProps, containerSizesObject, } from '../../schema/validators/common';
2
+ const countColumns = ['2', '3', '4', '5', '6', '7'];
3
+ const countByColumnsProperties = countColumns.reduce((acc, columns) => (Object.assign(Object.assign({}, acc), { [columns]: { type: 'number' } })), {});
4
+ const countByColumns = {
5
+ type: 'object',
6
+ additionalProperties: false,
7
+ required: countColumns,
8
+ properties: countByColumnsProperties,
9
+ };
2
10
  export const LogoRotatorBlock = {
3
11
  'logo-rotator-block': {
4
12
  additionalProperties: false,
5
- required: ['items', 'countMobile'],
13
+ required: ['items', 'count'],
6
14
  properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { title: {
7
15
  type: 'string',
8
16
  }, text: {
@@ -19,11 +27,7 @@ export const LogoRotatorBlock = {
19
27
  isStatic: { type: 'boolean' },
20
28
  },
21
29
  },
22
- }, countMobile: {
23
- type: 'number',
24
- }, countDesktop: {
25
- type: 'number',
26
- }, minRotateCount: {
30
+ }, count: countByColumns, minRotateCount: {
27
31
  type: 'number',
28
32
  }, maxRotateCount: {
29
33
  type: 'number',
@@ -1,7 +1,14 @@
1
+ import { GridColumnSize, GridColumnSizesType } from '../../grid';
1
2
  import { LogoRotatorBlockProps } from '../../models';
2
3
  export type LogoRotatorLayer = 'current' | 'from' | 'to';
3
4
  export type LogoRotatorSwapAnimation = NonNullable<LogoRotatorBlockProps['swapAnimation']>;
4
5
  export declare const DEFAULT_SWAP_ANIMATION: LogoRotatorSwapAnimation;
5
6
  export declare const SWAP_ANIMATION_DURATIONS: Record<LogoRotatorSwapAnimation, number>;
7
+ export declare const getActiveBreakpointValue: <T>(values: Partial<Record<GridColumnSize, T>> & {
8
+ all: T;
9
+ }, breakpoint: number) => T | (undefined & T);
10
+ export declare const getLogoRotatorColSizes: (colSizes: LogoRotatorBlockProps['colSizes']) => GridColumnSizesType & {
11
+ all: number;
12
+ };
6
13
  export declare const getLayerModifiers: (layer: LogoRotatorLayer, swapAnimation: LogoRotatorSwapAnimation) => Record<string, boolean>;
7
14
  export declare const getInitialSlots: (items: LogoRotatorBlockProps['items'], count: number) => number[];
@@ -1,8 +1,39 @@
1
+ import { BREAKPOINTS } from '../../constants';
2
+ import { GridColumnSize } from '../../grid';
1
3
  export const DEFAULT_SWAP_ANIMATION = 'fade';
2
4
  export const SWAP_ANIMATION_DURATIONS = {
3
5
  fade: 1100,
4
6
  morph: 500,
5
7
  };
8
+ const defaultColSizes = { all: 3 };
9
+ const maxMobileColSize = 6;
10
+ const gridBreakpoints = [
11
+ [GridColumnSize.All, BREAKPOINTS.xs],
12
+ [GridColumnSize.Sm, BREAKPOINTS.sm],
13
+ [GridColumnSize.Md, BREAKPOINTS.md],
14
+ [GridColumnSize.Lg, BREAKPOINTS.lg],
15
+ [GridColumnSize.Xl, BREAKPOINTS.xl],
16
+ ];
17
+ export const getActiveBreakpointValue = (values, breakpoint) => {
18
+ let result = values.all;
19
+ gridBreakpoints.forEach(([size, minWidth]) => {
20
+ const value = values[size];
21
+ if (breakpoint >= minWidth && value !== undefined) {
22
+ result = value;
23
+ }
24
+ });
25
+ return result;
26
+ };
27
+ export const getLogoRotatorColSizes = (colSizes) => {
28
+ const sizes = Object.assign(Object.assign({}, defaultColSizes), colSizes);
29
+ [GridColumnSize.All, GridColumnSize.Sm].forEach((size) => {
30
+ const colSize = sizes[size];
31
+ if (colSize !== undefined) {
32
+ sizes[size] = Math.min(colSize, maxMobileColSize);
33
+ }
34
+ });
35
+ return sizes;
36
+ };
6
37
  export const getLayerModifiers = (layer, swapAnimation) => {
7
38
  const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
8
39
  const modifiers = { [layer]: true };
@@ -301,6 +301,8 @@ export interface QuestionBlockItemProps extends QuestionItem {
301
301
  }
302
302
  export interface BannerBlockProps extends BannerCardProps, Animatable {
303
303
  }
304
+ export type LogoRotatorColumnCount = '2' | '3' | '4' | '5' | '6' | '7';
305
+ export type LogoRotatorCountConfig = Record<LogoRotatorColumnCount, number>;
304
306
  export interface LogoRotatorBlockProps extends Animatable {
305
307
  title?: string;
306
308
  text?: string;
@@ -309,8 +311,7 @@ export interface LogoRotatorBlockProps extends Animatable {
309
311
  src: string;
310
312
  isStatic?: boolean;
311
313
  }[];
312
- countMobile: number;
313
- countDesktop?: number;
314
+ count: LogoRotatorCountConfig;
314
315
  minRotateCount?: number;
315
316
  maxRotateCount?: number;
316
317
  swapAnimation?: 'fade' | 'morph';
@@ -48,11 +48,6 @@ unpredictable css rules order in build */
48
48
  flex-flow: row wrap;
49
49
  gap: 8px;
50
50
  }
51
- @media (max-width: 769px) {
52
- .pc-mini-case-card__tags {
53
- flex-wrap: wrap;
54
- }
55
- }
56
51
  .pc-mini-case-card__tag {
57
52
  display: flex;
58
53
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.264",
3
+ "version": "5.31.265",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {