kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

[fix] RTL support for 'transitionProperty' style

Browse Source 
The 'transitionProperty' value can be any property and this patch processes
those values in the same way as properties.

Fix #1131
This commit is contained in:
Nicolas Gallagher
2018-10-29 13:20:09 -07:00
parent 89468b7d6e
commit aafeb0adad
2 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js vendored
View File

@@ -32,11 +32,13 @@ describe('StyleSheet/i18nStyle', () => {
test('converts end/start values', () => {
const initial = {
float: 'start',
textAlign: 'end'
textAlign: 'end',
transitionProperty: 'marginStart'
};
const expected = {
float: 'left',
textAlign: 'right'
textAlign: 'right',
transitionProperty: 'marginLeft'
};
expect(i18nStyle(initial)).toEqual(expected);
});
@@ -56,7 +58,8 @@ describe('StyleSheet/i18nStyle', () => {
clear: 'left',
float: 'left',
textAlign: 'right',
textShadowOffset: { width: '1rem', height: 10 }
textShadowOffset: { width: '1rem', height: 10 },
transitionProperty: 'marginLeft'
};
expect(i18nStyle(initial)).toEqual(initial);
});
@@ -116,11 +119,13 @@ describe('StyleSheet/i18nStyle', () => {
test('converts end/start values', () => {
const initial = {
float: 'start',
textAlign: 'end'
textAlign: 'end',
transitionProperty: 'marginStart'
};
const expected = {
float: 'right',
textAlign: 'left'
textAlign: 'left',
transitionProperty: 'marginRight'
};
expect(i18nStyle(initial)).toEqual(expected);
});
@@ -140,7 +145,8 @@ describe('StyleSheet/i18nStyle', () => {
clear: 'left',
float: 'left',
textAlign: 'right',
textShadowOffset: { width: '1rem', height: 10 }
textShadowOffset: { width: '1rem', height: 10 },
transitionProperty: 'marginLeft'
};
expect(i18nStyle(initial)).toEqual(initial);
});
@@ -183,11 +189,13 @@ describe('StyleSheet/i18nStyle', () => {
test('converts end/start values', () => {
const initial = {
float: 'start',
textAlign: 'end'
textAlign: 'end',
transitionProperty: 'marginStart'
};
const expected = {
float: 'right',
textAlign: 'left'
textAlign: 'left',
transitionProperty: 'marginRight'
};
expect(i18nStyle(initial)).toEqual(expected);
});
@@ -212,12 +220,14 @@ describe('StyleSheet/i18nStyle', () => {
const initial = {
float: 'left',
textAlign: 'right',
textShadowOffset: { width: '1rem', height: 10 }
textShadowOffset: { width: '1rem', height: 10 },
transitionProperty: 'marginLeft'
};
const expected = {
float: 'right',
textAlign: 'left',
textShadowOffset: { width: '-1rem', height: 10 }
textShadowOffset: { width: '-1rem', height: 10 },
transitionProperty: 'marginRight'
};
expect(i18nStyle(initial)).toEqual(expected);
});

13
packages/react-native-web/src/exports/StyleSheet/i18nStyle.js vendored
View File

@@ -116,6 +116,19 @@ const i18nStyle = originalStyle => {
}
}
// BiDi flip transitionProperty value
if (prop === 'transitionProperty') {
// BiDi flip properties
if (PROPERTIES_I18N.hasOwnProperty(value)) {
// convert start/end
const convertedValue = PROPERTIES_I18N[originalValue];
value = isRTL ? PROPERTIES_FLIP[convertedValue] : convertedValue;
} else if (isRTL && doLeftAndRightSwapInRTL && PROPERTIES_FLIP[originalValue]) {
value = PROPERTIES_FLIP[originalValue];
}
}
// Create finalized style
if (isRTL && prop === 'textShadowOffset') {
nextStyle[prop] = value;
nextStyle[prop].width = additiveInverse(value.width);