From 0df4c35c30336fdb2600a33b1df570fe1ff2c225 Mon Sep 17 00:00:00 2001 From: Diego Muracciole Date: Sun, 22 Sep 2024 19:51:08 +0200 Subject: [PATCH] feat: add gap percentage support --- .changeset/gentle-news-invite.md | 6 ++ packages/layout/package.json | 2 +- packages/layout/src/node/setGap.js | 19 +----- packages/renderer/tests/gap.test.jsx | 57 +++++++++++++++++- ...x-should-support-percentage-gap-1-snap.png | Bin 0 -> 401 bytes ...rcentage-row-gap-and-column-gap-1-snap.png | Bin 0 -> 398 bytes yarn.lock | 8 +-- 7 files changed, 66 insertions(+), 26 deletions(-) create mode 100644 .changeset/gentle-news-invite.md create mode 100644 packages/renderer/tests/snapshots/gap-test-jsx-tests-gap-test-jsx-flex-should-support-percentage-gap-1-snap.png create mode 100644 packages/renderer/tests/snapshots/gap-test-jsx-tests-gap-test-jsx-flex-should-support-percentage-row-gap-and-column-gap-1-snap.png diff --git a/.changeset/gentle-news-invite.md b/.changeset/gentle-news-invite.md new file mode 100644 index 000000000..95a396284 --- /dev/null +++ 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 index 945f8f836..82a8cb320 100644 --- 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 index ce99bf100..ddb5396b1 100644 --- a/packages/layout/src/node/setGap.js +++ b/packages/layout/src/node/setGap.js @@ -1,5 +1,5 @@ import * as Yoga from 'yoga-layout/load'; -import { isNil, matchPercent } from '@react-pdf/fns'; +import { isNil } from '@react-pdf/fns'; /** * @typedef {Function} NodeInstanceWrapper @@ -7,21 +7,6 @@ import { isNil, matchPercent } from '@react-pdf/fns'; * @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 index 1a5ed0bdc..b99812887 100644 --- 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( + + {items.map((color, index) => ( + + ))} + , + ); + + expect(image).toMatchImageSnapshot(); + }); + test('should support rowGap and columnGap', async () => { const image = await mount( { expect(image).toMatchImageSnapshot(); }); - test('should throw when value is percent', async () => { - expect(mount()).rejects.toThrow( - "You can't pass percentage values to columnGap property", + test('should support percentage rowGap and columnGap', async () => { + const image = await mount( + + {items.map((color, index) => ( + + ))} + , ); + + expect(image).toMatchImageSnapshot(); }); }); diff --git a/packages/renderer/tests/snapshots/gap-test-jsx-tests-gap-test-jsx-flex-should-support-percentage-gap-1-snap.png b/packages/renderer/tests/snapshots/gap-test-jsx-tests-gap-test-jsx-flex-should-support-percentage-gap-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..46eab526e24645bf59fb623a3c96343fe36c5479 GIT binary patch literal 401 zcmeAS@N?(olHy`uVBq!ia0vp^DImpmpt|og<|M^~|!r^qjwuATLZ-2X`HYfRv zO!eyux!~u={&rjU&EIK#?B_>W?K}T|Gyd?NAmNzA(kZCo24kejC;RMOxw(xKSr9G@ zXQb^vwdhXh445vsIFQj@WT=KP4_O9g)eO__BJrQMZgXK%cWhBi4dK88;>k{^oAv2+TmxJ{67L@@4LN!CFV0x3G?YkQ0Y1rFVyHCnyb3UY89ZJ6T-G@yGywqV$BYjE literal 0 HcmV?d00001 diff --git a/yarn.lock b/yarn.lock index 32f976352..831fdf513 100644 --- 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==