@gravity-ui/page-constructor 1.9.2 → 1.9.3-alpha.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 CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.9.3](https://github.com/gravity-ui/page-constructor/compare/v1.9.2...v1.9.3) (2022-12-07)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * **Tabs:** padding and image props ([#77](https://github.com/gravity-ui/page-constructor/issues/77)) ([5809e6b](https://github.com/gravity-ui/page-constructor/commit/5809e6b6364e0b3d01621d15371ef5d0aaa9518b))
9
+
3
10
  ## [1.9.2](https://github.com/gravity-ui/page-constructor/compare/v1.9.1...v1.9.2) (2022-12-07)
4
11
 
5
12
 
@@ -8,13 +8,11 @@ unpredictable css rules order in build */
8
8
  margin-bottom: 24px;
9
9
  }
10
10
  .pc-tabs-block__block-title_centered {
11
- display: flex;
12
- justify-content: center;
13
- flex-wrap: wrap;
14
- margin-left: auto;
15
- margin-right: auto;
16
11
  text-align: center;
17
12
  }
13
+ .pc-tabs-block__block-title_centered > * {
14
+ margin: 0 auto;
15
+ }
18
16
  .pc-tabs-block__tabs_centered {
19
17
  display: flex;
20
18
  justify-content: center;
@@ -4,6 +4,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
4
4
  style?: CSSProperties;
5
5
  className?: string;
6
6
  onClick?: MouseEventHandler;
7
+ containerClassName?: string;
7
8
  }
8
9
  declare const Image: (props: ImageProps) => JSX.Element | null;
9
10
  export default Image;
@@ -4,14 +4,12 @@ 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
6
  const constants_1 = require("../../constants");
7
- const utils_1 = require("../../utils");
8
- const b = (0, utils_1.block)('image');
9
7
  const checkWebP = (src) => {
10
8
  return src.endsWith('.webp') ? src : src + '.webp';
11
9
  };
12
10
  const Image = (props) => {
13
11
  const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
14
- const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick } = props;
12
+ const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
15
13
  const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
16
14
  const imageSrc = src || desktop;
17
15
  if (!imageSrc) {
@@ -22,7 +20,7 @@ const Image = (props) => {
22
20
  disableCompress ||
23
21
  imageSrc.endsWith('.svg') ||
24
22
  imgLoadingError;
25
- return (react_1.default.createElement("picture", { className: b() },
23
+ return (react_1.default.createElement("picture", { className: containerClassName },
26
24
  mobile && (react_1.default.createElement(react_1.Fragment, null,
27
25
  !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
28
26
  react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),
@@ -19,6 +19,10 @@ unpredictable css rules order in build */
19
19
  object-fit: cover;
20
20
  display: block;
21
21
  }
22
+ .pc-VideoBlock__image-wrapper {
23
+ height: 100%;
24
+ width: 100%;
25
+ }
22
26
  .pc-VideoBlock__button {
23
27
  display: inline-block;
24
28
  margin: 0;
@@ -91,7 +91,7 @@ const VideoBlock = (props) => {
91
91
  return null;
92
92
  }
93
93
  return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
94
- react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image') }),
94
+ react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
95
95
  playButton || (react_1.default.createElement("button", { className: b('button') },
96
96
  react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));
97
97
  };
@@ -13,6 +13,49 @@ const getBlocksCases = (blocks) => {
13
13
  exports.getBlocksCases = getBlocksCases;
14
14
  function generateDefaultSchema(config) {
15
15
  const { cards = {}, blocks = {}, extensions = {} } = config !== null && config !== void 0 ? config : {};
16
+ const blocksValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.InfoBlock), blocks_1.SecurityBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.SimpleBlock), blocks_1.LinkTableBlock), blocks_1.PreviewBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock);
17
+ const cardsValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.PartnerBlock), sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.TutorialCard), sub_blocks_1.BackgroundCard), sub_blocks_1.NewsCard), sub_blocks_1.CardWithImage), sub_blocks_1.Quote), sub_blocks_1.BasicCard);
18
+ const constructorBlockSchemaNames = [
19
+ 'divider',
20
+ 'quote',
21
+ 'event',
22
+ 'post',
23
+ 'extended-features-block',
24
+ 'promo-features-block',
25
+ 'slider-block',
26
+ 'questions-block',
27
+ 'header-block',
28
+ 'banner-block',
29
+ 'companies-block',
30
+ 'media-block',
31
+ 'info-block',
32
+ 'security-block',
33
+ 'table-block',
34
+ 'tabs-block',
35
+ 'simple-block',
36
+ 'link-table-block',
37
+ 'preview-block',
38
+ 'price-detailed',
39
+ 'header-slider-block',
40
+ 'cards-with-image-block',
41
+ 'icons-block',
42
+ 'card-layout-block',
43
+ 'content-layout-block',
44
+ ];
45
+ const constructorCardsSchemaNames = [
46
+ 'partner',
47
+ 'media-card',
48
+ 'banner-card',
49
+ 'price-detailed',
50
+ 'tutoral-card',
51
+ 'background-card',
52
+ 'news-card',
53
+ 'card-with-image',
54
+ 'quote',
55
+ 'basic-card',
56
+ ];
57
+ const configBlockSchemaNames = Object.keys(blocks).filter((item) => !constructorBlockSchemaNames.includes(item));
58
+ const configCardSchemaNames = Object.keys(blocks).filter((item) => !constructorBlockSchemaNames.includes(item));
16
59
  return {
17
60
  $id: 'self',
18
61
  definitions: {
@@ -22,38 +65,11 @@ function generateDefaultSchema(config) {
22
65
  properties: {
23
66
  type: {
24
67
  type: 'string',
25
- enum: [
26
- 'divider',
27
- 'quote',
28
- 'event',
29
- 'post',
30
- 'extended-features-block',
31
- 'promo-features-block',
32
- 'slider-block',
33
- 'questions-block',
34
- 'header-block',
35
- 'banner-block',
36
- 'companies-block',
37
- 'media-block',
38
- 'info-block',
39
- 'security-block',
40
- 'table-block',
41
- 'tabs-block',
42
- 'simple-block',
43
- 'link-table-block',
44
- 'preview-block',
45
- 'price-detailed',
46
- 'header-slider-block',
47
- 'cards-with-image-block',
48
- 'icons-block',
49
- 'card-layout-block',
50
- 'content-layout-block',
51
- ...Object.keys(blocks),
52
- ],
68
+ enum: [...constructorBlockSchemaNames, ...configBlockSchemaNames],
53
69
  },
54
70
  },
55
71
  select: { $data: '0/type' },
56
- selectCases: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, blocks_1.TabsBlock), blocks_1.SliderBlock), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.InfoBlock), blocks_1.QuestionsBlock), blocks_1.SecurityBlock), blocks_1.TableBlock), blocks_1.SimpleBlock), blocks_1.LinkTableBlock), blocks_1.PreviewBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), sub_blocks_1.Divider), (0, exports.getBlocksCases)(blocks)),
72
+ selectCases: Object.assign(Object.assign({}, blocksValidators), (0, exports.getBlocksCases)(blocks)),
57
73
  }),
58
74
  cards: (0, utils_1.filteredItem)({
59
75
  type: 'object',
@@ -61,24 +77,11 @@ function generateDefaultSchema(config) {
61
77
  properties: {
62
78
  type: {
63
79
  type: 'string',
64
- enum: [
65
- 'partner',
66
- 'post',
67
- 'media-card',
68
- 'banner-card',
69
- 'price-detailed',
70
- 'tutoral-card',
71
- 'background-card',
72
- 'news-card',
73
- 'card-with-image',
74
- 'quote',
75
- 'basic-card',
76
- ...Object.keys(cards),
77
- ],
80
+ enum: [...constructorCardsSchemaNames, ...configCardSchemaNames],
78
81
  },
79
82
  },
80
83
  select: { $data: '0/type' },
81
- selectCases: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.PartnerBlock), sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.TutorialCard), sub_blocks_1.BackgroundCard), sub_blocks_1.NewsCard), sub_blocks_1.CardWithImage), sub_blocks_1.Quote), (0, exports.getBlocksCases)(cards)),
84
+ selectCases: Object.assign(Object.assign({}, cardsValidators), (0, exports.getBlocksCases)(cards)),
82
85
  }),
83
86
  },
84
87
  type: 'object',
@@ -8,13 +8,11 @@ unpredictable css rules order in build */
8
8
  margin-bottom: 24px;
9
9
  }
10
10
  .pc-tabs-block__block-title_centered {
11
- display: flex;
12
- justify-content: center;
13
- flex-wrap: wrap;
14
- margin-left: auto;
15
- margin-right: auto;
16
11
  text-align: center;
17
12
  }
13
+ .pc-tabs-block__block-title_centered > * {
14
+ margin: 0 auto;
15
+ }
18
16
  .pc-tabs-block__tabs_centered {
19
17
  display: flex;
20
18
  justify-content: center;
@@ -1,10 +1,10 @@
1
1
  import { CSSProperties, MouseEventHandler } from 'react';
2
2
  import { ImageDeviceProps, ImageObjectProps } from '../../models';
3
- import './Image.css';
4
3
  export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
5
4
  style?: CSSProperties;
6
5
  className?: string;
7
6
  onClick?: MouseEventHandler;
7
+ containerClassName?: string;
8
8
  }
9
9
  declare const Image: (props: ImageProps) => JSX.Element | null;
10
10
  export default Image;
@@ -1,15 +1,12 @@
1
1
  import React, { useContext, useState, Fragment } from 'react';
2
2
  import { ProjectSettingsContext } from '../../context/projectSettingsContext';
3
3
  import { BREAKPOINTS } from '../../constants';
4
- import { block } from '../../utils';
5
- import './Image.css';
6
- const b = block('image');
7
4
  const checkWebP = (src) => {
8
5
  return src.endsWith('.webp') ? src : src + '.webp';
9
6
  };
10
7
  const Image = (props) => {
11
8
  const projectSettings = useContext(ProjectSettingsContext);
12
- const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick } = props;
9
+ const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
13
10
  const [imgLoadingError, setImgLoadingError] = useState(false);
14
11
  const imageSrc = src || desktop;
15
12
  if (!imageSrc) {
@@ -20,7 +17,7 @@ const Image = (props) => {
20
17
  disableCompress ||
21
18
  imageSrc.endsWith('.svg') ||
22
19
  imgLoadingError;
23
- return (React.createElement("picture", { className: b() },
20
+ return (React.createElement("picture", { className: containerClassName },
24
21
  mobile && (React.createElement(Fragment, null,
25
22
  !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)` })),
26
23
  React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)` }))),
@@ -19,6 +19,10 @@ unpredictable css rules order in build */
19
19
  object-fit: cover;
20
20
  display: block;
21
21
  }
22
+ .pc-VideoBlock__image-wrapper {
23
+ height: 100%;
24
+ width: 100%;
25
+ }
22
26
  .pc-VideoBlock__button {
23
27
  display: inline-block;
24
28
  margin: 0;
@@ -87,7 +87,7 @@ const VideoBlock = (props) => {
87
87
  return null;
88
88
  }
89
89
  return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
90
- React.createElement(Image, { src: previewImg, className: b('image') }),
90
+ React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
91
91
  playButton || (React.createElement("button", { className: b('button') },
92
92
  React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 })))))));
93
93
  };
@@ -1,6 +1,6 @@
1
1
  export { validators } from './validators';
2
2
  import { TabsBlock, BannerCard, SliderBlock, ExtendedFeaturesBlock, HeaderBlock, BannerBlock, CompaniesBlock, MediaBlock, InfoBlock, QuestionsBlock, SecurityBlock, TableBlock, SimpleBlock, LinkTableBlock, PromoFeaturesBlock, PreviewBlock, ContentLayoutBlock, HeaderSliderBlock, IconsBlock, CardLayoutBlock, } from './validators/blocks';
3
- import { PartnerBlock, MediaCardBlock, TutorialCard, BackgroundCard, NewsCard, CardWithImage, PriceDetailedBlock, Quote, Divider, } from './validators/sub-blocks';
3
+ import { PartnerBlock, MediaCardBlock, TutorialCard, BackgroundCard, NewsCard, CardWithImage, PriceDetailedBlock, Quote, Divider, BasicCard, } from './validators/sub-blocks';
4
4
  import { AnimatableProps, BackgroundProps, MenuProps, withTheme } from './validators/common';
5
5
  import { filteredItem } from './validators/utils';
6
6
  export const getBlocksCases = (blocks) => {
@@ -8,6 +8,49 @@ export const getBlocksCases = (blocks) => {
8
8
  };
9
9
  export function generateDefaultSchema(config) {
10
10
  const { cards = {}, blocks = {}, extensions = {} } = config !== null && config !== void 0 ? config : {};
11
+ const blocksValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), InfoBlock), SecurityBlock), TableBlock), TabsBlock), SimpleBlock), LinkTableBlock), PreviewBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock);
12
+ const cardsValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, PartnerBlock), MediaCardBlock), BannerCard), PriceDetailedBlock), TutorialCard), BackgroundCard), NewsCard), CardWithImage), Quote), BasicCard);
13
+ const constructorBlockSchemaNames = [
14
+ 'divider',
15
+ 'quote',
16
+ 'event',
17
+ 'post',
18
+ 'extended-features-block',
19
+ 'promo-features-block',
20
+ 'slider-block',
21
+ 'questions-block',
22
+ 'header-block',
23
+ 'banner-block',
24
+ 'companies-block',
25
+ 'media-block',
26
+ 'info-block',
27
+ 'security-block',
28
+ 'table-block',
29
+ 'tabs-block',
30
+ 'simple-block',
31
+ 'link-table-block',
32
+ 'preview-block',
33
+ 'price-detailed',
34
+ 'header-slider-block',
35
+ 'cards-with-image-block',
36
+ 'icons-block',
37
+ 'card-layout-block',
38
+ 'content-layout-block',
39
+ ];
40
+ const constructorCardsSchemaNames = [
41
+ 'partner',
42
+ 'media-card',
43
+ 'banner-card',
44
+ 'price-detailed',
45
+ 'tutoral-card',
46
+ 'background-card',
47
+ 'news-card',
48
+ 'card-with-image',
49
+ 'quote',
50
+ 'basic-card',
51
+ ];
52
+ const configBlockSchemaNames = Object.keys(blocks).filter((item) => !constructorBlockSchemaNames.includes(item));
53
+ const configCardSchemaNames = Object.keys(blocks).filter((item) => !constructorBlockSchemaNames.includes(item));
11
54
  return {
12
55
  $id: 'self',
13
56
  definitions: {
@@ -17,38 +60,11 @@ export function generateDefaultSchema(config) {
17
60
  properties: {
18
61
  type: {
19
62
  type: 'string',
20
- enum: [
21
- 'divider',
22
- 'quote',
23
- 'event',
24
- 'post',
25
- 'extended-features-block',
26
- 'promo-features-block',
27
- 'slider-block',
28
- 'questions-block',
29
- 'header-block',
30
- 'banner-block',
31
- 'companies-block',
32
- 'media-block',
33
- 'info-block',
34
- 'security-block',
35
- 'table-block',
36
- 'tabs-block',
37
- 'simple-block',
38
- 'link-table-block',
39
- 'preview-block',
40
- 'price-detailed',
41
- 'header-slider-block',
42
- 'cards-with-image-block',
43
- 'icons-block',
44
- 'card-layout-block',
45
- 'content-layout-block',
46
- ...Object.keys(blocks),
47
- ],
63
+ enum: [...constructorBlockSchemaNames, ...configBlockSchemaNames],
48
64
  },
49
65
  },
50
66
  select: { $data: '0/type' },
51
- selectCases: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, TabsBlock), SliderBlock), ExtendedFeaturesBlock), PromoFeaturesBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), InfoBlock), QuestionsBlock), SecurityBlock), TableBlock), SimpleBlock), LinkTableBlock), PreviewBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), Divider), getBlocksCases(blocks)),
67
+ selectCases: Object.assign(Object.assign({}, blocksValidators), getBlocksCases(blocks)),
52
68
  }),
53
69
  cards: filteredItem({
54
70
  type: 'object',
@@ -56,24 +72,11 @@ export function generateDefaultSchema(config) {
56
72
  properties: {
57
73
  type: {
58
74
  type: 'string',
59
- enum: [
60
- 'partner',
61
- 'post',
62
- 'media-card',
63
- 'banner-card',
64
- 'price-detailed',
65
- 'tutoral-card',
66
- 'background-card',
67
- 'news-card',
68
- 'card-with-image',
69
- 'quote',
70
- 'basic-card',
71
- ...Object.keys(cards),
72
- ],
75
+ enum: [...constructorCardsSchemaNames, ...configCardSchemaNames],
73
76
  },
74
77
  },
75
78
  select: { $data: '0/type' },
76
- selectCases: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, PartnerBlock), MediaCardBlock), BannerCard), PriceDetailedBlock), TutorialCard), BackgroundCard), NewsCard), CardWithImage), Quote), getBlocksCases(cards)),
79
+ selectCases: Object.assign(Object.assign({}, cardsValidators), getBlocksCases(cards)),
77
80
  }),
78
81
  },
79
82
  type: 'object',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "1.9.2",
3
+ "version": "1.9.3-alpha.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -121,5 +121,8 @@
121
121
  "*.{json,yaml,yml,md}": [
122
122
  "prettier --write"
123
123
  ]
124
+ },
125
+ "publishConfig": {
126
+ "tag": "alpha"
124
127
  }
125
128
  }
@@ -1,4 +0,0 @@
1
- .pc-image {
2
- height: 100%;
3
- width: 100%;
4
- }
@@ -1,4 +0,0 @@
1
- .pc-image {
2
- height: 100%;
3
- width: 100%;
4
- }