zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-08-15 18:45:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Add matrix transform style

Browse Source 
Remove the deprecated 'transformMatrix' style prop and support 'matrix' and
'matrix3d' in the 'transform' prop.

Fix #1771
This commit is contained in:
Nicolas Gallagher
2020-10-19 15:50:02 -07:00
parent 663458713c
commit 0aa77685aa
2 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
Vendored
+10 -11
View File
@@ -148,21 +148,20 @@ describe('StyleSheet/createReactDOMStyle', () => {
test('array', () => {
const style = {
transform: [{ perspective: 50 }, { scaleX: 20 }, { translateX: 20 }, { rotate: '20deg' }]
transform: [
{ perspective: 50 },
{ scaleX: 20 },
{ translateX: 20 },
{ rotate: '20deg' },
{ matrix: [1, 2, 3, 4, 5, 6] },
{ matrix3d: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4] }
]
};
const resolved = createReactDOMStyle(style);
expect(resolved).toEqual({
transform: 'perspective(50px) scaleX(20) translateX(20px) rotate(20deg)'
});
});
test('transformMatrix', () => {
const style = { transformMatrix: [1, 2, 3, 4, 5, 6] };
const resolved = createReactDOMStyle(style);
expect(resolved).toEqual({
transform: 'matrix3d(1,2,3,4,5,6)'
transform:
'perspective(50px) scaleX(20) translateX(20px) rotate(20deg) matrix(1,2,3,4,5,6) matrix3d(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4)'
});
});
});
packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
Vendored
+8 -10
View File
@@ -37,24 +37,22 @@ const supportsCSS3TextDecoration =
// { scale: 2 } => 'scale(2)'
// { translateX: 20 } => 'translateX(20px)'
// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
const mapTransform = transform => {
const type = Object.keys(transform)[0];
const value = normalizeValueWithProperty(transform[type], type);
return `${type}(${value})`;
};
// [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)'
const convertTransformMatrix = transformMatrix => {
const matrix = transformMatrix.join(',');
return `matrix3d(${matrix})`;
const value = transform[type];
if (type === 'matrix' || type === 'matrix3d') {
return `${type}(${value.join(',')})`;
} else {
const normalizedValue = normalizeValueWithProperty(value, type);
return `${type}(${normalizedValue})`;
}
};
const resolveTransform = (resolvedStyle, style) => {
let transform = style.transform;
if (Array.isArray(style.transform)) {
transform = style.transform.map(mapTransform).join(' ');
} else if (style.transformMatrix) {
transform = convertTransformMatrix(style.transformMatrix);
}
resolvedStyle.transform = transform;
};