add useScreenHeight prop

eea · Jul 23, 2024 · a261a59 · a261a59
1 parent 0798660
commit a261a59
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/Blocks/Maps/schema.js b/src/Blocks/Maps/schema.js
@@ -35,7 +35,7 @@ export const MapsSchema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['url', 'title', 'align', 'height'],
+        fields: ['url', 'title', 'align', 'height', 'useScreenHeight'],
       },
     ],
 
@@ -63,6 +63,11 @@ export const MapsSchema = (props) => {
         ),
         description: props.intl.formatMessage(messages.CSSMapHeightDescription),
       },
+      useScreenHeight: {
+        title: 'Use screen height',
+        type: 'boolean',
+        default: false,
+      },
     },
     required: [],
   };

diff --git a/src/EmbedMap/EmbedMap.jsx b/src/EmbedMap/EmbedMap.jsx
@@ -22,12 +22,13 @@ const messages = defineMessages({
   },
 });
 
-function getHeight(height, screen) {
+function getHeight(data, screen) {
+  const { height, useScreenHeight } = data;
   const asNumber = isNumber(Number(height)) && !isNaN(Number(height));
   if (asNumber) {
     return `${height}px`;
   }
-  return height || (screen ? screen.page.height - 50 : 400);
+  return height || (useScreenHeight && screen ? screen.page.height - 50 : 400);
 }
 
 function EmbedMap({ data, intl, id, screen }) {
@@ -78,7 +79,7 @@ function EmbedMap({ data, intl, id, screen }) {
         <PrivacyProtection
           data={data}
           id={id}
-          height={getHeight(data.height, screen)}
+          height={getHeight(data, screen)}
           useVisibilitySensor={data.useVisibilitySensor ?? true}
         >
           <iframe
@@ -88,7 +89,7 @@ function EmbedMap({ data, intl, id, screen }) {
             className="google-map"
             frameBorder="0"
             allowFullScreen
-            style={{ height: getHeight(data.height, screen) }}
+            style={{ height: getHeight(data, screen) }}
           />
         </PrivacyProtection>
       </div>