Skip to content
Permalink
Browse files

Prevent squashing of text nodes if flexDirection="column" is set on c…

…ontainer
  • Loading branch information...
vadimdemedes committed Mar 18, 2019
1 parent c587b30 commit 2e8091d72c07a38e73a6109da79fc23afd81ab6c
Showing with 14 additions and 2 deletions.
  1. +2 −1 src/render-node-to-output.js
  2. +12 −1 test/flex-direction.js
@@ -32,11 +32,12 @@ const renderNodeToOutput = (node, output, {offsetX = 0, offsetY = 0, transformer
//
// Also, this is necessary for libraries like ink-link (https://github.com/sindresorhus/ink-link),
// which need to wrap all children at once, instead of wrapping 3 text nodes separately.
const isFlexDirectionColumn = node.style.flexDirection === 'column';
const isAllTextNodes = node.childNodes.every(childNode => {
return Boolean(childNode.nodeValue) || (childNode.nodeName === 'SPAN' && Boolean(childNode.textContent));
});

if (isAllTextNodes) {
if (!isFlexDirectionColumn && isAllTextNodes) {
let text = '';

for (const childNode of node.childNodes) {
@@ -1,6 +1,6 @@
import React from 'react';
import test from 'ava';
import {Box} from '..';
import {Box, Text} from '..';
import renderToString from './helpers/render-to-string';

test('direction row', t => {
@@ -46,3 +46,14 @@ test('direction column reverse', t => {

t.is(output, '\n\nB\nA');
});

test('don\'t squash text nodes when column direction is applied', t => {
const output = renderToString(
<Box flexDirection="column">
<Text>A</Text>
<Text>B</Text>
</Box>
);

t.is(output, 'A\nB');
});

0 comments on commit 2e8091d

Please sign in to comment.
You can’t perform that action at this time.