feat: add gap percentage support

diegomura · Sep 22, 2024 · 0df4c35 · 0df4c35
1 parent 46c3047
commit 0df4c35
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 26 deletions.
diff --git a/.changeset/gentle-news-invite.md b/.changeset/gentle-news-invite.md
@@ -0,0 +1,6 @@
+---
+"@react-pdf/renderer": minor
+"@react-pdf/layout": minor
+---
+
+feat: add gap percentage support
diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -29,7 +29,7 @@
  "cross-fetch": "^3.1.5",
  "emoji-regex": "^10.3.0",
  "queue": "^6.0.1",
- "yoga-layout": "^3.0.0"
+ "yoga-layout": "^3.1.0"
  },
  "files": [
  "lib"

diff --git a/packages/layout/src/node/setGap.js b/packages/layout/src/node/setGap.js
@@ -1,27 +1,12 @@
 import * as Yoga from 'yoga-layout/load';
-import { isNil, matchPercent } from '@react-pdf/fns';
+import { isNil } from '@react-pdf/fns';
 
 /**
  * @typedef {Function} NodeInstanceWrapper
  * @param {Object} node node instance
  * @returns {Object} node instance
  */
 
-/**
- * Check if value is a percentage and throw error if so
- *
- * @param {string} attr property
- * @param {unknown} value
- * @returns {void}
- */
-const checkPercents = (attr, value) => {
- const percent = matchPercent(value);
-
- if (percent) {
- throw new Error(`You can't pass percentage values to ${attr} property`);
- }
-};
-
 /**
  * Set rowGap value to node's Yoga instance
  *
@@ -32,7 +17,6 @@ export const setRowGap = (value) => (node) => {
  const { yogaNode } = node;
 
  if (!isNil(value) && yogaNode) {
- checkPercents('rowGap', value);
  yogaNode.setGap(Yoga.Gutter.Row, value);
  }
 
@@ -49,7 +33,6 @@ export const setColumnGap = (value) => (node) => {
  const { yogaNode } = node;
 
  if (!isNil(value) && yogaNode) {
- checkPercents('columnGap', value);
  yogaNode.setGap(Yoga.Gutter.Column, value);
  }
 

diff --git a/packages/renderer/tests/gap.test.jsx b/packages/renderer/tests/gap.test.jsx
@@ -55,6 +55,34 @@ describe('flex', () => {
  expect(image).toMatchImageSnapshot();
  });
 
+ test('should support percentage gap', async () => {
+ const image = await mount(
+ <View
+ style={{
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ flexWrap: 'wrap',
+ backgroundColor: '#e2e2e2',
+ gap: '15%',
+ }}
+ >
+ {items.map((color, index) => (
+ <View
+ key={index}
+ style={{
+ width: 10,
+ height: 10,
+ backgroundColor: color,
+ }}
+ />
+ ))}
+ </View>,
+ );
+
+ expect(image).toMatchImageSnapshot();
+ });
+
  test('should support rowGap and columnGap', async () => {
  const image = await mount(
  <View
@@ -84,9 +112,32 @@ describe('flex', () => {
  expect(image).toMatchImageSnapshot();
  });
 
- test('should throw when value is percent', async () => {
- expect(mount(<View style={{ gap: '10%' }} />)).rejects.toThrow(
- "You can't pass percentage values to columnGap property",
+ test('should support percentage rowGap and columnGap', async () => {
+ const image = await mount(
+ <View
+ style={{
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ flexWrap: 'wrap',
+ backgroundColor: '#e2e2e2',
+ rowGap: '10%',
+ columnGap: '20%',
+ }}
+ >
+ {items.map((color, index) => (
+ <View
+ key={index}
+ style={{
+ width: 10,
+ height: 10,
+ backgroundColor: color,
+ }}
+ />
+ ))}
+ </View>,
  );
+
+ expect(image).toMatchImageSnapshot();
  });
 });
diff --git a/...s/gap-test-jsx-tests-gap-test-jsx-flex-should-support-percentage-gap-1-snap.png b/...s/gap-test-jsx-tests-gap-test-jsx-flex-should-support-percentage-gap-1-snap.png
diff --git a/...s-gap-test-jsx-flex-should-support-percentage-row-gap-and-column-gap-1-snap.png b/...s-gap-test-jsx-flex-should-support-percentage-row-gap-and-column-gap-1-snap.png
diff --git a/yarn.lock b/yarn.lock
@@ -10222,7 +10222,7 @@ yocto-queue@^1.0.0:
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-yoga-layout@^3.0.0:
- version "3.0.3"
- resolved "https://registry.yarnpkg.com/yoga-layout/-/yoga-layout-3.0.3.tgz#0231bfbffe0b3aeb09fed53e02599d5c954d1946"
- integrity sha512-7Y9/DP9BaEDKwrL2+rQPq5HFYSOdwED0hPceuXd1NIdnxQf6hnrYGMZBnUqG1CLXXL6njh/dEjsli574OmAcVw==
+yoga-layout@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/yoga-layout/-/yoga-layout-3.1.0.tgz#04d00d7c2160635640dc79b48e7e4fc6a2fba2b2"
+ integrity sha512-auzJ8lEovThZIpR8wLGWNo/JEj4VTO79q9/gOJ0dWb3shAYPFdX3t9VN0fC0v+jeQF77STUdCzebLwRMqzn5gQ==