fix: media queries computing (#1910)

diegomura · Jul 3, 2022 · e94e50a · e94e50a
1 parent 3acf53b
commit e94e50a
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 2 deletions.
diff --git a/.changeset/hot-pets-repeat.md b/.changeset/hot-pets-repeat.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': patch
+---
+
+fix: media queries computing
diff --git a/packages/layout/src/steps/resolveStyles.js b/packages/layout/src/steps/resolveStyles.js
@@ -52,8 +52,10 @@ const resolveNodeStyles = container => node => {
  */
 const resolvePageStyles = page => {
   const dpi = page.props?.dpi || 72;
-  const box = page.box || page.style;
-  const container = { ...box, dpi };
+  const width = page.box?.width || page.style.width;
+  const height = page.box?.height || page.style.height;
+  const orientation = page.props?.orientation || 'portrait';
+  const container = { width, height, orientation, dpi };
 
   return resolveNodeStyles(container)(page);
 };

diff --git a/packages/layout/tests/steps/__snapshots__/resolveStyles.test.js.snap b/packages/layout/tests/steps/__snapshots__/resolveStyles.test.js.snap
@@ -185,6 +185,35 @@ Object {
 }
 `;
 
+exports[`layout resolveStyles Should resolve nested node styles media queries with page style 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "style": Object {
+            "backgroundColor": "green",
+          },
+          "type": "VIEW",
+        },
+        Object {
+          "style": Object {
+            "backgroundColor": "red",
+          },
+          "type": "VIEW",
+        },
+      ],
+      "style": Object {
+        "height": 200,
+        "width": 100,
+      },
+      "type": "PAGE",
+    },
+  ],
+  "type": "DOCUMENT",
+}
+`;
+
 exports[`layout resolveStyles Should resolve page styles 1`] = `
 Object {
   "children": Array [

diff --git a/packages/layout/tests/steps/resolveStyles.test.js b/packages/layout/tests/steps/resolveStyles.test.js
@@ -133,6 +133,41 @@ describe('layout resolveStyles', () => {
     expect(result).toMatchSnapshot();
   });
 
+  test('Should resolve nested node styles media queries with page style', () => {
+    const root = {
+      type: 'DOCUMENT',
+      children: [
+        {
+          type: 'PAGE',
+          style: { width: 100, height: 200 },
+          children: [
+            {
+              type: 'VIEW',
+              style: {
+                backgroundColor: 'red',
+                '@media max-width: 500': {
+                  backgroundColor: 'green',
+                },
+              },
+            },
+            {
+              type: 'VIEW',
+              style: {
+                backgroundColor: 'red',
+                '@media min-width: 500': {
+                  backgroundColor: 'green',
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+    const result = resolveStyles(root);
+
+    expect(result).toMatchSnapshot();
+  });
+
   test('Should resolve nested node styles array', () => {
     const root = {
       type: 'DOCUMENT',