@gravity-ui/page-constructor 4.51.0 → 4.52.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/build/cjs/blocks/Banner/schema.d.ts +12 -0
- package/build/cjs/blocks/Banner/schema.js +4 -1
- package/build/cjs/blocks/Header/schema.js +1 -1
- package/build/cjs/components/ReactPlayer/ReactPlayer.js +9 -1
- package/build/cjs/components/ReactPlayer/utils/youtube.d.ts +2 -0
- package/build/cjs/components/ReactPlayer/utils/youtube.js +7 -0
- package/build/cjs/constructor-items.d.ts +1 -0
- package/build/cjs/constructor-items.js +1 -0
- package/build/cjs/models/constructor-items/common.d.ts +1 -0
- package/build/cjs/models/constructor-items/sub-blocks.d.ts +18 -3
- package/build/cjs/models/constructor-items/sub-blocks.js +7 -1
- package/build/cjs/schema/constants.d.ts +80 -0
- package/build/cjs/schema/constants.js +2 -1
- package/build/cjs/schema/validators/common.d.ts +1 -0
- package/build/cjs/schema/validators/common.js +2 -1
- 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/ImageCard/ImageCard.css +59 -0
- package/build/cjs/sub-blocks/ImageCard/ImageCard.d.ts +3 -0
- package/build/cjs/sub-blocks/ImageCard/ImageCard.js +21 -0
- package/build/cjs/sub-blocks/ImageCard/schema.d.ts +78 -0
- package/build/cjs/sub-blocks/ImageCard/schema.js +24 -0
- package/build/cjs/sub-blocks/index.d.ts +1 -0
- package/build/cjs/sub-blocks/index.js +3 -1
- package/build/esm/blocks/Banner/schema.d.ts +12 -0
- package/build/esm/blocks/Banner/schema.js +5 -2
- package/build/esm/blocks/Header/schema.js +2 -2
- package/build/esm/components/ReactPlayer/ReactPlayer.js +9 -1
- package/build/esm/components/ReactPlayer/utils/youtube.d.ts +2 -0
- package/build/esm/components/ReactPlayer/utils/youtube.js +3 -0
- package/build/esm/constructor-items.d.ts +1 -0
- package/build/esm/constructor-items.js +2 -1
- package/build/esm/models/constructor-items/common.d.ts +1 -0
- package/build/esm/models/constructor-items/sub-blocks.d.ts +18 -3
- package/build/esm/models/constructor-items/sub-blocks.js +6 -0
- package/build/esm/schema/constants.d.ts +80 -0
- package/build/esm/schema/constants.js +3 -2
- package/build/esm/schema/validators/common.d.ts +1 -0
- package/build/esm/schema/validators/common.js +1 -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/ImageCard/ImageCard.css +59 -0
- package/build/esm/sub-blocks/ImageCard/ImageCard.d.ts +4 -0
- package/build/esm/sub-blocks/ImageCard/ImageCard.js +19 -0
- package/build/esm/sub-blocks/ImageCard/schema.d.ts +78 -0
- package/build/esm/sub-blocks/ImageCard/schema.js +20 -0
- package/build/esm/sub-blocks/index.d.ts +1 -0
- package/build/esm/sub-blocks/index.js +1 -0
- package/package.json +2 -1
- package/server/models/constructor-items/common.d.ts +1 -0
- package/server/models/constructor-items/sub-blocks.d.ts +18 -3
- package/server/models/constructor-items/sub-blocks.js +7 -1
- package/widget/index.js +1 -1
|
@@ -12,6 +12,7 @@ import { block } from '../../utils';
|
|
|
12
12
|
import CustomBarControls from './CustomBarControls';
|
|
13
13
|
import i18n from './i18n';
|
|
14
14
|
import { checkYoutubeVideos } from './utils';
|
|
15
|
+
import { isYoutubePlayerInstance } from './utils/youtube';
|
|
15
16
|
import './ReactPlayer.css';
|
|
16
17
|
const b = block('ReactPlayer');
|
|
17
18
|
const FPS = 60;
|
|
@@ -49,8 +50,15 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
|
|
|
49
50
|
if (!playerRef) {
|
|
50
51
|
return;
|
|
51
52
|
}
|
|
53
|
+
let play, pause, addEventListener;
|
|
52
54
|
const videoInstance = playerRef.getInternalPlayer();
|
|
53
|
-
|
|
55
|
+
if (isYoutubePlayerInstance(videoInstance)) {
|
|
56
|
+
({ pauseVideo: pause, playVideo: play, addEventListener } = videoInstance);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
// it is assumed that `videoInstance` is HTMLVideoElement by default
|
|
60
|
+
({ play, pause, addEventListener } = videoInstance);
|
|
61
|
+
}
|
|
54
62
|
// eslint-disable-next-line consistent-return
|
|
55
63
|
return {
|
|
56
64
|
play: play.bind(videoInstance),
|
|
@@ -30,6 +30,7 @@ export declare const subBlockMap: {
|
|
|
30
30
|
content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
|
|
31
31
|
quote: (props: import("./models").QuoteProps) => JSX.Element;
|
|
32
32
|
"price-card": (props: import("./models").PriceCardProps) => JSX.Element;
|
|
33
|
+
"image-card": (props: import("./models").ImageCardProps) => JSX.Element;
|
|
33
34
|
};
|
|
34
35
|
export declare const navItemMap: {
|
|
35
36
|
button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
|
|
@@ -2,7 +2,7 @@ import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, Exten
|
|
|
2
2
|
import { BlockType, NavigationItemType, SubBlockType } from './models';
|
|
3
3
|
import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
|
|
4
4
|
import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
|
|
5
|
-
import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
|
|
5
|
+
import { BackgroundCard, BannerCard, BasicCard, Content, Divider, ImageCard, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
|
|
6
6
|
export const blockMap = {
|
|
7
7
|
[BlockType.SliderBlock]: SliderBlock,
|
|
8
8
|
[BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
|
|
@@ -35,6 +35,7 @@ export const subBlockMap = {
|
|
|
35
35
|
[SubBlockType.Content]: Content,
|
|
36
36
|
[SubBlockType.Quote]: Quote,
|
|
37
37
|
[SubBlockType.PriceCard]: PriceCard,
|
|
38
|
+
[SubBlockType.ImageCard]: ImageCard,
|
|
38
39
|
};
|
|
39
40
|
export const navItemMap = {
|
|
40
41
|
[NavigationItemType.Button]: NavigationButton,
|
|
@@ -62,6 +62,7 @@ export type ContentSize = 's' | 'l';
|
|
|
62
62
|
export type ContentTextSize = 's' | 'm' | 'l';
|
|
63
63
|
export type ContentTheme = 'default' | 'dark' | 'light';
|
|
64
64
|
export type FileLinkType = 'vertical' | 'horizontal';
|
|
65
|
+
export type ImageCardMargins = 's' | 'm';
|
|
65
66
|
export interface Themable {
|
|
66
67
|
theme?: TextTheme;
|
|
67
68
|
}
|
|
@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
|
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
5
5
|
import { ContentBlockProps } from './blocks';
|
|
6
|
-
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
6
|
+
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
7
7
|
export declare enum SubBlockType {
|
|
8
8
|
Divider = "divider",
|
|
9
9
|
Quote = "quote",
|
|
@@ -22,7 +22,8 @@ export declare enum SubBlockType {
|
|
|
22
22
|
* @deprecated Will be removed, use BasicCard instead
|
|
23
23
|
*/
|
|
24
24
|
Card = "card",
|
|
25
|
-
PriceCard = "price-card"
|
|
25
|
+
PriceCard = "price-card",
|
|
26
|
+
ImageCard = "image-card"
|
|
26
27
|
}
|
|
27
28
|
export declare enum IconPosition {
|
|
28
29
|
Top = "top",
|
|
@@ -35,6 +36,10 @@ export interface PositionedIcon {
|
|
|
35
36
|
export interface IconWrapperProps {
|
|
36
37
|
icon?: PositionedIcon;
|
|
37
38
|
}
|
|
39
|
+
export declare enum ImageCardDirection {
|
|
40
|
+
Direct = "direct",
|
|
41
|
+
Reverse = "reverse"
|
|
42
|
+
}
|
|
38
43
|
export declare const SubBlockTypes: SubBlockType[];
|
|
39
44
|
export interface DividerProps {
|
|
40
45
|
size?: DividerSize;
|
|
@@ -137,6 +142,13 @@ export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
|
|
|
137
142
|
fullscreen?: boolean;
|
|
138
143
|
icon?: PositionedIcon;
|
|
139
144
|
}
|
|
145
|
+
export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
|
|
146
|
+
image: ImageProps;
|
|
147
|
+
enableImageBorderRadius?: boolean;
|
|
148
|
+
margins?: ImageCardMargins;
|
|
149
|
+
direction?: ImageCardDirection;
|
|
150
|
+
backgroundColor?: string;
|
|
151
|
+
}
|
|
140
152
|
export type DividerModel = {
|
|
141
153
|
type: SubBlockType.Divider;
|
|
142
154
|
} & DividerProps;
|
|
@@ -167,5 +179,8 @@ export type BasicCardModel = {
|
|
|
167
179
|
export type PriceCardModel = {
|
|
168
180
|
type: SubBlockType.PriceCard;
|
|
169
181
|
} & PriceCardProps;
|
|
170
|
-
export type
|
|
182
|
+
export type ImageCardModel = {
|
|
183
|
+
type: SubBlockType.ImageCard;
|
|
184
|
+
} & ImageCardProps;
|
|
185
|
+
export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel | ImageCardModel;
|
|
171
186
|
export type SubBlock = SubBlockModels;
|
|
@@ -18,10 +18,16 @@ export var SubBlockType;
|
|
|
18
18
|
*/
|
|
19
19
|
SubBlockType["Card"] = "card";
|
|
20
20
|
SubBlockType["PriceCard"] = "price-card";
|
|
21
|
+
SubBlockType["ImageCard"] = "image-card";
|
|
21
22
|
})(SubBlockType || (SubBlockType = {}));
|
|
22
23
|
export var IconPosition;
|
|
23
24
|
(function (IconPosition) {
|
|
24
25
|
IconPosition["Top"] = "top";
|
|
25
26
|
IconPosition["Left"] = "left";
|
|
26
27
|
})(IconPosition || (IconPosition = {}));
|
|
28
|
+
export var ImageCardDirection;
|
|
29
|
+
(function (ImageCardDirection) {
|
|
30
|
+
ImageCardDirection["Direct"] = "direct";
|
|
31
|
+
ImageCardDirection["Reverse"] = "reverse";
|
|
32
|
+
})(ImageCardDirection || (ImageCardDirection = {}));
|
|
27
33
|
export const SubBlockTypes = Object.values(SubBlockType);
|
|
@@ -1,6 +1,82 @@
|
|
|
1
1
|
import { BlockType } from '../models';
|
|
2
2
|
export declare const blockSchemas: Record<BlockType, object>;
|
|
3
3
|
export declare const cardSchemas: {
|
|
4
|
+
'image-card': {
|
|
5
|
+
additionalProperties: boolean;
|
|
6
|
+
required: string[];
|
|
7
|
+
properties: {
|
|
8
|
+
image: {
|
|
9
|
+
oneOf: ({
|
|
10
|
+
type: string;
|
|
11
|
+
properties: {
|
|
12
|
+
when: {
|
|
13
|
+
type: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
} | {
|
|
17
|
+
type: string;
|
|
18
|
+
pattern: string;
|
|
19
|
+
optionName: string;
|
|
20
|
+
})[];
|
|
21
|
+
};
|
|
22
|
+
direction: {
|
|
23
|
+
type: string;
|
|
24
|
+
enum: string[];
|
|
25
|
+
};
|
|
26
|
+
margins: {
|
|
27
|
+
type: string;
|
|
28
|
+
enum: string[];
|
|
29
|
+
};
|
|
30
|
+
backgroundColor: {
|
|
31
|
+
type: string;
|
|
32
|
+
};
|
|
33
|
+
title: {
|
|
34
|
+
oneOf: ({
|
|
35
|
+
type: string;
|
|
36
|
+
contentType: string;
|
|
37
|
+
optionName: string;
|
|
38
|
+
} | {
|
|
39
|
+
optionName: string;
|
|
40
|
+
type: string;
|
|
41
|
+
additionalProperties: boolean;
|
|
42
|
+
required: string[];
|
|
43
|
+
properties: {
|
|
44
|
+
text: {
|
|
45
|
+
type: string;
|
|
46
|
+
contentType: string;
|
|
47
|
+
};
|
|
48
|
+
textSize: {
|
|
49
|
+
type: string;
|
|
50
|
+
enum: string[];
|
|
51
|
+
};
|
|
52
|
+
url: {
|
|
53
|
+
type: string;
|
|
54
|
+
};
|
|
55
|
+
urlTitle: {
|
|
56
|
+
type: string;
|
|
57
|
+
};
|
|
58
|
+
resetMargin: {
|
|
59
|
+
type: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
contentType?: undefined;
|
|
63
|
+
})[];
|
|
64
|
+
};
|
|
65
|
+
text: {
|
|
66
|
+
type: string;
|
|
67
|
+
contentType: string;
|
|
68
|
+
inputType: string;
|
|
69
|
+
};
|
|
70
|
+
border: {
|
|
71
|
+
type: string;
|
|
72
|
+
enum: string[];
|
|
73
|
+
};
|
|
74
|
+
type: {};
|
|
75
|
+
when: {
|
|
76
|
+
type: string;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
};
|
|
4
80
|
'price-card': {
|
|
5
81
|
additionalProperties: boolean;
|
|
6
82
|
required: string[];
|
|
@@ -986,6 +1062,10 @@ export declare const cardSchemas: {
|
|
|
986
1062
|
optionName: string;
|
|
987
1063
|
})[];
|
|
988
1064
|
};
|
|
1065
|
+
mediaView: {
|
|
1066
|
+
type: string;
|
|
1067
|
+
enum: string[];
|
|
1068
|
+
};
|
|
989
1069
|
disableCompress: {
|
|
990
1070
|
type: string;
|
|
991
1071
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BannerBlock, BannerCard, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './validators/blocks';
|
|
2
|
-
import { BackgroundCard, BasicCard, Divider, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
|
|
2
|
+
import { BackgroundCard, BasicCard, Divider, ImageCard, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
|
|
3
3
|
export const blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), TableBlock), TabsBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock), FormBlock);
|
|
4
|
-
export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock);
|
|
4
|
+
export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock), ImageCard);
|
|
5
5
|
export const constructorBlockSchemaNames = [
|
|
6
6
|
'divider',
|
|
7
7
|
'quote',
|
|
@@ -38,4 +38,5 @@ export const constructorCardSchemaNames = [
|
|
|
38
38
|
'basic-card',
|
|
39
39
|
'layout-item',
|
|
40
40
|
'price-card',
|
|
41
|
+
'image-card',
|
|
41
42
|
];
|
|
@@ -20,6 +20,7 @@ export declare const sizeNumber: {
|
|
|
20
20
|
};
|
|
21
21
|
export declare const contentThemes: string[];
|
|
22
22
|
export declare const quoteTypes: QuoteType[];
|
|
23
|
+
export declare const mediaView: string[];
|
|
23
24
|
export declare const customControlsType: CustomControlsType[];
|
|
24
25
|
export declare const customControlsButtonPositioning: CustomControlsButtonPositioning[];
|
|
25
26
|
export declare const BaseProps: {
|
|
@@ -17,6 +17,7 @@ export const dividerEnum = { enum: ['0', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'
|
|
|
17
17
|
export const sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
|
|
18
18
|
export const contentThemes = ['default', 'dark', 'light'];
|
|
19
19
|
export const quoteTypes = Object.values(QuoteType);
|
|
20
|
+
export const mediaView = ['fit', 'full'];
|
|
20
21
|
export const customControlsType = [
|
|
21
22
|
CustomControlsType.WithMuteButton,
|
|
22
23
|
CustomControlsType.WithPlayPauseButton,
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.pc-image-card_border_shadow {
|
|
2
|
+
box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
/* use this for style redefinitions to awoid problems with
|
|
6
|
+
unpredictable css rules order in build */
|
|
7
|
+
.pc-image-card {
|
|
8
|
+
min-height: 248px;
|
|
9
|
+
height: 100%;
|
|
10
|
+
overflow-x: hidden;
|
|
11
|
+
border-radius: var(--pc-border-radius);
|
|
12
|
+
background-color: var(--g-color-base-float);
|
|
13
|
+
transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
14
|
+
min-height: 1px;
|
|
15
|
+
}
|
|
16
|
+
.pc-image-card_border_line {
|
|
17
|
+
border: 1px solid var(--g-color-line-generic);
|
|
18
|
+
}
|
|
19
|
+
.pc-image-card .pc-image-card__content {
|
|
20
|
+
padding: 32px;
|
|
21
|
+
}
|
|
22
|
+
.pc-image-card .pc-image-card__image_inner {
|
|
23
|
+
width: 100%;
|
|
24
|
+
display: block;
|
|
25
|
+
}
|
|
26
|
+
.pc-image-card .pc-image-card__image_inner_radius {
|
|
27
|
+
border-radius: var(--pc-border-radius);
|
|
28
|
+
}
|
|
29
|
+
.pc-image-card .pc-image-card__image_margins_s {
|
|
30
|
+
padding: 4px;
|
|
31
|
+
}
|
|
32
|
+
.pc-image-card .pc-image-card__image_margins_s .pc-image-card__image_inner {
|
|
33
|
+
border-radius: calc(var(--pc-border-radius) - var(--pc-image-padding));
|
|
34
|
+
}
|
|
35
|
+
.pc-image-card .pc-image-card__image_margins_m {
|
|
36
|
+
padding: 32px;
|
|
37
|
+
}
|
|
38
|
+
.pc-image-card .pc-image-card__image_margins_m .pc-image-card__image_inner {
|
|
39
|
+
border-radius: initial;
|
|
40
|
+
}
|
|
41
|
+
.pc-image-card_with-content {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
}
|
|
45
|
+
.pc-image-card_with-content.pc-image-card_direction_direct .pc-image-card__image {
|
|
46
|
+
padding-bottom: 0;
|
|
47
|
+
}
|
|
48
|
+
.pc-image-card_with-content.pc-image-card_direction_direct .pc-image-card__content {
|
|
49
|
+
padding-top: 24px;
|
|
50
|
+
}
|
|
51
|
+
.pc-image-card_with-content.pc-image-card_direction_reverse {
|
|
52
|
+
flex-direction: column-reverse;
|
|
53
|
+
}
|
|
54
|
+
.pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__image {
|
|
55
|
+
padding-top: 0;
|
|
56
|
+
}
|
|
57
|
+
.pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__content {
|
|
58
|
+
padding-bottom: 24px;
|
|
59
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Image } from '../../components';
|
|
3
|
+
import { getMediaImage } from '../../components/Media/Image/utils';
|
|
4
|
+
import { ImageCardDirection } from '../../models';
|
|
5
|
+
import { block } from '../../utils';
|
|
6
|
+
import Content from '../Content/Content';
|
|
7
|
+
import './ImageCard.css';
|
|
8
|
+
const b = block('image-card');
|
|
9
|
+
const ImageCard = (props) => {
|
|
10
|
+
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, } = props;
|
|
11
|
+
const hasContent = Boolean(text || title);
|
|
12
|
+
const imageProps = getMediaImage(image);
|
|
13
|
+
return (React.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } },
|
|
14
|
+
React.createElement("div", { className: b('image', { margins }) },
|
|
15
|
+
React.createElement(Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
|
|
16
|
+
hasContent && (React.createElement("div", { className: b('content') },
|
|
17
|
+
React.createElement(Content, { title: title, text: text, colSizes: { all: 12, md: 12 }, size: "s" })))));
|
|
18
|
+
};
|
|
19
|
+
export default ImageCard;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
export declare const ImageCard: {
|
|
2
|
+
'image-card': {
|
|
3
|
+
additionalProperties: boolean;
|
|
4
|
+
required: string[];
|
|
5
|
+
properties: {
|
|
6
|
+
image: {
|
|
7
|
+
oneOf: ({
|
|
8
|
+
type: string;
|
|
9
|
+
properties: {
|
|
10
|
+
when: {
|
|
11
|
+
type: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
} | {
|
|
15
|
+
type: string;
|
|
16
|
+
pattern: string;
|
|
17
|
+
optionName: string;
|
|
18
|
+
})[];
|
|
19
|
+
};
|
|
20
|
+
direction: {
|
|
21
|
+
type: string;
|
|
22
|
+
enum: string[];
|
|
23
|
+
};
|
|
24
|
+
margins: {
|
|
25
|
+
type: string;
|
|
26
|
+
enum: string[];
|
|
27
|
+
};
|
|
28
|
+
backgroundColor: {
|
|
29
|
+
type: string;
|
|
30
|
+
};
|
|
31
|
+
title: {
|
|
32
|
+
oneOf: ({
|
|
33
|
+
type: string;
|
|
34
|
+
contentType: string;
|
|
35
|
+
optionName: string;
|
|
36
|
+
} | {
|
|
37
|
+
optionName: string;
|
|
38
|
+
type: string;
|
|
39
|
+
additionalProperties: boolean;
|
|
40
|
+
required: string[];
|
|
41
|
+
properties: {
|
|
42
|
+
text: {
|
|
43
|
+
type: string;
|
|
44
|
+
contentType: string;
|
|
45
|
+
};
|
|
46
|
+
textSize: {
|
|
47
|
+
type: string;
|
|
48
|
+
enum: string[];
|
|
49
|
+
};
|
|
50
|
+
url: {
|
|
51
|
+
type: string;
|
|
52
|
+
};
|
|
53
|
+
urlTitle: {
|
|
54
|
+
type: string;
|
|
55
|
+
};
|
|
56
|
+
resetMargin: {
|
|
57
|
+
type: string;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
contentType?: undefined;
|
|
61
|
+
})[];
|
|
62
|
+
};
|
|
63
|
+
text: {
|
|
64
|
+
type: string;
|
|
65
|
+
contentType: string;
|
|
66
|
+
inputType: string;
|
|
67
|
+
};
|
|
68
|
+
border: {
|
|
69
|
+
type: string;
|
|
70
|
+
enum: string[];
|
|
71
|
+
};
|
|
72
|
+
type: {};
|
|
73
|
+
when: {
|
|
74
|
+
type: string;
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import pick from 'lodash/pick';
|
|
2
|
+
import { BaseProps, CardBase } from '../../schema/validators/common';
|
|
3
|
+
import { ImageProps } from '../../schema/validators/components';
|
|
4
|
+
import { ContentBase } from '../Content/schema';
|
|
5
|
+
const ImageCardBlockContentProps = pick(ContentBase, ['title', 'text']);
|
|
6
|
+
export const ImageCard = {
|
|
7
|
+
'image-card': {
|
|
8
|
+
additionalProperties: false,
|
|
9
|
+
required: ['image'],
|
|
10
|
+
properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), CardBase), ImageCardBlockContentProps), { image: ImageProps, direction: {
|
|
11
|
+
type: 'string',
|
|
12
|
+
enum: ['direct', 'reverse'],
|
|
13
|
+
}, margins: {
|
|
14
|
+
type: 'string',
|
|
15
|
+
enum: ['s', 'm'],
|
|
16
|
+
}, backgroundColor: {
|
|
17
|
+
type: 'string',
|
|
18
|
+
} }),
|
|
19
|
+
},
|
|
20
|
+
};
|
|
@@ -9,3 +9,4 @@ export { default as BasicCard } from './BasicCard/BasicCard';
|
|
|
9
9
|
export { default as Content } from './Content/Content';
|
|
10
10
|
export { default as HubspotForm } from './HubspotForm';
|
|
11
11
|
export { default as PriceCard } from './PriceCard/PriceCard';
|
|
12
|
+
export { default as ImageCard } from './ImageCard/ImageCard';
|
|
@@ -9,3 +9,4 @@ export { default as BasicCard } from './BasicCard/BasicCard';
|
|
|
9
9
|
export { default as Content } from './Content/Content';
|
|
10
10
|
export { default as HubspotForm } from './HubspotForm';
|
|
11
11
|
export { default as PriceCard } from './PriceCard/PriceCard';
|
|
12
|
+
export { default as ImageCard } from './ImageCard/ImageCard';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/page-constructor",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.52.0",
|
|
4
4
|
"description": "Gravity UI Page Constructor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -144,6 +144,7 @@
|
|
|
144
144
|
"@types/sanitize-html": "2.6.1",
|
|
145
145
|
"@types/uuid": "^9.0.0",
|
|
146
146
|
"@types/webpack-env": "^1.18.1",
|
|
147
|
+
"@types/youtube-player": "^5.5.11",
|
|
147
148
|
"autoprefixer": "^10.4.14",
|
|
148
149
|
"babel-loader": "^8.3.0",
|
|
149
150
|
"css-loader": "^5.2.7",
|
|
@@ -62,6 +62,7 @@ export type ContentSize = 's' | 'l';
|
|
|
62
62
|
export type ContentTextSize = 's' | 'm' | 'l';
|
|
63
63
|
export type ContentTheme = 'default' | 'dark' | 'light';
|
|
64
64
|
export type FileLinkType = 'vertical' | 'horizontal';
|
|
65
|
+
export type ImageCardMargins = 's' | 'm';
|
|
65
66
|
export interface Themable {
|
|
66
67
|
theme?: TextTheme;
|
|
67
68
|
}
|
|
@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
|
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
5
5
|
import { ContentBlockProps } from './blocks';
|
|
6
|
-
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
6
|
+
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
7
7
|
export declare enum SubBlockType {
|
|
8
8
|
Divider = "divider",
|
|
9
9
|
Quote = "quote",
|
|
@@ -22,7 +22,8 @@ export declare enum SubBlockType {
|
|
|
22
22
|
* @deprecated Will be removed, use BasicCard instead
|
|
23
23
|
*/
|
|
24
24
|
Card = "card",
|
|
25
|
-
PriceCard = "price-card"
|
|
25
|
+
PriceCard = "price-card",
|
|
26
|
+
ImageCard = "image-card"
|
|
26
27
|
}
|
|
27
28
|
export declare enum IconPosition {
|
|
28
29
|
Top = "top",
|
|
@@ -35,6 +36,10 @@ export interface PositionedIcon {
|
|
|
35
36
|
export interface IconWrapperProps {
|
|
36
37
|
icon?: PositionedIcon;
|
|
37
38
|
}
|
|
39
|
+
export declare enum ImageCardDirection {
|
|
40
|
+
Direct = "direct",
|
|
41
|
+
Reverse = "reverse"
|
|
42
|
+
}
|
|
38
43
|
export declare const SubBlockTypes: SubBlockType[];
|
|
39
44
|
export interface DividerProps {
|
|
40
45
|
size?: DividerSize;
|
|
@@ -137,6 +142,13 @@ export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
|
|
|
137
142
|
fullscreen?: boolean;
|
|
138
143
|
icon?: PositionedIcon;
|
|
139
144
|
}
|
|
145
|
+
export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
|
|
146
|
+
image: ImageProps;
|
|
147
|
+
enableImageBorderRadius?: boolean;
|
|
148
|
+
margins?: ImageCardMargins;
|
|
149
|
+
direction?: ImageCardDirection;
|
|
150
|
+
backgroundColor?: string;
|
|
151
|
+
}
|
|
140
152
|
export type DividerModel = {
|
|
141
153
|
type: SubBlockType.Divider;
|
|
142
154
|
} & DividerProps;
|
|
@@ -167,5 +179,8 @@ export type BasicCardModel = {
|
|
|
167
179
|
export type PriceCardModel = {
|
|
168
180
|
type: SubBlockType.PriceCard;
|
|
169
181
|
} & PriceCardProps;
|
|
170
|
-
export type
|
|
182
|
+
export type ImageCardModel = {
|
|
183
|
+
type: SubBlockType.ImageCard;
|
|
184
|
+
} & ImageCardProps;
|
|
185
|
+
export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel | ImageCardModel;
|
|
171
186
|
export type SubBlock = SubBlockModels;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SubBlockTypes = exports.IconPosition = exports.SubBlockType = void 0;
|
|
3
|
+
exports.SubBlockTypes = exports.ImageCardDirection = exports.IconPosition = exports.SubBlockType = void 0;
|
|
4
4
|
var SubBlockType;
|
|
5
5
|
(function (SubBlockType) {
|
|
6
6
|
SubBlockType["Divider"] = "divider";
|
|
@@ -21,10 +21,16 @@ var SubBlockType;
|
|
|
21
21
|
*/
|
|
22
22
|
SubBlockType["Card"] = "card";
|
|
23
23
|
SubBlockType["PriceCard"] = "price-card";
|
|
24
|
+
SubBlockType["ImageCard"] = "image-card";
|
|
24
25
|
})(SubBlockType = exports.SubBlockType || (exports.SubBlockType = {}));
|
|
25
26
|
var IconPosition;
|
|
26
27
|
(function (IconPosition) {
|
|
27
28
|
IconPosition["Top"] = "top";
|
|
28
29
|
IconPosition["Left"] = "left";
|
|
29
30
|
})(IconPosition = exports.IconPosition || (exports.IconPosition = {}));
|
|
31
|
+
var ImageCardDirection;
|
|
32
|
+
(function (ImageCardDirection) {
|
|
33
|
+
ImageCardDirection["Direct"] = "direct";
|
|
34
|
+
ImageCardDirection["Reverse"] = "reverse";
|
|
35
|
+
})(ImageCardDirection = exports.ImageCardDirection || (exports.ImageCardDirection = {}));
|
|
30
36
|
exports.SubBlockTypes = Object.values(SubBlockType);
|