@gravity-ui/page-constructor 4.57.3 → 4.58.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/models/constructor-items/sub-blocks.d.ts +4 -1
- package/build/cjs/schema/constants.d.ts +55 -4
- package/build/cjs/sub-blocks/ImageCard/ImageCard.js +10 -4
- package/build/cjs/sub-blocks/ImageCard/schema.d.ts +55 -4
- package/build/cjs/sub-blocks/ImageCard/schema.js +6 -2
- package/build/esm/models/constructor-items/sub-blocks.d.ts +4 -1
- package/build/esm/schema/constants.d.ts +55 -4
- package/build/esm/sub-blocks/ImageCard/ImageCard.js +10 -4
- package/build/esm/sub-blocks/ImageCard/schema.d.ts +55 -4
- package/build/esm/sub-blocks/ImageCard/schema.js +6 -2
- package/package.json +1 -1
- package/server/models/constructor-items/sub-blocks.d.ts +4 -1
- package/widget/index.js +1 -1
|
@@ -142,12 +142,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
|
|
|
142
142
|
fullscreen?: boolean;
|
|
143
143
|
icon?: PositionedIcon;
|
|
144
144
|
}
|
|
145
|
-
export interface ImageCardProps extends CardBaseProps,
|
|
145
|
+
export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
|
|
146
146
|
image: ImageProps;
|
|
147
147
|
enableImageBorderRadius?: boolean;
|
|
148
148
|
margins?: ImageCardMargins;
|
|
149
149
|
direction?: ImageCardDirection;
|
|
150
150
|
backgroundColor?: string;
|
|
151
|
+
url?: string;
|
|
152
|
+
urlTitle?: string;
|
|
153
|
+
target?: string;
|
|
151
154
|
}
|
|
152
155
|
export type DividerModel = {
|
|
153
156
|
type: SubBlockType.Divider;
|
|
@@ -30,7 +30,13 @@ export declare const cardSchemas: {
|
|
|
30
30
|
backgroundColor: {
|
|
31
31
|
type: string;
|
|
32
32
|
};
|
|
33
|
-
|
|
33
|
+
url: {
|
|
34
|
+
type: string;
|
|
35
|
+
};
|
|
36
|
+
urlTitle: {
|
|
37
|
+
type: string;
|
|
38
|
+
};
|
|
39
|
+
title?: {
|
|
34
40
|
oneOf: ({
|
|
35
41
|
type: string;
|
|
36
42
|
contentType: string;
|
|
@@ -61,12 +67,57 @@ export declare const cardSchemas: {
|
|
|
61
67
|
};
|
|
62
68
|
contentType?: undefined;
|
|
63
69
|
})[];
|
|
64
|
-
};
|
|
65
|
-
text
|
|
70
|
+
} | undefined;
|
|
71
|
+
text?: {
|
|
66
72
|
type: string;
|
|
67
73
|
contentType: string;
|
|
68
74
|
inputType: string;
|
|
69
|
-
};
|
|
75
|
+
} | undefined;
|
|
76
|
+
additionalInfo?: {
|
|
77
|
+
type: string;
|
|
78
|
+
contentType: string;
|
|
79
|
+
} | undefined;
|
|
80
|
+
size?: {
|
|
81
|
+
type: string;
|
|
82
|
+
enum: string[];
|
|
83
|
+
} | undefined;
|
|
84
|
+
links?: {
|
|
85
|
+
type: string;
|
|
86
|
+
items: {
|
|
87
|
+
type: string;
|
|
88
|
+
properties: {
|
|
89
|
+
when: {
|
|
90
|
+
type: string;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
} | undefined;
|
|
95
|
+
buttons?: {
|
|
96
|
+
type: string;
|
|
97
|
+
items: {
|
|
98
|
+
type: string;
|
|
99
|
+
properties: {
|
|
100
|
+
when: {
|
|
101
|
+
type: string;
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
} | undefined;
|
|
106
|
+
theme?: {
|
|
107
|
+
type: string;
|
|
108
|
+
enum: string[];
|
|
109
|
+
} | undefined;
|
|
110
|
+
list?: {
|
|
111
|
+
type: string;
|
|
112
|
+
items: {
|
|
113
|
+
type: string;
|
|
114
|
+
properties: {
|
|
115
|
+
when: {
|
|
116
|
+
type: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
} | undefined;
|
|
70
121
|
border: {
|
|
71
122
|
type: string;
|
|
72
123
|
enum: string[];
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
5
|
+
const uikit_1 = require("@gravity-ui/uikit");
|
|
5
6
|
const components_1 = require("../../components");
|
|
6
7
|
const utils_1 = require("../../components/Media/Image/utils");
|
|
7
8
|
const models_1 = require("../../models");
|
|
@@ -9,13 +10,18 @@ const utils_2 = require("../../utils");
|
|
|
9
10
|
const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
|
|
10
11
|
const b = (0, utils_2.block)('image-card');
|
|
11
12
|
const ImageCard = (props) => {
|
|
12
|
-
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, } = props;
|
|
13
|
-
const hasContent = Boolean(text || title);
|
|
13
|
+
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', } = props;
|
|
14
|
+
const hasContent = Boolean(text || title || buttons || links || list);
|
|
14
15
|
const imageProps = (0, utils_1.getMediaImage)(image);
|
|
15
|
-
|
|
16
|
+
const titleId = (0, uikit_1.useUniqId)();
|
|
17
|
+
const cardContent = (react_1.default.createElement(react_1.default.Fragment, null,
|
|
16
18
|
react_1.default.createElement("div", { className: b('image', { margins }) },
|
|
17
19
|
react_1.default.createElement(components_1.Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
|
|
18
20
|
hasContent && (react_1.default.createElement("div", { className: b('content') },
|
|
19
|
-
react_1.default.createElement(Content_1.default, { title: title, text: text, colSizes: { all: 12, md: 12 }
|
|
21
|
+
react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })))));
|
|
22
|
+
return url ? (react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
|
|
23
|
+
draggable: false,
|
|
24
|
+
onDragStart: (e) => e.preventDefault(),
|
|
25
|
+
} }, cardContent)) : (react_1.default.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } }, cardContent));
|
|
20
26
|
};
|
|
21
27
|
exports.default = ImageCard;
|
|
@@ -28,7 +28,13 @@ export declare const ImageCard: {
|
|
|
28
28
|
backgroundColor: {
|
|
29
29
|
type: string;
|
|
30
30
|
};
|
|
31
|
-
|
|
31
|
+
url: {
|
|
32
|
+
type: string;
|
|
33
|
+
};
|
|
34
|
+
urlTitle: {
|
|
35
|
+
type: string;
|
|
36
|
+
};
|
|
37
|
+
title?: {
|
|
32
38
|
oneOf: ({
|
|
33
39
|
type: string;
|
|
34
40
|
contentType: string;
|
|
@@ -59,12 +65,57 @@ export declare const ImageCard: {
|
|
|
59
65
|
};
|
|
60
66
|
contentType?: undefined;
|
|
61
67
|
})[];
|
|
62
|
-
};
|
|
63
|
-
text
|
|
68
|
+
} | undefined;
|
|
69
|
+
text?: {
|
|
64
70
|
type: string;
|
|
65
71
|
contentType: string;
|
|
66
72
|
inputType: string;
|
|
67
|
-
};
|
|
73
|
+
} | undefined;
|
|
74
|
+
additionalInfo?: {
|
|
75
|
+
type: string;
|
|
76
|
+
contentType: string;
|
|
77
|
+
} | undefined;
|
|
78
|
+
size?: {
|
|
79
|
+
type: string;
|
|
80
|
+
enum: string[];
|
|
81
|
+
} | undefined;
|
|
82
|
+
links?: {
|
|
83
|
+
type: string;
|
|
84
|
+
items: {
|
|
85
|
+
type: string;
|
|
86
|
+
properties: {
|
|
87
|
+
when: {
|
|
88
|
+
type: string;
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
} | undefined;
|
|
93
|
+
buttons?: {
|
|
94
|
+
type: string;
|
|
95
|
+
items: {
|
|
96
|
+
type: string;
|
|
97
|
+
properties: {
|
|
98
|
+
when: {
|
|
99
|
+
type: string;
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
} | undefined;
|
|
104
|
+
theme?: {
|
|
105
|
+
type: string;
|
|
106
|
+
enum: string[];
|
|
107
|
+
} | undefined;
|
|
108
|
+
list?: {
|
|
109
|
+
type: string;
|
|
110
|
+
items: {
|
|
111
|
+
type: string;
|
|
112
|
+
properties: {
|
|
113
|
+
when: {
|
|
114
|
+
type: string;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
} | undefined;
|
|
68
119
|
border: {
|
|
69
120
|
type: string;
|
|
70
121
|
enum: string[];
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ImageCard = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
|
-
const
|
|
5
|
+
const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
|
|
6
6
|
const common_1 = require("../../schema/validators/common");
|
|
7
7
|
const components_1 = require("../../schema/validators/components");
|
|
8
8
|
const schema_1 = require("../Content/schema");
|
|
9
|
-
const ImageCardBlockContentProps = (0,
|
|
9
|
+
const ImageCardBlockContentProps = (0, omit_1.default)(schema_1.ContentBase, ['centered', 'colSizes']);
|
|
10
10
|
exports.ImageCard = {
|
|
11
11
|
'image-card': {
|
|
12
12
|
additionalProperties: false,
|
|
@@ -19,6 +19,10 @@ exports.ImageCard = {
|
|
|
19
19
|
enum: ['s', 'm'],
|
|
20
20
|
}, backgroundColor: {
|
|
21
21
|
type: 'string',
|
|
22
|
+
}, url: {
|
|
23
|
+
type: 'string',
|
|
24
|
+
}, urlTitle: {
|
|
25
|
+
type: 'string',
|
|
22
26
|
} }),
|
|
23
27
|
},
|
|
24
28
|
};
|
|
@@ -142,12 +142,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
|
|
|
142
142
|
fullscreen?: boolean;
|
|
143
143
|
icon?: PositionedIcon;
|
|
144
144
|
}
|
|
145
|
-
export interface ImageCardProps extends CardBaseProps,
|
|
145
|
+
export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
|
|
146
146
|
image: ImageProps;
|
|
147
147
|
enableImageBorderRadius?: boolean;
|
|
148
148
|
margins?: ImageCardMargins;
|
|
149
149
|
direction?: ImageCardDirection;
|
|
150
150
|
backgroundColor?: string;
|
|
151
|
+
url?: string;
|
|
152
|
+
urlTitle?: string;
|
|
153
|
+
target?: string;
|
|
151
154
|
}
|
|
152
155
|
export type DividerModel = {
|
|
153
156
|
type: SubBlockType.Divider;
|
|
@@ -30,7 +30,13 @@ export declare const cardSchemas: {
|
|
|
30
30
|
backgroundColor: {
|
|
31
31
|
type: string;
|
|
32
32
|
};
|
|
33
|
-
|
|
33
|
+
url: {
|
|
34
|
+
type: string;
|
|
35
|
+
};
|
|
36
|
+
urlTitle: {
|
|
37
|
+
type: string;
|
|
38
|
+
};
|
|
39
|
+
title?: {
|
|
34
40
|
oneOf: ({
|
|
35
41
|
type: string;
|
|
36
42
|
contentType: string;
|
|
@@ -61,12 +67,57 @@ export declare const cardSchemas: {
|
|
|
61
67
|
};
|
|
62
68
|
contentType?: undefined;
|
|
63
69
|
})[];
|
|
64
|
-
};
|
|
65
|
-
text
|
|
70
|
+
} | undefined;
|
|
71
|
+
text?: {
|
|
66
72
|
type: string;
|
|
67
73
|
contentType: string;
|
|
68
74
|
inputType: string;
|
|
69
|
-
};
|
|
75
|
+
} | undefined;
|
|
76
|
+
additionalInfo?: {
|
|
77
|
+
type: string;
|
|
78
|
+
contentType: string;
|
|
79
|
+
} | undefined;
|
|
80
|
+
size?: {
|
|
81
|
+
type: string;
|
|
82
|
+
enum: string[];
|
|
83
|
+
} | undefined;
|
|
84
|
+
links?: {
|
|
85
|
+
type: string;
|
|
86
|
+
items: {
|
|
87
|
+
type: string;
|
|
88
|
+
properties: {
|
|
89
|
+
when: {
|
|
90
|
+
type: string;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
} | undefined;
|
|
95
|
+
buttons?: {
|
|
96
|
+
type: string;
|
|
97
|
+
items: {
|
|
98
|
+
type: string;
|
|
99
|
+
properties: {
|
|
100
|
+
when: {
|
|
101
|
+
type: string;
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
} | undefined;
|
|
106
|
+
theme?: {
|
|
107
|
+
type: string;
|
|
108
|
+
enum: string[];
|
|
109
|
+
} | undefined;
|
|
110
|
+
list?: {
|
|
111
|
+
type: string;
|
|
112
|
+
items: {
|
|
113
|
+
type: string;
|
|
114
|
+
properties: {
|
|
115
|
+
when: {
|
|
116
|
+
type: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
} | undefined;
|
|
70
121
|
border: {
|
|
71
122
|
type: string;
|
|
72
123
|
enum: string[];
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Link, useUniqId } from '@gravity-ui/uikit';
|
|
2
3
|
import { Image } from '../../components';
|
|
3
4
|
import { getMediaImage } from '../../components/Media/Image/utils';
|
|
4
5
|
import { ImageCardDirection } from '../../models';
|
|
@@ -7,13 +8,18 @@ import Content from '../Content/Content';
|
|
|
7
8
|
import './ImageCard.css';
|
|
8
9
|
const b = block('image-card');
|
|
9
10
|
const ImageCard = (props) => {
|
|
10
|
-
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, } = props;
|
|
11
|
-
const hasContent = Boolean(text || title);
|
|
11
|
+
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', } = props;
|
|
12
|
+
const hasContent = Boolean(text || title || buttons || links || list);
|
|
12
13
|
const imageProps = getMediaImage(image);
|
|
13
|
-
|
|
14
|
+
const titleId = useUniqId();
|
|
15
|
+
const cardContent = (React.createElement(React.Fragment, null,
|
|
14
16
|
React.createElement("div", { className: b('image', { margins }) },
|
|
15
17
|
React.createElement(Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
|
|
16
18
|
hasContent && (React.createElement("div", { className: b('content') },
|
|
17
|
-
React.createElement(Content, { title: title, text: text, colSizes: { all: 12, md: 12 }
|
|
19
|
+
React.createElement(Content, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })))));
|
|
20
|
+
return url ? (React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
|
|
21
|
+
draggable: false,
|
|
22
|
+
onDragStart: (e) => e.preventDefault(),
|
|
23
|
+
} }, cardContent)) : (React.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } }, cardContent));
|
|
18
24
|
};
|
|
19
25
|
export default ImageCard;
|
|
@@ -28,7 +28,13 @@ export declare const ImageCard: {
|
|
|
28
28
|
backgroundColor: {
|
|
29
29
|
type: string;
|
|
30
30
|
};
|
|
31
|
-
|
|
31
|
+
url: {
|
|
32
|
+
type: string;
|
|
33
|
+
};
|
|
34
|
+
urlTitle: {
|
|
35
|
+
type: string;
|
|
36
|
+
};
|
|
37
|
+
title?: {
|
|
32
38
|
oneOf: ({
|
|
33
39
|
type: string;
|
|
34
40
|
contentType: string;
|
|
@@ -59,12 +65,57 @@ export declare const ImageCard: {
|
|
|
59
65
|
};
|
|
60
66
|
contentType?: undefined;
|
|
61
67
|
})[];
|
|
62
|
-
};
|
|
63
|
-
text
|
|
68
|
+
} | undefined;
|
|
69
|
+
text?: {
|
|
64
70
|
type: string;
|
|
65
71
|
contentType: string;
|
|
66
72
|
inputType: string;
|
|
67
|
-
};
|
|
73
|
+
} | undefined;
|
|
74
|
+
additionalInfo?: {
|
|
75
|
+
type: string;
|
|
76
|
+
contentType: string;
|
|
77
|
+
} | undefined;
|
|
78
|
+
size?: {
|
|
79
|
+
type: string;
|
|
80
|
+
enum: string[];
|
|
81
|
+
} | undefined;
|
|
82
|
+
links?: {
|
|
83
|
+
type: string;
|
|
84
|
+
items: {
|
|
85
|
+
type: string;
|
|
86
|
+
properties: {
|
|
87
|
+
when: {
|
|
88
|
+
type: string;
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
} | undefined;
|
|
93
|
+
buttons?: {
|
|
94
|
+
type: string;
|
|
95
|
+
items: {
|
|
96
|
+
type: string;
|
|
97
|
+
properties: {
|
|
98
|
+
when: {
|
|
99
|
+
type: string;
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
} | undefined;
|
|
104
|
+
theme?: {
|
|
105
|
+
type: string;
|
|
106
|
+
enum: string[];
|
|
107
|
+
} | undefined;
|
|
108
|
+
list?: {
|
|
109
|
+
type: string;
|
|
110
|
+
items: {
|
|
111
|
+
type: string;
|
|
112
|
+
properties: {
|
|
113
|
+
when: {
|
|
114
|
+
type: string;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
} | undefined;
|
|
68
119
|
border: {
|
|
69
120
|
type: string;
|
|
70
121
|
enum: string[];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import omit from 'lodash/omit';
|
|
2
2
|
import { BaseProps, CardBase } from '../../schema/validators/common';
|
|
3
3
|
import { ImageProps } from '../../schema/validators/components';
|
|
4
4
|
import { ContentBase } from '../Content/schema';
|
|
5
|
-
const ImageCardBlockContentProps =
|
|
5
|
+
const ImageCardBlockContentProps = omit(ContentBase, ['centered', 'colSizes']);
|
|
6
6
|
export const ImageCard = {
|
|
7
7
|
'image-card': {
|
|
8
8
|
additionalProperties: false,
|
|
@@ -15,6 +15,10 @@ export const ImageCard = {
|
|
|
15
15
|
enum: ['s', 'm'],
|
|
16
16
|
}, backgroundColor: {
|
|
17
17
|
type: 'string',
|
|
18
|
+
}, url: {
|
|
19
|
+
type: 'string',
|
|
20
|
+
}, urlTitle: {
|
|
21
|
+
type: 'string',
|
|
18
22
|
} }),
|
|
19
23
|
},
|
|
20
24
|
};
|
package/package.json
CHANGED
|
@@ -142,12 +142,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
|
|
|
142
142
|
fullscreen?: boolean;
|
|
143
143
|
icon?: PositionedIcon;
|
|
144
144
|
}
|
|
145
|
-
export interface ImageCardProps extends CardBaseProps,
|
|
145
|
+
export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
|
|
146
146
|
image: ImageProps;
|
|
147
147
|
enableImageBorderRadius?: boolean;
|
|
148
148
|
margins?: ImageCardMargins;
|
|
149
149
|
direction?: ImageCardDirection;
|
|
150
150
|
backgroundColor?: string;
|
|
151
|
+
url?: string;
|
|
152
|
+
urlTitle?: string;
|
|
153
|
+
target?: string;
|
|
151
154
|
}
|
|
152
155
|
export type DividerModel = {
|
|
153
156
|
type: SubBlockType.Divider;
|