Skip to content
Permalink
Browse files

Add minWidth and minHeight props to <Box>

  • Loading branch information...
vadimdemedes committed Mar 18, 2019
1 parent 8a6886a commit e5f7322dda56c8c2dad79253f9d766842c05b93d
Showing with 78 additions and 0 deletions.
  1. +12 −0 readme.md
  2. +15 −0 src/apply-styles.js
  3. +2 −0 src/components/Box.js
  4. +49 −0 test/width-height.js
@@ -315,6 +315,18 @@ Height of the element in lines (rows). You can also set it in percent, which wil
</Box> //=> 'X\n\n\nY\n\n'
```

###### min-width

Type: `number`

Sets a minimum width of the element. Percentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.

###### min-height

Type: `number`

Sets a minimum height of the element. Percentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.


##### Padding

@@ -1,5 +1,9 @@
import Yoga from 'yoga-layout-prebuilt';

const hasOwnProperty = (obj, prop) => {
return {}.hasOwnProperty.call(obj, prop);
};

const applyMarginStyles = (node, style) => {
if (style.margin) {
node.setMargin(Yoga.EDGE_TOP, style.margin);
@@ -134,8 +138,19 @@ const applyFlexStyles = (node, style) => {
}
};

const applyDimensionStyles = (node, style) => {
if (hasOwnProperty(style, 'minWidth')) {
node.setMinWidth(style.minWidth);
}

if (hasOwnProperty(style, 'minHeight')) {
node.setMinHeight(style.minHeight);
}
};

export default (node, style = {}) => {
applyMarginStyles(node, style);
applyPaddingStyles(node, style);
applyFlexStyles(node, style);
applyDimensionStyles(node, style);
};
@@ -19,7 +19,9 @@ export default class Box extends PureComponent {
paddingLeft: PropTypes.number,
paddingRight: PropTypes.number,
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
minWidth: PropTypes.number,
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
minHeight: PropTypes.number,
flexGrow: PropTypes.number,
flexShrink: PropTypes.number,
flexDirection: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
@@ -25,6 +25,37 @@ test('set width in percent', t => {
t.is(output, 'A B');
});

test('set min width', t => {
const smallerOutput = renderToString(
<Box>
<Box minWidth={5}>A</Box>
B
</Box>
);

t.is(smallerOutput, 'A B');

const largerOutput = renderToString(
<Box>
<Box minWidth={2}>AAAAA</Box>
B
</Box>
);

t.is(largerOutput, 'AAAAAB');
});

test.failing('set min width in percent', t => {
const output = renderToString(
<Box width={10}>
<Box minWidth="50%">A</Box>
B
</Box>
);

t.is(output, 'A B');
});

test('set height', t => {
const output = renderToString(
<Box height={4}>
@@ -46,3 +77,21 @@ test('set height in percent', t => {

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

test('set min height', t => {
const smallerOutput = renderToString(
<Box minHeight={4}>
A
</Box>
);

t.is(smallerOutput, 'A\n\n\n');

const largerOutput = renderToString(
<Box minHeight={2}>
<Box height={4}>A</Box>
</Box>
);

t.is(largerOutput, 'A\n\n\n');
});

0 comments on commit e5f7322

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