Fix Flow typing of components with useImperativeHandle

newIDE/app/src/EventsFunctionsExtensionEditor/index.js

@@ -32,7 +32,9 @@ import FlatButton from '../UI/FlatButton';
 import { Line } from '../UI/Grid';
 import Divider from '@material-ui/core/Divider';
 import { ResponsiveWindowMeasurer } from '../UI/Reponsive/ResponsiveWindowMeasurer';
-import EditorNavigator from '../UI/EditorMosaic/EditorNavigator';
+import EditorNavigator, {
+  type EditorNavigatorInterface,
+} from '../UI/EditorMosaic/EditorNavigator';
 import ChooseEventsFunctionsExtensionEditor from './ChooseEventsFunctionsExtensionEditor';
 import Check from '@material-ui/icons/Check';
 import Tune from '@material-ui/icons/Tune';
@@ -85,8 +87,7 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
   };
   editor: ?EventsSheet;
   _editorMosaic: ?EditorMosaic;
-  // $FlowFixMe
-  _editorNavigator: ?EditorNavigator;
+  _editorNavigator: ?EditorNavigatorInterface;
   _globalObjectsContainer: ?gdObjectsContainer;
   _objectsContainer: ?gdObjectsContainer;
 

newIDE/app/src/EventsSheet/InstructionEditor/InstructionOrExpressionSelector/index.js

@@ -14,7 +14,7 @@ import ThemeConsumer from '../../../UI/Theme/ThemeConsumer';
 import { renderInstructionOrExpressionListItem } from '../SelectorListItems/SelectorInstructionOrExpressionListItem';
 import { renderInstructionTree } from '../SelectorListItems/SelectorInstructionsTreeListItem';
 import EmptyMessage from '../../../UI/EmptyMessage';
-import ScrollView from '../../../UI/ScrollView';
+import ScrollView, { type ScrollViewInterface } from '../../../UI/ScrollView';
 import { Line } from '../../../UI/Grid';
 import { ListItem } from '../../../UI/List';
 import { getInstructionListItemValue } from '../SelectorListItems/Keys';
@@ -54,7 +54,7 @@ export default class InstructionOrExpressionSelector extends React.PureComponent
     searchResults: [],
   };
   _searchBar: ?SearchBar;
-  _scrollView = React.createRef<typeof ScrollView>();
+  _scrollView = React.createRef<ScrollViewInterface>();
   _selectedItem = React.createRef<ListItem>();
 
   initialInstructionTypePath = findInTree(
@@ -67,7 +67,6 @@ export default class InstructionOrExpressionSelector extends React.PureComponent
       this._searchBar.focus();
     }
     if (this._selectedItem.current && this._scrollView.current) {
-      // $FlowFixMe - improper typing of ScrollView?
       this._scrollView.current.scrollTo(this._selectedItem.current);
     }
   }

newIDE/app/src/EventsSheet/InstructionEditor/InstructionOrObjectSelector.js

@@ -18,7 +18,7 @@ import { type EnumeratedInstructionOrExpressionMetadata } from '../../Instructio
 import { List, ListItem } from '../../UI/List';
 import SearchBar from '../../UI/SearchBar';
 import ThemeConsumer from '../../UI/Theme/ThemeConsumer';
-import ScrollView from '../../UI/ScrollView';
+import ScrollView, { type ScrollViewInterface } from '../../UI/ScrollView';
 import { Tabs, Tab } from '../../UI/Tabs';
 import Subheader from '../../UI/Subheader';
 import {
@@ -85,7 +85,7 @@ export default class InstructionOrObjectSelector extends React.PureComponent<
 > {
   state = { searchText: '', selectedObjectTags: [] };
   _searchBar = React.createRef<SearchBar>();
-  _scrollView = React.createRef<typeof ScrollView>();
+  _scrollView = React.createRef<ScrollViewInterface>();
   _selectedItem = React.createRef<ListItem>();
 
   instructionsInfo: Array<EnumeratedInstructionOrExpressionMetadata> = enumerateFreeInstructions(
@@ -104,7 +104,6 @@ export default class InstructionOrObjectSelector extends React.PureComponent<
       this._searchBar.current.focus();
     }
     if (this._selectedItem.current && this._scrollView.current) {
-      // $FlowFixMe - improper typing of ScrollView?
       this._scrollView.current.scrollTo(this._selectedItem.current);
     }
   }

newIDE/app/src/UI/EditorMosaic/EditorNavigator.js

@@ -23,12 +23,14 @@ type Props = {|
   onEditorChanged: (editorName: string) => void,
 |};
 
-type Interface = {| openEditor: (editorName: string) => void |};
+export type EditorNavigatorInterface = {|
+  openEditor: (editorName: string) => void,
+|};
 
 // Flow types might have to be changed/removed if upgrading Flow
 // (see example at https://github.com/wgao19/flow-notes/blob/master/react/react-memo.md)
 
-export default React.forwardRef<Props, Interface>(
+export default React.forwardRef<Props, EditorNavigatorInterface>(
   (
     { initialEditorName, editors, transitions, onEditorChanged }: Props,
     ref

newIDE/app/src/UI/ScrollView.js

@@ -11,19 +11,18 @@ const styles = {
 
 type Props = {| children: React.Node, style?: ?Object |};
 
-type Interface = {| scrollTo: (target: React$Component<any>) => void |};
+export type ScrollViewInterface = {|
+  scrollTo: (target: ?React$Component<any, any>) => void,
+|};
 
-// Flow types might have to be changed/removed if upgrading Flow
-// (see example at https://github.com/wgao19/flow-notes/blob/master/react/react-memo.md)
-
-export default React.forwardRef<Props, Interface>(
+export default React.forwardRef<Props, ScrollViewInterface>(
   ({ children, style }: Props, ref) => {
     const scrollView = React.useRef((null: ?HTMLDivElement));
     React.useImperativeHandle(ref, () => ({
       /**
        * Scroll the view to the target component.
        */
-      scrollTo: (target: React$Component<any>) => {
+      scrollTo: (target: ?React$Component<any, any>) => {
         const targetElement = ReactDOM.findDOMNode(target);
         if (targetElement instanceof HTMLElement) {
           const yPosition = targetElement.getBoundingClientRect().top;