Update react-imports to named imports and remove direct import of react

* run jscodeshift update react-imports codemod
* fix lint issues
* remove remaining import React

lib/Models/MapInteractionMode.ts

@@ -2,7 +2,7 @@ import defaultValue from "terriajs-cesium/Source/Core/defaultValue";
 import PickedFeatures from "../Map/PickedFeatures/PickedFeatures";
 import { observable, makeObservable } from "mobx";
 import ViewState from "../ReactViewModels/ViewState";
-import React from "react";
+import { ReactNode } from "react";
 
 export enum UIMode {
   Difference
@@ -11,7 +11,7 @@ export enum UIMode {
 interface Options {
   onCancel?: () => void;
   message: string;
-  messageAsNode?: React.ReactNode;
+  messageAsNode?: ReactNode;
   customUi?: () => unknown;
   buttonText?: string;
   uiMode?: UIMode; // diff tool hack for now
@@ -37,7 +37,7 @@ export default class MapInteractionMode {
   message: () => string;
 
   @observable
-  messageAsNode: () => React.ReactNode;
+  messageAsNode: () => ReactNode;
 
   @observable
   pickedFeatures?: PickedFeatures;

lib/ReactViewModels/ViewState.ts

@@ -7,7 +7,7 @@ import {
   runInAction,
   makeObservable
 } from "mobx";
-import React, { Ref } from "react";
+import { ReactNode, MouseEvent, ComponentType, Ref } from "react";
 import defined from "terriajs-cesium/Source/Core/defined";
 import addedByUser from "../Core/addedByUser";
 import {
@@ -379,7 +379,7 @@ export default class ViewState {
    */
   @observable currentTool?: Tool;
 
-  @observable panel: React.ReactNode;
+  @observable panel: ReactNode;
 
   private _pickedFeaturesSubscription: IReactionDisposer;
   private _disclaimerVisibleSubscription: IReactionDisposer;
@@ -719,7 +719,7 @@ export default class ViewState {
 
   @action
   openHelpPanelItemFromSharePanel(
-    evt: React.MouseEvent<HTMLDivElement>,
+    evt: MouseEvent<HTMLDivElement>,
     itemName: string
   ): void {
     evt.preventDefault();
@@ -890,9 +890,7 @@ export default class ViewState {
 
 interface Tool {
   toolName: string;
-  getToolComponent: () =>
-    | React.ComponentType<any>
-    | Promise<React.ComponentType<any>>;
+  getToolComponent: () => ComponentType<any> | Promise<ComponentType<any>>;
 
   showCloseButton: boolean;
   params?: any;

lib/ReactViews/ActionBar/ActionBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { FC, useEffect } from "react";
 import styled from "styled-components";
 import Box from "../../Styled/Box";
 import { PortalChild } from "../StandardUserInterface/Portal";
@@ -11,7 +11,7 @@ import { ActionBarPortalId } from "./ActionBarPortal";
  * {@link ActionButton} can be used as a themed button for the action bar
  * {@link ActionButtonGroup} can be used for grouping elements inside an action bar
  */
-export const ActionBar: React.FC<object> = (props) => {
+export const ActionBar: FC<object> = (props) => {
   const viewState = useViewState();
 
   useEffect(function setVisibility() {

lib/ReactViews/ActionBar/ActionBarPortal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { FC } from "react";
 import styled from "styled-components";
 import { Portal } from "../StandardUserInterface/Portal";
 
@@ -16,7 +16,7 @@ interface PropsType {
 /**
  * A Portal to show ActionBar UI.
  */
-const ActionBarPortal: React.FC<PropsType> = ({ show }) => {
+const ActionBarPortal: FC<PropsType> = ({ show }) => {
   return <StyledPortal id={ActionBarPortalId} show={show} />;
 };
 

lib/ReactViews/ActionBar/ActionButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { HTMLProps, FC } from "react";
 import { useTheme } from "styled-components";
 import AnimatedSpinnerIcon from "../../Styled/AnimatedSpinnerIcon";
 import { ButtonProps } from "../../Styled/Button";
@@ -7,7 +7,7 @@ import StyledButton from "./StyledButton";
 
 export interface ActionButtonProps
   extends Omit<
-    ButtonProps & React.HTMLProps<HTMLButtonElement>,
+    ButtonProps & HTMLProps<HTMLButtonElement>,
     "iconProps" | "renderIcon"
   > {
   className?: string;
@@ -18,7 +18,7 @@ export interface ActionButtonProps
 /**
  * A themed button to use inside {@link ActionBar}
  */
-export const ActionButton: React.FC<ActionButtonProps> = ({
+export const ActionButton: FC<ActionButtonProps> = ({
   className,
   icon,
   showProcessingIcon,

lib/ReactViews/Analytics/BooleanParameterEditor.tsx

@@ -1,13 +1,14 @@
 import { action, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import React from "react";
+
+import { Component } from "react";
 import CommonStrata from "../../Models/Definition/CommonStrata";
 import BooleanParameter from "../../Models/FunctionParameters/BooleanParameter";
 import Icon from "../../Styled/Icon";
 import Styles from "./parameter-editors.scss";
 
 @observer
-export default class BooleanParameterEditor extends React.Component<{
+export default class BooleanParameterEditor extends Component<{
   parameter: BooleanParameter;
 }> {
   constructor(props: { parameter: BooleanParameter }) {

lib/ReactViews/Analytics/BooleanParameterGroupEditor.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import MoreOrLess from "../Generic/MoreOrLess.jsx";

lib/ReactViews/Analytics/DateParameterEditor.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import React from "react";
+import { FC } from "react";
 import CommonStrata from "../../Models/Definition/CommonStrata";
 import DateParameter from "../../Models/FunctionParameters/DateParameter";
 import Styles from "./parameter-editors.scss";
@@ -8,7 +8,7 @@ interface DateParameterEditorProps {
   parameter: DateParameter;
 }
 
-const DateParameterEditor: React.FC<DateParameterEditorProps> = observer(
+const DateParameterEditor: FC<DateParameterEditorProps> = observer(
   ({ parameter }) => {
     const style =
       parameter?.value !== undefined

lib/ReactViews/Analytics/DateTimeParameterEditor.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import React from "react";
+import { FC } from "react";
 import CommonStrata from "../../Models/Definition/CommonStrata";
 import DateTimeParameter from "../../Models/FunctionParameters/DateTimeParameter";
 import Styles from "./parameter-editors.scss";
@@ -8,8 +8,8 @@ interface DateTimeParameterEditorProps {
   parameter: DateTimeParameter;
 }
 
-const DateTimeParameterEditor: React.FC<DateTimeParameterEditorProps> =
-  observer(({ parameter }) => {
+const DateTimeParameterEditor: FC<DateTimeParameterEditorProps> = observer(
+  ({ parameter }) => {
     const style =
       parameter?.value !== undefined
         ? Styles.field
@@ -27,6 +27,7 @@ const DateTimeParameterEditor: React.FC<DateTimeParameterEditorProps> =
         />
       </div>
     );
-  });
+  }
+);
 
 export default DateTimeParameterEditor;

lib/ReactViews/Analytics/EnumerationParameterEditor.tsx

@@ -1,14 +1,13 @@
-import React from "react";
 import { observer } from "mobx-react";
-
-import Styles from "./parameter-editors.scss";
 import { action, makeObservable } from "mobx";
-import EnumerationParameter from "../../Models/FunctionParameters/EnumerationParameter";
-import CommonStrata from "../../Models/Definition/CommonStrata";
+import { Component } from "react";
 import isDefined from "../../Core/isDefined";
+import CommonStrata from "../../Models/Definition/CommonStrata";
+import EnumerationParameter from "../../Models/FunctionParameters/EnumerationParameter";
+import Styles from "./parameter-editors.scss";
 
 @observer
-export default class EnumerationParameterEditor extends React.Component<{
+export default class EnumerationParameterEditor extends Component<{
   parameter: EnumerationParameter;
 }> {
   constructor(props: { parameter: EnumerationParameter }) {

lib/ReactViews/Analytics/GenericParameterEditor.tsx

@@ -1,13 +1,12 @@
-import React from "react";
-
-import Styles from "./parameter-editors.scss";
-import FunctionParameter from "../../Models/FunctionParameters/FunctionParameter";
 import { action, makeObservable } from "mobx";
 import { observer } from "mobx-react";
+import { Component } from "react";
 import CommonStrata from "../../Models/Definition/CommonStrata";
+import FunctionParameter from "../../Models/FunctionParameters/FunctionParameter";
+import Styles from "./parameter-editors.scss";
 
 @observer
-export default class GenericParameterEditor extends React.Component<{
+export default class GenericParameterEditor extends Component<{
   parameter: FunctionParameter;
 }> {
   constructor(props: { parameter: FunctionParameter }) {

lib/ReactViews/Analytics/GeoJsonParameterEditor.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import defined from "terriajs-cesium/Source/Core/defined";
 import Styles from "./parameter-editors.scss";
@@ -22,7 +22,7 @@ import { runInAction } from "mobx";
 import CommonStrata from "../../Models/Definition/CommonStrata";
 
 @observer
-class GeoJsonParameterEditor extends React.Component {
+class GeoJsonParameterEditor extends Component {
   static propTypes = {
     previewed: PropTypes.object,
     parameter: PropTypes.object,

lib/ReactViews/Analytics/InfoParameterEditor.tsx

@@ -1,11 +1,10 @@
-import React from "react";
-
 import { observer } from "mobx-react";
+import { Component } from "react";
 import InfoParameter from "../../Models/FunctionParameters/InfoParameter";
 import parseCustomMarkdownToReact from "../Custom/parseCustomMarkdownToReact";
 
 @observer
-export default class InfoParameterEditor extends React.Component<{
+export default class InfoParameterEditor extends Component<{
   parameter: InfoParameter;
 }> {
   render() {

lib/ReactViews/Analytics/InvokeFunction.jsx

@@ -1,7 +1,7 @@
 import { makeObservable, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import PropTypes from "prop-types";
-import React from "react";
+import { Component } from "react";
 import { withTranslation } from "react-i18next";
 import defined from "terriajs-cesium/Source/Core/defined";
 import parseCustomMarkdownToReact from "../Custom/parseCustomMarkdownToReact";
@@ -44,7 +44,7 @@ class ParameterViewModel {
 }
 
 @observer
-class InvokeFunction extends React.Component {
+class InvokeFunction extends Component {
   static propTypes = {
     terria: PropTypes.object,
     previewed: PropTypes.object,

lib/ReactViews/Analytics/LineParameterEditor.jsx

@@ -1,6 +1,5 @@
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
-import React from "react";
 import { withTranslation } from "react-i18next";
 import defined from "terriajs-cesium/Source/Core/defined";
 import Ellipsoid from "terriajs-cesium/Source/Core/Ellipsoid";

lib/ReactViews/Analytics/NumberParameterEditor.tsx

@@ -1,11 +1,11 @@
-import React, { ChangeEvent, useEffect, useState } from "react";
+import { FC, ChangeEvent, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import CommonStrata from "../../Models/Definition/CommonStrata";
 import NumberParameter from "../../Models/FunctionParameters/NumberParameter";
 
 import Styles from "./parameter-editors.scss";
 
-const NumberParameterEditor: React.FC<{ parameter: NumberParameter }> = ({
+const NumberParameterEditor: FC<{ parameter: NumberParameter }> = ({
   parameter
 }) => {
   const [value, setValue] = useState<number | undefined>(0);

lib/ReactViews/Analytics/ParameterEditor.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import PointParameterEditor from "./PointParameterEditor";

lib/ReactViews/Analytics/PointParameterEditor.jsx

@@ -1,7 +1,5 @@
 "use strict";
 
-import React from "react";
-
 import createReactClass from "create-react-class";
 
 import PropTypes from "prop-types";

lib/ReactViews/Analytics/PolygonParameterEditor.jsx

@@ -1,6 +1,6 @@
 "use strict";
 
-import React from "react";
+import { Component } from "react";
 
 import PropTypes from "prop-types";
 
@@ -17,7 +17,7 @@ import { runInAction } from "mobx";
 import CommonStrata from "../../Models/Definition/CommonStrata";
 
 @observer
-class PolygonParameterEditor extends React.Component {
+class PolygonParameterEditor extends Component {
   static propTypes = {
     previewed: PropTypes.object,
     parameter: PropTypes.object,

lib/ReactViews/Analytics/RectangleParameterEditor.jsx

@@ -1,6 +1,6 @@
 "use strict";
 
-import React from "react";
+import { Component } from "react";
 
 import PropTypes from "prop-types";
 
@@ -18,7 +18,7 @@ import { runInAction } from "mobx";
 import CommonStrata from "../../Models/Definition/CommonStrata";
 
 @observer
-class RectangleParameterEditor extends React.Component {
+class RectangleParameterEditor extends Component {
   static propTypes = {
     previewed: PropTypes.object,
     parameter: PropTypes.object,

lib/ReactViews/Analytics/RegionParameterEditor.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import Styles from "./parameter-editors.scss";

lib/ReactViews/Analytics/RegionPicker.jsx

@@ -1,7 +1,6 @@
 "use strict";
 
 import classNames from "classnames";
-import React from "react";
 
 import createReactClass from "create-react-class";
 

lib/ReactViews/Analytics/RegionTypeParameterEditor.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import defined from "terriajs-cesium/Source/Core/defined";

lib/ReactViews/BadgeBar.tsx

@@ -1,14 +1,14 @@
-import React from "react";
+import { ReactNode, FC } from "react";
 import { useTheme } from "styled-components";
 import { TextSpan } from "../Styled/Text";
 import Box from "../Styled/Box";
 
 interface IProps {
   label: string;
   badge?: number;
-  children: React.ReactNode;
+  children: ReactNode;
 }
-const BadgeBar: React.FC<IProps> = (props: IProps) => {
+const BadgeBar: FC<IProps> = (props: IProps) => {
   const theme = useTheme();
   return (
     <Box

lib/ReactViews/BottomDock/BottomDock.tsx

@@ -1,6 +1,6 @@
 import { runInAction } from "mobx";
 import { observer } from "mobx-react";
-import React from "react";
+import { Component } from "react";
 import Terria from "../../Models/Terria";
 import ViewState from "../../ReactViewModels/ViewState";
 import ChartPanel from "../Custom/Chart/ChartPanel";
@@ -17,7 +17,7 @@ interface PropsType {
 }
 
 @observer
-class BottomDock extends React.Component<PropsType & MeasureElementProps> {
+class BottomDock extends Component<PropsType & MeasureElementProps> {
   refToMeasure: HTMLDivElement | null = null;
 
   handleClick() {