kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-04-22 11:16:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

[fix] flex style resolution

Browse Source
This commit is contained in:
Nicolas Gallagher
2017-07-03 12:32:00 -07:00
parent fb999b5467
commit 5a5d142100
2 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js
View File

@@ -31,14 +31,34 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
});
});
test('flex property expansion', () => {
test('flex: -1', () => {
expect(createReactDOMStyle({ display: 'flex', flex: -1 })).toEqual({
display: 'flex',
flexGrow: 0,
flexShrink: 1,
flexBasis: 'auto'
});
});
test('flex: 0', () => {
expect(createReactDOMStyle({ display: 'flex', flex: 0 })).toEqual({
display: 'flex',
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto'
});
});
test('flex: 1', () => {
expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
display: 'flex',
flexGrow: 1,
flexShrink: 1,
flexBasis: '0%'
});
});
test('flex: 10', () => {
expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
display: 'flex',
flexGrow: 10,
@@ -47,7 +67,7 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
});
});
test('flexBasis', () => {
test('flexBasis overrides', () => {
// is flex-basis applied?
expect(createReactDOMStyle({ display: 'flex', flexBasis: '25%' })).toEqual({
display: 'flex',

16
src/apis/StyleSheet/createReactDOMStyle.js
View File

@@ -147,7 +147,7 @@ const createReducer = (style, styleProps) => {
case 'display': {
resolvedStyle.display = value;
// defaults of 'flexBasis:auto' and 'flexShrink:0' have lowest precedence
if (style.display === 'flex' && style.flex == null) {
if (style.display === 'flex') {
if (style.flexShrink == null) {
resolvedStyle.flexShrink = 0;
}
@@ -166,9 +166,17 @@ const createReducer = (style, styleProps) => {
break;
}
case 'flex': {
resolvedStyle.flexGrow = value;
resolvedStyle.flexShrink = 1;
resolvedStyle.flexBasis = '0%';
if (value > 0) {
resolvedStyle.flexGrow = value;
resolvedStyle.flexShrink = 1;
resolvedStyle.flexBasis = '0%';
} else if (value === 0) {
resolvedStyle.flexGrow = 0;
resolvedStyle.flexShrink = 0;
} else if (value === -1) {
resolvedStyle.flexGrow = 0;
resolvedStyle.flexShrink = 1;
}
break;
}
case 'shadowColor':