@doyourjob/gravity-ui-page-constructor 5.31.249 → 5.31.250

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 (16) hide show
  1. package/build/cjs/blocks/Scroller/Scroller.js +119 -36
  2. package/build/cjs/blocks/Scroller/schema.d.ts +0 -6
  3. package/build/cjs/blocks/Scroller/schema.js +0 -3
  4. package/build/cjs/blocks/WhatsNew/WhatsNew.js +2 -2
  5. package/build/cjs/blocks/WhatsNew/schema.d.ts +0 -3
  6. package/build/cjs/models/constructor-items/blocks.d.ts +1 -2
  7. package/build/esm/blocks/Scroller/Scroller.js +119 -36
  8. package/build/esm/blocks/Scroller/schema.d.ts +0 -6
  9. package/build/esm/blocks/Scroller/schema.js +0 -3
  10. package/build/esm/blocks/WhatsNew/WhatsNew.js +2 -2
  11. package/build/esm/blocks/WhatsNew/schema.d.ts +0 -3
  12. package/build/esm/models/constructor-items/blocks.d.ts +1 -2
  13. package/package.json +1 -1
  14. package/schema/index.js +1 -1
  15. package/server/models/constructor-items/blocks.d.ts +1 -2
  16. package/widget/index.js +1 -1
package/build/cjs/blocks/Scroller/Scroller.js CHANGED
@@ -24,6 +24,65 @@ const scrollToChild = (content, child, behavior = 'smooth') => {
24
24
  const left = child.offsetLeft - (content.offsetWidth - child.offsetWidth) / 2;
25
25
  content.scrollTo({ left, behavior });
26
26
  };
27
+ const MIDDLE_COPY = 1;
28
+ const normalizeToMiddleCopy = (content, childCount) => {
29
+ const centeredIndex = getCenteredChildIndex(content);
30
+ const logicalIndex = centeredIndex % childCount;
31
+ const currentCopy = Math.floor(centeredIndex / childCount);
32
+ if (currentCopy === MIDDLE_COPY) {
33
+ return false;
34
+ }
35
+ const middleChild = getChild(content, childCount + logicalIndex);
36
+ if (middleChild) {
37
+ scrollToChild(content, middleChild, 'auto');
38
+ }
39
+ return true;
40
+ };
41
+ const getTargetPhysicalIndex = (centeredPhysicalIndex, targetLogicalIndex, childCount, preferForward) => {
42
+ const currentLogical = centeredPhysicalIndex % childCount;
43
+ const forwardSteps = (targetLogicalIndex - currentLogical + childCount) % childCount;
44
+ const backwardSteps = (currentLogical - targetLogicalIndex + childCount) % childCount;
45
+ if (preferForward || forwardSteps <= backwardSteps) {
46
+ if (forwardSteps === 0) {
47
+ return MIDDLE_COPY * childCount + targetLogicalIndex;
48
+ }
49
+ return centeredPhysicalIndex + forwardSteps;
50
+ }
51
+ if (backwardSteps === 0) {
52
+ return MIDDLE_COPY * childCount + targetLogicalIndex;
53
+ }
54
+ return centeredPhysicalIndex - backwardSteps;
55
+ };
56
+ const SCROLL_IDLE_MS = 200;
57
+ const NORMALIZE_BEFORE_SNAP_MS = 100;
58
+ const scrollToMiddleCopyIndex = (content, targetLogicalIndex, childCount) => {
59
+ const runScroll = () => {
60
+ const targetChild = getChild(content, childCount + targetLogicalIndex);
61
+ if (targetChild) {
62
+ scrollToChild(content, targetChild);
63
+ }
64
+ };
65
+ if (normalizeToMiddleCopy(content, childCount)) {
66
+ requestAnimationFrame(runScroll);
67
+ return;
68
+ }
69
+ runScroll();
70
+ };
71
+ const scrollToLogicalIndex = (content, targetLogicalIndex, childCount, preferForward) => {
72
+ const runScroll = () => {
73
+ const centeredIndex = getCenteredChildIndex(content);
74
+ const targetPhysical = getTargetPhysicalIndex(centeredIndex, targetLogicalIndex, childCount, preferForward);
75
+ const targetChild = getChild(content, targetPhysical);
76
+ if (targetChild) {
77
+ scrollToChild(content, targetChild);
78
+ }
79
+ };
80
+ if (normalizeToMiddleCopy(content, childCount)) {
81
+ requestAnimationFrame(runScroll);
82
+ return;
83
+ }
84
+ runScroll();
85
+ };
27
86
  const PlayIcon = () => {
28
87
  return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
29
88
  react_1.default.createElement("path", { d: "M13.765 9.83831L20.3154 13.7086C21.2977 14.289 21.298 15.7102 20.3159 16.2911L13.7714 20.1618C12.7719 20.7529 11.5086 20.033 11.5078 18.8718L11.502 11.1309C11.5011 9.96894 12.7646 9.24725 13.765 9.83831Z", fill: "currentColor" })));
@@ -33,14 +92,17 @@ const PauseIcon = () => {
33
92
  react_1.default.createElement("path", { d: "M12.5 10C13.3284 10 14 10.6716 14 11.5V18.5C14 19.3284 13.3284 20 12.5 20C11.6716 20 11 19.3284 11 18.5V11.5C11 10.6716 11.6716 10 12.5 10ZM17.5 10C18.3284 10 19 10.6716 19 11.5V18.5C19 19.3284 18.3284 20 17.5 20C16.6716 20 16 19.3284 16 18.5V11.5C16 10.6716 16.6716 10 17.5 10Z", fill: "currentColor" })));
34
93
  };
35
94
  const ScrollerBlock = (props) => {
36
- const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
95
+ const { animated, widths, gapLong, fullWidth, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
37
96
  const childCount = react_1.default.Children.count(children);
38
97
  const rootRef = (0, react_1.useRef)(null);
39
98
  const contentRef = (0, react_1.useRef)(null);
40
99
  const [currentElement, setCurrentElement] = (0, react_1.useState)(0);
41
100
  const [isPaused, setIsPaused] = (0, react_1.useState)(true);
42
101
  const [scrollInProgress, setScrollInProgress] = (0, react_1.useState)(false);
43
- const scrollIntervalRef = (0, react_1.useRef)(null);
102
+ const scrollIdleTimeoutRef = (0, react_1.useRef)(null);
103
+ const normalizeSettleTimeoutRef = (0, react_1.useRef)(null);
104
+ const scrollInProgressRef = (0, react_1.useRef)(false);
105
+ const isNormalizingRef = (0, react_1.useRef)(false);
44
106
  (0, react_1.useEffect)(() => {
45
107
  const content = contentRef.current;
46
108
  const root = rootRef.current;
@@ -86,6 +148,15 @@ const ScrollerBlock = (props) => {
86
148
  }
87
149
  };
88
150
  const handleInfiniteScroll = () => {
151
+ if (isNormalizingRef.current) {
152
+ return;
153
+ }
154
+ const wasNotInProgress = !scrollInProgressRef.current;
155
+ if (wasNotInProgress) {
156
+ isNormalizingRef.current = true;
157
+ normalizeToMiddleCopy(content, childCount);
158
+ isNormalizingRef.current = false;
159
+ }
89
160
  const scrollLeft = content.scrollLeft;
90
161
  const endCopyChild = getChild(content, endCopyStartIndex);
91
162
  const copyStartChild = getChild(content, copyStartIndex);
@@ -102,18 +173,34 @@ const ScrollerBlock = (props) => {
102
173
  content.scrollTo(endChild.offsetLeft - content.clientWidth, 0);
103
174
  }
104
175
  }
176
+ scrollInProgressRef.current = true;
105
177
  setScrollInProgress(true);
106
- if (scrollIntervalRef.current) {
107
- clearTimeout(scrollIntervalRef.current);
178
+ if (scrollIdleTimeoutRef.current) {
179
+ clearTimeout(scrollIdleTimeoutRef.current);
108
180
  }
109
- scrollIntervalRef.current = setTimeout(() => {
110
- setScrollInProgress(false);
111
- }, 200);
181
+ if (normalizeSettleTimeoutRef.current) {
182
+ clearTimeout(normalizeSettleTimeoutRef.current);
183
+ }
184
+ scrollIdleTimeoutRef.current = setTimeout(() => {
185
+ isNormalizingRef.current = true;
186
+ normalizeToMiddleCopy(content, childCount);
187
+ isNormalizingRef.current = false;
188
+ normalizeSettleTimeoutRef.current = setTimeout(() => {
189
+ scrollInProgressRef.current = false;
190
+ setScrollInProgress(false);
191
+ }, NORMALIZE_BEFORE_SNAP_MS);
192
+ }, SCROLL_IDLE_MS);
112
193
  };
113
194
  content.addEventListener('scroll', handleInfiniteScroll, { passive: true });
114
195
  scrollToMiddle();
115
196
  return () => {
116
197
  content.removeEventListener('scroll', handleInfiniteScroll);
198
+ if (scrollIdleTimeoutRef.current) {
199
+ clearTimeout(scrollIdleTimeoutRef.current);
200
+ }
201
+ if (normalizeSettleTimeoutRef.current) {
202
+ clearTimeout(normalizeSettleTimeoutRef.current);
203
+ }
117
204
  };
118
205
  }, [infinite, childCount]);
119
206
  (0, react_1.useEffect)(() => {
@@ -127,11 +214,8 @@ const ScrollerBlock = (props) => {
127
214
  return;
128
215
  }
129
216
  if (infinite) {
130
- const centeredIndex = getCenteredChildIndex(content);
131
- const nextElement = getChild(content, centeredIndex + 1);
132
- if (nextElement) {
133
- scrollToChild(content, nextElement);
134
- }
217
+ const nextLogical = ((getCenteredChildIndex(content) % childCount) + 1) % childCount;
218
+ scrollToLogicalIndex(content, nextLogical, childCount, true);
135
219
  return;
136
220
  }
137
221
  const nextIndex = (currentElement + 1) % childCount;
@@ -140,7 +224,7 @@ const ScrollerBlock = (props) => {
140
224
  scrollToChild(content, nextElement);
141
225
  }
142
226
  }, [childCount, currentElement, infinite]);
143
- const scrollToIndex = (0, react_1.useCallback)((targetIndex) => {
227
+ const scrollToPaginationIndex = (0, react_1.useCallback)((targetIndex) => {
144
228
  if (autoScroll) {
145
229
  setIsPaused(true);
146
230
  }
@@ -155,27 +239,26 @@ const ScrollerBlock = (props) => {
155
239
  }
156
240
  return;
157
241
  }
158
- const centeredIndex = getCenteredChildIndex(content);
159
- const currentCopy = Math.floor(centeredIndex / childCount);
160
- const logicalIndex = centeredIndex % childCount;
161
- const middleCopy = 1;
162
- const scrollToTargetInMiddleCopy = () => {
163
- const targetChild = getChild(content, childCount + targetIndex);
164
- if (targetChild) {
165
- scrollToChild(content, targetChild);
166
- }
167
- };
168
- if (currentCopy !== middleCopy) {
169
- const middleChild = getChild(content, childCount + logicalIndex);
170
- if (middleChild) {
171
- const left = middleChild.offsetLeft -
172
- (content.offsetWidth - middleChild.offsetWidth) / 2;
173
- content.scrollTo({ left, behavior: 'auto' });
242
+ scrollToMiddleCopyIndex(content, targetIndex, childCount);
243
+ }, [autoScroll, childCount, infinite]);
244
+ const scrollToItemIndex = (0, react_1.useCallback)((targetIndex) => {
245
+ if (autoScroll) {
246
+ setIsPaused(true);
247
+ }
248
+ const content = contentRef.current;
249
+ if (!content || childCount <= 1 || targetIndex < 0 || targetIndex >= childCount) {
250
+ return;
251
+ }
252
+ if (!infinite) {
253
+ const child = getChild(content, targetIndex);
254
+ if (child) {
255
+ scrollToChild(content, child);
174
256
  }
175
- requestAnimationFrame(scrollToTargetInMiddleCopy);
176
257
  return;
177
258
  }
178
- scrollToTargetInMiddleCopy();
259
+ const logicalIndex = getCenteredChildIndex(content) % childCount;
260
+ const isNext = targetIndex === (logicalIndex + 1) % childCount;
261
+ scrollToLogicalIndex(content, targetIndex, childCount, isNext);
179
262
  }, [autoScroll, childCount, infinite]);
180
263
  (0, react_1.useEffect)(() => {
181
264
  let timeout = null;
@@ -195,23 +278,23 @@ const ScrollerBlock = (props) => {
195
278
  react_1.default.createElement("div", { className: b('content', {
196
279
  gapLong,
197
280
  fullWidth,
198
- 'scroll-snap-center': infinite ? !scrollInProgress : scrollSnapCenter,
281
+ 'scroll-snap-center': infinite ? !scrollInProgress : true,
199
282
  }), ref: contentRef }, (infinite ? [0, 1, 2] : [0])
200
283
  .map((mi) => react_1.default.Children.map(children, (child, index) => {
201
284
  const physicalIndex = mi * childCount + index;
202
- return (react_1.default.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToIndex(index), onKeyDown: (event) => {
285
+ return (react_1.default.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToItemIndex(index), onKeyDown: (event) => {
203
286
  if (event.key === 'Enter' || event.key === ' ') {
204
287
  event.preventDefault();
205
- scrollToIndex(index);
288
+ scrollToItemIndex(index);
206
289
  }
207
290
  } }, child));
208
291
  }))
209
292
  .flat())),
210
293
  childCount > 0 && (react_1.default.createElement("div", { className: b('pagination-container') },
211
- react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToIndex(index), onKeyDown: (event) => {
294
+ react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToPaginationIndex(index), onKeyDown: (event) => {
212
295
  if (event.key === 'Enter' || event.key === ' ') {
213
296
  event.preventDefault();
214
- scrollToIndex(index);
297
+ scrollToPaginationIndex(index);
215
298
  }
216
299
  } }, autoScroll && (react_1.default.createElement("div", { style: {
217
300
  transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
package/build/cjs/blocks/Scroller/schema.d.ts CHANGED
@@ -2,9 +2,6 @@ export declare const ScrollerControlsProps: {
2
2
  infinite: {
3
3
  type: string;
4
4
  };
5
- scrollSnapCenter: {
6
- type: string;
7
- };
8
5
  autoScroll: {
9
6
  type: string;
10
7
  };
@@ -26,9 +23,6 @@ export declare const ScrollerBlock: {
26
23
  infinite: {
27
24
  type: string;
28
25
  };
29
- scrollSnapCenter: {
30
- type: string;
31
- };
32
26
  autoScroll: {
33
27
  type: string;
34
28
  };
package/build/cjs/blocks/Scroller/schema.js CHANGED
@@ -6,9 +6,6 @@ exports.ScrollerControlsProps = {
6
6
  infinite: {
7
7
  type: 'boolean',
8
8
  },
9
- scrollSnapCenter: {
10
- type: 'boolean',
11
- },
12
9
  autoScroll: {
13
10
  type: 'boolean',
14
11
  },
package/build/cjs/blocks/WhatsNew/WhatsNew.js CHANGED
@@ -7,12 +7,12 @@ const NewsCard_1 = tslib_1.__importDefault(require("../../sub-blocks/NewsCard/Ne
7
7
  const utils_1 = require("../../utils");
8
8
  const Scroller_1 = tslib_1.__importDefault(require("../Scroller/Scroller"));
9
9
  const b = (0, utils_1.block)('whats-new-block');
10
- const WhatsNew = ({ title, items, footnote, links, animated, infinite, scrollSnapCenter, autoScroll, autoScrollInterval, }) => {
10
+ const WhatsNew = ({ title, items, footnote, links, animated, infinite, autoScroll, autoScrollInterval, }) => {
11
11
  return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
12
12
  react_1.default.createElement("div", { className: b('root') },
13
13
  title && (react_1.default.createElement("div", { className: b('head') },
14
14
  react_1.default.createElement("h2", { className: b('title') }, title))),
15
- react_1.default.createElement(Scroller_1.default, { fullWidth: true, infinite: infinite, scrollSnapCenter: scrollSnapCenter, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (react_1.default.createElement(NewsCard_1.default, Object.assign({ key: index }, item))))),
15
+ react_1.default.createElement(Scroller_1.default, { fullWidth: true, infinite: infinite, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (react_1.default.createElement(NewsCard_1.default, Object.assign({ key: index }, item))))),
16
16
  (footnote || (links === null || links === void 0 ? void 0 : links.length)) && (react_1.default.createElement("div", { className: b('footer') },
17
17
  footnote && react_1.default.createElement("div", { className: b('footnote') }, footnote),
18
18
  (links === null || links === void 0 ? void 0 : links.length) ? (react_1.default.createElement("div", { className: b('links') }, links.map((link, index) => (react_1.default.createElement("a", { key: index, href: link.url, className: b('link'), target: "_blank", rel: "noopener noreferrer" },
package/build/cjs/blocks/WhatsNew/schema.d.ts CHANGED
@@ -59,9 +59,6 @@ export declare const WhatsNewBlock: {
59
59
  infinite: {
60
60
  type: string;
61
61
  };
62
- scrollSnapCenter: {
63
- type: string;
64
- };
65
62
  autoScroll: {
66
63
  type: string;
67
64
  };
package/build/cjs/models/constructor-items/blocks.d.ts CHANGED
@@ -363,7 +363,6 @@ export interface ScrollerBlockProps extends Animatable {
363
363
  gapLong?: boolean;
364
364
  fullWidth?: boolean;
365
365
  infinite?: boolean;
366
- scrollSnapCenter?: boolean;
367
366
  autoScroll?: boolean;
368
367
  autoScrollInterval?: number;
369
368
  }
@@ -647,7 +646,7 @@ export interface BenchmarkBlockProps extends Animatable {
647
646
  postfix?: string;
648
647
  }[];
649
648
  }
650
- export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'scrollSnapCenter' | 'autoScroll' | 'autoScrollInterval'> {
649
+ export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'autoScroll' | 'autoScrollInterval'> {
651
650
  title?: string;
652
651
  items: NewsCardProps[];
653
652
  footnote?: string;
package/build/esm/blocks/Scroller/Scroller.js CHANGED
@@ -21,6 +21,65 @@ const scrollToChild = (content, child, behavior = 'smooth') => {
21
21
  const left = child.offsetLeft - (content.offsetWidth - child.offsetWidth) / 2;
22
22
  content.scrollTo({ left, behavior });
23
23
  };
24
+ const MIDDLE_COPY = 1;
25
+ const normalizeToMiddleCopy = (content, childCount) => {
26
+ const centeredIndex = getCenteredChildIndex(content);
27
+ const logicalIndex = centeredIndex % childCount;
28
+ const currentCopy = Math.floor(centeredIndex / childCount);
29
+ if (currentCopy === MIDDLE_COPY) {
30
+ return false;
31
+ }
32
+ const middleChild = getChild(content, childCount + logicalIndex);
33
+ if (middleChild) {
34
+ scrollToChild(content, middleChild, 'auto');
35
+ }
36
+ return true;
37
+ };
38
+ const getTargetPhysicalIndex = (centeredPhysicalIndex, targetLogicalIndex, childCount, preferForward) => {
39
+ const currentLogical = centeredPhysicalIndex % childCount;
40
+ const forwardSteps = (targetLogicalIndex - currentLogical + childCount) % childCount;
41
+ const backwardSteps = (currentLogical - targetLogicalIndex + childCount) % childCount;
42
+ if (preferForward || forwardSteps <= backwardSteps) {
43
+ if (forwardSteps === 0) {
44
+ return MIDDLE_COPY * childCount + targetLogicalIndex;
45
+ }
46
+ return centeredPhysicalIndex + forwardSteps;
47
+ }
48
+ if (backwardSteps === 0) {
49
+ return MIDDLE_COPY * childCount + targetLogicalIndex;
50
+ }
51
+ return centeredPhysicalIndex - backwardSteps;
52
+ };
53
+ const SCROLL_IDLE_MS = 200;
54
+ const NORMALIZE_BEFORE_SNAP_MS = 100;
55
+ const scrollToMiddleCopyIndex = (content, targetLogicalIndex, childCount) => {
56
+ const runScroll = () => {
57
+ const targetChild = getChild(content, childCount + targetLogicalIndex);
58
+ if (targetChild) {
59
+ scrollToChild(content, targetChild);
60
+ }
61
+ };
62
+ if (normalizeToMiddleCopy(content, childCount)) {
63
+ requestAnimationFrame(runScroll);
64
+ return;
65
+ }
66
+ runScroll();
67
+ };
68
+ const scrollToLogicalIndex = (content, targetLogicalIndex, childCount, preferForward) => {
69
+ const runScroll = () => {
70
+ const centeredIndex = getCenteredChildIndex(content);
71
+ const targetPhysical = getTargetPhysicalIndex(centeredIndex, targetLogicalIndex, childCount, preferForward);
72
+ const targetChild = getChild(content, targetPhysical);
73
+ if (targetChild) {
74
+ scrollToChild(content, targetChild);
75
+ }
76
+ };
77
+ if (normalizeToMiddleCopy(content, childCount)) {
78
+ requestAnimationFrame(runScroll);
79
+ return;
80
+ }
81
+ runScroll();
82
+ };
24
83
  const PlayIcon = () => {
25
84
  return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
26
85
  React.createElement("path", { d: "M13.765 9.83831L20.3154 13.7086C21.2977 14.289 21.298 15.7102 20.3159 16.2911L13.7714 20.1618C12.7719 20.7529 11.5086 20.033 11.5078 18.8718L11.502 11.1309C11.5011 9.96894 12.7646 9.24725 13.765 9.83831Z", fill: "currentColor" })));
@@ -30,14 +89,17 @@ const PauseIcon = () => {
30
89
  React.createElement("path", { d: "M12.5 10C13.3284 10 14 10.6716 14 11.5V18.5C14 19.3284 13.3284 20 12.5 20C11.6716 20 11 19.3284 11 18.5V11.5C11 10.6716 11.6716 10 12.5 10ZM17.5 10C18.3284 10 19 10.6716 19 11.5V18.5C19 19.3284 18.3284 20 17.5 20C16.6716 20 16 19.3284 16 18.5V11.5C16 10.6716 16.6716 10 17.5 10Z", fill: "currentColor" })));
31
90
  };
32
91
  export const ScrollerBlock = (props) => {
33
- const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
92
+ const { animated, widths, gapLong, fullWidth, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
34
93
  const childCount = React.Children.count(children);
35
94
  const rootRef = useRef(null);
36
95
  const contentRef = useRef(null);
37
96
  const [currentElement, setCurrentElement] = useState(0);
38
97
  const [isPaused, setIsPaused] = useState(true);
39
98
  const [scrollInProgress, setScrollInProgress] = useState(false);
40
- const scrollIntervalRef = useRef(null);
99
+ const scrollIdleTimeoutRef = useRef(null);
100
+ const normalizeSettleTimeoutRef = useRef(null);
101
+ const scrollInProgressRef = useRef(false);
102
+ const isNormalizingRef = useRef(false);
41
103
  useEffect(() => {
42
104
  const content = contentRef.current;
43
105
  const root = rootRef.current;
@@ -83,6 +145,15 @@ export const ScrollerBlock = (props) => {
83
145
  }
84
146
  };
85
147
  const handleInfiniteScroll = () => {
148
+ if (isNormalizingRef.current) {
149
+ return;
150
+ }
151
+ const wasNotInProgress = !scrollInProgressRef.current;
152
+ if (wasNotInProgress) {
153
+ isNormalizingRef.current = true;
154
+ normalizeToMiddleCopy(content, childCount);
155
+ isNormalizingRef.current = false;
156
+ }
86
157
  const scrollLeft = content.scrollLeft;
87
158
  const endCopyChild = getChild(content, endCopyStartIndex);
88
159
  const copyStartChild = getChild(content, copyStartIndex);
@@ -99,18 +170,34 @@ export const ScrollerBlock = (props) => {
99
170
  content.scrollTo(endChild.offsetLeft - content.clientWidth, 0);
100
171
  }
101
172
  }
173
+ scrollInProgressRef.current = true;
102
174
  setScrollInProgress(true);
103
- if (scrollIntervalRef.current) {
104
- clearTimeout(scrollIntervalRef.current);
175
+ if (scrollIdleTimeoutRef.current) {
176
+ clearTimeout(scrollIdleTimeoutRef.current);
105
177
  }
106
- scrollIntervalRef.current = setTimeout(() => {
107
- setScrollInProgress(false);
108
- }, 200);
178
+ if (normalizeSettleTimeoutRef.current) {
179
+ clearTimeout(normalizeSettleTimeoutRef.current);
180
+ }
181
+ scrollIdleTimeoutRef.current = setTimeout(() => {
182
+ isNormalizingRef.current = true;
183
+ normalizeToMiddleCopy(content, childCount);
184
+ isNormalizingRef.current = false;
185
+ normalizeSettleTimeoutRef.current = setTimeout(() => {
186
+ scrollInProgressRef.current = false;
187
+ setScrollInProgress(false);
188
+ }, NORMALIZE_BEFORE_SNAP_MS);
189
+ }, SCROLL_IDLE_MS);
109
190
  };
110
191
  content.addEventListener('scroll', handleInfiniteScroll, { passive: true });
111
192
  scrollToMiddle();
112
193
  return () => {
113
194
  content.removeEventListener('scroll', handleInfiniteScroll);
195
+ if (scrollIdleTimeoutRef.current) {
196
+ clearTimeout(scrollIdleTimeoutRef.current);
197
+ }
198
+ if (normalizeSettleTimeoutRef.current) {
199
+ clearTimeout(normalizeSettleTimeoutRef.current);
200
+ }
114
201
  };
115
202
  }, [infinite, childCount]);
116
203
  useEffect(() => {
@@ -124,11 +211,8 @@ export const ScrollerBlock = (props) => {
124
211
  return;
125
212
  }
126
213
  if (infinite) {
127
- const centeredIndex = getCenteredChildIndex(content);
128
- const nextElement = getChild(content, centeredIndex + 1);
129
- if (nextElement) {
130
- scrollToChild(content, nextElement);
131
- }
214
+ const nextLogical = ((getCenteredChildIndex(content) % childCount) + 1) % childCount;
215
+ scrollToLogicalIndex(content, nextLogical, childCount, true);
132
216
  return;
133
217
  }
134
218
  const nextIndex = (currentElement + 1) % childCount;
@@ -137,7 +221,7 @@ export const ScrollerBlock = (props) => {
137
221
  scrollToChild(content, nextElement);
138
222
  }
139
223
  }, [childCount, currentElement, infinite]);
140
- const scrollToIndex = useCallback((targetIndex) => {
224
+ const scrollToPaginationIndex = useCallback((targetIndex) => {
141
225
  if (autoScroll) {
142
226
  setIsPaused(true);
143
227
  }
@@ -152,27 +236,26 @@ export const ScrollerBlock = (props) => {
152
236
  }
153
237
  return;
154
238
  }
155
- const centeredIndex = getCenteredChildIndex(content);
156
- const currentCopy = Math.floor(centeredIndex / childCount);
157
- const logicalIndex = centeredIndex % childCount;
158
- const middleCopy = 1;
159
- const scrollToTargetInMiddleCopy = () => {
160
- const targetChild = getChild(content, childCount + targetIndex);
161
- if (targetChild) {
162
- scrollToChild(content, targetChild);
163
- }
164
- };
165
- if (currentCopy !== middleCopy) {
166
- const middleChild = getChild(content, childCount + logicalIndex);
167
- if (middleChild) {
168
- const left = middleChild.offsetLeft -
169
- (content.offsetWidth - middleChild.offsetWidth) / 2;
170
- content.scrollTo({ left, behavior: 'auto' });
239
+ scrollToMiddleCopyIndex(content, targetIndex, childCount);
240
+ }, [autoScroll, childCount, infinite]);
241
+ const scrollToItemIndex = useCallback((targetIndex) => {
242
+ if (autoScroll) {
243
+ setIsPaused(true);
244
+ }
245
+ const content = contentRef.current;
246
+ if (!content || childCount <= 1 || targetIndex < 0 || targetIndex >= childCount) {
247
+ return;
248
+ }
249
+ if (!infinite) {
250
+ const child = getChild(content, targetIndex);
251
+ if (child) {
252
+ scrollToChild(content, child);
171
253
  }
172
- requestAnimationFrame(scrollToTargetInMiddleCopy);
173
254
  return;
174
255
  }
175
- scrollToTargetInMiddleCopy();
256
+ const logicalIndex = getCenteredChildIndex(content) % childCount;
257
+ const isNext = targetIndex === (logicalIndex + 1) % childCount;
258
+ scrollToLogicalIndex(content, targetIndex, childCount, isNext);
176
259
  }, [autoScroll, childCount, infinite]);
177
260
  useEffect(() => {
178
261
  let timeout = null;
@@ -192,23 +275,23 @@ export const ScrollerBlock = (props) => {
192
275
  React.createElement("div", { className: b('content', {
193
276
  gapLong,
194
277
  fullWidth,
195
- 'scroll-snap-center': infinite ? !scrollInProgress : scrollSnapCenter,
278
+ 'scroll-snap-center': infinite ? !scrollInProgress : true,
196
279
  }), ref: contentRef }, (infinite ? [0, 1, 2] : [0])
197
280
  .map((mi) => React.Children.map(children, (child, index) => {
198
281
  const physicalIndex = mi * childCount + index;
199
- return (React.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToIndex(index), onKeyDown: (event) => {
282
+ return (React.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToItemIndex(index), onKeyDown: (event) => {
200
283
  if (event.key === 'Enter' || event.key === ' ') {
201
284
  event.preventDefault();
202
- scrollToIndex(index);
285
+ scrollToItemIndex(index);
203
286
  }
204
287
  } }, child));
205
288
  }))
206
289
  .flat())),
207
290
  childCount > 0 && (React.createElement("div", { className: b('pagination-container') },
208
- React.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (React.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToIndex(index), onKeyDown: (event) => {
291
+ React.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (React.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToPaginationIndex(index), onKeyDown: (event) => {
209
292
  if (event.key === 'Enter' || event.key === ' ') {
210
293
  event.preventDefault();
211
- scrollToIndex(index);
294
+ scrollToPaginationIndex(index);
212
295
  }
213
296
  } }, autoScroll && (React.createElement("div", { style: {
214
297
  transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
package/build/esm/blocks/Scroller/schema.d.ts CHANGED
@@ -2,9 +2,6 @@ export declare const ScrollerControlsProps: {
2
2
  infinite: {
3
3
  type: string;
4
4
  };
5
- scrollSnapCenter: {
6
- type: string;
7
- };
8
5
  autoScroll: {
9
6
  type: string;
10
7
  };
@@ -26,9 +23,6 @@ export declare const ScrollerBlock: {
26
23
  infinite: {
27
24
  type: string;
28
25
  };
29
- scrollSnapCenter: {
30
- type: string;
31
- };
32
26
  autoScroll: {
33
27
  type: string;
34
28
  };
package/build/esm/blocks/Scroller/schema.js CHANGED
@@ -3,9 +3,6 @@ export const ScrollerControlsProps = {
3
3
  infinite: {
4
4
  type: 'boolean',
5
5
  },
6
- scrollSnapCenter: {
7
- type: 'boolean',
8
- },
9
6
  autoScroll: {
10
7
  type: 'boolean',
11
8
  },
package/build/esm/blocks/WhatsNew/WhatsNew.js CHANGED
@@ -5,12 +5,12 @@ import { block } from '../../utils';
5
5
  import ScrollerBlock from '../Scroller/Scroller';
6
6
  import './WhatsNew.css';
7
7
  const b = block('whats-new-block');
8
- const WhatsNew = ({ title, items, footnote, links, animated, infinite, scrollSnapCenter, autoScroll, autoScrollInterval, }) => {
8
+ const WhatsNew = ({ title, items, footnote, links, animated, infinite, autoScroll, autoScrollInterval, }) => {
9
9
  return (React.createElement(AnimateBlock, { className: b(), animate: animated },
10
10
  React.createElement("div", { className: b('root') },
11
11
  title && (React.createElement("div", { className: b('head') },
12
12
  React.createElement("h2", { className: b('title') }, title))),
13
- React.createElement(ScrollerBlock, { fullWidth: true, infinite: infinite, scrollSnapCenter: scrollSnapCenter, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (React.createElement(NewsCard, Object.assign({ key: index }, item))))),
13
+ React.createElement(ScrollerBlock, { fullWidth: true, infinite: infinite, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (React.createElement(NewsCard, Object.assign({ key: index }, item))))),
14
14
  (footnote || (links === null || links === void 0 ? void 0 : links.length)) && (React.createElement("div", { className: b('footer') },
15
15
  footnote && React.createElement("div", { className: b('footnote') }, footnote),
16
16
  (links === null || links === void 0 ? void 0 : links.length) ? (React.createElement("div", { className: b('links') }, links.map((link, index) => (React.createElement("a", { key: index, href: link.url, className: b('link'), target: "_blank", rel: "noopener noreferrer" },
package/build/esm/blocks/WhatsNew/schema.d.ts CHANGED
@@ -59,9 +59,6 @@ export declare const WhatsNewBlock: {
59
59
  infinite: {
60
60
  type: string;
61
61
  };
62
- scrollSnapCenter: {
63
- type: string;
64
- };
65
62
  autoScroll: {
66
63
  type: string;
67
64
  };
package/build/esm/models/constructor-items/blocks.d.ts CHANGED
@@ -363,7 +363,6 @@ export interface ScrollerBlockProps extends Animatable {
363
363
  gapLong?: boolean;
364
364
  fullWidth?: boolean;
365
365
  infinite?: boolean;
366
- scrollSnapCenter?: boolean;
367
366
  autoScroll?: boolean;
368
367
  autoScrollInterval?: number;
369
368
  }
@@ -647,7 +646,7 @@ export interface BenchmarkBlockProps extends Animatable {
647
646
  postfix?: string;
648
647
  }[];
649
648
  }
650
- export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'scrollSnapCenter' | 'autoScroll' | 'autoScrollInterval'> {
649
+ export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'autoScroll' | 'autoScrollInterval'> {
651
650
  title?: string;
652
651
  items: NewsCardProps[];
653
652
  footnote?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.249",
3
+ "version": "5.31.250",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {