feat: adjust alignment of iframe

gravity-ui · Jan 12, 2024 · 1cb314e · 1cb314e
1 parent a41480e
commit 1cb314e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/src/components/Media/Iframe/Iframe.scss b/src/components/Media/Iframe/Iframe.scss
@@ -14,12 +14,28 @@ $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 {
-        width: 100%;
+        &_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,12 +13,13 @@ 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, name, title, justifyContent = 'center'} = iframe;
 
     const formContainerRef = useRef<HTMLDivElement>(null);
     const iframeRef = useRef<HTMLIFrameElement>();
     const [iframeId] = useState(uuidv4());
-    const [fixedHeight] = useState(typeof height === 'number');
+    const [fullHeight] = useState(typeof height === 'number');
+    const [fullWidth] = useState(typeof width === 'number');
 
     const updateFormIframe = useCallback(
         (container: HTMLDivElement) => {
@@ -35,11 +36,14 @@ const Iframe = (props: MediaComponentIframeProps) => {
                 iframeRef.current.frameBorder = '0';
                 iframeRef.current.scrolling = 'no';
                 iframeRef.current.width = iframeWidth;
-                iframeRef.current.className = b('item', {'fixed-height': fixedHeight});
+                iframeRef.current.className = b('item', {
+                    'fixed-height': fullHeight,
+                    'fixed-width': !fullWidth,
+                });
                 container.appendChild(iframeRef.current);
             }
         },
-        [src, width, iframeId, name, title, fixedHeight],
+        [src, width, iframeId, name, title, fullHeight, fullWidth],
     );
 
     const handleMessage = useCallback(
@@ -79,7 +83,13 @@ const Iframe = (props: MediaComponentIframeProps) => {
         return () => window.removeEventListener('message', handleMessage);
     }, [addIframe, handleMessage]);
 
-    return iframe ? <div className={b({margins})} ref={formContainerRef} style={{height}} /> : null;
+    return iframe ? (
+        <div
+            className={b({margins, 'justify-content': justifyContent})}
+            ref={formContainerRef}
+            style={{height}}
+        />
+    ) : null;
 };
 
 export default Iframe;
diff --git a/src/models/constructor-items/common.ts b/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 | string;
     title?: string;
     name?: string;
+    justifyContent?: JustifyValues;
 }
 
 export type DataLensProps = string | DataLensObjectProps;

diff --git a/src/schema/validators/common.ts b/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'],
+        },
     },
 };