Break on containers whose children can not fit on a page (#2198)

* Break on containers whose children can not fit on a page

* changeset

---------

Co-authored-by: Dmitry Ivakhnenko <jeetiss@yandex.ru>

Author: Solpatium

.changeset/moody-bottles-buy.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': minor
+---
+
+Break on containers whose children can not fit on a page

packages/layout/src/steps/resolvePagination.js

@@ -95,6 +95,18 @@ const splitNodes = (height, contentArea, nodes) => {
     if (shouldSplit) {
       const [currentChild, nextChild] = split(child, height, contentArea);
 
+      // All children are moved to the next page, it doesn't make sense to show the parent on the current page
+      if (child.children.length > 0 && currentChild.children.length === 0) {
+        const box = Object.assign({}, child.box, {
+          top: child.box.top - height,
+        });
+        const next = Object.assign({}, child, { box });
+
+        currentChildren.push(...futureFixedNodes);
+        nextChildren.push(next, ...futureNodes);
+        break;
+      }
+
       if (currentChild) currentChildren.push(currentChild);
       if (nextChild) nextChildren.push(nextChild);
 

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

@@ -169,4 +169,66 @@ describe('pagination step', () => {
 
     expect(layout.children.length).toBe(1);
   });
+
+  test('should break on a container whose children can not fit on a page', () => {
+    const root = {
+      type: 'DOCUMENT',
+      children: [
+        {
+          type: 'PAGE',
+          box: {},
+          style: {
+            width: 5,
+            height: 60,
+          },
+
+          children: [
+            {
+              type: 'VIEW',
+              box: {},
+              style: {
+                width: 5,
+                height: 40,
+              },
+              props: {},
+              children: [],
+            },
+            {
+              type: 'VIEW',
+              box: {},
+              style: {
+                width: 5,
+              },
+              props: {},
+              children: [
+                {
+                  type: 'VIEW',
+                  box: {},
+                  style: {
+                    height: 40,
+                  },
+                  props: {
+                    wrap: false,
+                  },
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const layout = calcLayout(root);
+    console.log(layout.children[0].children);
+
+    const page1 = layout.children[0];
+    const page2 = layout.children[1];
+
+    // Only the first view is displayed on the first page
+    expect(page1.children.length).toBe(1);
+    // The second page displays the second wrapper, with its full height
+    expect(page2.children.length).toBe(1);
+    expect(page2.children[0].box.height).toBe(40);
+  });
 });