mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-06-01 10:07:35 +00:00
[fix] support for Animated transform styles (part 2)
Only add 'px' to numeric translate values
This commit is contained in:
@@ -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)' }
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -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})`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user