@gravity-ui/page-constructor 1.2.5 → 1.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/build/cjs/blocks/Companies/Companies.js +2 -6
- package/build/cjs/blocks/ContentLayout/schema.js +2 -1
- package/build/cjs/blocks/Header/Header.css +11 -10
- package/build/cjs/blocks/Header/Header.js +15 -15
- package/build/cjs/blocks/Header/schema.d.ts +332 -230
- package/build/cjs/blocks/Header/schema.js +6 -20
- package/build/cjs/blocks/HeaderSlider/schema.d.ts +96 -115
- package/build/cjs/blocks/Tabs/Tabs.js +3 -2
- package/build/cjs/blocks/Tabs/schema.js +2 -1
- package/build/cjs/components/BackgroundImage/BackgroundImage.js +2 -2
- package/build/cjs/components/BackgroundMedia/BackgroundMedia.css +2 -0
- package/build/cjs/components/Image/Image.d.ts +2 -4
- package/build/cjs/components/Image/Image.js +16 -6
- package/build/cjs/components/Image/schema.d.ts +56 -0
- package/build/cjs/components/Image/schema.js +54 -0
- package/build/cjs/components/Media/Image/Image.js +3 -3
- package/build/cjs/components/Media/Image/utils.d.ts +2 -2
- package/build/cjs/models/constructor-items/blocks.d.ts +4 -8
- package/build/cjs/models/constructor-items/common.d.ts +11 -7
- package/build/cjs/models/guards.d.ts +2 -3
- package/build/cjs/models/guards.js +1 -5
- package/build/cjs/schema/validators/common.d.ts +0 -31
- package/build/cjs/schema/validators/common.js +5 -32
- package/build/cjs/sub-blocks/BackgroundCard/schema.js +2 -1
- package/build/cjs/sub-blocks/BasicCard/BasicCard.js +1 -1
- package/build/cjs/sub-blocks/BasicCard/schema.js +2 -1
- package/build/cjs/sub-blocks/Partner/Partner.js +1 -1
- package/build/cjs/sub-blocks/Partner/schema.js +2 -1
- package/build/cjs/sub-blocks/Quote/Quote.js +3 -2
- package/build/cjs/sub-blocks/Quote/schema.js +4 -3
- package/build/cjs/sub-blocks/TutorialCard/TutorialCard.js +2 -2
- package/build/cjs/sub-blocks/TutorialCard/schema.js +2 -1
- package/build/esm/blocks/Companies/Companies.js +2 -6
- package/build/esm/blocks/ContentLayout/schema.js +2 -1
- package/build/esm/blocks/Header/Header.css +11 -10
- package/build/esm/blocks/Header/Header.js +16 -16
- package/build/esm/blocks/Header/schema.d.ts +332 -230
- package/build/esm/blocks/Header/schema.js +5 -19
- package/build/esm/blocks/HeaderSlider/schema.d.ts +96 -115
- package/build/esm/blocks/Tabs/Tabs.js +3 -2
- package/build/esm/blocks/Tabs/schema.js +2 -1
- package/build/esm/components/BackgroundImage/BackgroundImage.js +2 -2
- package/build/esm/components/BackgroundMedia/BackgroundMedia.css +2 -0
- package/build/esm/components/Image/Image.d.ts +2 -4
- package/build/esm/components/Image/Image.js +17 -7
- package/build/esm/components/Image/schema.d.ts +56 -0
- package/build/esm/components/Image/schema.js +51 -0
- package/build/esm/components/Media/Image/Image.js +3 -3
- package/build/esm/components/Media/Image/utils.d.ts +2 -2
- package/build/esm/models/constructor-items/blocks.d.ts +4 -8
- package/build/esm/models/constructor-items/common.d.ts +11 -7
- package/build/esm/models/guards.d.ts +2 -3
- package/build/esm/models/guards.js +0 -3
- package/build/esm/schema/validators/common.d.ts +0 -31
- package/build/esm/schema/validators/common.js +1 -28
- package/build/esm/sub-blocks/BackgroundCard/schema.js +2 -1
- package/build/esm/sub-blocks/BasicCard/BasicCard.js +1 -1
- package/build/esm/sub-blocks/BasicCard/schema.js +2 -1
- package/build/esm/sub-blocks/Partner/Partner.js +1 -1
- package/build/esm/sub-blocks/Partner/schema.js +2 -1
- package/build/esm/sub-blocks/Quote/Quote.js +3 -2
- package/build/esm/sub-blocks/Quote/schema.js +2 -1
- package/build/esm/sub-blocks/TutorialCard/TutorialCard.js +2 -2
- package/build/esm/sub-blocks/TutorialCard/schema.js +2 -1
- package/package.json +1 -1
- package/server/models/constructor-items/blocks.d.ts +4 -8
- package/server/models/constructor-items/common.d.ts +11 -7
- package/server/models/guards.d.ts +2 -3
- package/server/models/guards.js +1 -5
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.HeaderBlock = exports.HeaderProperties = void 0;
|
|
3
|
+
exports.HeaderBlock = exports.HeaderProperties = exports.HeaderBackgroundProps = void 0;
|
|
4
4
|
const common_1 = require("../../schema/validators/common");
|
|
5
5
|
const utils_1 = require("../../schema/validators/utils");
|
|
6
|
-
const
|
|
6
|
+
const schema_1 = require("../../components/Image/schema");
|
|
7
|
+
exports.HeaderBackgroundProps = {
|
|
7
8
|
type: 'object',
|
|
8
9
|
additionalProperties: false,
|
|
9
10
|
required: [],
|
|
10
|
-
properties: Object.assign(Object.assign({}, common_1.MediaProps), { fullWidth: { type: 'boolean' } }),
|
|
11
|
+
properties: Object.assign(Object.assign({}, common_1.MediaProps), { fullWidth: { type: 'boolean' }, fullWidthMedia: { type: 'boolean' } }),
|
|
11
12
|
};
|
|
12
13
|
exports.HeaderProperties = {
|
|
13
14
|
title: {
|
|
@@ -28,7 +29,7 @@ exports.HeaderProperties = {
|
|
|
28
29
|
type: 'string',
|
|
29
30
|
enum: ['default', 'large'],
|
|
30
31
|
},
|
|
31
|
-
image: (0, common_1.withTheme)(
|
|
32
|
+
image: (0, common_1.withTheme)(schema_1.ImageProps),
|
|
32
33
|
video: (0, common_1.withTheme)(common_1.VideoProps),
|
|
33
34
|
backLink: {
|
|
34
35
|
type: 'object',
|
|
@@ -50,22 +51,7 @@ exports.HeaderProperties = {
|
|
|
50
51
|
type: 'string',
|
|
51
52
|
enum: ['s', 'm', 'l', 'xl'],
|
|
52
53
|
},
|
|
53
|
-
background: (0, common_1.withTheme)(
|
|
54
|
-
oneOf: [
|
|
55
|
-
HeaderMedia,
|
|
56
|
-
{
|
|
57
|
-
type: 'object',
|
|
58
|
-
additionalProperties: false,
|
|
59
|
-
properties: {
|
|
60
|
-
color: { type: 'string' },
|
|
61
|
-
url: { type: 'string' },
|
|
62
|
-
disableCompress: { type: 'boolean' },
|
|
63
|
-
fullWidth: { type: 'boolean' },
|
|
64
|
-
fullWidthMedia: { type: 'boolean' },
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
],
|
|
68
|
-
}),
|
|
54
|
+
background: (0, common_1.withTheme)(exports.HeaderBackgroundProps),
|
|
69
55
|
theme: {
|
|
70
56
|
type: 'string',
|
|
71
57
|
enum: ['default', 'dark'],
|
|
@@ -151,19 +151,35 @@ export declare const HeaderSliderBlock: {
|
|
|
151
151
|
};
|
|
152
152
|
background: {
|
|
153
153
|
oneOf: ({
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
154
|
+
type: string;
|
|
155
|
+
additionalProperties: boolean;
|
|
156
|
+
required: never[];
|
|
157
|
+
properties: {
|
|
158
|
+
fullWidth: {
|
|
159
|
+
type: string;
|
|
160
|
+
};
|
|
161
|
+
fullWidthMedia: {
|
|
162
|
+
type: string;
|
|
163
|
+
};
|
|
164
|
+
color: {
|
|
165
|
+
type: string;
|
|
166
|
+
};
|
|
167
|
+
image: {
|
|
168
|
+
anyOf: ({
|
|
169
|
+
oneOf: ({
|
|
170
|
+
type: string;
|
|
171
|
+
properties: {
|
|
172
|
+
when: {
|
|
173
|
+
type: string;
|
|
174
|
+
};
|
|
175
|
+
};
|
|
176
|
+
} | {
|
|
177
|
+
type: string;
|
|
178
|
+
pattern: string;
|
|
179
|
+
})[];
|
|
180
|
+
} | {
|
|
163
181
|
type: string;
|
|
164
|
-
|
|
165
|
-
image: {
|
|
166
|
-
anyOf: ({
|
|
182
|
+
items: {
|
|
167
183
|
oneOf: ({
|
|
168
184
|
type: string;
|
|
169
185
|
properties: {
|
|
@@ -175,139 +191,104 @@ export declare const HeaderSliderBlock: {
|
|
|
175
191
|
type: string;
|
|
176
192
|
pattern: string;
|
|
177
193
|
})[];
|
|
178
|
-
}
|
|
194
|
+
};
|
|
195
|
+
})[];
|
|
196
|
+
};
|
|
197
|
+
video: {
|
|
198
|
+
type: string;
|
|
199
|
+
additionalProperties: boolean;
|
|
200
|
+
required: string[];
|
|
201
|
+
properties: {
|
|
202
|
+
src: {
|
|
179
203
|
type: string;
|
|
180
204
|
items: {
|
|
181
|
-
oneOf: ({
|
|
182
|
-
type: string;
|
|
183
|
-
properties: {
|
|
184
|
-
when: {
|
|
185
|
-
type: string;
|
|
186
|
-
};
|
|
187
|
-
};
|
|
188
|
-
} | {
|
|
189
|
-
type: string;
|
|
190
|
-
pattern: string;
|
|
191
|
-
})[];
|
|
192
|
-
};
|
|
193
|
-
})[];
|
|
194
|
-
};
|
|
195
|
-
video: {
|
|
196
|
-
type: string;
|
|
197
|
-
additionalProperties: boolean;
|
|
198
|
-
required: string[];
|
|
199
|
-
properties: {
|
|
200
|
-
src: {
|
|
201
|
-
type: string;
|
|
202
|
-
items: {
|
|
203
|
-
type: string;
|
|
204
|
-
};
|
|
205
|
-
};
|
|
206
|
-
loop: {
|
|
207
|
-
anyOf: ({
|
|
208
|
-
type: string;
|
|
209
|
-
additionalProperties: boolean;
|
|
210
|
-
required: string[];
|
|
211
|
-
properties: {
|
|
212
|
-
start: {
|
|
213
|
-
type: string;
|
|
214
|
-
};
|
|
215
|
-
end: {
|
|
216
|
-
type: string;
|
|
217
|
-
};
|
|
218
|
-
};
|
|
219
|
-
} | {
|
|
220
|
-
type: string;
|
|
221
|
-
})[];
|
|
222
|
-
};
|
|
223
|
-
type: {
|
|
224
|
-
type: string;
|
|
225
|
-
enum: string[];
|
|
226
|
-
};
|
|
227
|
-
muted: {
|
|
228
|
-
type: string;
|
|
229
|
-
};
|
|
230
|
-
playing: {
|
|
231
|
-
type: string;
|
|
232
|
-
};
|
|
233
|
-
elapsedTime: {
|
|
234
205
|
type: string;
|
|
235
206
|
};
|
|
236
|
-
|
|
207
|
+
};
|
|
208
|
+
loop: {
|
|
209
|
+
anyOf: ({
|
|
237
210
|
type: string;
|
|
238
211
|
additionalProperties: boolean;
|
|
212
|
+
required: string[];
|
|
239
213
|
properties: {
|
|
240
|
-
|
|
214
|
+
start: {
|
|
241
215
|
type: string;
|
|
242
|
-
enum: string[];
|
|
243
216
|
};
|
|
244
|
-
|
|
245
|
-
type: string;
|
|
246
|
-
enum: string[];
|
|
247
|
-
};
|
|
248
|
-
text: {
|
|
217
|
+
end: {
|
|
249
218
|
type: string;
|
|
250
219
|
};
|
|
251
220
|
};
|
|
252
|
-
}
|
|
253
|
-
controls: {
|
|
221
|
+
} | {
|
|
254
222
|
type: string;
|
|
255
|
-
|
|
256
|
-
};
|
|
223
|
+
})[];
|
|
257
224
|
};
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
oneOf: ({
|
|
225
|
+
type: {
|
|
226
|
+
type: string;
|
|
227
|
+
enum: string[];
|
|
228
|
+
};
|
|
229
|
+
muted: {
|
|
230
|
+
type: string;
|
|
231
|
+
};
|
|
232
|
+
playing: {
|
|
233
|
+
type: string;
|
|
234
|
+
};
|
|
235
|
+
elapsedTime: {
|
|
236
|
+
type: string;
|
|
237
|
+
};
|
|
238
|
+
playIcon: {
|
|
273
239
|
type: string;
|
|
274
240
|
additionalProperties: boolean;
|
|
275
|
-
required: string[];
|
|
276
241
|
properties: {
|
|
277
|
-
|
|
242
|
+
type: {
|
|
278
243
|
type: string;
|
|
244
|
+
enum: string[];
|
|
279
245
|
};
|
|
280
246
|
theme: {
|
|
281
247
|
type: string;
|
|
282
248
|
enum: string[];
|
|
283
249
|
};
|
|
250
|
+
text: {
|
|
251
|
+
type: string;
|
|
252
|
+
};
|
|
284
253
|
};
|
|
285
|
-
}
|
|
254
|
+
};
|
|
255
|
+
controls: {
|
|
286
256
|
type: string;
|
|
287
|
-
|
|
257
|
+
enum: string[];
|
|
258
|
+
};
|
|
288
259
|
};
|
|
289
260
|
};
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
261
|
+
youtube: {
|
|
262
|
+
type: string;
|
|
263
|
+
};
|
|
264
|
+
parallax: {
|
|
265
|
+
type: string;
|
|
266
|
+
};
|
|
267
|
+
height: {
|
|
268
|
+
type: string;
|
|
269
|
+
};
|
|
270
|
+
previewImg: {
|
|
271
|
+
type: string;
|
|
272
|
+
};
|
|
273
|
+
dataLens: {
|
|
274
|
+
oneOf: ({
|
|
304
275
|
type: string;
|
|
305
|
-
|
|
306
|
-
|
|
276
|
+
additionalProperties: boolean;
|
|
277
|
+
required: string[];
|
|
278
|
+
properties: {
|
|
279
|
+
id: {
|
|
280
|
+
type: string;
|
|
281
|
+
};
|
|
282
|
+
theme: {
|
|
283
|
+
type: string;
|
|
284
|
+
enum: string[];
|
|
285
|
+
};
|
|
286
|
+
};
|
|
287
|
+
} | {
|
|
307
288
|
type: string;
|
|
308
|
-
};
|
|
289
|
+
})[];
|
|
309
290
|
};
|
|
310
|
-
}
|
|
291
|
+
};
|
|
311
292
|
} | {
|
|
312
293
|
type: string;
|
|
313
294
|
additionalProperties: boolean;
|
|
@@ -13,6 +13,7 @@ const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../components
|
|
|
13
13
|
const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
|
|
14
14
|
const Links_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Links"));
|
|
15
15
|
const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
|
|
16
|
+
const utils_2 = require("../../components/Media/Image/utils");
|
|
16
17
|
const b = (0, utils_1.block)('TabsBlock');
|
|
17
18
|
const TabsBlock = ({ items, title, description, animated }) => {
|
|
18
19
|
const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
|
|
@@ -23,7 +24,7 @@ const TabsBlock = ({ items, title, description, animated }) => {
|
|
|
23
24
|
let imageProps;
|
|
24
25
|
if (activeTabData) {
|
|
25
26
|
const themedImage = (0, utils_1.getThemedValue)(activeTabData.image, theme);
|
|
26
|
-
imageProps =
|
|
27
|
+
imageProps = themedImage && (0, utils_2.getMediaImage)(themedImage);
|
|
27
28
|
}
|
|
28
29
|
const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
|
|
29
30
|
return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
|
|
@@ -36,7 +37,7 @@ const TabsBlock = ({ items, title, description, animated }) => {
|
|
|
36
37
|
} },
|
|
37
38
|
(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
|
|
38
39
|
imageProps && (react_1.default.createElement(react_1.Fragment, null,
|
|
39
|
-
react_1.default.createElement(FullscreenImage_1.default, { imageClassName: b('image')
|
|
40
|
+
react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
|
|
40
41
|
activeTabData && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
|
|
41
42
|
react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
|
|
42
43
|
react_1.default.createElement("div", { className: b('content-wrapper', {
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.TabsBlock = exports.tabsItem = void 0;
|
|
4
4
|
const utils_1 = require("../../schema/validators/utils");
|
|
5
5
|
const common_1 = require("../../schema/validators/common");
|
|
6
|
+
const schema_1 = require("../../components/Image/schema");
|
|
6
7
|
exports.tabsItem = {
|
|
7
8
|
type: 'object',
|
|
8
9
|
additionalProperties: false,
|
|
@@ -27,7 +28,7 @@ exports.tabsItem = {
|
|
|
27
28
|
//TODO deprecated
|
|
28
29
|
link: common_1.LinkProps,
|
|
29
30
|
links: (0, utils_1.filteredArray)(common_1.LinkProps),
|
|
30
|
-
image: (0, common_1.withTheme)(
|
|
31
|
+
image: (0, common_1.withTheme)(schema_1.ImageProps),
|
|
31
32
|
},
|
|
32
33
|
};
|
|
33
34
|
exports.TabsBlock = {
|
|
@@ -6,9 +6,9 @@ const utils_1 = require("../../utils");
|
|
|
6
6
|
const Image_1 = (0, tslib_1.__importDefault)(require("../Image/Image"));
|
|
7
7
|
const b = (0, utils_1.block)('storage-background-image');
|
|
8
8
|
const BackgroundImage = (props) => {
|
|
9
|
-
const { children, src,
|
|
9
|
+
const { children, src, desktop, className, imageClassName, style, hide } = props;
|
|
10
10
|
return (react_1.default.createElement("div", { className: b(null, className), style: style },
|
|
11
|
-
src && !hide &&
|
|
11
|
+
(src || desktop) && !hide && react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName) })),
|
|
12
12
|
children && react_1.default.createElement("div", { className: b('container') }, children)));
|
|
13
13
|
};
|
|
14
14
|
exports.default = BackgroundImage;
|
|
@@ -10,6 +10,7 @@ unpredictable css rules order in build */
|
|
|
10
10
|
margin: 0 auto;
|
|
11
11
|
max-width: 1440px;
|
|
12
12
|
text-align: center;
|
|
13
|
+
height: 100%;
|
|
13
14
|
}
|
|
14
15
|
.pc-BackgroundMedia__image {
|
|
15
16
|
height: 100%;
|
|
@@ -17,6 +18,7 @@ unpredictable css rules order in build */
|
|
|
17
18
|
}
|
|
18
19
|
.pc-BackgroundMedia__video {
|
|
19
20
|
position: relative;
|
|
21
|
+
height: 100%;
|
|
20
22
|
}
|
|
21
23
|
.pc-BackgroundMedia__video video {
|
|
22
24
|
position: absolute;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { CSSProperties, MouseEventHandler } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
alt?: string;
|
|
5
|
-
disableCompress?: boolean;
|
|
2
|
+
import { ImageDeviceProps, ImageObjectProps } from '../../models';
|
|
3
|
+
export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
|
|
6
4
|
style?: CSSProperties;
|
|
7
5
|
className?: string;
|
|
8
6
|
onClick?: MouseEventHandler;
|
|
@@ -3,21 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = (0, tslib_1.__importStar)(require("react"));
|
|
5
5
|
const projectSettingsContext_1 = require("../../context/projectSettingsContext");
|
|
6
|
+
const constants_1 = require("../../constants");
|
|
7
|
+
const checkWebP = (src) => {
|
|
8
|
+
return src.endsWith('.webp') ? src : src + '.webp';
|
|
9
|
+
};
|
|
6
10
|
const Image = (props) => {
|
|
7
11
|
const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
|
|
8
|
-
const { src, alt, disableCompress, style, className, onClick } = props;
|
|
12
|
+
const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick } = props;
|
|
9
13
|
const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
|
|
10
|
-
|
|
14
|
+
const imageSrc = src || desktop;
|
|
15
|
+
if (!imageSrc) {
|
|
11
16
|
return null;
|
|
12
17
|
}
|
|
13
18
|
// TODO: Temporary solution for .svg images
|
|
14
19
|
const disableWebp = projectSettings.disableCompress ||
|
|
15
20
|
disableCompress ||
|
|
16
|
-
|
|
21
|
+
imageSrc.endsWith('.svg') ||
|
|
17
22
|
imgLoadingError;
|
|
18
|
-
const webp = src.endsWith('.webp') ? src : src + '.webp';
|
|
19
23
|
return (react_1.default.createElement("picture", null,
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
mobile && (react_1.default.createElement(react_1.Fragment, null,
|
|
25
|
+
!disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
|
|
26
|
+
react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),
|
|
27
|
+
tablet && (react_1.default.createElement(react_1.Fragment, null,
|
|
28
|
+
!disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.md}px)` })),
|
|
29
|
+
react_1.default.createElement("source", { srcSet: tablet, media: `(max-width: ${constants_1.BREAKPOINTS.md}px)` }))),
|
|
30
|
+
desktop && !disableWebp && react_1.default.createElement("source", { srcSet: checkWebP(imageSrc), type: "image/webp" }),
|
|
31
|
+
react_1.default.createElement("img", { className: className, src: imageSrc, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
|
|
22
32
|
};
|
|
23
33
|
exports.default = Image;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
|
|
2
|
+
export declare const ImageDeviceProps: {
|
|
3
|
+
type: string;
|
|
4
|
+
additionalProperties: boolean;
|
|
5
|
+
required: string[];
|
|
6
|
+
properties: {
|
|
7
|
+
desktop: {
|
|
8
|
+
type: string;
|
|
9
|
+
pattern: string;
|
|
10
|
+
};
|
|
11
|
+
tablet: {
|
|
12
|
+
type: string;
|
|
13
|
+
pattern: string;
|
|
14
|
+
};
|
|
15
|
+
mobile: {
|
|
16
|
+
type: string;
|
|
17
|
+
pattern: string;
|
|
18
|
+
};
|
|
19
|
+
alt: {
|
|
20
|
+
type: string;
|
|
21
|
+
};
|
|
22
|
+
disableCompress: {
|
|
23
|
+
type: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
export declare const ImageObjectProps: {
|
|
28
|
+
type: string;
|
|
29
|
+
additionalProperties: boolean;
|
|
30
|
+
required: string[];
|
|
31
|
+
properties: {
|
|
32
|
+
src: {
|
|
33
|
+
type: string;
|
|
34
|
+
pattern: string;
|
|
35
|
+
};
|
|
36
|
+
alt: {
|
|
37
|
+
type: string;
|
|
38
|
+
};
|
|
39
|
+
disableCompress: {
|
|
40
|
+
type: string;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
export declare const ImageProps: {
|
|
45
|
+
oneOf: ({
|
|
46
|
+
type: string;
|
|
47
|
+
properties: {
|
|
48
|
+
when: {
|
|
49
|
+
type: string;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
} | {
|
|
53
|
+
type: string;
|
|
54
|
+
pattern: string;
|
|
55
|
+
})[];
|
|
56
|
+
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = exports.urlPattern = void 0;
|
|
4
|
+
const utils_1 = require("../../schema/validators/utils");
|
|
5
|
+
exports.urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
|
|
6
|
+
exports.ImageDeviceProps = {
|
|
7
|
+
type: 'object',
|
|
8
|
+
additionalProperties: false,
|
|
9
|
+
required: ['desktop', 'mobile'],
|
|
10
|
+
properties: {
|
|
11
|
+
desktop: { type: 'string', pattern: exports.urlPattern },
|
|
12
|
+
tablet: {
|
|
13
|
+
type: 'string',
|
|
14
|
+
pattern: exports.urlPattern,
|
|
15
|
+
},
|
|
16
|
+
mobile: {
|
|
17
|
+
type: 'string',
|
|
18
|
+
pattern: exports.urlPattern,
|
|
19
|
+
},
|
|
20
|
+
alt: {
|
|
21
|
+
type: 'string',
|
|
22
|
+
},
|
|
23
|
+
disableCompress: {
|
|
24
|
+
type: 'boolean',
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
exports.ImageObjectProps = {
|
|
29
|
+
type: 'object',
|
|
30
|
+
additionalProperties: false,
|
|
31
|
+
required: ['src'],
|
|
32
|
+
properties: {
|
|
33
|
+
src: {
|
|
34
|
+
type: 'string',
|
|
35
|
+
pattern: exports.urlPattern,
|
|
36
|
+
},
|
|
37
|
+
alt: {
|
|
38
|
+
type: 'string',
|
|
39
|
+
},
|
|
40
|
+
disableCompress: {
|
|
41
|
+
type: 'boolean',
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
exports.ImageProps = {
|
|
46
|
+
oneOf: [
|
|
47
|
+
{
|
|
48
|
+
type: 'string',
|
|
49
|
+
pattern: exports.urlPattern,
|
|
50
|
+
},
|
|
51
|
+
(0, utils_1.filteredItem)(Object.assign({}, exports.ImageObjectProps)),
|
|
52
|
+
(0, utils_1.filteredItem)(Object.assign({}, exports.ImageDeviceProps)),
|
|
53
|
+
],
|
|
54
|
+
};
|
|
@@ -36,16 +36,16 @@ const Image = (props) => {
|
|
|
36
36
|
const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
|
|
37
37
|
const imageSlider = (imageArray) => (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => {
|
|
38
38
|
const itemData = (0, utils_1.getMediaImage)(item);
|
|
39
|
-
return (react_1.default.createElement(FullscreenImage_1.default, { key: itemData.
|
|
39
|
+
return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
|
|
40
40
|
})));
|
|
41
41
|
const imageBackground = (oneImage) => {
|
|
42
42
|
const imageData = (0, utils_1.getMediaImage)(oneImage);
|
|
43
43
|
return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate } },
|
|
44
|
-
react_1.default.createElement(BackgroundImage_1.default, { className: imageClass,
|
|
44
|
+
react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
|
|
45
45
|
};
|
|
46
46
|
const imageOnly = (oneImage) => {
|
|
47
47
|
const imageData = (0, utils_1.getMediaImage)(oneImage);
|
|
48
|
-
return
|
|
48
|
+
return react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }));
|
|
49
49
|
};
|
|
50
50
|
if (Array.isArray(image)) {
|
|
51
51
|
return imageSlider(image);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function getMediaImage(image: ImageProps): ImageObjectProps;
|
|
1
|
+
import { ImageProps } from '../../../models';
|
|
2
|
+
export declare function getMediaImage(image: ImageProps): import("../../../models").ImageObjectProps | import("../../../models").ImageDeviceProps;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps } from './common';
|
|
2
|
+
import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
|
|
3
3
|
import { ThemeSupporting } from '../../utils';
|
|
4
4
|
import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
|
|
5
5
|
import { BannerCardProps, SubBlock } from './sub-blocks';
|
|
@@ -78,8 +78,9 @@ export interface HeaderSliderBlockProps extends Omit<SliderProps, 'title' | 'des
|
|
|
78
78
|
items: HeaderBlockProps[];
|
|
79
79
|
}
|
|
80
80
|
interface HeaderBackgroundProps {
|
|
81
|
-
|
|
81
|
+
/** @deprecated replaced by Media Props image */
|
|
82
82
|
url?: string;
|
|
83
|
+
/** @deprecated replaced by Media Props image */
|
|
83
84
|
disableCompress?: boolean;
|
|
84
85
|
}
|
|
85
86
|
export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {
|
|
@@ -151,12 +152,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {
|
|
|
151
152
|
}
|
|
152
153
|
export interface CompaniesBlockProps extends Animatable {
|
|
153
154
|
title: string;
|
|
154
|
-
images: ThemeSupporting<
|
|
155
|
-
desktop: string;
|
|
156
|
-
tablet: string;
|
|
157
|
-
mobile: string;
|
|
158
|
-
alt?: string;
|
|
159
|
-
}>;
|
|
155
|
+
images: ThemeSupporting<ImageDeviceProps>;
|
|
160
156
|
}
|
|
161
157
|
export interface MediaContentProps {
|
|
162
158
|
title: string;
|
|
@@ -81,17 +81,21 @@ interface LoopProps {
|
|
|
81
81
|
start: number;
|
|
82
82
|
end?: number;
|
|
83
83
|
}
|
|
84
|
-
export interface
|
|
85
|
-
src: string;
|
|
84
|
+
export interface ImageInfoProps {
|
|
86
85
|
alt?: string;
|
|
87
86
|
disableCompress?: boolean;
|
|
88
87
|
}
|
|
89
|
-
export
|
|
88
|
+
export interface ImageObjectProps extends ImageInfoProps {
|
|
89
|
+
src: string;
|
|
90
|
+
}
|
|
91
|
+
export interface ImageDeviceProps extends ImageInfoProps {
|
|
92
|
+
desktop: string;
|
|
93
|
+
mobile: string;
|
|
94
|
+
tablet?: string;
|
|
95
|
+
}
|
|
96
|
+
export declare type ImageProps = string | ImageObjectProps | ImageDeviceProps;
|
|
90
97
|
export declare type ThemedImage = ThemeSupporting<ImageProps>;
|
|
91
|
-
export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
|
|
92
|
-
src?: string;
|
|
93
|
-
alt?: string;
|
|
94
|
-
disableCompress?: boolean;
|
|
98
|
+
export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
|
|
95
99
|
style?: CSSProperties;
|
|
96
100
|
imageClassName?: string;
|
|
97
101
|
hide?: boolean;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { Block, ConstructorItem
|
|
2
|
-
import {
|
|
1
|
+
import { Block, ConstructorItem } from './';
|
|
2
|
+
import { MetrikaGoal, NewMetrikaGoal } from './index';
|
|
3
3
|
export declare function isBlock(block: ConstructorItem): block is Block;
|
|
4
4
|
export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
|
|
5
|
-
export declare function headerHasMediaBackground(background: HeaderBlockBackground): background is MediaProps;
|