Use named components for type imports in update-react-imports

transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.output.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { FunctionComponent } from 'react';
 
-const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+const App: FunctionComponent<{ message: string }> = ({ message }) => (
   <div>{message}</div>
 );

transforms/update-react-imports.js

@@ -31,6 +31,7 @@ module.exports = function(file, api, options) {
           path =>
             path.parent.value.type !== 'MemberExpression' &&
             path.parent.value.type !== 'QualifiedTypeIdentifier' &&
+            path.parent.value.type !== 'TSQualifiedName' &&
             path.parent.value.type !== 'JSXMemberExpression',
         )
         .size() > 0
@@ -118,6 +119,12 @@ module.exports = function(file, api, options) {
               path.parent.value.type === 'QualifiedTypeIdentifier' &&
               path.parent.value.qualification.name === 'React'
             ) &&
+            !(
+              (
+                path.parent.value.type === 'TSQualifiedName' &&
+                path.parent.value.left.name === 'React'
+              )
+            ) &&
             !(
               path.parent.value.type === 'JSXMemberExpression' &&
               path.parent.value.object.name === 'React'
@@ -159,6 +166,30 @@ module.exports = function(file, api, options) {
           }
         });
 
+      root
+        .find(j.TSQualifiedName, {
+          left: {
+            type: 'Identifier',
+            name: 'React',
+          },
+        })
+        .forEach(path => {
+          const id = path.value.right.name;
+          reactIdentifiers[id] = id;
+          // We don't tend to use type imports
+          // Comment line above out and uncomment this to use type imports
+          // Also ignoring typeof imports?
+          // reactTypeIdentifiers[id] = id
+
+          // if (reactIdentifiers[id]) {
+          //   canDestructureReactVariable = false
+          // }
+
+          if (isVariableDeclared(id)) {
+            canDestructureReactVariable = false;
+          }
+        });
+
       // Add React identifiers to separate object so we can destructure the imports
       // later if we can. If a variable that we are trying to import has already
       // been declared, do not try to destructure imports
@@ -216,6 +247,19 @@ module.exports = function(file, api, options) {
         j(path).replaceWith(j.identifier(id));
       });
 
+    root
+      .find(j.TSQualifiedName, {
+        left: {
+          type: 'Identifier',
+          name: 'React',
+        },
+      })
+      .forEach(path => {
+        const id = path.value.right.name;
+
+        j(path).replaceWith(j.identifier(id));
+      });
+
     root
       .find(j.MemberExpression, {
         object: {