[fix] View transforms; add perspective styles

Fixes a regression introduced by
5db300df35

The `perspective` function is distinct from the `perspective` property.
This patch reverts the regression and adds support for `perspective`,
`perspectiveOrigin`, and `transformOrigin`.

Fix #208

docs/components/View.md

@@ -172,10 +172,13 @@ from `style`.
 + `paddingRight`‡
 + `paddingTop`
 + `paddingVertical`
++ `perspective`
++ `perspectiveOrigin`
 + `position`
 + `right`‡
 + `top`
 + `transform`
++ `transformOrigin`
 + `transitionDelay`
 + `transitionDuration`
 + `transitionProperty`

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)'
     });
   });
 

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;

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,

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;