@gravity-ui/page-constructor 2.22.0-alpha.0 → 2.22.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.22.1](https://github.com/gravity-ui/page-constructor/compare/v2.22.0...v2.22.1) (2023-06-01)
+
+
+### Bug Fixes
+
+* filter block nesting ([#364](https://github.com/gravity-ui/page-constructor/issues/364)) ([5b62522](https://github.com/gravity-ui/page-constructor/commit/5b62522e5e34eeacbb2fb9ec6de957bba69cd758))
+
+## [2.22.0](https://github.com/gravity-ui/page-constructor/compare/v2.21.0...v2.22.0) (2023-05-31)
+
+
+### Features
+
+* **Media:** add fullscreen video ([#345](https://github.com/gravity-ui/page-constructor/issues/345)) ([516a9a8](https://github.com/gravity-ui/page-constructor/commit/516a9a8423d710b6ecad33046121c489fa876e30))
+
 ## [2.21.0](https://github.com/gravity-ui/page-constructor/compare/v2.20.1...v2.21.0) (2023-05-29)
 
 

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -12,6 +12,6 @@ const DEFAULT_SIZES = {
 };
 const b = (0, utils_1.block)('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
-    react_1.default.createElement(components_1.BlockHeader, { title: title, description: description }),
+    (title || description) && react_1.default.createElement(components_1.BlockHeader, { title: title, description: description }),
     react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 exports.default = CardLayout;

package/build/cjs/blocks/CardLayout/schema.d.ts

@@ -1,6 +1,6 @@
 export declare const CardLayoutProps: {
     additionalProperties: boolean;
-    required: string[];
+    required: never[];
     properties: {
         colSizes: {
             type: string;
@@ -76,7 +76,7 @@ export declare const CardLayoutProps: {
 export declare const CardLayoutBlock: {
     'card-layout-block': {
         additionalProperties: boolean;
-        required: string[];
+        required: never[];
         properties: {
             colSizes: {
                 type: string;

package/build/cjs/blocks/CardLayout/schema.js

@@ -4,7 +4,7 @@ exports.CardLayoutBlock = exports.CardLayoutProps = void 0;
 const common_1 = require("../../schema/validators/common");
 exports.CardLayoutProps = {
     additionalProperties: false,
-    required: ['title'],
+    required: [],
     properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { colSizes: common_1.containerSizesObject, children: common_1.ChildrenCardsProps }),
 };
 exports.CardLayoutBlock = {

package/build/cjs/blocks/FilterBlock/FilterBlock.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const __1 = require("..");
 const components_1 = require("../../components");
 const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs"));
-const ConstructorBlocks_1 = require("../../containers/PageConstructor/components/ConstructorBlocks");
+const ConstructorItem_1 = require("../../containers/PageConstructor/components/ConstructorItem");
 const grid_1 = require("../../grid");
-const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('filter-block');
@@ -24,25 +24,21 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             ? tabButtons[0].id
             : selectedTag;
     }, [tabButtons, selectedTag]);
-    const container = (0, react_1.useMemo)(() => {
+    const cards = (0, react_1.useMemo)(() => {
         const itemsToShow = actualTag
             ? items.filter((item) => item.tags.includes(actualTag))
             : items;
-        return [
-            {
-                type: models_1.BlockType.CardLayoutBlock,
-                title: '',
-                colSizes: colSizes,
-                children: itemsToShow.map((item) => item.card),
-            },
-        ];
-    }, [actualTag, items, colSizes]);
+        return itemsToShow.map((item) => item.card);
+    }, [actualTag, items]);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         title && (react_1.default.createElement(components_1.BlockHeader, { className: b('title', { centered: centered }), title: title, description: description })),
         tabButtons.length && (react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
         react_1.default.createElement(grid_1.Row, { className: b('block-container') },
-            react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: container }))));
+            react_1.default.createElement(__1.CardLayoutBlock, { title: "", colSizes: colSizes }, cards.map((card, index) => {
+                const key = (0, utils_1.getBlockKey)(card, index);
+                return react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: card, blockKey: key, key: key });
+            })))));
 };
 exports.default = FilterBlock;

package/build/cjs/components/FullscreenMedia/FullscreenMedia.js

@@ -10,6 +10,8 @@ const b = (0, utils_1.block)('full-screen-media');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const getMediaClass = (type) => b('modal-media', { type });
+// TODO delete along with showFullScreenIcon props
+const getShowFullscreenIcon = ({ showFullScreenIcon = true, showFullscreenIcon = true }) => showFullScreenIcon && showFullscreenIcon;
 const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIcon = true, }) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
@@ -24,7 +26,7 @@ const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIc
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullScreenIcon && showFullscreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+            getShowFullscreenIcon({ showFullScreenIcon, showFullscreenIcon }) && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },

package/build/cjs/components/Media/Image/Image.js

@@ -34,7 +34,7 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const fullscreenImage = (item) => {
+    const renderFullscreenImage = (item) => {
         const itemData = (0, utils_2.getMediaImage)(item);
         return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
     };
@@ -49,13 +49,13 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? fullscreenImage(item) : imageOnly(item))));
+        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);
     }
     if (fullscreen) {
-        return fullscreenImage(image);
+        return renderFullscreenImage(image);
     }
     return isBackground ? imageBackground(image) : imageOnly(image);
 };

package/build/cjs/components/Media/Media.js

@@ -10,6 +10,8 @@ const FullscreenVideo_1 = tslib_1.__importDefault(require("./FullscreenVideo/Ful
 const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
+// TODO delete along with fullScreen props
+const getFullscreen = ({ fullScreen, fullscreen }) => fullScreen || fullscreen;
 const Media = (props) => {
     const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, fullscreen, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
@@ -17,7 +19,7 @@ const Media = (props) => {
     const content = (0, react_1.useMemo)(() => {
         let result = [];
         if (image) {
-            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullScreen || fullscreen }));
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
         }
         if (video) {
             const videoProps = {
@@ -34,7 +36,7 @@ const Media = (props) => {
                 hasVideoFallback,
                 setHasVideoFallback,
             };
-            if (fullScreen || fullscreen) {
+            if (getFullscreen({ fullScreen, fullscreen })) {
                 result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps)));
             }
             else {
@@ -42,7 +44,7 @@ const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullScreen || fullscreen }));
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -246,7 +246,7 @@ export interface LinkTableBlockProps extends BlockHeaderProps {
     linkTheme?: LinkTheme;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleProps | string;
+    title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -10,6 +10,6 @@ const DEFAULT_SIZES = {
 };
 const b = block('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (React.createElement(AnimateBlock, { className: b(), animate: animated },
-    React.createElement(BlockHeader, { title: title, description: description }),
+    (title || description) && React.createElement(BlockHeader, { title: title, description: description }),
     React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 export default CardLayout;

package/build/esm/blocks/CardLayout/schema.d.ts

@@ -1,6 +1,6 @@
 export declare const CardLayoutProps: {
     additionalProperties: boolean;
-    required: string[];
+    required: never[];
     properties: {
         colSizes: {
             type: string;
@@ -76,7 +76,7 @@ export declare const CardLayoutProps: {
 export declare const CardLayoutBlock: {
     'card-layout-block': {
         additionalProperties: boolean;
-        required: string[];
+        required: never[];
         properties: {
             colSizes: {
                 type: string;

package/build/esm/blocks/CardLayout/schema.js

@@ -1,7 +1,7 @@
 import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, containerSizesObject, } from '../../schema/validators/common';
 export const CardLayoutProps = {
     additionalProperties: false,
-    required: ['title'],
+    required: [],
     properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { colSizes: containerSizesObject, children: ChildrenCardsProps }),
 };
 export const CardLayoutBlock = {

package/build/esm/blocks/FilterBlock/FilterBlock.js

@@ -1,10 +1,10 @@
 import React, { useMemo, useState } from 'react';
+import { CardLayoutBlock } from '..';
 import { AnimateBlock, BlockHeader } from '../../components';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
-import { ConstructorBlocks } from '../../containers/PageConstructor/components/ConstructorBlocks';
+import { ConstructorItem } from '../../containers/PageConstructor/components/ConstructorItem';
 import { Col, Row } from '../../grid';
-import { BlockType } from '../../models';
-import { block } from '../../utils';
+import { block, getBlockKey } from '../../utils';
 import i18n from './i18n';
 import './FilterBlock.css';
 const b = block('filter-block');
@@ -22,25 +22,21 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             ? tabButtons[0].id
             : selectedTag;
     }, [tabButtons, selectedTag]);
-    const container = useMemo(() => {
+    const cards = useMemo(() => {
         const itemsToShow = actualTag
             ? items.filter((item) => item.tags.includes(actualTag))
             : items;
-        return [
-            {
-                type: BlockType.CardLayoutBlock,
-                title: '',
-                colSizes: colSizes,
-                children: itemsToShow.map((item) => item.card),
-            },
-        ];
-    }, [actualTag, items, colSizes]);
+        return itemsToShow.map((item) => item.card);
+    }, [actualTag, items]);
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
         title && (React.createElement(BlockHeader, { className: b('title', { centered: centered }), title: title, description: description })),
         tabButtons.length && (React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
         React.createElement(Row, { className: b('block-container') },
-            React.createElement(ConstructorBlocks, { items: container }))));
+            React.createElement(CardLayoutBlock, { title: "", colSizes: colSizes }, cards.map((card, index) => {
+                const key = getBlockKey(card, index);
+                return React.createElement(ConstructorItem, { data: card, blockKey: key, key: key });
+            })))));
 };
 export default FilterBlock;

package/build/esm/components/FullscreenMedia/FullscreenMedia.js

@@ -8,6 +8,8 @@ const b = block('full-screen-media');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const getMediaClass = (type) => b('modal-media', { type });
+// TODO delete along with showFullScreenIcon props
+const getShowFullscreenIcon = ({ showFullScreenIcon = true, showFullscreenIcon = true }) => showFullScreenIcon && showFullscreenIcon;
 const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIcon = true, }) => {
     const [isOpened, setIsOpened] = useState(false);
     const isMobile = useContext(MobileContext);
@@ -22,7 +24,7 @@ const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIc
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullScreenIcon && showFullscreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+            getShowFullscreenIcon({ showFullScreenIcon, showFullscreenIcon }) && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
                 React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
         isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             React.createElement("div", { className: b('modal-content') },

package/build/esm/components/Media/Image/Image.js

@@ -32,7 +32,7 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const fullscreenImage = (item) => {
+    const renderFullscreenImage = (item) => {
         const itemData = getMediaImage(item);
         return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
     };
@@ -47,13 +47,13 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? fullscreenImage(item) : imageOnly(item))));
+        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);
     }
     if (fullscreen) {
-        return fullscreenImage(image);
+        return renderFullscreenImage(image);
     }
     return isBackground ? imageBackground(image) : imageOnly(image);
 };

package/build/esm/components/Media/Media.js

@@ -7,6 +7,8 @@ import Image from './Image/Image';
 import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
+// TODO delete along with fullScreen props
+const getFullscreen = ({ fullScreen, fullscreen }) => fullScreen || fullscreen;
 export const Media = (props) => {
     const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, fullscreen, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
@@ -14,7 +16,7 @@ export const Media = (props) => {
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullScreen || fullscreen }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
         }
         if (video) {
             const videoProps = {
@@ -31,7 +33,7 @@ export const Media = (props) => {
                 hasVideoFallback,
                 setHasVideoFallback,
             };
-            if (fullScreen || fullscreen) {
+            if (getFullscreen({ fullScreen, fullscreen })) {
                 result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps)));
             }
             else {
@@ -39,7 +41,7 @@ export const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullScreen || fullscreen }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });

package/build/esm/models/constructor-items/blocks.d.ts

@@ -246,7 +246,7 @@ export interface LinkTableBlockProps extends BlockHeaderProps {
     linkTheme?: LinkTheme;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleProps | string;
+    title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.22.0-alpha.0",
+  "version": "2.22.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -139,8 +139,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

package/server/models/constructor-items/blocks.d.ts

@@ -246,7 +246,7 @@ export interface LinkTableBlockProps extends BlockHeaderProps {
     linkTheme?: LinkTheme;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleProps | string;
+    title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }