@gravity-ui/page-constructor 1.2.3-alpha.3 → 1.2.3-alpha.5

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 (15) hide show
  1. package/build/cjs/blocks/Header/Header.css +10 -3
  2. package/build/cjs/blocks/Header/Header.js +13 -10
  3. package/build/cjs/blocks/Header/schema.d.ts +338 -188
  4. package/build/cjs/blocks/Header/schema.js +8 -2
  5. package/build/cjs/blocks/HeaderSlider/schema.d.ts +99 -94
  6. package/build/cjs/components/BackgroundMedia/BackgroundMedia.css +2 -0
  7. package/build/cjs/components/BackgroundMedia/BackgroundMedia.js +2 -2
  8. package/build/esm/blocks/Header/Header.css +10 -3
  9. package/build/esm/blocks/Header/Header.js +14 -11
  10. package/build/esm/blocks/Header/schema.d.ts +338 -188
  11. package/build/esm/blocks/Header/schema.js +7 -1
  12. package/build/esm/blocks/HeaderSlider/schema.d.ts +99 -94
  13. package/build/esm/components/BackgroundMedia/BackgroundMedia.css +2 -0
  14. package/build/esm/components/BackgroundMedia/BackgroundMedia.js +2 -2
  15. package/package.json +1 -1
package/build/cjs/blocks/HeaderSlider/schema.d.ts CHANGED
@@ -151,31 +151,21 @@ export declare const HeaderSliderBlock: {
151
151
  };
152
152
  background: {
153
153
  oneOf: ({
154
- fullWidth: {
155
- type: string;
156
- };
157
- fullWidthMedia: {
158
- type: string;
159
- };
160
- color: {
161
- type: string;
162
- };
163
- image: {
164
- anyOf: ({
165
- oneOf: ({
166
- type: string;
167
- properties: {
168
- when: {
169
- type: string;
170
- };
171
- };
172
- } | {
173
- type: string;
174
- pattern: string;
175
- })[];
176
- } | {
154
+ type: string;
155
+ additionalProperties: boolean;
156
+ required: never[];
157
+ properties: {
158
+ fullWidth: {
177
159
  type: string;
178
- items: {
160
+ };
161
+ fullWidthMedia: {
162
+ type: string;
163
+ };
164
+ color: {
165
+ type: string;
166
+ };
167
+ image: {
168
+ anyOf: ({
179
169
  oneOf: ({
180
170
  type: string;
181
171
  properties: {
@@ -187,103 +177,118 @@ export declare const HeaderSliderBlock: {
187
177
  type: string;
188
178
  pattern: string;
189
179
  })[];
190
- };
191
- })[];
192
- };
193
- video: {
194
- type: string;
195
- additionalProperties: boolean;
196
- required: string[];
197
- properties: {
198
- src: {
180
+ } | {
199
181
  type: string;
200
182
  items: {
183
+ oneOf: ({
184
+ type: string;
185
+ properties: {
186
+ when: {
187
+ type: string;
188
+ };
189
+ };
190
+ } | {
191
+ type: string;
192
+ pattern: string;
193
+ })[];
194
+ };
195
+ })[];
196
+ };
197
+ video: {
198
+ type: string;
199
+ additionalProperties: boolean;
200
+ required: string[];
201
+ properties: {
202
+ src: {
203
+ type: string;
204
+ items: {
205
+ type: string;
206
+ };
207
+ };
208
+ loop: {
209
+ anyOf: ({
210
+ type: string;
211
+ additionalProperties: boolean;
212
+ required: string[];
213
+ properties: {
214
+ start: {
215
+ type: string;
216
+ };
217
+ end: {
218
+ type: string;
219
+ };
220
+ };
221
+ } | {
222
+ type: string;
223
+ })[];
224
+ };
225
+ type: {
201
226
  type: string;
227
+ enum: string[];
202
228
  };
203
- };
204
- loop: {
205
- anyOf: ({
229
+ muted: {
230
+ type: string;
231
+ };
232
+ playing: {
233
+ type: string;
234
+ };
235
+ elapsedTime: {
236
+ type: string;
237
+ };
238
+ playIcon: {
206
239
  type: string;
207
240
  additionalProperties: boolean;
208
- required: string[];
209
241
  properties: {
210
- start: {
242
+ type: {
243
+ type: string;
244
+ enum: string[];
245
+ };
246
+ theme: {
211
247
  type: string;
248
+ enum: string[];
212
249
  };
213
- end: {
250
+ text: {
214
251
  type: string;
215
252
  };
216
253
  };
217
- } | {
254
+ };
255
+ controls: {
218
256
  type: string;
219
- })[];
220
- };
221
- type: {
222
- type: string;
223
- enum: string[];
224
- };
225
- muted: {
226
- type: string;
227
- };
228
- playing: {
229
- type: string;
230
- };
231
- elapsedTime: {
232
- type: string;
257
+ enum: string[];
258
+ };
233
259
  };
234
- playIcon: {
260
+ };
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: ({
235
275
  type: string;
236
276
  additionalProperties: boolean;
277
+ required: string[];
237
278
  properties: {
238
- type: {
279
+ id: {
239
280
  type: string;
240
- enum: string[];
241
281
  };
242
282
  theme: {
243
283
  type: string;
244
284
  enum: string[];
245
285
  };
246
- text: {
247
- type: string;
248
- };
249
286
  };
250
- };
251
- controls: {
287
+ } | {
252
288
  type: string;
253
- enum: string[];
254
- };
289
+ })[];
255
290
  };
256
291
  };
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
- };
287
292
  } | {
288
293
  type: string;
289
294
  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/esm/blocks/Header/Header.css CHANGED
@@ -124,6 +124,16 @@ unpredictable css rules order in build */
124
124
  top: 16px;
125
125
  z-index: 11;
126
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
+ }
127
137
  .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
128
138
  position: absolute;
129
139
  top: 0;
@@ -142,9 +152,6 @@ unpredictable css rules order in build */
142
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 {
143
153
  max-width: none;
144
154
  }
145
- .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 {
146
- height: 100%;
147
- }
148
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 {
149
156
  height: 100%;
150
157
  width: 100%;
package/build/esm/blocks/Header/Header.js CHANGED
@@ -1,37 +1,40 @@
1
1
  import React, { useContext } from 'react';
2
2
  import { block, getThemedValue } from '../../utils';
3
- import { Button, Media, BackgroundMedia, RouterLink, HTML } from '../../components';
3
+ import { Button, Media, RouterLink, HTML } from '../../components';
4
4
  import { Grid, Row, Col } from '../../grid';
5
5
  import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
6
+ import { MobileContext } from '../../context/mobileContext';
6
7
  import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
7
8
  import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
8
9
  import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
9
10
  import { getMediaImage } from '../../components/Media/Image/utils';
10
11
  import './Header.css';
11
12
  const b = block('header-block');
12
- const Background = ({ background }) => {
13
- const { url, image, fullWidthMedia } = background;
13
+ const Background = ({ background, isMobile }) => {
14
+ const { url, image, fullWidthMedia, video, color } = background;
14
15
  const imageObject = url ? getMediaImage(url) : image;
15
- return (React.createElement(BackgroundMedia, Object.assign({}, background, { image: imageObject, animated: false, parallax: false, mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) })));
16
+ const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
17
+ return (React.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (React.createElement(Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject })))));
16
18
  };
17
19
  const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
18
20
  export const HeaderBlock = (props) => {
19
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);
20
23
  const { themeValue: theme } = useContext(ThemeValueContext);
21
- const hasMedia = Boolean(image || video);
24
+ const hasRightSideImage = Boolean(image || video);
22
25
  const curImageSize = imageSize || getImageSize(width);
23
- const titleSizes = hasMedia ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
26
+ const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
24
27
  let curVerticalOffset = verticalOffset;
25
- if (hasMedia && !verticalOffset) {
28
+ if (hasRightSideImage && !verticalOffset) {
26
29
  curVerticalOffset = 'm';
27
30
  }
28
31
  const backgroundThemed = background && getThemedValue(background, theme);
29
32
  const imageThemed = image && getThemedValue(image, theme);
30
33
  const videoThemed = video && getThemedValue(video, theme);
31
- const fullWidth = backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth;
32
- return (React.createElement("header", { className: b({ ['has-media']: hasMedia, ['full-width']: fullWidth }, className) },
34
+ const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
35
+ return (React.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
33
36
  backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
34
- backgroundThemed && React.createElement(Background, { background: backgroundThemed }),
37
+ backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
35
38
  React.createElement(Grid, { containerClass: b('container-fluid') },
36
39
  breadcrumbs && (React.createElement(Row, { className: b('breadcrumbs') },
37
40
  React.createElement(Col, null,
@@ -56,6 +59,6 @@ export const HeaderBlock = (props) => {
56
59
  buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
57
60
  React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
58
61
  children))),
59
- 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 })))))));
60
63
  };
61
64
  export default HeaderBlock;