fix: use styles for forcing nodes height after split (#1659)

* fix: use styles for forcing nodes height after split
* remove console.log
* add names for test
* add changeset

Author: jeetiss

.changeset/angry-bikes-allow.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': patch
+---
+
+use styles for forcing nodes height after split

packages/layout/src/node/splitNode.js

@@ -24,11 +24,13 @@ const splitNode = (node, height) => {
       borderBottomRightRadius: zero,
     }),
     box: {
-      height: R.always(height - nodeTop),
       borderBottomWidth: zero,
     },
   })(node);
 
+  // TODO: force height without style mutation
+  current.style.height = height - nodeTop;
+
   const nextHeight = R.ifElse(
     hasFixedHeight,
     subtractHeight(height - nodeTop),
@@ -46,11 +48,15 @@ const splitNode = (node, height) => {
     }),
     box: {
       top: zero,
-      height: R.always(nextHeight),
       borderTopWidth: zero,
     },
   })(node);
 
+  // TODO: force height without style mutation
+  if (nextHeight) {
+    next.style.height = nextHeight;
+  }
+
   return [current, next];
 };
 

packages/layout/tests/steps/resolvePagination.test.js

@@ -5,47 +5,47 @@ import resolveDimensions from '../../src/steps/resolveDimensions';
 const calcLayout = node => resolvePagination(resolveDimensions(node));
 
 describe('pagination step', () => {
-  const root = {
-    type: 'DOCUMENT',
-    children: [
-      {
-        type: 'PAGE',
-        box: {},
-        style: {
-          width: 100,
-          height: 100,
-        },
-        children: [
-          {
-            type: 'VIEW',
-            box: {},
-            style: {
-              position: 'absolute',
-              width: '50%',
-              top: 0,
-              bottom: 0,
-            },
-            props: {},
-            children: [],
+  test('should stretch absolute block to full page size', () => {
+    const root = {
+      type: 'DOCUMENT',
+      children: [
+        {
+          type: 'PAGE',
+          box: {},
+          style: {
+            width: 100,
+            height: 100,
           },
-          {
-            type: 'TEXT',
-            box: {},
-            style: {},
-            props: {},
-            children: [
-              {
-                type: 'TEXT_INSTANCE',
-                value: 'hello world',
+          children: [
+            {
+              type: 'VIEW',
+              box: {},
+              style: {
+                position: 'absolute',
+                width: '50%',
+                top: 0,
+                bottom: 0,
               },
-            ],
-          },
-        ],
-      },
-    ],
-  };
+              props: {},
+              children: [],
+            },
+            {
+              type: 'TEXT',
+              box: {},
+              style: {},
+              props: {},
+              children: [
+                {
+                  type: 'TEXT_INSTANCE',
+                  value: 'hello world',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
 
-  test('should stretch absolute block to full page size', () => {
     const layout = calcLayout(root);
 
     const page = layout.children[0];
@@ -54,4 +54,87 @@ describe('pagination step', () => {
     expect(page.box.height).toBe(100);
     expect(view.box.height).toBe(100);
   });
+
+  test('should force new height for split nodes', () => {
+    const root = {
+      type: 'DOCUMENT',
+      children: [
+        {
+          type: 'PAGE',
+          box: {},
+          style: {
+            width: 15,
+            height: 60,
+          },
+
+          children: [
+            {
+              type: 'VIEW',
+              box: {},
+              style: {},
+              props: {},
+              children: [
+                {
+                  type: 'TEXT',
+                  box: {},
+                  style: {},
+                  props: {},
+                  children: [
+                    {
+                      type: 'TEXT_INSTANCE',
+                      value: 'a a a a',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const layout = calcLayout(root);
+
+    const view1 = layout.children[0].children[0];
+    const view2 = layout.children[1].children[0];
+
+    expect(view1.box.height).toBe(60);
+    expect(view2.box.height).not.toBe(60);
+  });
+
+  test('should force new height for split nodes with fixed height', () => {
+    const root = {
+      type: 'DOCUMENT',
+      children: [
+        {
+          type: 'PAGE',
+          box: {},
+          style: {
+            width: 5,
+            height: 60,
+          },
+
+          children: [
+            {
+              type: 'VIEW',
+              box: {},
+              style: { height: 130 },
+              props: {},
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    const layout = calcLayout(root);
+
+    const view1 = layout.children[0].children[0];
+    const view2 = layout.children[1].children[0];
+    const view3 = layout.children[2].children[0];
+
+    expect(view1.box.height).toBe(60);
+    expect(view2.box.height).toBe(60);
+    expect(view3.box.height).toBe(10);
+  });
 });