@gravity-ui/page-constructor 2.2.1-alpha.0 → 2.3.0

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 (136) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +1 -1
  3. package/build/cjs/blocks/Preview/MediaContent/MediaContent.css +50 -0
  4. package/build/cjs/blocks/Preview/MediaContent/MediaContent.d.ts +13 -0
  5. package/build/cjs/blocks/Preview/MediaContent/MediaContent.js +49 -0
  6. package/build/cjs/blocks/Preview/MediaContent/PreviewContent.css +106 -0
  7. package/build/cjs/blocks/Preview/MediaContent/PreviewContent.d.ts +11 -0
  8. package/build/cjs/blocks/Preview/MediaContent/PreviewContent.js +17 -0
  9. package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.css +54 -0
  10. package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.d.ts +9 -0
  11. package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.js +13 -0
  12. package/build/cjs/blocks/Preview/Preview.css +50 -0
  13. package/build/cjs/blocks/Preview/Preview.d.ts +3 -0
  14. package/build/cjs/blocks/Preview/Preview.js +130 -0
  15. package/build/cjs/blocks/Preview/schema.d.ts +40 -0
  16. package/build/cjs/blocks/Preview/schema.js +53 -0
  17. package/build/cjs/blocks/Simple/Simple.css +22 -0
  18. package/build/cjs/blocks/Simple/Simple.d.ts +3 -0
  19. package/build/cjs/blocks/Simple/Simple.js +22 -0
  20. package/build/cjs/blocks/Simple/schema.d.ts +68 -0
  21. package/build/cjs/blocks/Simple/schema.js +14 -0
  22. package/build/cjs/blocks/index.d.ts +2 -0
  23. package/build/cjs/blocks/index.js +5 -1
  24. package/build/cjs/blocks/validators.d.ts +2 -0
  25. package/build/cjs/blocks/validators.js +2 -0
  26. package/build/cjs/components/HTML/HTML.d.ts +1 -1
  27. package/build/cjs/components/Image/Image.js +2 -2
  28. package/build/cjs/constructor-items.d.ts +6 -0
  29. package/build/cjs/constructor-items.js +6 -0
  30. package/build/cjs/context/breakpointContext/breakpointContext.d.ts +2 -0
  31. package/build/cjs/context/breakpointContext/breakpointContext.js +7 -0
  32. package/build/cjs/context/breakpointContext/index.d.ts +1 -0
  33. package/build/cjs/context/breakpointContext/index.js +4 -0
  34. package/build/cjs/hooks/index.d.ts +1 -0
  35. package/build/cjs/hooks/index.js +3 -1
  36. package/build/cjs/hooks/useIntersection.d.ts +1 -0
  37. package/build/cjs/hooks/useIntersection.js +21 -0
  38. package/build/cjs/models/constructor-items/blocks.d.ts +23 -2
  39. package/build/cjs/models/constructor-items/blocks.js +2 -0
  40. package/build/cjs/models/constructor-items/common.d.ts +14 -0
  41. package/build/cjs/models/constructor-items/common.js +6 -1
  42. package/build/cjs/models/constructor-items/sub-blocks.d.ts +25 -9
  43. package/build/cjs/models/constructor-items/sub-blocks.js +7 -6
  44. package/build/cjs/schema/index.js +4 -2
  45. package/build/cjs/schema/validators/blocks.d.ts +2 -0
  46. package/build/cjs/schema/validators/blocks.js +2 -0
  47. package/build/cjs/schema/validators/sub-blocks.d.ts +1 -0
  48. package/build/cjs/schema/validators/sub-blocks.js +1 -0
  49. package/build/cjs/sub-blocks/CardWithImage/CardWithImage.css +19 -0
  50. package/build/cjs/sub-blocks/CardWithImage/CardWithImage.d.ts +3 -0
  51. package/build/cjs/sub-blocks/CardWithImage/CardWithImage.js +16 -0
  52. package/build/cjs/sub-blocks/CardWithImage/schema.d.ts +154 -0
  53. package/build/cjs/sub-blocks/CardWithImage/schema.js +46 -0
  54. package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css +1 -0
  55. package/build/cjs/sub-blocks/index.d.ts +1 -0
  56. package/build/cjs/sub-blocks/index.js +3 -1
  57. package/build/cjs/text-transform/blocks.js +32 -0
  58. package/build/cjs/utils/imageCompress.d.ts +6 -0
  59. package/build/cjs/utils/imageCompress.js +11 -0
  60. package/build/cjs/utils/index.d.ts +1 -0
  61. package/build/cjs/utils/index.js +1 -0
  62. package/build/cjs/utils/scroll.d.ts +15 -0
  63. package/build/cjs/utils/scroll.js +34 -0
  64. package/build/esm/blocks/Preview/MediaContent/MediaContent.css +50 -0
  65. package/build/esm/blocks/Preview/MediaContent/MediaContent.d.ts +14 -0
  66. package/build/esm/blocks/Preview/MediaContent/MediaContent.js +47 -0
  67. package/build/esm/blocks/Preview/MediaContent/PreviewContent.css +106 -0
  68. package/build/esm/blocks/Preview/MediaContent/PreviewContent.d.ts +12 -0
  69. package/build/esm/blocks/Preview/MediaContent/PreviewContent.js +15 -0
  70. package/build/esm/blocks/Preview/MediaContent/PreviewMedia.css +54 -0
  71. package/build/esm/blocks/Preview/MediaContent/PreviewMedia.d.ts +10 -0
  72. package/build/esm/blocks/Preview/MediaContent/PreviewMedia.js +11 -0
  73. package/build/esm/blocks/Preview/Preview.css +50 -0
  74. package/build/esm/blocks/Preview/Preview.d.ts +4 -0
  75. package/build/esm/blocks/Preview/Preview.js +126 -0
  76. package/build/esm/blocks/Preview/schema.d.ts +40 -0
  77. package/build/esm/blocks/Preview/schema.js +50 -0
  78. package/build/esm/blocks/Simple/Simple.css +22 -0
  79. package/build/esm/blocks/Simple/Simple.d.ts +4 -0
  80. package/build/esm/blocks/Simple/Simple.js +18 -0
  81. package/build/esm/blocks/Simple/schema.d.ts +68 -0
  82. package/build/esm/blocks/Simple/schema.js +11 -0
  83. package/build/esm/blocks/index.d.ts +2 -0
  84. package/build/esm/blocks/index.js +2 -0
  85. package/build/esm/blocks/validators.d.ts +2 -0
  86. package/build/esm/blocks/validators.js +2 -0
  87. package/build/esm/components/HTML/HTML.d.ts +1 -1
  88. package/build/esm/components/Image/Image.js +2 -2
  89. package/build/esm/constructor-items.d.ts +6 -0
  90. package/build/esm/constructor-items.js +8 -2
  91. package/build/esm/context/breakpointContext/breakpointContext.d.ts +2 -0
  92. package/build/esm/context/breakpointContext/breakpointContext.js +3 -0
  93. package/build/esm/context/breakpointContext/index.d.ts +1 -0
  94. package/build/esm/context/breakpointContext/index.js +1 -0
  95. package/build/esm/hooks/index.d.ts +1 -0
  96. package/build/esm/hooks/index.js +1 -0
  97. package/build/esm/hooks/useIntersection.d.ts +1 -0
  98. package/build/esm/hooks/useIntersection.js +17 -0
  99. package/build/esm/models/constructor-items/blocks.d.ts +23 -2
  100. package/build/esm/models/constructor-items/blocks.js +2 -0
  101. package/build/esm/models/constructor-items/common.d.ts +14 -0
  102. package/build/esm/models/constructor-items/common.js +5 -0
  103. package/build/esm/models/constructor-items/sub-blocks.d.ts +25 -9
  104. package/build/esm/models/constructor-items/sub-blocks.js +7 -6
  105. package/build/esm/schema/index.js +6 -4
  106. package/build/esm/schema/validators/blocks.d.ts +2 -0
  107. package/build/esm/schema/validators/blocks.js +2 -0
  108. package/build/esm/schema/validators/sub-blocks.d.ts +1 -0
  109. package/build/esm/schema/validators/sub-blocks.js +1 -0
  110. package/build/esm/sub-blocks/CardWithImage/CardWithImage.css +19 -0
  111. package/build/esm/sub-blocks/CardWithImage/CardWithImage.d.ts +4 -0
  112. package/build/esm/sub-blocks/CardWithImage/CardWithImage.js +14 -0
  113. package/build/esm/sub-blocks/CardWithImage/schema.d.ts +154 -0
  114. package/build/esm/sub-blocks/CardWithImage/schema.js +43 -0
  115. package/build/esm/sub-blocks/HubspotForm/HubspotForm.css +1 -0
  116. package/build/esm/sub-blocks/index.d.ts +1 -0
  117. package/build/esm/sub-blocks/index.js +1 -0
  118. package/build/esm/text-transform/blocks.js +32 -0
  119. package/build/esm/utils/imageCompress.d.ts +6 -0
  120. package/build/esm/utils/imageCompress.js +7 -0
  121. package/build/esm/utils/index.d.ts +1 -0
  122. package/build/esm/utils/index.js +1 -0
  123. package/build/esm/utils/scroll.d.ts +15 -0
  124. package/build/esm/utils/scroll.js +30 -0
  125. package/package.json +1 -4
  126. package/server/models/constructor-items/blocks.d.ts +23 -2
  127. package/server/models/constructor-items/blocks.js +2 -0
  128. package/server/models/constructor-items/common.d.ts +14 -0
  129. package/server/models/constructor-items/common.js +6 -1
  130. package/server/models/constructor-items/sub-blocks.d.ts +25 -9
  131. package/server/models/constructor-items/sub-blocks.js +7 -6
  132. package/server/text-transform/blocks.js +32 -0
  133. package/server/utils/index.d.ts +1 -0
  134. package/server/utils/index.js +1 -0
  135. package/server/utils/scroll.d.ts +15 -0
  136. package/server/utils/scroll.js +34 -0
@@ -0,0 +1,106 @@
1
+ .pc-preview-content-block__title {
2
+ margin: 0;
3
+ }
4
+
5
+ /* use this for style redefinitions to awoid problems with
6
+ unpredictable css rules order in build */
7
+ .pc-preview-content-block__content {
8
+ height: 100%;
9
+ display: block;
10
+ cursor: pointer;
11
+ border-radius: var(--pc-border-radius);
12
+ overflow: hidden;
13
+ position: relative;
14
+ background: var(--yc-color-base-background);
15
+ }
16
+ .pc-preview-content-block__content > .pc-preview-content-block__description {
17
+ overflow: hidden;
18
+ }
19
+ .pc-preview-content-block__loader-block {
20
+ height: 100%;
21
+ width: 0%;
22
+ background: var(--yc-color-base-background);
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+ }
27
+ .pc-preview-content-block__loader-block_auto {
28
+ transition: background-color 1s ease, width 300ms linear;
29
+ }
30
+ .pc-preview-content-block__loader-block_active {
31
+ background-color: var(--yc-color-promo-highlight-sky);
32
+ width: 100%;
33
+ }
34
+ .pc-preview-content-block__loader-block_active.pc-preview-content-block__loader-block_auto {
35
+ transition: background-color 1s ease, width 5s linear;
36
+ }
37
+ .pc-preview-content-block__title {
38
+ font-size: var(--yc-text-header-1-font-size);
39
+ line-height: var(--yc-text-header-1-line-height);
40
+ color: var(--pc-text-header-color);
41
+ font-weight: var(--yc-text-accent-font-weight);
42
+ position: relative;
43
+ }
44
+ .pc-preview-content-block__description {
45
+ font-size: var(--yc-text-body-2-font-size);
46
+ line-height: var(--yc-text-body-2-line-height);
47
+ position: relative;
48
+ }
49
+ @media (min-width: 769px) {
50
+ .pc-preview-content-block__content {
51
+ padding: 16px 24px;
52
+ margin: 0;
53
+ transition: background-color 0.5s ease-in, margin-top 300ms ease, margin-bottom 300ms ease;
54
+ }
55
+ .pc-preview-content-block__content > .pc-preview-content-block__description {
56
+ height: 0px;
57
+ transition: height 300ms ease, padding-top 300ms ease;
58
+ }
59
+ .pc-preview-content-block__content > .pc-preview-content-block__description > span {
60
+ color: transparent;
61
+ transition: color 300ms ease;
62
+ }
63
+ .pc-preview-content-block__content > .pc-preview-content-block__title:hover {
64
+ color: var(--yc-color-text-link);
65
+ }
66
+ .pc-preview-content-block__content_active {
67
+ padding: 24px;
68
+ margin: 16px 0;
69
+ background: var(--yc-color-promo-base-silver);
70
+ transition: background-color 300ms ease-in, margin 300ms ease, padding 300ms ease;
71
+ }
72
+ .pc-preview-content-block__content_active > .pc-preview-content-block__description {
73
+ padding-top: 12px;
74
+ }
75
+ .pc-preview-content-block__content_active > .pc-preview-content-block__description > span {
76
+ color: var(--yc-color-text-primary);
77
+ }
78
+ .pc-preview-content-block__content_active > .pc-preview-content-block__title:hover {
79
+ color: var(--yc-color-text-primary);
80
+ }
81
+ }
82
+ @media (max-width: 769px) {
83
+ .pc-preview-content-block__content {
84
+ width: 275px;
85
+ padding: 24px;
86
+ padding-bottom: 32px;
87
+ transition: background-color 0.5s ease-in;
88
+ }
89
+ .pc-preview-content-block__content_active {
90
+ margin: 0 16px;
91
+ background: var(--yc-color-promo-base-silver);
92
+ transition: background-color 300ms ease-in;
93
+ }
94
+ .pc-preview-content-block__content > .pc-preview-content-block__description {
95
+ padding-top: 12px;
96
+ }
97
+ .pc-preview-content-block__content > .pc-preview-content-block__description > span {
98
+ color: var(--yc-color-text-primary);
99
+ }
100
+ .pc-preview-content-block__content > .pc-preview-content-block__description {
101
+ display: block;
102
+ }
103
+ .pc-preview-content-block .preview-block__row_reverse__content {
104
+ margin-left: 0;
105
+ }
106
+ }
@@ -0,0 +1,12 @@
1
+ import { Modifiers } from '../../../models';
2
+ import './PreviewContent.css';
3
+ interface PreviewContentProps {
4
+ id: number;
5
+ title: string;
6
+ description?: string;
7
+ switching: boolean;
8
+ onClick: () => void;
9
+ mods: Modifiers | null;
10
+ }
11
+ declare const PreviewContent: (props: PreviewContentProps) => JSX.Element;
12
+ export default PreviewContent;
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { block } from '../../../utils';
3
+ import YFMWrapper from '../../../components/YFMWrapper/YFMWrapper';
4
+ import './PreviewContent.css';
5
+ const b = block('preview-content-block');
6
+ const PreviewContent = (props) => {
7
+ const { id, title, description = '', switching, onClick, mods } = props;
8
+ return (React.createElement("div", { key: id, className: b('content-wrapper') },
9
+ React.createElement("div", { className: b('content', mods), onClick: onClick },
10
+ React.createElement("div", { className: b('loader-block', Object.assign(Object.assign({}, mods), { auto: switching })) }),
11
+ React.createElement("h2", { className: b('title') }, title),
12
+ description && (React.createElement("div", { className: b('description') },
13
+ React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))))));
14
+ };
15
+ export default PreviewContent;
@@ -0,0 +1,54 @@
1
+ .pc-preview-media-block__title {
2
+ margin: 0;
3
+ }
4
+
5
+ /* use this for style redefinitions to awoid problems with
6
+ unpredictable css rules order in build */
7
+ @media (min-width: 769px) {
8
+ .pc-preview-media-block.pc-AnimateBlock .pc-preview-media-block __media, .pc-AnimateBlock .pc-preview-media-block .pc-preview-media-block __media {
9
+ position: relative;
10
+ top: 100px;
11
+ opacity: 0;
12
+ }
13
+ .pc-preview-media-block.pc-AnimateBlock.animate .pc-preview-media-block __media, .pc-AnimateBlock .pc-preview-media-block.animate .pc-preview-media-block __media {
14
+ top: 0;
15
+ opacity: 1;
16
+ transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
17
+ transition-delay: 0s;
18
+ }
19
+ }
20
+ .pc-preview-media-block__title {
21
+ font-size: var(--yc-text-display-2-font-size);
22
+ line-height: var(--yc-text-display-2-line-height);
23
+ color: var(--pc-text-header-color);
24
+ font-weight: var(--yc-text-accent-font-weight);
25
+ }
26
+ @media (max-width: 576px) {
27
+ .pc-preview-media-block__title {
28
+ font-size: var(--yc-text-display-1-font-size);
29
+ line-height: var(--yc-text-display-1-line-height);
30
+ }
31
+ }
32
+ .pc-preview-media-block__media {
33
+ box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
34
+ overflow-x: hidden;
35
+ border-radius: var(--pc-border-radius);
36
+ overflow: hidden;
37
+ display: none;
38
+ }
39
+ .pc-preview-media-block__media img {
40
+ width: 100%;
41
+ }
42
+ .pc-preview-media-block__media img,
43
+ .pc-preview-media-block__media video,
44
+ .pc-preview-media-block__media iframe {
45
+ border-radius: var(--pc-border-radius);
46
+ }
47
+ .pc-preview-media-block__media_active {
48
+ display: block;
49
+ }
50
+ @media (max-width: 769px) {
51
+ .pc-preview-media-block__media_active {
52
+ width: 100%;
53
+ }
54
+ }
@@ -0,0 +1,10 @@
1
+ import { MediaProps, Modifiers } from '../../../models';
2
+ import './PreviewMedia.css';
3
+ interface PreviewMediaProps {
4
+ id: number;
5
+ media: MediaProps;
6
+ play: boolean;
7
+ mods: Modifiers | null;
8
+ }
9
+ declare const PreviewMedia: (props: PreviewMediaProps) => JSX.Element;
10
+ export default PreviewMedia;
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { block } from '../../../utils';
3
+ import Media from '../../../components/Media/Media';
4
+ import './PreviewMedia.css';
5
+ const b = block('preview-media-block');
6
+ const PreviewMedia = (props) => {
7
+ const { id, media, play, mods } = props;
8
+ return (React.createElement("div", { key: id, className: b('media', mods) },
9
+ React.createElement(Media, Object.assign({}, media, { playVideo: play }))));
10
+ };
11
+ export default PreviewMedia;
@@ -0,0 +1,50 @@
1
+ /* use this for style redefinitions to awoid problems with
2
+ unpredictable css rules order in build */
3
+ .pc-preview-block__row > * {
4
+ height: fit-content;
5
+ margin: auto;
6
+ }
7
+ .pc-preview-block__row_reverse {
8
+ flex-direction: row-reverse;
9
+ }
10
+ .pc-preview-block__row > .col.pc-preview-media-content-block__media {
11
+ padding: 0 16px;
12
+ }
13
+ @media (min-width: 769px) {
14
+ .pc-preview-block__row {
15
+ display: flex;
16
+ }
17
+ .pc-preview-block__row > .col.pc-preview-media-content-block__content {
18
+ padding: 0 48px 0 16px;
19
+ }
20
+ .pc-preview-block__row_reverse > .col.pc-preview-media-content-block__content {
21
+ padding: 0 16px 0 48px;
22
+ }
23
+ }
24
+ @media (min-width: 577px) and (max-width: 769px) {
25
+ .pc-preview-block__row_reverse {
26
+ flex-direction: row;
27
+ }
28
+ .pc-preview-block__row > .col.pc-preview-media-content-block__content {
29
+ padding: 0;
30
+ }
31
+ .pc-preview-block__row > .col.pc-preview-media-content-block__media {
32
+ padding: 0 32px;
33
+ }
34
+ .pc-preview-block .pc-preview-block__row_reverse.row, .pc-preview-block .pc-preview-block__row.row {
35
+ margin-left: -32px;
36
+ margin-right: -32px;
37
+ }
38
+ }
39
+ @media (max-width: 577px) {
40
+ .pc-preview-block__row > .col.pc-preview-media-content-block__content {
41
+ padding: 0;
42
+ }
43
+ .pc-preview-block__row > .col.pc-preview-media-content-block__media {
44
+ padding: 0 20px;
45
+ }
46
+ .pc-preview-block .pc-preview-block__row_reverse.row, .pc-preview-block .pc-preview-block__row.row {
47
+ margin-left: -20px;
48
+ margin-right: -20px;
49
+ }
50
+ }
@@ -0,0 +1,4 @@
1
+ import { PreviewBlockProps } from '../../models';
2
+ import './Preview.css';
3
+ export declare const PreviewBlock: (props: PreviewBlockProps) => JSX.Element;
4
+ export default PreviewBlock;
@@ -0,0 +1,126 @@
1
+ import { block, doSmoothScroll } from '../../utils';
2
+ import React, { useCallback, useContext, useEffect, useState } from 'react';
3
+ import { BreakpointContext } from '../../context/breakpointContext';
4
+ import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
5
+ import MediaContent from './MediaContent/MediaContent';
6
+ import { Row } from '../../grid';
7
+ import { BREAKPOINTS } from '../../constants';
8
+ import { useIntersection } from '../../hooks/useIntersection';
9
+ import './Preview.css';
10
+ const b = block('preview-block');
11
+ const SWITCHING_INTERVAL = 5 * 1000;
12
+ const WIDTH_MENU_ITEM_MD_SIZE = 275;
13
+ const INDENT_MENU_ITEM_MD_SIZE = 16;
14
+ const SCROLL_ITEM_SECONDS = 1;
15
+ const SCROLL_ITEM_SPEED = 2;
16
+ const CLASSNAME_DESCRIPTION_YFM_BLOCK = 'yfm';
17
+ const CLASSNAME_CONTENT_WRAPPER = 'preview-media-content-block__content-wrapper';
18
+ const INDENT_BETWEEN_TITLE_DESCRIPTION = 16;
19
+ export const PreviewBlock = (props) => {
20
+ const { direction = 'content-media', animated, items, title, description, ratioMediaContent = '1-1', stopVideo = false,
21
+ // TODO YDB-server doesn't see previewRef.current and doesn't update the component CLOUDFRONT-9395
22
+ showImmediately = false, } = props;
23
+ const breakpoint = useContext(BreakpointContext);
24
+ const isDesktop = breakpoint >= BREAKPOINTS.md;
25
+ const menuRef = React.useRef(null);
26
+ const previewRef = React.useRef(null);
27
+ const inViewport = useIntersection(previewRef.current);
28
+ const [stopSwitching, setStopSwitching] = useState(stopVideo);
29
+ const [activeSlide, setActiveSlide] = useState(-1);
30
+ const [autoSwitchTimerId, setAutoSwitchTimerId] = useState(0);
31
+ const isActiveBlock = useCallback((id, isMediaBlock = false) => {
32
+ return isMediaBlock || inViewport ? activeSlide === id : false;
33
+ }, [inViewport, activeSlide]);
34
+ const changeActiveSlide = useCallback((params) => {
35
+ const { current, nextSlide, currentSlide, timerId } = params;
36
+ if (isDesktop) {
37
+ changeDescriptionHeight(current, nextSlide, currentSlide);
38
+ }
39
+ else {
40
+ changeMenuScroll(current, nextSlide, currentSlide);
41
+ }
42
+ setActiveSlide(nextSlide);
43
+ clearTimeout(timerId);
44
+ }, [isDesktop]);
45
+ useEffect(() => {
46
+ // TODO YDB-server doesn't see previewRef.current and doesn't update the component CLOUDFRONT-9395
47
+ if (!items[activeSlide] && (showImmediately || inViewport)) {
48
+ setActiveSlide(0);
49
+ if (isDesktop) {
50
+ changeDescriptionHeight(menuRef.current, 0);
51
+ }
52
+ }
53
+ }, [inViewport, activeSlide, isDesktop, items, showImmediately]);
54
+ useEffect(() => {
55
+ if (stopSwitching || !inViewport) {
56
+ return () => { };
57
+ }
58
+ const timerId = setTimeout(() => {
59
+ if (stopSwitching) {
60
+ clearTimeout(timerId);
61
+ return;
62
+ }
63
+ const nextSlide = activeSlide + 1 >= items.length ? 0 : activeSlide + 1;
64
+ changeActiveSlide({
65
+ current: menuRef.current,
66
+ nextSlide,
67
+ currentSlide: activeSlide,
68
+ timerId: timerId,
69
+ });
70
+ }, SWITCHING_INTERVAL);
71
+ setAutoSwitchTimerId(timerId);
72
+ return () => clearTimeout(timerId);
73
+ }, [changeActiveSlide, activeSlide, items.length, stopSwitching, inViewport]);
74
+ const showMediaContent = useCallback((nextSlide) => {
75
+ changeActiveSlide({
76
+ current: menuRef.current,
77
+ nextSlide,
78
+ currentSlide: activeSlide,
79
+ timerId: autoSwitchTimerId,
80
+ });
81
+ setStopSwitching(true);
82
+ }, [changeActiveSlide, activeSlide, autoSwitchTimerId]);
83
+ return (React.createElement(AnimateBlock, { className: b(), animate: animated },
84
+ React.createElement(Row, { ref: previewRef, className: b('row', { reverse: direction === 'media-content' }) },
85
+ React.createElement(MediaContent, { ref: menuRef, items: items, title: title, description: description, ratioMediaContent: ratioMediaContent, switching: !stopSwitching, isActiveBlock: isActiveBlock, showMediaContent: showMediaContent }))));
86
+ };
87
+ function changeMenuScroll(element, nextSlide, activeSlide) {
88
+ if (!element) {
89
+ return;
90
+ }
91
+ const scrollPosition = element.scrollLeft;
92
+ const endPosition = nextSlide === 0 ? 0 : nextSlide * WIDTH_MENU_ITEM_MD_SIZE + INDENT_MENU_ITEM_MD_SIZE;
93
+ const distance = Math.abs(scrollPosition - endPosition);
94
+ const isReverse = nextSlide === 0 || nextSlide < activeSlide;
95
+ const scrollOptions = {
96
+ distance,
97
+ timeSeconds: SCROLL_ITEM_SECONDS,
98
+ speed: SCROLL_ITEM_SPEED,
99
+ reverseParams: isReverse ? { distance } : undefined,
100
+ };
101
+ doSmoothScroll(element, scrollPosition, scrollOptions);
102
+ }
103
+ function changeDescriptionHeight(element, nextActiveSlide, prevActiveSlide = 0) {
104
+ const contentWrapper = element === null || element === void 0 ? void 0 : element.getElementsByClassName(CLASSNAME_CONTENT_WRAPPER);
105
+ if (!contentWrapper || contentWrapper.length === 0) {
106
+ return;
107
+ }
108
+ const menuItems = contentWrapper[0].children;
109
+ updateHeight(menuItems, nextActiveSlide);
110
+ if (nextActiveSlide !== prevActiveSlide) {
111
+ updateHeight(menuItems, prevActiveSlide, false);
112
+ }
113
+ }
114
+ function updateHeight(menuItems, slide, isExpand = true) {
115
+ const item = menuItems[slide];
116
+ const yfmBlock = item.getElementsByClassName(CLASSNAME_DESCRIPTION_YFM_BLOCK)[0];
117
+ if (yfmBlock) {
118
+ const yfmBlockElement = yfmBlock;
119
+ const yfmBlockHeight = yfmBlockElement.offsetHeight;
120
+ const yfmBlockOffsetParent = yfmBlockElement.offsetParent;
121
+ yfmBlockOffsetParent.style.height = isExpand
122
+ ? `${yfmBlockHeight + INDENT_BETWEEN_TITLE_DESCRIPTION}px`
123
+ : '0px';
124
+ }
125
+ }
126
+ export default PreviewBlock;
@@ -0,0 +1,40 @@
1
+ export declare const PreviewBlock: {
2
+ 'preview-block': {
3
+ additionalProperties: boolean;
4
+ required: string[];
5
+ properties: {
6
+ title: {
7
+ type: string;
8
+ contentType: string;
9
+ };
10
+ description: {
11
+ type: string;
12
+ contentType: string;
13
+ };
14
+ direction: {
15
+ type: string;
16
+ enum: string[];
17
+ };
18
+ ratioMediaContent: {
19
+ type: string;
20
+ enum: string[];
21
+ };
22
+ items: {
23
+ type: string;
24
+ items: {
25
+ type: string;
26
+ properties: {
27
+ when: {
28
+ type: string;
29
+ };
30
+ };
31
+ };
32
+ };
33
+ animated: {
34
+ type: string;
35
+ };
36
+ type: {};
37
+ when: {};
38
+ };
39
+ };
40
+ };
@@ -0,0 +1,50 @@
1
+ import { filteredArray } from '../../schema/validators/utils';
2
+ import { AnimatableProps, BaseProps, mediaDirection, withTheme, } from '../../schema/validators/common';
3
+ import { Media } from '../Media/schema';
4
+ const previewRatioMediaContent = ['2-1', '1-1'];
5
+ const PreviewContentItem = {
6
+ additionalProperties: false,
7
+ required: ['title', 'description'],
8
+ properties: {
9
+ title: {
10
+ type: 'string',
11
+ contentType: 'text',
12
+ },
13
+ description: {
14
+ type: 'string',
15
+ contentType: 'yfm',
16
+ },
17
+ },
18
+ };
19
+ const PreviewItem = {
20
+ type: 'object',
21
+ additionalProperties: false,
22
+ required: ['type', 'media', 'content'],
23
+ properties: {
24
+ type: {
25
+ type: 'string',
26
+ enum: ['video', 'image'],
27
+ },
28
+ media: withTheme(Media),
29
+ content: PreviewContentItem,
30
+ },
31
+ };
32
+ export const PreviewBlock = {
33
+ 'preview-block': {
34
+ additionalProperties: false,
35
+ required: ['title', 'items'],
36
+ properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { title: {
37
+ type: 'string',
38
+ contentType: 'text',
39
+ }, description: {
40
+ type: 'string',
41
+ contentType: 'yfm',
42
+ }, direction: {
43
+ type: 'string',
44
+ enum: mediaDirection,
45
+ }, ratioMediaContent: {
46
+ type: 'string',
47
+ enum: previewRatioMediaContent,
48
+ }, items: filteredArray(PreviewItem) }),
49
+ },
50
+ };
@@ -0,0 +1,22 @@
1
+ /* use this for style redefinitions to awoid problems with
2
+ unpredictable css rules order in build */
3
+ @media (min-width: 769px) {
4
+ .pc-simple-block.pc-AnimateBlock .pc-simple-block__animate-block, .pc-AnimateBlock .pc-simple-block .pc-simple-block__animate-block {
5
+ position: relative;
6
+ top: 100px;
7
+ opacity: 0;
8
+ }
9
+ .pc-simple-block.pc-AnimateBlock.animate .pc-simple-block__animate-block, .pc-AnimateBlock .pc-simple-block.animate .pc-simple-block__animate-block {
10
+ top: 0;
11
+ opacity: 1;
12
+ transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
13
+ transition-delay: 0.5s;
14
+ }
15
+ }
16
+ .pc-simple-block__animate-block {
17
+ margin-top: 20px;
18
+ }
19
+ .pc-simple-block__description {
20
+ margin-top: 16px;
21
+ font-size: var(--yc-text-body-2-font-size);
22
+ }
@@ -0,0 +1,4 @@
1
+ import { SimpleBlockProps, WithChildren } from '../../models';
2
+ import './Simple.css';
3
+ export declare const SimpleBlock: (props: WithChildren<SimpleBlockProps>) => JSX.Element;
4
+ export default SimpleBlock;
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { block } from '../../utils';
3
+ import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
4
+ import BlockHeader from '../../components/BlockHeader/BlockHeader';
5
+ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
6
+ import './Simple.css';
7
+ const b = block('simple-block');
8
+ export const SimpleBlock = (props) => {
9
+ const { title, description, animated = true, children } = props;
10
+ const blockHeader = title && React.createElement(BlockHeader, { title: title });
11
+ return (React.createElement(AnimateBlock, { className: b(), animate: animated },
12
+ React.createElement("div", null,
13
+ blockHeader,
14
+ React.createElement("div", { className: b('description') },
15
+ React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } })),
16
+ React.createElement("div", { className: b('animate-block') }, children))));
17
+ };
18
+ export default SimpleBlock;
@@ -0,0 +1,68 @@
1
+ export declare const SimpleBlock: {
2
+ 'simple-block': {
3
+ additionalProperties: boolean;
4
+ required: string[];
5
+ properties: {
6
+ children: {
7
+ type: string;
8
+ items: {
9
+ $ref: string;
10
+ };
11
+ };
12
+ animated: {
13
+ type: string;
14
+ };
15
+ anchor: {
16
+ type: string;
17
+ additionalProperties: boolean;
18
+ required: string[];
19
+ properties: {
20
+ text: {
21
+ type: string;
22
+ contentType: string;
23
+ };
24
+ url: {
25
+ type: string;
26
+ };
27
+ };
28
+ };
29
+ visible: {
30
+ type: string;
31
+ enum: string[];
32
+ };
33
+ resetPaddings: {
34
+ type: string;
35
+ };
36
+ context: {
37
+ type: string;
38
+ };
39
+ type: {};
40
+ when: {};
41
+ title: {
42
+ type: string;
43
+ additionalProperties: boolean;
44
+ required: string[];
45
+ properties: {
46
+ text: {
47
+ type: string;
48
+ contentType: string;
49
+ };
50
+ textSize: {
51
+ type: string;
52
+ enum: string[];
53
+ };
54
+ url: {
55
+ type: string;
56
+ };
57
+ resetMargin: {
58
+ type: string;
59
+ };
60
+ };
61
+ };
62
+ description: {
63
+ type: string;
64
+ contentType: string;
65
+ };
66
+ };
67
+ };
68
+ };
@@ -0,0 +1,11 @@
1
+ import { BlockBaseProps, TitleProps, AnimatableProps, ChildrenProps, } from '../../schema/validators/common';
2
+ export const SimpleBlock = {
3
+ 'simple-block': {
4
+ additionalProperties: false,
5
+ required: ['title', 'description'],
6
+ properties: Object.assign(Object.assign(Object.assign({ title: TitleProps, description: {
7
+ type: 'string',
8
+ contentType: 'yfm',
9
+ } }, BlockBaseProps), AnimatableProps), { children: ChildrenProps }),
10
+ },
11
+ };
@@ -1,8 +1,10 @@
1
1
  export { default as BannerBlock } from './Banner/Banner';
2
2
  export { default as CompaniesBlock } from './Companies/Companies';
3
+ export { default as SimpleBlock } from './Simple/Simple';
3
4
  export { default as InfoBlock } from './Info/Info';
4
5
  export { default as MediaBlock } from './Media/Media';
5
6
  export { default as MapBlock } from './Map/Map';
7
+ export { default as PreviewBlock } from './Preview/Preview';
6
8
  export { default as SecurityBlock } from './Security/Security';
7
9
  export { default as SliderBlock } from './Slider/Slider';
8
10
  export { default as ExtendedFeaturesBlock } from './ExtendedFeatures/ExtendedFeatures';
@@ -1,8 +1,10 @@
1
1
  export { default as BannerBlock } from './Banner/Banner';
2
2
  export { default as CompaniesBlock } from './Companies/Companies';
3
+ export { default as SimpleBlock } from './Simple/Simple';
3
4
  export { default as InfoBlock } from './Info/Info';
4
5
  export { default as MediaBlock } from './Media/Media';
5
6
  export { default as MapBlock } from './Map/Map';
7
+ export { default as PreviewBlock } from './Preview/Preview';
6
8
  export { default as SecurityBlock } from './Security/Security';
7
9
  export { default as SliderBlock } from './Slider/Slider';
8
10
  export { default as ExtendedFeaturesBlock } from './ExtendedFeatures/ExtendedFeatures';
@@ -9,9 +9,11 @@ export * from './Icons/schema';
9
9
  export * from './Info/schema';
10
10
  export * from './LinkTable/schema';
11
11
  export * from './Media/schema';
12
+ export * from './Preview/schema';
12
13
  export * from './PromoFeaturesBlock/schema';
13
14
  export * from './Questions/schema';
14
15
  export * from './Security/schema';
16
+ export * from './Simple/schema';
15
17
  export * from './Slider/schema';
16
18
  export * from './Table/schema';
17
19
  export * from './Share/schema';
@@ -9,9 +9,11 @@ export * from './Icons/schema';
9
9
  export * from './Info/schema';
10
10
  export * from './LinkTable/schema';
11
11
  export * from './Media/schema';
12
+ export * from './Preview/schema';
12
13
  export * from './PromoFeaturesBlock/schema';
13
14
  export * from './Questions/schema';
14
15
  export * from './Security/schema';
16
+ export * from './Simple/schema';
15
17
  export * from './Slider/schema';
16
18
  export * from './Table/schema';
17
19
  export * from './Share/schema';