diff --git a/.changeset/polite-eels-brush.md b/.changeset/polite-eels-brush.md new file mode 100644 index 000000000..a884913f8 --- /dev/null +++ b/.changeset/polite-eels-brush.md @@ -0,0 +1,6 @@ +--- +"@react-pdf/layout": minor +"@react-pdf/types": minor +--- + +feat: add position: static support diff --git a/packages/layout/src/node/setPositionType.js b/packages/layout/src/node/setPositionType.js index 6871bdc7e..705910be0 100644 --- a/packages/layout/src/node/setPositionType.js +++ b/packages/layout/src/node/setPositionType.js @@ -1,6 +1,12 @@ import * as Yoga from 'yoga-layout/load'; import { isNil } from '@react-pdf/fns'; +const POSITION = { + absolute: Yoga.PositionType.Absolute, + relative: Yoga.PositionType.Relative, + static: Yoga.PositionType.Static, +}; + /** * @typedef {Function} NodeInstanceWrapper * @param {Object} node node instance @@ -17,11 +23,7 @@ const setPositionType = (value) => (node) => { const { yogaNode } = node; if (!isNil(value) && yogaNode) { - yogaNode.setPositionType( - value === 'absolute' - ? Yoga.PositionType.Absolute - : Yoga.PositionType.Relative, - ); + yogaNode.setPositionType(POSITION[value]); } return node; diff --git a/packages/layout/tests/node/setPositionType.test.js b/packages/layout/tests/node/setPositionType.test.js index 8a6106ee1..528793d4b 100644 --- a/packages/layout/tests/node/setPositionType.test.js +++ b/packages/layout/tests/node/setPositionType.test.js @@ -34,4 +34,12 @@ describe('node setPositionType', () => { expect(mock.mock.calls[0][0]).toBe(Yoga.PositionType.Absolute); expect(result).toBe(node); }); + + test('Should set static', () => { + const result = setPositionType('static')(node); + + expect(mock.mock.calls).toHaveLength(1); + expect(mock.mock.calls[0][0]).toBe(Yoga.PositionType.Static); + expect(result).toBe(node); + }); }); diff --git a/packages/types/style.d.ts b/packages/types/style.d.ts index 08e2a07f3..0ccabac36 100644 --- a/packages/types/style.d.ts +++ b/packages/types/style.d.ts @@ -41,7 +41,7 @@ export interface Style { bottom?: number | string; display?: 'flex' | 'none'; left?: number | string; - position?: 'absolute' | 'relative'; + position?: 'absolute' | 'relative' | 'static'; right?: number | string; top?: number | string; overflow?: 'hidden';