@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.
- package/CHANGELOG.md +7 -0
- package/README.md +1 -1
- package/build/cjs/blocks/Preview/MediaContent/MediaContent.css +50 -0
- package/build/cjs/blocks/Preview/MediaContent/MediaContent.d.ts +13 -0
- package/build/cjs/blocks/Preview/MediaContent/MediaContent.js +49 -0
- package/build/cjs/blocks/Preview/MediaContent/PreviewContent.css +106 -0
- package/build/cjs/blocks/Preview/MediaContent/PreviewContent.d.ts +11 -0
- package/build/cjs/blocks/Preview/MediaContent/PreviewContent.js +17 -0
- package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.css +54 -0
- package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.d.ts +9 -0
- package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.js +13 -0
- package/build/cjs/blocks/Preview/Preview.css +50 -0
- package/build/cjs/blocks/Preview/Preview.d.ts +3 -0
- package/build/cjs/blocks/Preview/Preview.js +130 -0
- package/build/cjs/blocks/Preview/schema.d.ts +40 -0
- package/build/cjs/blocks/Preview/schema.js +53 -0
- package/build/cjs/blocks/Simple/Simple.css +22 -0
- package/build/cjs/blocks/Simple/Simple.d.ts +3 -0
- package/build/cjs/blocks/Simple/Simple.js +22 -0
- package/build/cjs/blocks/Simple/schema.d.ts +68 -0
- package/build/cjs/blocks/Simple/schema.js +14 -0
- package/build/cjs/blocks/index.d.ts +2 -0
- package/build/cjs/blocks/index.js +5 -1
- package/build/cjs/blocks/validators.d.ts +2 -0
- package/build/cjs/blocks/validators.js +2 -0
- package/build/cjs/components/HTML/HTML.d.ts +1 -1
- package/build/cjs/components/Image/Image.js +2 -2
- package/build/cjs/constructor-items.d.ts +6 -0
- package/build/cjs/constructor-items.js +6 -0
- package/build/cjs/context/breakpointContext/breakpointContext.d.ts +2 -0
- package/build/cjs/context/breakpointContext/breakpointContext.js +7 -0
- package/build/cjs/context/breakpointContext/index.d.ts +1 -0
- package/build/cjs/context/breakpointContext/index.js +4 -0
- package/build/cjs/hooks/index.d.ts +1 -0
- package/build/cjs/hooks/index.js +3 -1
- package/build/cjs/hooks/useIntersection.d.ts +1 -0
- package/build/cjs/hooks/useIntersection.js +21 -0
- package/build/cjs/models/constructor-items/blocks.d.ts +23 -2
- package/build/cjs/models/constructor-items/blocks.js +2 -0
- package/build/cjs/models/constructor-items/common.d.ts +14 -0
- package/build/cjs/models/constructor-items/common.js +6 -1
- package/build/cjs/models/constructor-items/sub-blocks.d.ts +25 -9
- package/build/cjs/models/constructor-items/sub-blocks.js +7 -6
- package/build/cjs/schema/index.js +4 -2
- package/build/cjs/schema/validators/blocks.d.ts +2 -0
- package/build/cjs/schema/validators/blocks.js +2 -0
- package/build/cjs/schema/validators/sub-blocks.d.ts +1 -0
- package/build/cjs/schema/validators/sub-blocks.js +1 -0
- package/build/cjs/sub-blocks/CardWithImage/CardWithImage.css +19 -0
- package/build/cjs/sub-blocks/CardWithImage/CardWithImage.d.ts +3 -0
- package/build/cjs/sub-blocks/CardWithImage/CardWithImage.js +16 -0
- package/build/cjs/sub-blocks/CardWithImage/schema.d.ts +154 -0
- package/build/cjs/sub-blocks/CardWithImage/schema.js +46 -0
- package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css +1 -0
- package/build/cjs/sub-blocks/index.d.ts +1 -0
- package/build/cjs/sub-blocks/index.js +3 -1
- package/build/cjs/text-transform/blocks.js +32 -0
- package/build/cjs/utils/imageCompress.d.ts +6 -0
- package/build/cjs/utils/imageCompress.js +11 -0
- package/build/cjs/utils/index.d.ts +1 -0
- package/build/cjs/utils/index.js +1 -0
- package/build/cjs/utils/scroll.d.ts +15 -0
- package/build/cjs/utils/scroll.js +34 -0
- package/build/esm/blocks/Preview/MediaContent/MediaContent.css +50 -0
- package/build/esm/blocks/Preview/MediaContent/MediaContent.d.ts +14 -0
- package/build/esm/blocks/Preview/MediaContent/MediaContent.js +47 -0
- package/build/esm/blocks/Preview/MediaContent/PreviewContent.css +106 -0
- package/build/esm/blocks/Preview/MediaContent/PreviewContent.d.ts +12 -0
- package/build/esm/blocks/Preview/MediaContent/PreviewContent.js +15 -0
- package/build/esm/blocks/Preview/MediaContent/PreviewMedia.css +54 -0
- package/build/esm/blocks/Preview/MediaContent/PreviewMedia.d.ts +10 -0
- package/build/esm/blocks/Preview/MediaContent/PreviewMedia.js +11 -0
- package/build/esm/blocks/Preview/Preview.css +50 -0
- package/build/esm/blocks/Preview/Preview.d.ts +4 -0
- package/build/esm/blocks/Preview/Preview.js +126 -0
- package/build/esm/blocks/Preview/schema.d.ts +40 -0
- package/build/esm/blocks/Preview/schema.js +50 -0
- package/build/esm/blocks/Simple/Simple.css +22 -0
- package/build/esm/blocks/Simple/Simple.d.ts +4 -0
- package/build/esm/blocks/Simple/Simple.js +18 -0
- package/build/esm/blocks/Simple/schema.d.ts +68 -0
- package/build/esm/blocks/Simple/schema.js +11 -0
- package/build/esm/blocks/index.d.ts +2 -0
- package/build/esm/blocks/index.js +2 -0
- package/build/esm/blocks/validators.d.ts +2 -0
- package/build/esm/blocks/validators.js +2 -0
- package/build/esm/components/HTML/HTML.d.ts +1 -1
- package/build/esm/components/Image/Image.js +2 -2
- package/build/esm/constructor-items.d.ts +6 -0
- package/build/esm/constructor-items.js +8 -2
- package/build/esm/context/breakpointContext/breakpointContext.d.ts +2 -0
- package/build/esm/context/breakpointContext/breakpointContext.js +3 -0
- package/build/esm/context/breakpointContext/index.d.ts +1 -0
- package/build/esm/context/breakpointContext/index.js +1 -0
- package/build/esm/hooks/index.d.ts +1 -0
- package/build/esm/hooks/index.js +1 -0
- package/build/esm/hooks/useIntersection.d.ts +1 -0
- package/build/esm/hooks/useIntersection.js +17 -0
- package/build/esm/models/constructor-items/blocks.d.ts +23 -2
- package/build/esm/models/constructor-items/blocks.js +2 -0
- package/build/esm/models/constructor-items/common.d.ts +14 -0
- package/build/esm/models/constructor-items/common.js +5 -0
- package/build/esm/models/constructor-items/sub-blocks.d.ts +25 -9
- package/build/esm/models/constructor-items/sub-blocks.js +7 -6
- package/build/esm/schema/index.js +6 -4
- package/build/esm/schema/validators/blocks.d.ts +2 -0
- package/build/esm/schema/validators/blocks.js +2 -0
- package/build/esm/schema/validators/sub-blocks.d.ts +1 -0
- package/build/esm/schema/validators/sub-blocks.js +1 -0
- package/build/esm/sub-blocks/CardWithImage/CardWithImage.css +19 -0
- package/build/esm/sub-blocks/CardWithImage/CardWithImage.d.ts +4 -0
- package/build/esm/sub-blocks/CardWithImage/CardWithImage.js +14 -0
- package/build/esm/sub-blocks/CardWithImage/schema.d.ts +154 -0
- package/build/esm/sub-blocks/CardWithImage/schema.js +43 -0
- package/build/esm/sub-blocks/HubspotForm/HubspotForm.css +1 -0
- package/build/esm/sub-blocks/index.d.ts +1 -0
- package/build/esm/sub-blocks/index.js +1 -0
- package/build/esm/text-transform/blocks.js +32 -0
- package/build/esm/utils/imageCompress.d.ts +6 -0
- package/build/esm/utils/imageCompress.js +7 -0
- package/build/esm/utils/index.d.ts +1 -0
- package/build/esm/utils/index.js +1 -0
- package/build/esm/utils/scroll.d.ts +15 -0
- package/build/esm/utils/scroll.js +30 -0
- package/package.json +1 -4
- package/server/models/constructor-items/blocks.d.ts +23 -2
- package/server/models/constructor-items/blocks.js +2 -0
- package/server/models/constructor-items/common.d.ts +14 -0
- package/server/models/constructor-items/common.js +6 -1
- package/server/models/constructor-items/sub-blocks.d.ts +25 -9
- package/server/models/constructor-items/sub-blocks.js +7 -6
- package/server/text-transform/blocks.js +32 -0
- package/server/utils/index.d.ts +1 -0
- package/server/utils/index.js +1 -0
- package/server/utils/scroll.d.ts +15 -0
- 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,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,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';
|