Handle class transform for ['propTypes'] and PropTypes.

Author: fpapado

src/transforms/react-js-make-props-and-state-transform.ts

@@ -256,7 +256,7 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
              * @param node React propTypes value
              */
             function getTypeFromReactPropTypeExpression(node: ts.PropertyAccessExpression) {
-                const text = node.getText().replace(/React\.PropTypes\./, '');
+                const text = node.getText().replace(/(React\.)?PropTypes\./, '');
                 let result = null;
                 if (/string/.test(text)) {
                     result = ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword);
@@ -300,7 +300,7 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
              * @param node React propTypes member node
              */
             function isPropTypeOptional(node: ts.PropertyAccessExpression) {
-                const text = node.getText().replace(/React\.PropTypes\./, '');
+                const text = node.getText().replace(/(React\.)?PropTypes\./, '');
                 return !/\.isRequired/.test(text)
             }
         };

src/transforms/react-move-prop-types-to-class-transform.ts

@@ -87,7 +87,14 @@ function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker)
  */
 function getComponentName(propTypeAssignment: ts.Statement, sourceFile: ts.SourceFile) {
     const text = propTypeAssignment.getText(sourceFile);
-    return text.substr(0, text.indexOf('.'));
+
+    // if declared as Component.propTypes = ...
+    if (helpers.isPropertyAccessPropTypeDeclaration(propTypeAssignment)) {
+        return text.substr(0, text.indexOf('.'));
+    } else {
+        // declared as Component['propTypes']
+        return text.substr(0, text.indexOf('['));
+    }
 }
 
 /**

test/react-move-prop-types-to-class-transform/alt-full/input.tsx

@@ -0,0 +1,10 @@
+class SomeComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+    render() {
+        return null;
+    }
+}
+SomeComponent['propTypes'] = { foo: PropTypes.string };

test/react-move-prop-types-to-class-transform/alt-full/output.tsx

@@ -0,0 +1,12 @@
+class SomeComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+    static propTypes = { foo: PropTypes.string };
+    render() {
+        return null;
+    }
+}
+
+SomeComponent['propTypes'] = { foo: PropTypes.string };

test/react-move-prop-types-to-class-transform/alt-indie-proptypes/input.tsx

@@ -0,0 +1,10 @@
+class SomeComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+    render() {
+        return null;
+    }
+}
+SomeComponent.propTypes = { foo: PropTypes.string };

test/react-move-prop-types-to-class-transform/alt-indie-proptypes/output.tsx

@@ -0,0 +1,12 @@
+class SomeComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+    static propTypes = { foo: PropTypes.string };
+    render() {
+        return null;
+    }
+}
+
+SomeComponent.propTypes = { foo: PropTypes.string };

test/react-move-prop-types-to-class-transform/alt-map/input.tsx

@@ -0,0 +1,10 @@
+class SomeComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+    render() {
+        return null;
+    }
+}
+SomeComponent['propTypes'] = { foo: React.PropTypes.string };

test/react-move-prop-types-to-class-transform/alt-map/output.tsx

@@ -0,0 +1,12 @@
+class SomeComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+    static propTypes = { foo: React.PropTypes.string };
+    render() {
+        return null;
+    }
+}
+
+SomeComponent['propTypes'] = { foo: React.PropTypes.string };