diff --git a/docs/components/View.md b/docs/components/View.md index 2fca6a9c..94ce9443 100644 --- a/docs/components/View.md +++ b/docs/components/View.md @@ -172,10 +172,13 @@ from `style`. + `paddingRight`‡ + `paddingTop` + `paddingVertical` ++ `perspective` ++ `perspectiveOrigin` + `position` + `right`‡ + `top` + `transform` ++ `transformOrigin` + `transitionDelay` + `transitionDuration` + `transitionProperty` diff --git a/src/apis/StyleSheet/__tests__/resolveTransform-test.js b/src/apis/StyleSheet/__tests__/resolveTransform-test.js index 6bb39a5e..f7e3ec95 100644 --- a/src/apis/StyleSheet/__tests__/resolveTransform-test.js +++ b/src/apis/StyleSheet/__tests__/resolveTransform-test.js @@ -16,8 +16,7 @@ describe('apis/StyleSheet/resolveTransform', () => { resolveTransform(resolvedStyle, style); expect(resolvedStyle).toEqual({ - perspective: '50px', - transform: 'scaleX(20) translateX(20px) rotate(20deg)' + transform: 'perspective(50px) scaleX(20) translateX(20px) rotate(20deg)' }); }); diff --git a/src/apis/StyleSheet/resolveTransform.js b/src/apis/StyleSheet/resolveTransform.js index 67de86df..dc95ed0b 100644 --- a/src/apis/StyleSheet/resolveTransform.js +++ b/src/apis/StyleSheet/resolveTransform.js @@ -1,22 +1,11 @@ import normalizeValue from './normalizeValue'; -// [ { perspective: 20 }, { scale: 2 }, { translateX: 20 } ] -// => { perspective: 20px, transform: 'scale(2) translateX(20px)' } -const reduceTransform = (resolvedStyle, transform) => { +// { scale: 2 } => 'scale(2)' + // { translateX: 20 } => 'translateX(20px)' +const mapTransform = (transform) => { const type = Object.keys(transform)[0]; const value = normalizeValue(type, transform[type]); - - if (type === 'perspective') { - resolvedStyle.perspective = value; - } else { - const result = `${type}(${value})`; - if (resolvedStyle.transform) { - resolvedStyle.transform += ` ${result}`; - } else { - resolvedStyle.transform = result; - } - } - return resolvedStyle; + return `${type}(${value})`; }; // [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)' @@ -27,7 +16,8 @@ const convertTransformMatrix = (transformMatrix) => { const resolveTransform = (resolvedStyle, style) => { if (Array.isArray(style.transform)) { - style.transform.reduce(reduceTransform, resolvedStyle); + const transform = style.transform.map(mapTransform).join(' '); + resolvedStyle.transform = transform; } else if (style.transformMatrix) { const transform = convertTransformMatrix(style.transformMatrix); resolvedStyle.transform = transform; diff --git a/src/components/View/ViewStylePropTypes.js b/src/components/View/ViewStylePropTypes.js index 533888c8..db61e759 100644 --- a/src/components/View/ViewStylePropTypes.js +++ b/src/components/View/ViewStylePropTypes.js @@ -37,6 +37,8 @@ module.exports = process.env.NODE_ENV !== 'production' ? { outline: string, overflowX: autoOrHiddenOrVisible, overflowY: autoOrHiddenOrVisible, + perspective: PropTypes.oneOfType([ number, string ]), + perspectiveOrigin: string, transitionDelay: string, transitionDuration: string, transitionProperty: string, diff --git a/src/propTypes/TransformPropTypes.js b/src/propTypes/TransformPropTypes.js index 0471ea8e..a59ccda3 100644 --- a/src/propTypes/TransformPropTypes.js +++ b/src/propTypes/TransformPropTypes.js @@ -28,7 +28,8 @@ const TransformPropTypes = process.env.NODE_ENV !== 'production' ? { shape({ translateZ: numberOrString }), shape({ translate3d: string }) ]) - ) + ), + transformOrigin: string } : {}; module.exports = TransformPropTypes;