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

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 (30) hide show
  1. package/build/cjs/blocks/Header/Header.css +1 -4
  2. package/build/cjs/blocks/Header/Header.js +5 -13
  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/Image/schema.d.ts +4 -0
  7. package/build/cjs/components/Image/schema.js +7 -5
  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/cjs/schema/validators/common.d.ts +0 -1
  12. package/build/cjs/schema/validators/common.js +2 -3
  13. package/build/cjs/sub-blocks/Quote/schema.js +2 -2
  14. package/build/esm/blocks/Header/Header.css +1 -4
  15. package/build/esm/blocks/Header/Header.js +6 -14
  16. package/build/esm/blocks/Header/schema.d.ts +196 -244
  17. package/build/esm/blocks/Header/schema.js +1 -22
  18. package/build/esm/blocks/HeaderSlider/schema.d.ts +98 -122
  19. package/build/esm/components/Image/schema.d.ts +4 -0
  20. package/build/esm/components/Image/schema.js +4 -2
  21. package/build/esm/models/constructor-items/blocks.d.ts +2 -2
  22. package/build/esm/models/guards.d.ts +2 -3
  23. package/build/esm/models/guards.js +0 -3
  24. package/build/esm/schema/validators/common.d.ts +0 -1
  25. package/build/esm/schema/validators/common.js +1 -2
  26. package/build/esm/sub-blocks/Quote/schema.js +2 -2
  27. package/package.json +1 -1
  28. package/server/models/constructor-items/blocks.d.ts +2 -2
  29. package/server/models/guards.d.ts +2 -3
  30. 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/Image/schema.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
1
2
  export declare const ImageDeviceProps: {
2
3
  type: string;
3
4
  additionalProperties: boolean;
@@ -5,12 +6,15 @@ export declare const ImageDeviceProps: {
5
6
  properties: {
6
7
  desktop: {
7
8
  type: string;
9
+ pattern: string;
8
10
  };
9
11
  tablet: {
10
12
  type: string;
13
+ pattern: string;
11
14
  };
12
15
  mobile: {
13
16
  type: string;
17
+ pattern: string;
14
18
  };
15
19
  alt: {
16
20
  type: string;
package/build/cjs/components/Image/schema.js CHANGED
@@ -1,19 +1,21 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = void 0;
3
+ exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = exports.urlPattern = void 0;
4
4
  const utils_1 = require("../../schema/validators/utils");
5
- const common_1 = require("../../schema/validators/common");
5
+ exports.urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
6
6
  exports.ImageDeviceProps = {
7
7
  type: 'object',
8
8
  additionalProperties: false,
9
9
  required: ['desktop', 'mobile'],
10
10
  properties: {
11
- desktop: { type: 'string' },
11
+ desktop: { type: 'string', pattern: exports.urlPattern },
12
12
  tablet: {
13
13
  type: 'string',
14
+ pattern: exports.urlPattern,
14
15
  },
15
16
  mobile: {
16
17
  type: 'string',
18
+ pattern: exports.urlPattern,
17
19
  },
18
20
  alt: {
19
21
  type: 'string',
@@ -30,7 +32,7 @@ exports.ImageObjectProps = {
30
32
  properties: {
31
33
  src: {
32
34
  type: 'string',
33
- pattern: common_1.urlPattern,
35
+ pattern: exports.urlPattern,
34
36
  },
35
37
  alt: {
36
38
  type: 'string',
@@ -44,7 +46,7 @@ exports.ImageProps = {
44
46
  oneOf: [
45
47
  {
46
48
  type: 'string',
47
- pattern: common_1.urlPattern,
49
+ pattern: exports.urlPattern,
48
50
  },
49
51
  (0, utils_1.filteredItem)(Object.assign({}, exports.ImageObjectProps)),
50
52
  (0, utils_1.filteredItem)(Object.assign({}, exports.ImageDeviceProps)),
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/cjs/schema/validators/common.d.ts CHANGED
@@ -19,7 +19,6 @@ export declare const sizeNumber: {
19
19
  minimum: number;
20
20
  };
21
21
  export declare const contentThemes: string[];
22
- export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
23
22
  export declare const BaseProps: {
24
23
  type: {};
25
24
  when: {};
package/build/cjs/schema/validators/common.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.PlayIconProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.urlPattern = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
3
+ exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.PlayIconProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
4
4
  const pixel_1 = require("./pixel");
5
5
  const models_1 = require("../../models");
6
6
  const schema_1 = require("../../components/Image/schema");
@@ -18,7 +18,6 @@ exports.fileLinkTypes = ['vertical', 'horizontal'];
18
18
  exports.dividerEnum = { enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
19
19
  exports.sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
20
20
  exports.contentThemes = ['default', 'dark', 'light'];
21
- exports.urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
22
21
  exports.BaseProps = {
23
22
  type: {},
24
23
  when: {},
@@ -215,7 +214,7 @@ exports.authorItem = {
215
214
  },
216
215
  avatar: {
217
216
  type: 'string',
218
- pattern: exports.urlPattern,
217
+ pattern: schema_1.urlPattern,
219
218
  },
220
219
  description: {
221
220
  type: 'string',
package/build/cjs/sub-blocks/Quote/schema.js CHANGED
@@ -11,12 +11,12 @@ exports.Quote = {
11
11
  type: 'string',
12
12
  }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: {
13
13
  type: 'string',
14
- pattern: common_1.urlPattern,
14
+ pattern: schema_1.urlPattern,
15
15
  }, color: {
16
16
  type: 'string',
17
17
  }, url: {
18
18
  type: 'string',
19
- pattern: common_1.urlPattern,
19
+ pattern: schema_1.urlPattern,
20
20
  }, theme: common_1.ThemeProps, author: common_1.authorItem }),
21
21
  },
22
22
  };
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
  }
@@ -149,11 +150,7 @@ unpredictable css rules order in build */
149
150
  width: 100%;
150
151
  object-fit: cover;
151
152
  }
152
- .pc-header-block__background_full-width-media {
153
- --pc-border-radius: 0;
154
- }
155
153
  .pc-header-block__background_full-width {
156
- --pc-border-radius: 0;
157
154
  left: 0;
158
155
  transform: none;
159
156
  max-width: none;
package/build/esm/blocks/Header/Header.js CHANGED
@@ -1,7 +1,6 @@
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, BackgroundMedia, RouterLink, HTML } from '../../components';
5
4
  import { Grid, Row, Col } from '../../grid';
6
5
  import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
7
6
  import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
@@ -11,12 +10,9 @@ import { getMediaImage } from '../../components/Media/Image/utils';
11
10
  import './Header.css';
12
11
  const b = block('header-block');
13
12
  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 { url, image, fullWidthMedia } = background;
14
+ 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 }) })));
20
16
  };
21
17
  const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
22
18
  export const HeaderBlock = (props) => {
@@ -32,12 +28,8 @@ export const HeaderBlock = (props) => {
32
28
  const backgroundThemed = background && getThemedValue(background, theme);
33
29
  const imageThemed = image && getThemedValue(image, theme);
34
30
  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) },
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) },
41
33
  backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
42
34
  backgroundThemed && React.createElement(Background, { background: backgroundThemed }),
43
35
  React.createElement(Grid, { containerClass: b('container-fluid') },