[fix] support for Animated transform styles (part 2)

Only add 'px' to numeric translate values
This commit is contained in:
Nicolas Gallagher
2016-07-06 18:48:53 -07:00
parent 215697234e
commit 297b2e5afb
2 changed files with 16 additions and 3 deletions
@@ -8,13 +8,14 @@ suite('apis/StyleSheet/processTransform', () => {
const style = { const style = {
transform: [ transform: [
{ scaleX: 20 }, { scaleX: 20 },
{ translateX: 20 },
{ rotate: '20deg' } { rotate: '20deg' }
] ]
} }
assert.deepEqual( assert.deepEqual(
processTransform(style), processTransform(style),
{ transform: 'scaleX(20px) rotate(20deg)' } { transform: 'scaleX(20) translateX(20px) rotate(20deg)' }
) )
}) })
+14 -2
View File
@@ -1,9 +1,21 @@
import normalizeValue from './normalizeValue' const translateProperties = {
translateX: true,
translateY: true,
translateZ: true
}
const processTransformValue = (key, value) => {
if (translateProperties[key] && typeof value === 'number') {
value += 'px';
}
return value;
}
// { scale: 2 } => 'scale(2)' // { scale: 2 } => 'scale(2)'
// { translateX: 20 } => 'translateX(20px)'
const mapTransform = (transform) => { const mapTransform = (transform) => {
const type = Object.keys(transform)[0] const type = Object.keys(transform)[0]
const value = normalizeValue('transform', transform[type]) const value = processTransformValue(type, transform[type])
return `${type}(${value})` return `${type}(${value})`
} }