@doyourjob/gravity-ui-page-constructor 5.31.226 → 5.31.228

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.css +86 -0
  2. package/build/cjs/blocks/Scroller/Scroller.js +88 -9
  3. package/build/cjs/blocks/Scroller/schema.d.ts +9 -0
  4. package/build/cjs/blocks/Scroller/schema.js +6 -0
  5. package/build/cjs/blocks/WhatsNew/WhatsNew.js +1 -1
  6. package/build/cjs/models/constructor-items/blocks.d.ts +3 -0
  7. package/build/esm/blocks/Scroller/Scroller.css +86 -0
  8. package/build/esm/blocks/Scroller/Scroller.js +89 -10
  9. package/build/esm/blocks/Scroller/schema.d.ts +9 -0
  10. package/build/esm/blocks/Scroller/schema.js +6 -0
  11. package/build/esm/blocks/WhatsNew/WhatsNew.js +1 -1
  12. package/build/esm/models/constructor-items/blocks.d.ts +3 -0
  13. package/package.json +1 -1
  14. package/schema/index.js +1 -1
  15. package/server/models/constructor-items/blocks.d.ts +3 -0
  16. package/widget/index.js +1 -1
package/build/cjs/blocks/Scroller/Scroller.css CHANGED
@@ -31,8 +31,94 @@ unpredictable css rules order in build */
31
31
  .pc-scroller-block__content_gapLong {
32
32
  gap: 48px;
33
33
  }
34
+ .pc-scroller-block__content_scrollSnapCenter {
35
+ scroll-snap-type: x mandatory;
36
+ }
37
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item {
38
+ scroll-snap-align: center;
39
+ }
40
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:first-child {
41
+ margin-left: 48px;
42
+ }
43
+ @media (min-width: 769px) {
44
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:first-child {
45
+ margin-left: var(--scroller-edge-margin);
46
+ }
47
+ }
48
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:last-child {
49
+ margin-right: 48px;
50
+ }
51
+ @media (min-width: 769px) {
52
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:last-child {
53
+ margin-right: var(--scroller-edge-margin);
54
+ }
55
+ }
34
56
  .pc-scroller-block__item {
35
57
  position: relative;
36
58
  z-index: 1;
37
59
  flex: none;
60
+ max-width: 100%;
61
+ }
62
+ .pc-scroller-block__pagination-container {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ gap: 12px;
67
+ margin-top: 32px;
68
+ }
69
+ .pc-scroller-block__pagination {
70
+ display: flex;
71
+ gap: 8px;
72
+ align-items: center;
73
+ width: fit-content;
74
+ padding: 12px;
75
+ border-radius: 9999px;
76
+ background: #f3f4f5;
77
+ height: 30px;
78
+ }
79
+ .pc-scroller-block__pagination-button {
80
+ display: inline-block;
81
+ margin: 0;
82
+ padding: 0;
83
+ font: inherit;
84
+ border: none;
85
+ outline: none;
86
+ color: inherit;
87
+ background: none;
88
+ cursor: pointer;
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ border-radius: 9999px;
93
+ background: #f3f4f5;
94
+ width: 30px;
95
+ height: 30px;
96
+ }
97
+ .pc-scroller-block__pip {
98
+ flex: none;
99
+ width: 6px;
100
+ height: 6px;
101
+ border-radius: 50%;
102
+ background: rgba(0, 26, 43, 0.3);
103
+ transition: width 0.3s ease, border-radius 0.3s ease;
104
+ }
105
+ .pc-scroller-block__pip_active {
106
+ width: 48px;
107
+ border-radius: 9999px;
108
+ }
109
+ .pc-scroller-block__pip-inner {
110
+ height: 100%;
111
+ min-width: 6px;
112
+ width: 0%;
113
+ border-radius: 9999px;
114
+ background-color: transparent;
115
+ transition: opacity 0.5s ease;
116
+ }
117
+ .pc-scroller-block__pip-inner_active {
118
+ width: 100%;
119
+ background-color: rgb(0, 26, 43);
120
+ }
121
+ .pc-scroller-block__pip-inner_paused {
122
+ width: 0;
123
+ opacity: 0;
38
124
  }
package/build/cjs/blocks/Scroller/Scroller.js CHANGED
@@ -4,31 +4,110 @@ exports.ScrollerBlock = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  const components_1 = require("../../components");
7
+ const constants_1 = require("../../constants");
7
8
  const utils_1 = require("../../utils");
8
9
  const b = (0, utils_1.block)('scroller-block');
10
+ const PlayIcon = () => {
11
+ return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
12
+ 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" })));
13
+ };
14
+ const PauseIcon = () => {
15
+ return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
16
+ 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" })));
17
+ };
9
18
  const ScrollerBlock = (props) => {
10
- const { animated, widths, gapLong, fullWidth, children } = props;
19
+ const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll, autoScrollInterval = 3000, } = props;
11
20
  const rootRef = (0, react_1.useRef)(null);
12
21
  const contentRef = (0, react_1.useRef)(null);
22
+ const [currentElement, setCurrentElement] = (0, react_1.useState)(0);
23
+ const [isPaused, setIsPaused] = (0, react_1.useState)(true);
13
24
  (0, react_1.useEffect)(() => {
25
+ const content = contentRef.current;
26
+ const root = rootRef.current;
14
27
  const updateSize = () => {
15
- if (contentRef.current && rootRef.current && fullWidth) {
16
- const space = (window.innerWidth - rootRef.current.clientWidth) / 2;
17
- contentRef.current.style.setProperty('padding-left', `${space}px`);
18
- contentRef.current.style.setProperty('padding-right', `${space}px`);
19
- contentRef.current.style.setProperty('left', `${-space}px`);
20
- contentRef.current.style.setProperty('width', `calc(100% + ${2 * space}px)`);
28
+ if (!content || !root) {
29
+ return;
30
+ }
31
+ if (fullWidth) {
32
+ const space = (window.innerWidth - root.clientWidth) / 2;
33
+ content.style.setProperty('padding-left', `${space}px`);
34
+ content.style.setProperty('padding-right', `${space}px`);
35
+ content.style.setProperty('left', `${-space}px`);
36
+ content.style.setProperty('width', `calc(100% + ${2 * space}px)`);
37
+ }
38
+ if (scrollSnapCenter && window.innerWidth >= constants_1.BREAKPOINTS.md) {
39
+ content.style.setProperty('--scroller-edge-margin', `${content.clientWidth / 3}px`);
40
+ }
41
+ else {
42
+ content.style.removeProperty('--scroller-edge-margin');
43
+ }
44
+ };
45
+ const determineCurrentElement = () => {
46
+ var _a;
47
+ const childCount = ((_a = content === null || content === void 0 ? void 0 : content.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
48
+ if (!content || childCount <= 1) {
49
+ return;
21
50
  }
51
+ const currentMidLine = content.clientWidth / 2;
52
+ [...content.children].find((child, index) => {
53
+ const childRect = child.getBoundingClientRect();
54
+ if (currentMidLine > childRect.left && currentMidLine < childRect.right) {
55
+ setCurrentElement(index);
56
+ return true;
57
+ }
58
+ return false;
59
+ });
22
60
  };
23
61
  updateSize();
62
+ determineCurrentElement();
24
63
  window.addEventListener('resize', updateSize, { passive: true });
64
+ content === null || content === void 0 ? void 0 : content.addEventListener('scroll', determineCurrentElement, { passive: true });
25
65
  return () => {
26
66
  window.removeEventListener('resize', updateSize);
67
+ content === null || content === void 0 ? void 0 : content.removeEventListener('scroll', determineCurrentElement);
68
+ };
69
+ }, [fullWidth, scrollSnapCenter]);
70
+ (0, react_1.useEffect)(() => {
71
+ if (autoScroll) {
72
+ setIsPaused(false);
73
+ }
74
+ }, [autoScroll]);
75
+ const childCount = react_1.default.Children.count(children);
76
+ const scrollToNext = (0, react_1.useCallback)(() => {
77
+ const content = contentRef.current;
78
+ if (!content) {
79
+ return;
80
+ }
81
+ const nextIndex = (currentElement + 1) % childCount;
82
+ const nextElement = content.children[nextIndex];
83
+ const nextIndexLeft = nextElement.offsetLeft - (content.offsetWidth - nextElement.offsetWidth) / 2;
84
+ content.scrollTo({ left: nextIndexLeft, behavior: 'smooth' });
85
+ }, [childCount, currentElement]);
86
+ (0, react_1.useEffect)(() => {
87
+ let timeout = null;
88
+ if (!isPaused) {
89
+ timeout = setTimeout(() => {
90
+ scrollToNext();
91
+ }, autoScrollInterval);
92
+ }
93
+ return () => {
94
+ if (timeout) {
95
+ clearTimeout(timeout);
96
+ }
27
97
  };
28
- }, [fullWidth]);
98
+ }, [isPaused, currentElement, autoScrollInterval, scrollToNext]);
29
99
  return (react_1.default.createElement(components_1.AnimateBlock, { className: b({ fullWidth }), animate: animated },
30
100
  react_1.default.createElement("div", { className: b('root'), ref: rootRef },
31
- react_1.default.createElement("div", { className: b('content', { gapLong, fullWidth }), ref: contentRef }, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement("div", { key: index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child)))))));
101
+ react_1.default.createElement("div", { className: b('content', { gapLong, fullWidth, scrollSnapCenter }), ref: contentRef }, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement("div", { key: index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child))))),
102
+ autoScroll && childCount > 0 && (react_1.default.createElement("div", { className: b('pagination-container') },
103
+ react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, className: b('pip', { active: index === currentElement }) },
104
+ react_1.default.createElement("div", { style: {
105
+ transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
106
+ }, className: b('pip-inner', {
107
+ active: index === currentElement,
108
+ paused: isPaused,
109
+ }) }))))),
110
+ react_1.default.createElement("button", { className: b('pagination-button'), onClick: () => setIsPaused(!isPaused) }, isPaused ? react_1.default.createElement(PlayIcon, null) : react_1.default.createElement(PauseIcon, null))))));
32
111
  };
33
112
  exports.ScrollerBlock = ScrollerBlock;
34
113
  exports.default = exports.ScrollerBlock;
package/build/cjs/blocks/Scroller/schema.d.ts CHANGED
@@ -12,6 +12,15 @@ export declare const ScrollerBlock: {
12
12
  gapLong: {
13
13
  type: string;
14
14
  };
15
+ fullWidth: {
16
+ type: string;
17
+ };
18
+ scrollSnapCenter: {
19
+ type: string;
20
+ };
21
+ autoScroll: {
22
+ type: string;
23
+ };
15
24
  children: {
16
25
  type: string;
17
26
  items: {
package/build/cjs/blocks/Scroller/schema.js CHANGED
@@ -13,6 +13,12 @@ exports.ScrollerBlock = {
13
13
  },
14
14
  }, gapLong: {
15
15
  type: 'boolean',
16
+ }, fullWidth: {
17
+ type: 'boolean',
18
+ }, scrollSnapCenter: {
19
+ type: 'boolean',
20
+ }, autoScroll: {
21
+ type: 'boolean',
16
22
  }, children: common_1.ChildrenCardsProps }),
17
23
  },
18
24
  };
package/build/cjs/blocks/WhatsNew/WhatsNew.js CHANGED
@@ -12,7 +12,7 @@ const WhatsNew = ({ title, items, footnote, links, 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 }, 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, scrollSnapCenter: true, autoScroll: true }, 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/models/constructor-items/blocks.d.ts CHANGED
@@ -359,6 +359,9 @@ export interface ScrollerBlockProps extends Animatable {
359
359
  widths?: string[];
360
360
  gapLong?: boolean;
361
361
  fullWidth?: boolean;
362
+ scrollSnapCenter?: boolean;
363
+ autoScroll?: boolean;
364
+ autoScrollInterval?: number;
362
365
  }
363
366
  export interface CompaniesBlockProps extends Animatable {
364
367
  title: string;
package/build/esm/blocks/Scroller/Scroller.css CHANGED
@@ -31,8 +31,94 @@ unpredictable css rules order in build */
31
31
  .pc-scroller-block__content_gapLong {
32
32
  gap: 48px;
33
33
  }
34
+ .pc-scroller-block__content_scrollSnapCenter {
35
+ scroll-snap-type: x mandatory;
36
+ }
37
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item {
38
+ scroll-snap-align: center;
39
+ }
40
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:first-child {
41
+ margin-left: 48px;
42
+ }
43
+ @media (min-width: 769px) {
44
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:first-child {
45
+ margin-left: var(--scroller-edge-margin);
46
+ }
47
+ }
48
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:last-child {
49
+ margin-right: 48px;
50
+ }
51
+ @media (min-width: 769px) {
52
+ .pc-scroller-block__content_scrollSnapCenter .pc-scroller-block__item:last-child {
53
+ margin-right: var(--scroller-edge-margin);
54
+ }
55
+ }
34
56
  .pc-scroller-block__item {
35
57
  position: relative;
36
58
  z-index: 1;
37
59
  flex: none;
60
+ max-width: 100%;
61
+ }
62
+ .pc-scroller-block__pagination-container {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ gap: 12px;
67
+ margin-top: 32px;
68
+ }
69
+ .pc-scroller-block__pagination {
70
+ display: flex;
71
+ gap: 8px;
72
+ align-items: center;
73
+ width: fit-content;
74
+ padding: 12px;
75
+ border-radius: 9999px;
76
+ background: #f3f4f5;
77
+ height: 30px;
78
+ }
79
+ .pc-scroller-block__pagination-button {
80
+ display: inline-block;
81
+ margin: 0;
82
+ padding: 0;
83
+ font: inherit;
84
+ border: none;
85
+ outline: none;
86
+ color: inherit;
87
+ background: none;
88
+ cursor: pointer;
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ border-radius: 9999px;
93
+ background: #f3f4f5;
94
+ width: 30px;
95
+ height: 30px;
96
+ }
97
+ .pc-scroller-block__pip {
98
+ flex: none;
99
+ width: 6px;
100
+ height: 6px;
101
+ border-radius: 50%;
102
+ background: rgba(0, 26, 43, 0.3);
103
+ transition: width 0.3s ease, border-radius 0.3s ease;
104
+ }
105
+ .pc-scroller-block__pip_active {
106
+ width: 48px;
107
+ border-radius: 9999px;
108
+ }
109
+ .pc-scroller-block__pip-inner {
110
+ height: 100%;
111
+ min-width: 6px;
112
+ width: 0%;
113
+ border-radius: 9999px;
114
+ background-color: transparent;
115
+ transition: opacity 0.5s ease;
116
+ }
117
+ .pc-scroller-block__pip-inner_active {
118
+ width: 100%;
119
+ background-color: rgb(0, 26, 43);
120
+ }
121
+ .pc-scroller-block__pip-inner_paused {
122
+ width: 0;
123
+ opacity: 0;
38
124
  }
package/build/esm/blocks/Scroller/Scroller.js CHANGED
@@ -1,30 +1,109 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { AnimateBlock } from '../../components';
3
+ import { BREAKPOINTS } from '../../constants';
3
4
  import { block } from '../../utils';
4
5
  import './Scroller.css';
5
6
  const b = block('scroller-block');
7
+ const PlayIcon = () => {
8
+ return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
9
+ 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" })));
10
+ };
11
+ const PauseIcon = () => {
12
+ return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
13
+ 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" })));
14
+ };
6
15
  export const ScrollerBlock = (props) => {
7
- const { animated, widths, gapLong, fullWidth, children } = props;
16
+ const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll, autoScrollInterval = 3000, } = props;
8
17
  const rootRef = useRef(null);
9
18
  const contentRef = useRef(null);
19
+ const [currentElement, setCurrentElement] = useState(0);
20
+ const [isPaused, setIsPaused] = useState(true);
10
21
  useEffect(() => {
22
+ const content = contentRef.current;
23
+ const root = rootRef.current;
11
24
  const updateSize = () => {
12
- if (contentRef.current && rootRef.current && fullWidth) {
13
- const space = (window.innerWidth - rootRef.current.clientWidth) / 2;
14
- contentRef.current.style.setProperty('padding-left', `${space}px`);
15
- contentRef.current.style.setProperty('padding-right', `${space}px`);
16
- contentRef.current.style.setProperty('left', `${-space}px`);
17
- contentRef.current.style.setProperty('width', `calc(100% + ${2 * space}px)`);
25
+ if (!content || !root) {
26
+ return;
27
+ }
28
+ if (fullWidth) {
29
+ const space = (window.innerWidth - root.clientWidth) / 2;
30
+ content.style.setProperty('padding-left', `${space}px`);
31
+ content.style.setProperty('padding-right', `${space}px`);
32
+ content.style.setProperty('left', `${-space}px`);
33
+ content.style.setProperty('width', `calc(100% + ${2 * space}px)`);
34
+ }
35
+ if (scrollSnapCenter && window.innerWidth >= BREAKPOINTS.md) {
36
+ content.style.setProperty('--scroller-edge-margin', `${content.clientWidth / 3}px`);
37
+ }
38
+ else {
39
+ content.style.removeProperty('--scroller-edge-margin');
40
+ }
41
+ };
42
+ const determineCurrentElement = () => {
43
+ var _a;
44
+ const childCount = ((_a = content === null || content === void 0 ? void 0 : content.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
45
+ if (!content || childCount <= 1) {
46
+ return;
18
47
  }
48
+ const currentMidLine = content.clientWidth / 2;
49
+ [...content.children].find((child, index) => {
50
+ const childRect = child.getBoundingClientRect();
51
+ if (currentMidLine > childRect.left && currentMidLine < childRect.right) {
52
+ setCurrentElement(index);
53
+ return true;
54
+ }
55
+ return false;
56
+ });
19
57
  };
20
58
  updateSize();
59
+ determineCurrentElement();
21
60
  window.addEventListener('resize', updateSize, { passive: true });
61
+ content === null || content === void 0 ? void 0 : content.addEventListener('scroll', determineCurrentElement, { passive: true });
22
62
  return () => {
23
63
  window.removeEventListener('resize', updateSize);
64
+ content === null || content === void 0 ? void 0 : content.removeEventListener('scroll', determineCurrentElement);
65
+ };
66
+ }, [fullWidth, scrollSnapCenter]);
67
+ useEffect(() => {
68
+ if (autoScroll) {
69
+ setIsPaused(false);
70
+ }
71
+ }, [autoScroll]);
72
+ const childCount = React.Children.count(children);
73
+ const scrollToNext = useCallback(() => {
74
+ const content = contentRef.current;
75
+ if (!content) {
76
+ return;
77
+ }
78
+ const nextIndex = (currentElement + 1) % childCount;
79
+ const nextElement = content.children[nextIndex];
80
+ const nextIndexLeft = nextElement.offsetLeft - (content.offsetWidth - nextElement.offsetWidth) / 2;
81
+ content.scrollTo({ left: nextIndexLeft, behavior: 'smooth' });
82
+ }, [childCount, currentElement]);
83
+ useEffect(() => {
84
+ let timeout = null;
85
+ if (!isPaused) {
86
+ timeout = setTimeout(() => {
87
+ scrollToNext();
88
+ }, autoScrollInterval);
89
+ }
90
+ return () => {
91
+ if (timeout) {
92
+ clearTimeout(timeout);
93
+ }
24
94
  };
25
- }, [fullWidth]);
95
+ }, [isPaused, currentElement, autoScrollInterval, scrollToNext]);
26
96
  return (React.createElement(AnimateBlock, { className: b({ fullWidth }), animate: animated },
27
97
  React.createElement("div", { className: b('root'), ref: rootRef },
28
- React.createElement("div", { className: b('content', { gapLong, fullWidth }), ref: contentRef }, React.Children.map(children, (child, index) => (React.createElement("div", { key: index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child)))))));
98
+ React.createElement("div", { className: b('content', { gapLong, fullWidth, scrollSnapCenter }), ref: contentRef }, React.Children.map(children, (child, index) => (React.createElement("div", { key: index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child))))),
99
+ autoScroll && childCount > 0 && (React.createElement("div", { className: b('pagination-container') },
100
+ React.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (React.createElement("div", { key: index, className: b('pip', { active: index === currentElement }) },
101
+ React.createElement("div", { style: {
102
+ transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
103
+ }, className: b('pip-inner', {
104
+ active: index === currentElement,
105
+ paused: isPaused,
106
+ }) }))))),
107
+ React.createElement("button", { className: b('pagination-button'), onClick: () => setIsPaused(!isPaused) }, isPaused ? React.createElement(PlayIcon, null) : React.createElement(PauseIcon, null))))));
29
108
  };
30
109
  export default ScrollerBlock;
package/build/esm/blocks/Scroller/schema.d.ts CHANGED
@@ -12,6 +12,15 @@ export declare const ScrollerBlock: {
12
12
  gapLong: {
13
13
  type: string;
14
14
  };
15
+ fullWidth: {
16
+ type: string;
17
+ };
18
+ scrollSnapCenter: {
19
+ type: string;
20
+ };
21
+ autoScroll: {
22
+ type: string;
23
+ };
15
24
  children: {
16
25
  type: string;
17
26
  items: {
package/build/esm/blocks/Scroller/schema.js CHANGED
@@ -10,6 +10,12 @@ export const ScrollerBlock = {
10
10
  },
11
11
  }, gapLong: {
12
12
  type: 'boolean',
13
+ }, fullWidth: {
14
+ type: 'boolean',
15
+ }, scrollSnapCenter: {
16
+ type: 'boolean',
17
+ }, autoScroll: {
18
+ type: 'boolean',
13
19
  }, children: ChildrenCardsProps }),
14
20
  },
15
21
  };
package/build/esm/blocks/WhatsNew/WhatsNew.js CHANGED
@@ -10,7 +10,7 @@ const WhatsNew = ({ title, items, footnote, links, 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 }, items.map((item, index) => (React.createElement(NewsCard, Object.assign({ key: index }, item))))),
13
+ React.createElement(ScrollerBlock, { fullWidth: true, scrollSnapCenter: true, autoScroll: true }, 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/models/constructor-items/blocks.d.ts CHANGED
@@ -359,6 +359,9 @@ export interface ScrollerBlockProps extends Animatable {
359
359
  widths?: string[];
360
360
  gapLong?: boolean;
361
361
  fullWidth?: boolean;
362
+ scrollSnapCenter?: boolean;
363
+ autoScroll?: boolean;
364
+ autoScrollInterval?: number;
362
365
  }
363
366
  export interface CompaniesBlockProps extends Animatable {
364
367
  title: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.226",
3
+ "version": "5.31.228",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {