@gravity-ui/page-constructor 4.38.1 → 4.39.1

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

@@ -245,6 +245,26 @@ export declare const Media: {
         ratio: {
             type: string;
         };
+        iframe: {
+            src: {
+                type: string;
+            };
+            name: {
+                type: string;
+            };
+            title: {
+                type: string;
+            };
+            height: {
+                type: string;
+            };
+            width: {
+                type: string;
+            };
+        };
+        margins: {
+            type: string;
+        };
     };
 };
 export declare const MediaBlockBaseProps: {
@@ -870,6 +890,26 @@ export declare const MediaBlock: {
                         ratio: {
                             type: string;
                         };
+                        iframe: {
+                            src: {
+                                type: string;
+                            };
+                            name: {
+                                type: string;
+                            };
+                            title: {
+                                type: string;
+                            };
+                            height: {
+                                type: string;
+                            };
+                            width: {
+                                type: string;
+                            };
+                        };
+                        margins: {
+                            type: string;
+                        };
                     };
                 } & {
                     optionName: string;

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

@@ -261,6 +261,26 @@ export declare const PromoFeaturesItem: {
                 ratio: {
                     type: string;
                 };
+                iframe: {
+                    src: {
+                        type: string;
+                    };
+                    name: {
+                        type: string;
+                    };
+                    title: {
+                        type: string;
+                    };
+                    height: {
+                        type: string;
+                    };
+                    width: {
+                        type: string;
+                    };
+                };
+                margins: {
+                    type: string;
+                };
             };
         };
     };

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

@@ -256,6 +256,26 @@ export declare const tabsItem: {
                     ratio: {
                         type: string;
                     };
+                    iframe: {
+                        src: {
+                            type: string;
+                        };
+                        name: {
+                            type: string;
+                        };
+                        title: {
+                            type: string;
+                        };
+                        height: {
+                            type: string;
+                        };
+                        width: {
+                            type: string;
+                        };
+                    };
+                    margins: {
+                        type: string;
+                    };
                 };
             } & {
                 optionName: string;

package/build/esm/components/Media/Iframe/Iframe.css

@@ -0,0 +1,18 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-iframe {
+  overflow: hidden;
+}
+.pc-media-component-iframe_margins {
+  margin: 24px;
+}
+.pc-media-component-iframe_margins .pc-media-component-iframe__item {
+  border-radius: 0;
+}
+.pc-media-component-iframe .pc-media-component-iframe__iframe {
+  border-radius: 0;
+}
+.pc-media-component-iframe__item {
+  width: 100%;
+  height: 100%;
+}

package/build/esm/components/Media/Iframe/Iframe.d.ts

@@ -0,0 +1,4 @@
+import { MediaComponentIframeProps } from '../../../models';
+import './Iframe.css';
+declare const Iframe: (props: MediaComponentIframeProps) => JSX.Element | null;
+export default Iframe;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { block } from '../../../utils';
+import i18n from './i18n';
+import './Iframe.css';
+const b = block('media-component-iframe');
+const Iframe = (props) => {
+    const { iframe, margins = true } = props;
+    const { height = 400, src, width, name, title } = iframe;
+    return iframe ? (React.createElement("div", { className: b({ margins }), style: { height } },
+        React.createElement("iframe", { className: b('item'), loading: "lazy", title: title || i18n('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
+};
+export default Iframe;

package/build/esm/components/Media/Iframe/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Datalens frame"
+}

package/build/esm/components/Media/Iframe/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/components/Media/Iframe/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'Iframe';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/Media/Iframe/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}

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

@@ -50,7 +50,7 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item, index) => (React.createElement(Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
+        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard, animated: parallax }, imageArray.map((item, index) => (React.createElement(Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

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

@@ -3,12 +3,13 @@ import { block, getQaAttrubutes } from '../../utils';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 import DataLens from './DataLens/DataLens';
 import FullscreenVideo from './FullscreenVideo/FullscreenVideo';
+import Iframe from './Iframe/Iframe';
 import Image from './Image/Image';
 import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
@@ -45,12 +46,16 @@ export const Media = (props) => {
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
         }
+        if (iframe) {
+            result = React.createElement(Iframe, { iframe: iframe, margins: margins });
+        }
         return result;
     }, [
         image,
         video,
         youtube,
         dataLens,
+        iframe,
         parallax,
         height,
         imageClassName,
@@ -70,6 +75,7 @@ export const Media = (props) => {
         ratio,
         youtubeClassName,
         autoplay,
+        margins,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -17,7 +17,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
-    const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = useMemo(() => ({
         context: {
             blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
@@ -41,7 +41,7 @@ export const Constructor = (props) => {
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
     const themedBackground = getThemedValue(background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
-        React.createElement(RootCn, null,
+        React.createElement(RootCn, { className: b() },
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },

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

@@ -200,7 +200,11 @@ export interface MediaComponentImageProps {
 export interface MediaComponentDataLensProps {
     dataLens: DataLensProps;
 }
-export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
+export interface MediaComponentIframeProps {
+    iframe: IframeProps;
+    margins?: boolean;
+}
+export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
@@ -253,6 +257,13 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
+export interface IframeProps {
+    src: string;
+    width?: number;
+    height?: number;
+    title?: string;
+    name?: string;
+}
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {
     firstName: string;

package/build/esm/schema/constants.d.ts

@@ -1098,6 +1098,26 @@ export declare const cardSchemas: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/schema/validators/common.d.ts

@@ -1353,6 +1353,26 @@ export declare const MediaProps: {
     ratio: {
         type: string;
     };
+    iframe: {
+        src: {
+            type: string;
+        };
+        name: {
+            type: string;
+        };
+        title: {
+            type: string;
+        };
+        height: {
+            type: string;
+        };
+        width: {
+            type: string;
+        };
+    };
+    margins: {
+        type: string;
+    };
 };
 export declare const YMapMarkerLabel: {
     type: string;

package/build/esm/schema/validators/common.js

@@ -496,6 +496,23 @@ export const ButtonBlock = {
         required: ['text', 'url'],
     },
 };
+const IframeProps = {
+    src: {
+        type: 'string',
+    },
+    name: {
+        type: 'string',
+    },
+    title: {
+        type: 'string',
+    },
+    height: {
+        type: 'number',
+    },
+    width: {
+        type: 'number',
+    },
+};
 export const MediaProps = {
     color: {
         type: 'string',
@@ -529,6 +546,10 @@ export const MediaProps = {
     ratio: {
         type: 'number',
     },
+    iframe: Object.assign({}, IframeProps),
+    margins: {
+        type: 'number',
+    },
 };
 export const YMapMarkerLabel = {
     type: 'object',

package/build/esm/sub-blocks/LayoutItem/schema.d.ts

@@ -246,6 +246,26 @@ export declare const LayoutItem: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
         };
         content: Partial<{
             title: {

package/build/esm/sub-blocks/MediaCard/schema.d.ts

@@ -251,6 +251,26 @@ export declare const MediaCardBlock: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/sub-blocks/PriceCard/schema.d.ts

@@ -635,6 +635,26 @@ export declare const PriceCardBlock: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.38.1",
+  "version": "4.39.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

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

@@ -200,7 +200,11 @@ export interface MediaComponentImageProps {
 export interface MediaComponentDataLensProps {
     dataLens: DataLensProps;
 }
-export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
+export interface MediaComponentIframeProps {
+    iframe: IframeProps;
+    margins?: boolean;
+}
+export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
@@ -253,6 +257,13 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
+export interface IframeProps {
+    src: string;
+    width?: number;
+    height?: number;
+    title?: string;
+    name?: string;
+}
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {
     firstName: string;