Prevent infinite loop while splitting pages

packages/layout/src/steps/resolvePagination.js

@@ -100,13 +100,19 @@ const splitNodes = (height, contentArea, nodes) => {
 
  // 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);
+ // But if the current page is empty then we can just include the parent on the current page
+ if (currentChildren.length === 0) {
+ currentChildren.push(child, ...futureFixedNodes);
+ nextChildren.push(...futureNodes);
+ } else {
+ 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;
  }
 

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

@@ -249,4 +249,44 @@ describe('pagination step', () => {
  expect(page2.children.length).toBe(1);
  expect(page2.children[0].box.height).toBe(40);
  });
+
+ test('should not infinitely loop when splitting pages', async () => {
+ const yoga = await loadYoga();
+
+ const root = {
+ type: 'DOCUMENT',
+ yoga,
+ children: [
+ {
+ type: 'PAGE',
+ box: {},
+ style: {
+ height: 400,
+ },
+ children: [
+ {
+ type: 'VIEW',
+ box: {},
+ style: { height: 401 },
+ children: [
+ {
+ type: 'VIEW',
+ box: {},
+ style: {
+ height: 400,
+ },
+ props: { wrap: false, break: true },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+
+ calcLayout(root);
+
+ // If calcLayout returns then we did not hit an infinite loop
+ expect(true).toBe(true);
+ });
 });