@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/HeaderSlider/schema.d.ts CHANGED
@@ -151,163 +151,139 @@ export declare const HeaderSliderBlock: {
151
151
  };
152
152
  background: {
153
153
  oneOf: ({
154
- oneOf: ({
154
+ fullWidth: {
155
155
  type: string;
156
- additionalProperties: boolean;
157
- required: never[];
158
- properties: {
159
- fullWidth: {
160
- type: string;
161
- };
162
- color: {
163
- type: string;
164
- };
165
- image: {
166
- anyOf: ({
167
- oneOf: ({
168
- type: string;
169
- properties: {
170
- when: {
171
- type: string;
172
- };
173
- };
174
- } | {
175
- type: string;
176
- pattern: string;
177
- })[];
178
- } | {
179
- type: string;
180
- 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: {
156
+ };
157
+ fullWidthMedia: {
158
+ type: string;
159
+ };
160
+ color: {
161
+ type: string;
162
+ };
163
+ image: {
164
+ anyOf: ({
165
+ oneOf: ({
196
166
  type: string;
197
- additionalProperties: boolean;
198
- required: string[];
199
167
  properties: {
200
- src: {
168
+ when: {
201
169
  type: string;
202
- items: {
203
- type: string;
204
- };
205
170
  };
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
- } | {
171
+ };
172
+ } | {
173
+ type: string;
174
+ pattern: string;
175
+ })[];
176
+ } | {
177
+ type: string;
178
+ items: {
179
+ oneOf: ({
180
+ type: string;
181
+ properties: {
182
+ when: {
220
183
  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
- type: string;
235
- };
236
- playIcon: {
237
- type: string;
238
- additionalProperties: boolean;
239
- properties: {
240
- type: {
241
- type: string;
242
- enum: string[];
243
- };
244
- theme: {
245
- type: string;
246
- enum: string[];
247
- };
248
- text: {
249
- type: string;
250
- };
251
184
  };
252
185
  };
253
- controls: {
254
- type: string;
255
- enum: string[];
256
- };
257
- };
258
- };
259
- youtube: {
260
- type: string;
261
- };
262
- parallax: {
263
- type: string;
264
- };
265
- height: {
266
- type: string;
186
+ } | {
187
+ type: string;
188
+ pattern: string;
189
+ })[];
267
190
  };
268
- previewImg: {
191
+ })[];
192
+ };
193
+ video: {
194
+ type: string;
195
+ additionalProperties: boolean;
196
+ required: string[];
197
+ properties: {
198
+ src: {
269
199
  type: string;
200
+ items: {
201
+ type: string;
202
+ };
270
203
  };
271
- dataLens: {
272
- oneOf: ({
204
+ loop: {
205
+ anyOf: ({
273
206
  type: string;
274
207
  additionalProperties: boolean;
275
208
  required: string[];
276
209
  properties: {
277
- id: {
210
+ start: {
278
211
  type: string;
279
212
  };
280
- theme: {
213
+ end: {
281
214
  type: string;
282
- enum: string[];
283
215
  };
284
216
  };
285
217
  } | {
286
218
  type: string;
287
219
  })[];
288
220
  };
289
- };
290
- } | {
291
- type: string;
292
- additionalProperties: boolean;
293
- properties: {
294
- color: {
221
+ type: {
222
+ type: string;
223
+ enum: string[];
224
+ };
225
+ muted: {
295
226
  type: string;
296
227
  };
297
- url: {
228
+ playing: {
298
229
  type: string;
299
230
  };
300
- disableCompress: {
231
+ elapsedTime: {
301
232
  type: string;
302
233
  };
303
- fullWidth: {
234
+ playIcon: {
304
235
  type: string;
236
+ additionalProperties: boolean;
237
+ properties: {
238
+ type: {
239
+ type: string;
240
+ enum: string[];
241
+ };
242
+ theme: {
243
+ type: string;
244
+ enum: string[];
245
+ };
246
+ text: {
247
+ type: string;
248
+ };
249
+ };
305
250
  };
306
- fullWidthMedia: {
251
+ controls: {
307
252
  type: string;
253
+ enum: string[];
308
254
  };
309
255
  };
310
- })[];
256
+ };
257
+ youtube: {
258
+ type: string;
259
+ };
260
+ parallax: {
261
+ type: string;
262
+ };
263
+ height: {
264
+ type: string;
265
+ };
266
+ previewImg: {
267
+ type: string;
268
+ };
269
+ dataLens: {
270
+ oneOf: ({
271
+ type: string;
272
+ additionalProperties: boolean;
273
+ required: string[];
274
+ properties: {
275
+ id: {
276
+ type: string;
277
+ };
278
+ theme: {
279
+ type: string;
280
+ enum: string[];
281
+ };
282
+ };
283
+ } | {
284
+ type: string;
285
+ })[];
286
+ };
311
287
  } | {
312
288
  type: string;
313
289
  additionalProperties: boolean;
package/build/cjs/components/BackgroundMedia/BackgroundMedia.css CHANGED
@@ -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;
package/build/cjs/components/BackgroundMedia/BackgroundMedia.js CHANGED
@@ -11,7 +11,7 @@ const BackgroundMedia = (_a) => {
11
11
  var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = (0, tslib_1.__rest)(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
12
12
  const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
13
13
  return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
14
- react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
15
- parallax, video: isMobile ? undefined : video }, props)))));
14
+ react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign(Object.assign({}, props), { height: 720, color,
15
+ parallax, video: isMobile ? undefined : video })))));
16
16
  };
17
17
  exports.default = BackgroundMedia;
package/build/cjs/models/constructor-items/blocks.d.ts CHANGED
@@ -78,9 +78,9 @@ export interface HeaderSliderBlockProps extends Omit<SliderProps, 'title' | 'des
78
78
  items: HeaderBlockProps[];
79
79
  }
80
80
  interface HeaderBackgroundProps {
81
- color?: string;
81
+ /** @deprecated replaced by Media Props image */
82
82
  url?: ImageProps;
83
- /** @deprecated put it in url props instead */
83
+ /** @deprecated replaced by Media Props image */
84
84
  disableCompress?: boolean;
85
85
  }
86
86
  export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {
package/build/cjs/models/guards.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import { Block, ConstructorItem, HeaderBlockBackground } from './';
2
- import { MediaProps, MetrikaGoal, NewMetrikaGoal } from './index';
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;
package/build/cjs/models/guards.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.headerHasMediaBackground = exports.isNewMetrikaFormat = exports.isBlock = void 0;
3
+ exports.isNewMetrikaFormat = exports.isBlock = void 0;
4
4
  const _1 = require("./");
5
5
  function isBlock(block) {
6
6
  return block.type in _1.BlockTypes;
@@ -10,7 +10,3 @@ function isNewMetrikaFormat(metrika) {
10
10
  return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
11
11
  }
12
12
  exports.isNewMetrikaFormat = isNewMetrikaFormat;
13
- function headerHasMediaBackground(background) {
14
- return 'image' in background || 'video' in background || 'youtube' in background;
15
- }
16
- exports.headerHasMediaBackground = headerHasMediaBackground;
package/build/esm/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/esm/blocks/Header/Header.js CHANGED
@@ -1,45 +1,40 @@
1
1
  import React, { useContext } from 'react';
2
2
  import { block, getThemedValue } from '../../utils';
3
- import { headerHasMediaBackground } from '../../models/guards';
4
- import { Button, Media, BackgroundMedia, BackgroundImage, RouterLink, HTML } from '../../components';
3
+ import { Button, Media, RouterLink, HTML } from '../../components';
5
4
  import { Grid, Row, Col } from '../../grid';
6
5
  import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
6
+ import { MobileContext } from '../../context/mobileContext';
7
7
  import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
8
8
  import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
9
9
  import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
10
10
  import { getMediaImage } from '../../components/Media/Image/utils';
11
11
  import './Header.css';
12
12
  const b = block('header-block');
13
- const Background = ({ background }) => {
14
- const { url, color, disableCompress, fullWidth, fullWidthMedia } = background;
15
- const imageObject = url && getMediaImage(url);
16
- if (imageObject && disableCompress) {
17
- imageObject.disableCompress = disableCompress;
18
- }
19
- return headerHasMediaBackground(background) ? (React.createElement(BackgroundMedia, Object.assign({}, background, { mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (React.createElement(BackgroundImage, Object.assign({}, imageObject, { className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color } })));
13
+ const Background = ({ background, isMobile }) => {
14
+ const { url, image, fullWidthMedia, video, color } = background;
15
+ const imageObject = url ? getMediaImage(url) : image;
16
+ return (React.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }) },
17
+ React.createElement(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 }))));
20
18
  };
21
19
  const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
22
20
  export const HeaderBlock = (props) => {
23
21
  const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
22
+ const isMobile = useContext(MobileContext);
24
23
  const { themeValue: theme } = useContext(ThemeValueContext);
25
- const hasMedia = Boolean(image || video);
24
+ const hasRightSideImage = Boolean(image || video);
26
25
  const curImageSize = imageSize || getImageSize(width);
27
- const titleSizes = hasMedia ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
26
+ const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
28
27
  let curVerticalOffset = verticalOffset;
29
- if (hasMedia && !verticalOffset) {
28
+ if (hasRightSideImage && !verticalOffset) {
30
29
  curVerticalOffset = 'm';
31
30
  }
32
31
  const backgroundThemed = background && getThemedValue(background, theme);
33
32
  const imageThemed = image && getThemedValue(image, theme);
34
33
  const videoThemed = video && getThemedValue(video, theme);
35
- const fullWidth = Boolean(backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth);
36
- return (React.createElement("header", { className: b({
37
- ['has-media']: hasMedia,
38
- ['has-background']: Boolean(background),
39
- ['full-width']: fullWidth,
40
- }, className) },
34
+ const fullWidth = backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth;
35
+ return (React.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
41
36
  backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
42
- backgroundThemed && React.createElement(Background, { background: backgroundThemed }),
37
+ backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
43
38
  React.createElement(Grid, { containerClass: b('container-fluid') },
44
39
  breadcrumbs && (React.createElement(Row, { className: b('breadcrumbs') },
45
40
  React.createElement(Col, null,
@@ -64,6 +59,6 @@ export const HeaderBlock = (props) => {
64
59
  buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
65
60
  React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
66
61
  children))),
67
- hasMedia && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
62
+ hasRightSideImage && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
68
63
  };
69
64
  export default HeaderBlock;