diff --git a/src/components/Media/Iframe/Iframe.scss b/src/components/Media/Iframe/Iframe.scss index fc12f8aab..548c819cb 100644 --- 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 index cb46c35e8..72d3c2eba 100644 --- 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(null); const iframeRef = useRef(); 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 ? (
) : null; }; diff --git a/src/components/Media/__stories__/Media.stories.tsx b/src/components/Media/__stories__/Media.stories.tsx index 007996731..987e06c8c 100644 --- a/src/components/Media/__stories__/Media.stories.tsx +++ b/src/components/Media/__stories__/Media.stories.tsx @@ -18,14 +18,16 @@ const DefaultTemplate: StoryFn = (args) => (
); -const IframeTemplate: StoryFn = (args) => ( -
-

Iframe with margins (default)

- -

Iframe without margins

- -
-); +const IframeTemplate: StoryFn = (args) => { + return ( +
+

Iframe with margins (default)

+ +

Iframe without margins

+ +
+ ); +}; 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 index 810aa4f81..6c0c1d62d 100644 --- 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 index 10088f7b6..6f7c15d49 100644 --- 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;