Iframe refactoring

src/components/Media/Iframe/Iframe.scss

@@ -17,9 +17,4 @@ $block: '.#{$ns}media-component-iframe';
     #{$block}__iframe {
         border-radius: 0;
     }
-
-    &__item {
-        width: 100%;
-        height: 100%;
-    }
 }

src/components/Media/Iframe/Iframe.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
+
+import {v4 as uuidv4} from 'uuid';
 
 import {MediaComponentIframeProps} from '../../../models';
 import {block} from '../../../utils';
@@ -11,21 +13,91 @@ const b = block('media-component-iframe');
 
 const Iframe = (props: MediaComponentIframeProps) => {
     const {iframe, margins = true} = props;
-    const {height = 400, src, width, name, title} = iframe;
+    const {height = 400, src, width = '100%', name, title, justifyContent = 'center'} = iframe;
+
+    const formContainerRef = useRef<HTMLDivElement>(null);
+    const iframeRef = useRef<HTMLIFrameElement>();
+    const {current: iframeId} = useRef(uuidv4());
+
+    const updateIframe = useCallback(
+        (container: HTMLDivElement) => {
+            if (iframeRef.current) {
+                iframeRef.current.src = src;
+            } else {
+                const iframeWidth = typeof width === 'number' ? `${width}px` : width;
+                let iframeHeight: string | number | undefined =
+                    typeof height === 'number' ? `${height}px` : height;
+
+                if (height === 'auto') {
+                    iframeHeight = undefined;
+                }
+
+                iframeRef.current = document.createElement('iframe');
+                iframeRef.current.src = src;
+                iframeRef.current.id = iframeId;
+                iframeRef.current.name = name || iframeId;
+                iframeRef.current.setAttribute('loading', 'lazy');
+                iframeRef.current.setAttribute('title', title || i18n('iframe-title'));
+                iframeRef.current.frameBorder = '0';
+                iframeRef.current.scrolling = 'no';
+                iframeRef.current.width = iframeWidth;
+                iframeRef.current.style.width = iframeWidth;
+                if (iframeHeight) {
+                    iframeRef.current.style.height = iframeHeight;
+                }
+
+                container.appendChild(iframeRef.current);
+            }
+        },
+        [src, width, iframeId, name, title, height],
+    );
+
+    const handleMessage = useCallback(
+        ({data}: MessageEvent) => {
+            if (height !== 'auto' && typeof height === 'number' && iframeRef.current) {
+                iframeRef.current.height = `${height}px`;
+                return;
+            }
+
+            try {
+                const parsed = JSON.parse(data);
+                const iframeHeight = parsed['iframe-height'];
+                const {message, name: iframeName} = parsed;
+                if (iframeName !== name && iframeName !== iframeId) {
+                    return;
+                }
+
+                if (iframeRef.current && iframeHeight && !message) {
+                    iframeRef.current.height = `${iframeHeight}px`;
+                }
+            } catch (error) {
+                return;
+            }
+        },
+        [height, iframeId, name],
+    );
+
+    const addIframe = useCallback(() => {
+        const container = formContainerRef.current;
+
+        if (container) {
+            updateIframe(container);
+            window.addEventListener('message', handleMessage, {passive: true});
+        }
+    }, [updateIframe, handleMessage]);
+
+    useEffect(() => {
+        addIframe();
+
+        return () => window.removeEventListener('message', handleMessage);
+    }, [addIframe, handleMessage]);
 
     return iframe ? (
-        <div className={b({margins})} style={{height}}>
-            <iframe
-                className={b('item')}
-                loading="lazy"
-                title={title || i18n('iframe-title')}
-                frameBorder={0}
-                src={src}
-                width={width}
-                height={height}
-                name={name}
-            />
-        </div>
+        <div
+            className={b({margins})}
+            ref={formContainerRef}
+            style={{height, textAlign: justifyContent}}
+        />
     ) : null;
 };
 

src/components/Media/__stories__/Media.stories.tsx

@@ -20,8 +20,6 @@ const DefaultTemplate: StoryFn<MediaAllProps> = (args) => (
 
 const IframeTemplate: StoryFn<MediaAllProps> = (args) => (
     <div style={{maxWidth: '500px'}}>
-        <h1>Iframe with margins (default)</h1>
-        <Media {...args} />
         <h1>Iframe without margins</h1>
         <Media {...args} margins={false} />
     </div>
@@ -34,6 +32,7 @@ export const Youtube = DefaultTemplate.bind({});
 export const DataLens = DefaultTemplate.bind({});
 export const DataLensDarkTheme = DefaultTemplate.bind({});
 export const Iframe = IframeTemplate.bind({});
+export const IframeForm = IframeTemplate.bind({});
 
 Image.args = data.image.content;
 ImageSlider.args = data.imageSlider.content;
@@ -42,3 +41,4 @@ Youtube.args = data.youtube.content;
 DataLens.args = data.dataLens.content;
 DataLensDarkTheme.args = data.dataLensDarkTheme.content as MediaProps;
 Iframe.args = data.iframe.content as MediaProps;
+IframeForm.args = data.iframeForm.content as MediaProps;

src/components/Media/__stories__/data.json

@@ -26,6 +26,16 @@
       }
     }
   },
+  "iframeForm": {
+    "content": {
+      "iframe": {
+        "src": "https://forms.yandex.ru/cloud/61a4e639d4d24e0dbba36f5c/?viewMode=docs&id=components-yandexform--docs&args=&url=http%3A%2F%2Flocalhost%3A7009%2Fiframe.html&iframe=1&lang=en&theme=cloud-www",
+        "name": "iframe-form-1",
+        "height": "auto",
+        "justifyContent": "center"
+      }
+    }
+  },
   "youtube": {
     "content": {
       "youtube": "https://youtu.be/0Qd3T6skprA",

src/models/constructor-items/common.ts

@@ -344,12 +344,15 @@ export interface DataLensObjectProps {
     theme: 'dark' | 'light';
 }
 
+export type JustifyValues = 'left' | 'right' | 'center';
+
 export interface IframeProps {
     src: string;
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     title?: string;
     name?: string;
+    justifyContent?: JustifyValues;
 }
 
 export type DataLensProps = string | DataLensObjectProps;

src/schema/validators/common.ts

@@ -602,11 +602,15 @@ const IframeProps = {
             type: 'string',
         },
         height: {
-            type: 'number',
+            oneOf: [{type: 'number'}, {type: 'string', enum: ['auto']}],
         },
         width: {
             type: 'number',
         },
+        justifyContent: {
+            type: 'string',
+            enum: ['left', 'right', 'center'],
+        },
     },
 };