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

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.
Files changed (12) hide show
  1. package/build/cjs/blocks/LogoRotator/LogoRotator.js +32 -24
  2. package/build/cjs/blocks/LogoRotator/schema.d.ts +3 -0
  3. package/build/cjs/blocks/LogoRotator/schema.js +2 -0
  4. package/build/cjs/models/constructor-items/blocks.d.ts +1 -0
  5. package/build/esm/blocks/LogoRotator/LogoRotator.js +32 -24
  6. package/build/esm/blocks/LogoRotator/schema.d.ts +3 -0
  7. package/build/esm/blocks/LogoRotator/schema.js +2 -0
  8. package/build/esm/models/constructor-items/blocks.d.ts +1 -0
  9. package/package.json +1 -1
  10. package/schema/index.js +1 -1
  11. package/server/models/constructor-items/blocks.d.ts +1 -0
  12. package/widget/index.js +1 -1
package/build/cjs/blocks/LogoRotator/LogoRotator.js CHANGED
@@ -6,12 +6,32 @@ const react_1 = tslib_1.__importStar(require("react"));
6
6
  const uikit_1 = require("@gravity-ui/uikit");
7
7
  const components_1 = require("../../components");
8
8
  const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
9
+ const constants_1 = require("../../constants");
9
10
  const grid_1 = require("../../grid");
11
+ const useWindowBreakpoint_1 = tslib_1.__importDefault(require("../../hooks/useWindowBreakpoint"));
10
12
  const utils_1 = require("../../utils");
11
13
  const Item_1 = tslib_1.__importDefault(require("./Item"));
12
14
  const b = (0, utils_1.block)('logo-rotator-block');
13
15
  const DEFAULT_MIN_ROTATE_COUNT = 2;
14
16
  const DEFAULT_MAX_ROTATE_COUNT = 4;
17
+ const getInitialSlots = (items, count) => {
18
+ var _a;
19
+ const staticIdxList = items.map((item, i) => (item.isStatic ? i : -1)).filter((i) => i !== -1);
20
+ const rotatableIdxList = items
21
+ .map((item, i) => (item.isStatic ? -1 : i))
22
+ .filter((i) => i !== -1);
23
+ const initial = [];
24
+ let rotatablePointer = 0;
25
+ for (let slot = 0; slot < count; slot++) {
26
+ if (slot < staticIdxList.length) {
27
+ initial.push(staticIdxList[slot]);
28
+ }
29
+ else {
30
+ initial.push((_a = rotatableIdxList[rotatablePointer++]) !== null && _a !== void 0 ? _a : 0);
31
+ }
32
+ }
33
+ return initial;
34
+ };
15
35
  const pickRandomSlots = (slotIndices, count) => {
16
36
  const shuffled = [...slotIndices];
17
37
  for (let i = shuffled.length - 1; i > 0; i--) {
@@ -21,38 +41,26 @@ const pickRandomSlots = (slotIndices, count) => {
21
41
  return shuffled.slice(0, count);
22
42
  };
23
43
  const LogoRotatorBlock = (props) => {
24
- const { animated, title, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, colSizes, rowMode, } = props;
44
+ const { animated, title, theme, items, count, desktopCount, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, colSizes, rowMode, } = props;
45
+ const breakpoint = (0, useWindowBreakpoint_1.default)();
46
+ const activeCount = desktopCount !== undefined && breakpoint >= constants_1.BREAKPOINTS.md ? desktopCount : count;
25
47
  // Индексы логотипов, которые участвуют в ротации (не статичные)
26
48
  const rotatableIndices = (0, react_1.useMemo)(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
27
49
  // Инициализация слотов: статичные вставляются в начало, остальные по порядку
28
- const [slots, setSlots] = (0, react_1.useState)(() => {
29
- var _a;
30
- const staticIdxList = items
31
- .map((item, i) => (item.isStatic ? i : -1))
32
- .filter((i) => i !== -1);
33
- const rotatableIdxList = items
34
- .map((item, i) => (item.isStatic ? -1 : i))
35
- .filter((i) => i !== -1);
36
- const initial = [];
37
- let rotatablePointer = 0;
38
- for (let slot = 0; slot < count; slot++) {
39
- if (slot < staticIdxList.length) {
40
- initial.push(staticIdxList[slot]);
41
- }
42
- else {
43
- initial.push((_a = rotatableIdxList[rotatablePointer++]) !== null && _a !== void 0 ? _a : 0);
44
- }
45
- }
46
- return initial;
47
- });
48
- const [hidden, setHidden] = (0, react_1.useState)(() => Array(count).fill(false));
49
- const nextIndexRef = (0, react_1.useRef)(count - 1);
50
+ const [slots, setSlots] = (0, react_1.useState)(() => getInitialSlots(items, activeCount));
51
+ const [hidden, setHidden] = (0, react_1.useState)(() => Array(activeCount).fill(false));
52
+ const nextIndexRef = (0, react_1.useRef)(activeCount - 1);
50
53
  const isHoveredRef = (0, react_1.useRef)(false);
51
54
  // Держим актуальные slots в ref, чтобы не пересоздавать интервал при каждом изменении
52
55
  const slotsRef = (0, react_1.useRef)(slots);
53
56
  (0, react_1.useEffect)(() => {
54
57
  slotsRef.current = slots;
55
58
  }, [slots]);
59
+ (0, react_1.useEffect)(() => {
60
+ setSlots(getInitialSlots(items, activeCount));
61
+ setHidden(Array(activeCount).fill(false));
62
+ nextIndexRef.current = activeCount - 1;
63
+ }, [activeCount, items]);
56
64
  (0, react_1.useEffect)(() => {
57
65
  let timeout = null;
58
66
  const interval = setInterval(() => {
@@ -104,7 +112,7 @@ const LogoRotatorBlock = (props) => {
104
112
  clearTimeout(timeout);
105
113
  }
106
114
  };
107
- }, [count, items, maxRotateCount, minRotateCount, rotatableIndices]);
115
+ }, [activeCount, items, maxRotateCount, minRotateCount, rotatableIndices]);
108
116
  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]);
109
117
  const titleProps = !title || typeof title === 'string'
110
118
  ? { text: title, textSize: 'l' }
package/build/cjs/blocks/LogoRotator/schema.d.ts CHANGED
@@ -185,6 +185,9 @@ export declare const LogoRotatorBlock: {
185
185
  count: {
186
186
  type: string;
187
187
  };
188
+ desktopCount: {
189
+ type: string;
190
+ };
188
191
  minRotateCount: {
189
192
  type: string;
190
193
  };
package/build/cjs/blocks/LogoRotator/schema.js CHANGED
@@ -29,6 +29,8 @@ exports.LogoRotatorBlock = {
29
29
  },
30
30
  }, count: {
31
31
  type: 'number',
32
+ }, desktopCount: {
33
+ type: 'number',
32
34
  }, minRotateCount: {
33
35
  type: 'number',
34
36
  }, maxRotateCount: {
package/build/cjs/models/constructor-items/blocks.d.ts CHANGED
@@ -303,6 +303,7 @@ export interface LogoRotatorBlockProps extends Animatable {
303
303
  isStatic?: boolean;
304
304
  }[];
305
305
  count: number;
306
+ desktopCount?: number;
306
307
  minRotateCount?: number;
307
308
  maxRotateCount?: number;
308
309
  colSizes?: Partial<Record<GridColumnSize, number>>;
package/build/esm/blocks/LogoRotator/LogoRotator.js CHANGED
@@ -2,13 +2,33 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { Link } from '@gravity-ui/uikit';
3
3
  import { ImageBase, Title } from '../../components';
4
4
  import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
5
+ import { BREAKPOINTS } from '../../constants';
5
6
  import { Grid, Row } from '../../grid';
7
+ import useWindowBreakpoint from '../../hooks/useWindowBreakpoint';
6
8
  import { block } from '../../utils';
7
9
  import Item from './Item';
8
10
  import './LogoRotator.css';
9
11
  const b = block('logo-rotator-block');
10
12
  const DEFAULT_MIN_ROTATE_COUNT = 2;
11
13
  const DEFAULT_MAX_ROTATE_COUNT = 4;
14
+ const getInitialSlots = (items, count) => {
15
+ var _a;
16
+ const staticIdxList = items.map((item, i) => (item.isStatic ? i : -1)).filter((i) => i !== -1);
17
+ const rotatableIdxList = items
18
+ .map((item, i) => (item.isStatic ? -1 : i))
19
+ .filter((i) => i !== -1);
20
+ const initial = [];
21
+ let rotatablePointer = 0;
22
+ for (let slot = 0; slot < count; slot++) {
23
+ if (slot < staticIdxList.length) {
24
+ initial.push(staticIdxList[slot]);
25
+ }
26
+ else {
27
+ initial.push((_a = rotatableIdxList[rotatablePointer++]) !== null && _a !== void 0 ? _a : 0);
28
+ }
29
+ }
30
+ return initial;
31
+ };
12
32
  const pickRandomSlots = (slotIndices, count) => {
13
33
  const shuffled = [...slotIndices];
14
34
  for (let i = shuffled.length - 1; i > 0; i--) {
@@ -18,38 +38,26 @@ const pickRandomSlots = (slotIndices, count) => {
18
38
  return shuffled.slice(0, count);
19
39
  };
20
40
  export const LogoRotatorBlock = (props) => {
21
- const { animated, title, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, colSizes, rowMode, } = props;
41
+ const { animated, title, theme, items, count, desktopCount, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, colSizes, rowMode, } = props;
42
+ const breakpoint = useWindowBreakpoint();
43
+ const activeCount = desktopCount !== undefined && breakpoint >= BREAKPOINTS.md ? desktopCount : count;
22
44
  // Индексы логотипов, которые участвуют в ротации (не статичные)
23
45
  const rotatableIndices = useMemo(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
24
46
  // Инициализация слотов: статичные вставляются в начало, остальные по порядку
25
- const [slots, setSlots] = useState(() => {
26
- var _a;
27
- const staticIdxList = items
28
- .map((item, i) => (item.isStatic ? i : -1))
29
- .filter((i) => i !== -1);
30
- const rotatableIdxList = items
31
- .map((item, i) => (item.isStatic ? -1 : i))
32
- .filter((i) => i !== -1);
33
- const initial = [];
34
- let rotatablePointer = 0;
35
- for (let slot = 0; slot < count; slot++) {
36
- if (slot < staticIdxList.length) {
37
- initial.push(staticIdxList[slot]);
38
- }
39
- else {
40
- initial.push((_a = rotatableIdxList[rotatablePointer++]) !== null && _a !== void 0 ? _a : 0);
41
- }
42
- }
43
- return initial;
44
- });
45
- const [hidden, setHidden] = useState(() => Array(count).fill(false));
46
- const nextIndexRef = useRef(count - 1);
47
+ const [slots, setSlots] = useState(() => getInitialSlots(items, activeCount));
48
+ const [hidden, setHidden] = useState(() => Array(activeCount).fill(false));
49
+ const nextIndexRef = useRef(activeCount - 1);
47
50
  const isHoveredRef = useRef(false);
48
51
  // Держим актуальные slots в ref, чтобы не пересоздавать интервал при каждом изменении
49
52
  const slotsRef = useRef(slots);
50
53
  useEffect(() => {
51
54
  slotsRef.current = slots;
52
55
  }, [slots]);
56
+ useEffect(() => {
57
+ setSlots(getInitialSlots(items, activeCount));
58
+ setHidden(Array(activeCount).fill(false));
59
+ nextIndexRef.current = activeCount - 1;
60
+ }, [activeCount, items]);
53
61
  useEffect(() => {
54
62
  let timeout = null;
55
63
  const interval = setInterval(() => {
@@ -101,7 +109,7 @@ export const LogoRotatorBlock = (props) => {
101
109
  clearTimeout(timeout);
102
110
  }
103
111
  };
104
- }, [count, items, maxRotateCount, minRotateCount, rotatableIndices]);
112
+ }, [activeCount, items, maxRotateCount, minRotateCount, rotatableIndices]);
105
113
  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]);
106
114
  const titleProps = !title || typeof title === 'string'
107
115
  ? { text: title, textSize: 'l' }
package/build/esm/blocks/LogoRotator/schema.d.ts CHANGED
@@ -185,6 +185,9 @@ export declare const LogoRotatorBlock: {
185
185
  count: {
186
186
  type: string;
187
187
  };
188
+ desktopCount: {
189
+ type: string;
190
+ };
188
191
  minRotateCount: {
189
192
  type: string;
190
193
  };
package/build/esm/blocks/LogoRotator/schema.js CHANGED
@@ -26,6 +26,8 @@ export const LogoRotatorBlock = {
26
26
  },
27
27
  }, count: {
28
28
  type: 'number',
29
+ }, desktopCount: {
30
+ type: 'number',
29
31
  }, minRotateCount: {
30
32
  type: 'number',
31
33
  }, maxRotateCount: {
package/build/esm/models/constructor-items/blocks.d.ts CHANGED
@@ -303,6 +303,7 @@ export interface LogoRotatorBlockProps extends Animatable {
303
303
  isStatic?: boolean;
304
304
  }[];
305
305
  count: number;
306
+ desktopCount?: number;
306
307
  minRotateCount?: number;
307
308
  maxRotateCount?: number;
308
309
  colSizes?: Partial<Record<GridColumnSize, number>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.253",
3
+ "version": "5.31.254",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {