diff --git a/examples/justify-content/index.ts b/examples/justify-content/index.ts new file mode 100644 index 00000000..ca4fce19 --- /dev/null +++ b/examples/justify-content/index.ts @@ -0,0 +1 @@ +import './justify-content.js'; diff --git a/examples/justify-content/justify-content.tsx b/examples/justify-content/justify-content.tsx new file mode 100644 index 00000000..a1b186ae --- /dev/null +++ b/examples/justify-content/justify-content.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import {render, Box, Text} from '../../src/index.js'; + +function JustifyContent() { + return ( + + + [ + + X + Y + + ] flex-start + + + [ + + X + Y + + ] flex-end + + + [ + + X + Y + + ] center + + + [ + + X + Y + + ] space-around + + + [ + + X + Y + + ] space-between + + + [ + + X + Y + + ] space-evenly + + + ); +} + +render(); diff --git a/readme.md b/readme.md index 4454f30d..4dd514d1 100644 --- a/readme.md +++ b/readme.md @@ -837,7 +837,7 @@ See [align-self](https://css-tricks.com/almanac/properties/a/align-self/). ##### justifyContent Type: `string`\ -Allowed values: `flex-start` `center` `flex-end` `space-between` `space-around` +Allowed values: `flex-start` `center` `flex-end` `space-between` `space-around` `space-evenly` See [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/). @@ -868,6 +868,12 @@ See [justify-content](https://css-tricks.com/almanac/properties/j/justify-conten Y // [ X Y ] + + + X + Y + +// [ X Y ] ``` #### Visibility diff --git a/src/styles.ts b/src/styles.ts index f465299a..f10ed4c0 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -152,6 +152,7 @@ export type Styles = { | 'flex-end' | 'space-between' | 'space-around' + | 'space-evenly' | 'center'; /** @@ -483,6 +484,10 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => { if (style.justifyContent === 'space-around') { node.setJustifyContent(Yoga.JUSTIFY_SPACE_AROUND); } + + if (style.justifyContent === 'space-evenly') { + node.setJustifyContent(Yoga.JUSTIFY_SPACE_EVENLY); + } } }; diff --git a/test/flex-justify-content.tsx b/test/flex-justify-content.tsx index bd0e5091..3227781c 100644 --- a/test/flex-justify-content.tsx +++ b/test/flex-justify-content.tsx @@ -57,6 +57,17 @@ test('row - align two text nodes on the edges', t => { t.is(output, 'A B'); }); +test('row - space evenly two text nodes', t => { + const output = renderToString( + + A + B + , + ); + + t.is(output, ' A B'); +}); + // Yoga has a bug, where first child in a container with space-around doesn't have // the correct X coordinate and measure function is used on that child node test.failing('row - align two text nodes with equal space around them', t => {