feat: update a way params are thrown to iframe styles

gravity-ui · Dec 16, 2023 · fe87823 · fe87823
1 parent 818f843
commit fe87823
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 49 deletions.
diff --git a/src/components/Media/Iframe/Iframe.scss b/src/components/Media/Iframe/Iframe.scss
@@ -14,31 +14,7 @@ $block: '.#{$ns}media-component-iframe';
         }
     }
 
-    &_justify-content {
-        &_left {
-            text-align: left;
-        }
-
-        &_center {
-            text-align: center;
-        }
-
-        &_right {
-            text-align: right;
-        }
-    }
-
     #{$block}__iframe {
         border-radius: 0;
     }
-
-    &__item {
-        &_fixed-width {
-            width: 100%;
-        }
-
-        &_fixed-height {
-            height: 100%;
-        }
-    }
 }
diff --git a/src/components/Media/Iframe/Iframe.tsx b/src/components/Media/Iframe/Iframe.tsx
@@ -13,20 +13,25 @@ const b = block('media-component-iframe');
 
 const Iframe = (props: MediaComponentIframeProps) => {
     const {iframe, margins = true} = props;
-    const {height = 400, src, width, name, title, justifyContent = 'center'} = iframe;
+    const {height = 400, src, width = '100%', name, title, justifyContent = 'center'} = iframe;
 
     const formContainerRef = useRef<HTMLDivElement>(null);
     const iframeRef = useRef<HTMLIFrameElement>();
     const [iframeId] = useState(uuidv4());
-    const [fullHeight] = useState(typeof height === 'number');
-    const [fullWidth] = useState(typeof width === 'number');
 
     const updateFormIframe = useCallback(
         (container: HTMLDivElement) => {
             if (iframeRef.current) {
                 iframeRef.current.src = src;
             } else {
-                const iframeWidth = typeof width === 'number' ? `${width}px` : '100%';
+                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;
@@ -36,14 +41,15 @@ const Iframe = (props: MediaComponentIframeProps) => {
                 iframeRef.current.frameBorder = '0';
                 iframeRef.current.scrolling = 'no';
                 iframeRef.current.width = iframeWidth;
-                iframeRef.current.className = b('item', {
-                    'fixed-height': fullHeight,
-                    'fixed-width': !fullWidth,
-                });
+                iframeRef.current.style.width = iframeWidth;
+                if (iframeHeight) {
+                    iframeRef.current.style.height = iframeHeight;
+                }
+
                 container.appendChild(iframeRef.current);
             }
         },
-        [src, width, iframeId, name, title, fullHeight, fullWidth],
+        [src, width, iframeId, name, title, height],
     );
 
     const handleMessage = useCallback(
@@ -55,17 +61,20 @@ const Iframe = (props: MediaComponentIframeProps) => {
 
             try {
                 const parsed = JSON.parse(data);
-                const frameHeight = parsed['iframe-height'];
-                const {message} = parsed;
+                const iframeHeight = parsed['iframe-height'];
+                const {message, name: iframeName} = parsed;
+                if (iframeName !== name && iframeName !== iframeId) {
+                    return;
+                }
 
-                if (iframeRef.current && frameHeight && !message) {
-                    iframeRef.current.height = `${frameHeight}px`;
+                if (iframeRef.current && iframeHeight && !message) {
+                    iframeRef.current.height = `${iframeHeight}px`;
                 }
             } catch (error) {
                 return;
             }
         },
-        [height],
+        [height, iframeId, name],
     );
 
     const addIframe = useCallback(() => {
@@ -85,9 +94,9 @@ const Iframe = (props: MediaComponentIframeProps) => {
 
     return iframe ? (
         <div
-            className={b({margins, 'justify-content': justifyContent})}
+            className={b({margins})}
             ref={formContainerRef}
-            style={{height}}
+            style={{height, textAlign: justifyContent}}
         />
     ) : null;
 };

diff --git a/src/components/Media/__stories__/Media.stories.tsx b/src/components/Media/__stories__/Media.stories.tsx
@@ -18,14 +18,16 @@ const DefaultTemplate: StoryFn<MediaAllProps> = (args) => (
     </div>
 );
 
-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>
-);
+const IframeTemplate: StoryFn<MediaAllProps> = (args) => {
+    return (
+        <div style={{maxWidth: '700px'}}>
+            <h1>Iframe with margins (default)</h1>
+            <Media {...args} />
+            <h1>Iframe without margins</h1>
+            <Media {...args} margins={false} />
+        </div>
+    );
+};
 
 export const Image = DefaultTemplate.bind({});
 export const ImageSlider = DefaultTemplate.bind({});
@@ -34,6 +36,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 +45,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;
diff --git a/src/components/Media/__stories__/data.json b/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",

diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -348,7 +348,7 @@ export type JustifyValues = 'left' | 'right' | 'center';
 
 export interface IframeProps {
     src: string;
-    width?: number;
+    width?: number | string;
     height?: number | string;
     title?: string;
     name?: string;