@gravity-ui/page-constructor 1.2.3-alpha.2 → 1.2.3-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/build/cjs/blocks/Header/Header.css +11 -7
  2. package/build/cjs/blocks/Header/Header.js +14 -19
  3. package/build/cjs/blocks/Header/schema.d.ts +196 -244
  4. package/build/cjs/blocks/Header/schema.js +1 -22
  5. package/build/cjs/blocks/HeaderSlider/schema.d.ts +98 -122
  6. package/build/cjs/components/BackgroundMedia/BackgroundMedia.css +2 -0
  7. package/build/cjs/components/BackgroundMedia/BackgroundMedia.js +2 -2
  8. package/build/cjs/models/constructor-items/blocks.d.ts +2 -2
  9. package/build/cjs/models/guards.d.ts +2 -3
  10. package/build/cjs/models/guards.js +1 -5
  11. package/build/esm/blocks/Header/Header.css +11 -7
  12. package/build/esm/blocks/Header/Header.js +15 -20
  13. package/build/esm/blocks/Header/schema.d.ts +196 -244
  14. package/build/esm/blocks/Header/schema.js +1 -22
  15. package/build/esm/blocks/HeaderSlider/schema.d.ts +98 -122
  16. package/build/esm/components/BackgroundMedia/BackgroundMedia.css +2 -0
  17. package/build/esm/components/BackgroundMedia/BackgroundMedia.js +2 -2
  18. package/build/esm/models/constructor-items/blocks.d.ts +2 -2
  19. package/build/esm/models/guards.d.ts +2 -3
  20. package/build/esm/models/guards.js +0 -3
  21. package/package.json +1 -1
  22. package/server/models/constructor-items/blocks.d.ts +2 -2
  23. package/server/models/guards.d.ts +2 -3
  24. package/server/models/guards.js +1 -5
package/build/cjs/blocks/Header/Header.css CHANGED
@@ -9,6 +9,7 @@ unpredictable css rules order in build */
9
9
  margin: 16px 0;
10
10
  }
11
11
  .pc-header-block_full-width {
12
+ --pc-border-radius: 0;
12
13
  padding: 16px 0;
13
14
  margin: 0 0 16px;
14
15
  }
@@ -123,6 +124,16 @@ unpredictable css rules order in build */
123
124
  top: 16px;
124
125
  z-index: 11;
125
126
  }
127
+ .pc-header-block__background-media {
128
+ height: 100%;
129
+ }
130
+ .pc-header-block__background-media > div {
131
+ height: 100%;
132
+ width: 100%;
133
+ }
134
+ .pc-header-block__background-media > div:not(.pc-header-block__video) {
135
+ position: absolute;
136
+ }
126
137
  .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
127
138
  position: absolute;
128
139
  top: 0;
@@ -141,19 +152,12 @@ unpredictable css rules order in build */
141
152
  .pc-header-block__background.pc-header-block__background_full-width-media > div, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media > div {
142
153
  max-width: none;
143
154
  }
144
- .pc-header-block__background.pc-header-block__background_full-width-media .pc-header-block__background-media, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media .pc-header-block__background-media {
145
- height: 100%;
146
- }
147
155
  .pc-header-block__background.pc-header-block__background_full-width-media video, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media video {
148
156
  height: 100%;
149
157
  width: 100%;
150
158
  object-fit: cover;
151
159
  }
152
- .pc-header-block__background_full-width-media {
153
- --pc-border-radius: 0;
154
- }
155
160
  .pc-header-block__background_full-width {
156
- --pc-border-radius: 0;
157
161
  left: 0;
158
162
  transform: none;
159
163
  max-width: none;
package/build/cjs/blocks/Header/Header.js CHANGED
@@ -4,45 +4,40 @@ exports.HeaderBlock = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = (0, tslib_1.__importStar)(require("react"));
6
6
  const utils_1 = require("../../utils");
7
- const guards_1 = require("../../models/guards");
8
7
  const components_1 = require("../../components");
9
8
  const grid_1 = require("../../grid");
10
9
  const utils_2 = require("./utils");
10
+ const mobileContext_1 = require("../../context/mobileContext");
11
11
  const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
12
12
  const HeaderBreadcrumbs_1 = (0, tslib_1.__importDefault)(require("../../components/HeaderBreadcrumbs/HeaderBreadcrumbs"));
13
13
  const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
14
14
  const utils_3 = require("../../components/Media/Image/utils");
15
15
  const b = (0, utils_1.block)('header-block');
16
- const Background = ({ background }) => {
17
- const { url, color, disableCompress, fullWidth, fullWidthMedia } = background;
18
- const imageObject = url && (0, utils_3.getMediaImage)(url);
19
- if (imageObject && disableCompress) {
20
- imageObject.disableCompress = disableCompress;
21
- }
22
- return (0, guards_1.headerHasMediaBackground)(background) ? (react_1.default.createElement(components_1.BackgroundMedia, Object.assign({}, background, { mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (react_1.default.createElement(components_1.BackgroundImage, Object.assign({}, imageObject, { className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color } })));
16
+ const Background = ({ background, isMobile }) => {
17
+ const { url, image, fullWidthMedia, video, color } = background;
18
+ const imageObject = url ? (0, utils_3.getMediaImage)(url) : image;
19
+ return (react_1.default.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }) },
20
+ react_1.default.createElement(components_1.Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, color: color, parallax: false, video: isMobile ? undefined : video, image: imageObject }))));
23
21
  };
24
22
  const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
25
23
  const HeaderBlock = (props) => {
26
24
  const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
25
+ const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
27
26
  const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
28
- const hasMedia = Boolean(image || video);
27
+ const hasRightSideImage = Boolean(image || video);
29
28
  const curImageSize = imageSize || (0, utils_2.getImageSize)(width);
30
- const titleSizes = hasMedia ? (0, utils_2.titleWithImageSizes)(curImageSize) : (0, utils_2.getTitleSizes)(width);
29
+ const titleSizes = hasRightSideImage ? (0, utils_2.titleWithImageSizes)(curImageSize) : (0, utils_2.getTitleSizes)(width);
31
30
  let curVerticalOffset = verticalOffset;
32
- if (hasMedia && !verticalOffset) {
31
+ if (hasRightSideImage && !verticalOffset) {
33
32
  curVerticalOffset = 'm';
34
33
  }
35
34
  const backgroundThemed = background && (0, utils_1.getThemedValue)(background, theme);
36
35
  const imageThemed = image && (0, utils_1.getThemedValue)(image, theme);
37
36
  const videoThemed = video && (0, utils_1.getThemedValue)(video, theme);
38
- const fullWidth = Boolean(backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth);
39
- return (react_1.default.createElement("header", { className: b({
40
- ['has-media']: hasMedia,
41
- ['has-background']: Boolean(background),
42
- ['full-width']: fullWidth,
43
- }, className) },
37
+ const fullWidth = backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth;
38
+ return (react_1.default.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
44
39
  backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
45
- backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed }),
40
+ backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
46
41
  react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
47
42
  breadcrumbs && (react_1.default.createElement(grid_1.Row, { className: b('breadcrumbs') },
48
43
  react_1.default.createElement(grid_1.Col, null,
@@ -67,7 +62,7 @@ const HeaderBlock = (props) => {
67
62
  buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },
68
63
  react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
69
64
  children))),
70
- hasMedia && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
65
+ hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
71
66
  };
72
67
  exports.HeaderBlock = HeaderBlock;
73
68
  exports.default = exports.HeaderBlock;
package/build/cjs/blocks/Header/schema.d.ts CHANGED
@@ -140,163 +140,139 @@ export declare const HeaderProperties: {
140
140
  };
141
141
  background: {
142
142
  oneOf: ({
143
- oneOf: ({
143
+ fullWidth: {
144
144
  type: string;
145
- additionalProperties: boolean;
146
- required: never[];
147
- properties: {
148
- fullWidth: {
149
- type: string;
150
- };
151
- color: {
152
- type: string;
153
- };
154
- image: {
155
- anyOf: ({
156
- oneOf: ({
157
- type: string;
158
- properties: {
159
- when: {
160
- type: string;
161
- };
162
- };
163
- } | {
164
- type: string;
165
- pattern: string;
166
- })[];
167
- } | {
168
- type: string;
169
- items: {
170
- oneOf: ({
171
- type: string;
172
- properties: {
173
- when: {
174
- type: string;
175
- };
176
- };
177
- } | {
178
- type: string;
179
- pattern: string;
180
- })[];
181
- };
182
- })[];
183
- };
184
- video: {
145
+ };
146
+ fullWidthMedia: {
147
+ type: string;
148
+ };
149
+ color: {
150
+ type: string;
151
+ };
152
+ image: {
153
+ anyOf: ({
154
+ oneOf: ({
185
155
  type: string;
186
- additionalProperties: boolean;
187
- required: string[];
188
156
  properties: {
189
- src: {
157
+ when: {
190
158
  type: string;
191
- items: {
192
- type: string;
193
- };
194
159
  };
195
- loop: {
196
- anyOf: ({
197
- type: string;
198
- additionalProperties: boolean;
199
- required: string[];
200
- properties: {
201
- start: {
202
- type: string;
203
- };
204
- end: {
205
- type: string;
206
- };
207
- };
208
- } | {
160
+ };
161
+ } | {
162
+ type: string;
163
+ pattern: string;
164
+ })[];
165
+ } | {
166
+ type: string;
167
+ items: {
168
+ oneOf: ({
169
+ type: string;
170
+ properties: {
171
+ when: {
209
172
  type: string;
210
- })[];
211
- };
212
- type: {
213
- type: string;
214
- enum: string[];
215
- };
216
- muted: {
217
- type: string;
218
- };
219
- playing: {
220
- type: string;
221
- };
222
- elapsedTime: {
223
- type: string;
224
- };
225
- playIcon: {
226
- type: string;
227
- additionalProperties: boolean;
228
- properties: {
229
- type: {
230
- type: string;
231
- enum: string[];
232
- };
233
- theme: {
234
- type: string;
235
- enum: string[];
236
- };
237
- text: {
238
- type: string;
239
- };
240
173
  };
241
174
  };
242
- controls: {
243
- type: string;
244
- enum: string[];
245
- };
246
- };
247
- };
248
- youtube: {
249
- type: string;
250
- };
251
- parallax: {
252
- type: string;
253
- };
254
- height: {
255
- type: string;
175
+ } | {
176
+ type: string;
177
+ pattern: string;
178
+ })[];
256
179
  };
257
- previewImg: {
180
+ })[];
181
+ };
182
+ video: {
183
+ type: string;
184
+ additionalProperties: boolean;
185
+ required: string[];
186
+ properties: {
187
+ src: {
258
188
  type: string;
189
+ items: {
190
+ type: string;
191
+ };
259
192
  };
260
- dataLens: {
261
- oneOf: ({
193
+ loop: {
194
+ anyOf: ({
262
195
  type: string;
263
196
  additionalProperties: boolean;
264
197
  required: string[];
265
198
  properties: {
266
- id: {
199
+ start: {
267
200
  type: string;
268
201
  };
269
- theme: {
202
+ end: {
270
203
  type: string;
271
- enum: string[];
272
204
  };
273
205
  };
274
206
  } | {
275
207
  type: string;
276
208
  })[];
277
209
  };
278
- };
279
- } | {
280
- type: string;
281
- additionalProperties: boolean;
282
- properties: {
283
- color: {
210
+ type: {
284
211
  type: string;
212
+ enum: string[];
285
213
  };
286
- url: {
214
+ muted: {
287
215
  type: string;
288
216
  };
289
- disableCompress: {
217
+ playing: {
290
218
  type: string;
291
219
  };
292
- fullWidth: {
220
+ elapsedTime: {
293
221
  type: string;
294
222
  };
295
- fullWidthMedia: {
223
+ playIcon: {
296
224
  type: string;
225
+ additionalProperties: boolean;
226
+ properties: {
227
+ type: {
228
+ type: string;
229
+ enum: string[];
230
+ };
231
+ theme: {
232
+ type: string;
233
+ enum: string[];
234
+ };
235
+ text: {
236
+ type: string;
237
+ };
238
+ };
239
+ };
240
+ controls: {
241
+ type: string;
242
+ enum: string[];
297
243
  };
298
244
  };
299
- })[];
245
+ };
246
+ youtube: {
247
+ type: string;
248
+ };
249
+ parallax: {
250
+ type: string;
251
+ };
252
+ height: {
253
+ type: string;
254
+ };
255
+ previewImg: {
256
+ type: string;
257
+ };
258
+ dataLens: {
259
+ oneOf: ({
260
+ type: string;
261
+ additionalProperties: boolean;
262
+ required: string[];
263
+ properties: {
264
+ id: {
265
+ type: string;
266
+ };
267
+ theme: {
268
+ type: string;
269
+ enum: string[];
270
+ };
271
+ };
272
+ } | {
273
+ type: string;
274
+ })[];
275
+ };
300
276
  } | {
301
277
  type: string;
302
278
  additionalProperties: boolean;
@@ -485,163 +461,139 @@ export declare const HeaderBlock: {
485
461
  };
486
462
  background: {
487
463
  oneOf: ({
488
- oneOf: ({
464
+ fullWidth: {
489
465
  type: string;
490
- additionalProperties: boolean;
491
- required: never[];
492
- properties: {
493
- fullWidth: {
494
- type: string;
495
- };
496
- color: {
497
- type: string;
498
- };
499
- image: {
500
- anyOf: ({
501
- oneOf: ({
502
- type: string;
503
- properties: {
504
- when: {
505
- type: string;
506
- };
507
- };
508
- } | {
509
- type: string;
510
- pattern: string;
511
- })[];
512
- } | {
513
- type: string;
514
- items: {
515
- oneOf: ({
516
- type: string;
517
- properties: {
518
- when: {
519
- type: string;
520
- };
521
- };
522
- } | {
523
- type: string;
524
- pattern: string;
525
- })[];
526
- };
527
- })[];
528
- };
529
- video: {
466
+ };
467
+ fullWidthMedia: {
468
+ type: string;
469
+ };
470
+ color: {
471
+ type: string;
472
+ };
473
+ image: {
474
+ anyOf: ({
475
+ oneOf: ({
530
476
  type: string;
531
- additionalProperties: boolean;
532
- required: string[];
533
477
  properties: {
534
- src: {
478
+ when: {
535
479
  type: string;
536
- items: {
537
- type: string;
538
- };
539
480
  };
540
- loop: {
541
- anyOf: ({
542
- type: string;
543
- additionalProperties: boolean;
544
- required: string[];
545
- properties: {
546
- start: {
547
- type: string;
548
- };
549
- end: {
550
- type: string;
551
- };
552
- };
553
- } | {
481
+ };
482
+ } | {
483
+ type: string;
484
+ pattern: string;
485
+ })[];
486
+ } | {
487
+ type: string;
488
+ items: {
489
+ oneOf: ({
490
+ type: string;
491
+ properties: {
492
+ when: {
554
493
  type: string;
555
- })[];
556
- };
557
- type: {
558
- type: string;
559
- enum: string[];
560
- };
561
- muted: {
562
- type: string;
563
- };
564
- playing: {
565
- type: string;
566
- };
567
- elapsedTime: {
568
- type: string;
569
- };
570
- playIcon: {
571
- type: string;
572
- additionalProperties: boolean;
573
- properties: {
574
- type: {
575
- type: string;
576
- enum: string[];
577
- };
578
- theme: {
579
- type: string;
580
- enum: string[];
581
- };
582
- text: {
583
- type: string;
584
- };
585
494
  };
586
495
  };
587
- controls: {
588
- type: string;
589
- enum: string[];
590
- };
591
- };
592
- };
593
- youtube: {
594
- type: string;
595
- };
596
- parallax: {
597
- type: string;
598
- };
599
- height: {
600
- type: string;
496
+ } | {
497
+ type: string;
498
+ pattern: string;
499
+ })[];
601
500
  };
602
- previewImg: {
501
+ })[];
502
+ };
503
+ video: {
504
+ type: string;
505
+ additionalProperties: boolean;
506
+ required: string[];
507
+ properties: {
508
+ src: {
603
509
  type: string;
510
+ items: {
511
+ type: string;
512
+ };
604
513
  };
605
- dataLens: {
606
- oneOf: ({
514
+ loop: {
515
+ anyOf: ({
607
516
  type: string;
608
517
  additionalProperties: boolean;
609
518
  required: string[];
610
519
  properties: {
611
- id: {
520
+ start: {
612
521
  type: string;
613
522
  };
614
- theme: {
523
+ end: {
615
524
  type: string;
616
- enum: string[];
617
525
  };
618
526
  };
619
527
  } | {
620
528
  type: string;
621
529
  })[];
622
530
  };
623
- };
624
- } | {
625
- type: string;
626
- additionalProperties: boolean;
627
- properties: {
628
- color: {
531
+ type: {
629
532
  type: string;
533
+ enum: string[];
630
534
  };
631
- url: {
535
+ muted: {
632
536
  type: string;
633
537
  };
634
- disableCompress: {
538
+ playing: {
635
539
  type: string;
636
540
  };
637
- fullWidth: {
541
+ elapsedTime: {
542
+ type: string;
543
+ };
544
+ playIcon: {
638
545
  type: string;
546
+ additionalProperties: boolean;
547
+ properties: {
548
+ type: {
549
+ type: string;
550
+ enum: string[];
551
+ };
552
+ theme: {
553
+ type: string;
554
+ enum: string[];
555
+ };
556
+ text: {
557
+ type: string;
558
+ };
559
+ };
639
560
  };
640
- fullWidthMedia: {
561
+ controls: {
641
562
  type: string;
563
+ enum: string[];
642
564
  };
643
565
  };
644
- })[];
566
+ };
567
+ youtube: {
568
+ type: string;
569
+ };
570
+ parallax: {
571
+ type: string;
572
+ };
573
+ height: {
574
+ type: string;
575
+ };
576
+ previewImg: {
577
+ type: string;
578
+ };
579
+ dataLens: {
580
+ oneOf: ({
581
+ type: string;
582
+ additionalProperties: boolean;
583
+ required: string[];
584
+ properties: {
585
+ id: {
586
+ type: string;
587
+ };
588
+ theme: {
589
+ type: string;
590
+ enum: string[];
591
+ };
592
+ };
593
+ } | {
594
+ type: string;
595
+ })[];
596
+ };
645
597
  } | {
646
598
  type: string;
647
599
  additionalProperties: boolean;
package/build/cjs/blocks/Header/schema.js CHANGED
@@ -4,12 +4,6 @@ exports.HeaderBlock = exports.HeaderProperties = void 0;
4
4
  const common_1 = require("../../schema/validators/common");
5
5
  const utils_1 = require("../../schema/validators/utils");
6
6
  const schema_1 = require("../../components/Image/schema");
7
- const HeaderMedia = {
8
- type: 'object',
9
- additionalProperties: false,
10
- required: [],
11
- properties: Object.assign(Object.assign({}, common_1.MediaProps), { fullWidth: { type: 'boolean' } }),
12
- };
13
7
  exports.HeaderProperties = {
14
8
  title: {
15
9
  type: 'string',
@@ -51,22 +45,7 @@ exports.HeaderProperties = {
51
45
  type: 'string',
52
46
  enum: ['s', 'm', 'l', 'xl'],
53
47
  },
54
- background: (0, common_1.withTheme)({
55
- oneOf: [
56
- HeaderMedia,
57
- {
58
- type: 'object',
59
- additionalProperties: false,
60
- properties: {
61
- color: { type: 'string' },
62
- url: { type: 'string' },
63
- disableCompress: { type: 'boolean' },
64
- fullWidth: { type: 'boolean' },
65
- fullWidthMedia: { type: 'boolean' },
66
- },
67
- },
68
- ],
69
- }),
48
+ background: (0, common_1.withTheme)(Object.assign(Object.assign({}, common_1.MediaProps), { fullWidth: { type: 'boolean' }, fullWidthMedia: { type: 'boolean' } })),
70
49
  theme: {
71
50
  type: 'string',
72
51
  enum: ['default', 'dark'],