Merge pull request #1181 from brentvatne/transform-props-fix

Clarify transform for ViewStyleProps, include children in union prop docs

Libraries/StyleSheet/TransformPropTypes.js

@@ -14,7 +14,15 @@
 var ReactPropTypes = require('ReactPropTypes');
 
 var TransformPropTypes = {
-  transform: ReactPropTypes.arrayOf(ReactPropTypes.object),
+  transform: ReactPropTypes.arrayOf(
+    ReactPropTypes.oneOfType([
+      ReactPropTypes.shape({rotate: ReactPropTypes.string}),
+      ReactPropTypes.shape({scaleX: ReactPropTypes.number}),
+      ReactPropTypes.shape({scaleY: ReactPropTypes.number}),
+      ReactPropTypes.shape({translateX: ReactPropTypes.number}),
+      ReactPropTypes.shape({translateY: ReactPropTypes.number})
+    ])
+  ),
   transformMatrix: ReactPropTypes.arrayOf(ReactPropTypes.number),
 
   // DEPRECATED

website/layout/AutodocsLayout.js

@@ -33,6 +33,10 @@ var ComponentDoc = React.createClass({
       return '{' + Object.keys(type.value).map((key => key + ': ' + this.renderType(type.value[key]))).join(', ') + '}';
     }
 
+    if (type.name == 'union') {
+      return type.value.map(this.renderType).join(', ');
+    }
+
     if (type.name === 'arrayOf') {
       return '[' + this.renderType(type.value) + ']';
     }
@@ -96,14 +100,18 @@ var ComponentDoc = React.createClass({
       <div className="compactProps">
         {(style.composes || []).map((name) => {
           var link;
-          if (name !== 'LayoutPropTypes') {
-            name = name.replace('StylePropTypes', '');
-            link =
-              <a href={slugify(name) + '.html#style'}>{name}#style...</a>;
-          } else {
+          if (name === 'LayoutPropTypes') {
             name = 'Flexbox';
             link =
               <a href={slugify(name) + '.html#proptypes'}>{name}...</a>;
+          } else if (name === 'TransformPropTypes') {
+            name = 'Transforms';
+            link =
+              <a href={slugify(name) + '.html#proptypes'}>{name}...</a>;
+          } else {
+            name = name.replace('StylePropTypes', '');
+            link =
+              <a href={slugify(name) + '.html#style'}>{name}#style...</a>;
           }
           return (
             <div className="prop" key={name}>

website/server/extractDocs.js

@@ -19,9 +19,12 @@ function getNameFromPath(filepath) {
   while (ext = path.extname(filepath)) {
     filepath = path.basename(filepath, ext);
   }
+
   if (filepath === 'LayoutPropTypes') {
     return 'Flexbox';
-  } else if (filepath == 'TabBarItemIOS') {
+  } else if (filepath === 'TransformPropTypes') {
+    return 'Transforms';
+  } else if (filepath === 'TabBarItemIOS') {
     return 'TabBarIOS.Item';
   }
   return filepath;
@@ -148,6 +151,7 @@ var apis = [
 
 var styles = [
   '../Libraries/StyleSheet/LayoutPropTypes.js',
+  '../Libraries/StyleSheet/TransformPropTypes.js',
   '../Libraries/Components/View/ViewStylePropTypes.js',
   '../Libraries/Text/TextStylePropTypes.js',
   '../Libraries/Image/ImageStylePropTypes.js',
@@ -159,10 +163,10 @@ var polyfills = [
 
 var all = components
   .concat(apis)
-  .concat(styles.slice(0, 1))
+  .concat(styles.slice(0, 2))
   .concat(polyfills);
 
-var styleDocs = styles.slice(1).reduce(function(docs, filepath) {
+var styleDocs = styles.slice(2).reduce(function(docs, filepath) {
   docs[path.basename(filepath).replace(path.extname(filepath), '')] =
     docgen.parse(
       fs.readFileSync(filepath),
@@ -171,9 +175,9 @@ var styleDocs = styles.slice(1).reduce(function(docs, filepath) {
     );
 
   // Remove deprecated style props
-  if (docs['ViewStylePropTypes']) {
+  if (docs['TransformPropTypes']) {
     ['rotation', 'scaleX', 'scaleY', 'translateX', 'translateY'].forEach(function(key) {
-      delete docs['ViewStylePropTypes']['props'][key];
+      delete docs['TransformPropTypes']['props'][key];
     });
   }
 
@@ -185,7 +189,7 @@ module.exports = function() {
   return [].concat(
     components.map(renderComponent),
     apis.map(renderAPI('api')),
-    styles.slice(0, 1).map(renderStyle),
+    styles.slice(0, 2).map(renderStyle),
     polyfills.map(renderAPI('Polyfill'))
   );
 };