Migrated RequiredParametersDialog to TypeScript

Summary: Migrated RequiredParametersDialog.js to RequiredParametersDialog.tsx

Reviewed By: danielbuechele

Differential Revision: D17132223

fbshipit-source-id: a4a592ba58b8c8b94b3106c3a2c0916b2776697f

src/plugins/navigation/components/RequiredParametersDialog.tsx

@@ -3,7 +3,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * @format
- * @flow strict-local
  */
 
 import {Button, FlexColumn, Input, Sheet, styled, Glyph, colors} from 'flipper';
@@ -13,18 +12,19 @@ import {
   parameterIsBooleanType,
   validateParameter,
   liveEdit,
-} from '../util/uri.tsx';
-import {useRequiredParameterFormValidator} from '../hooks/requiredParameters.tsx';
+} from '../util/uri';
+import {useRequiredParameterFormValidator} from '../hooks/requiredParameters';
+import React from 'react';
 
-import type {URI} from '../flow-types';
+import {URI} from '../types';
 
-type Props = {|
-  uri: string,
-  requiredParameters: Array<string>,
-  shouldShow: boolean,
-  onHide: ?() => void,
-  onSubmit: URI => void,
-|};
+type Props = {
+  uri: string;
+  requiredParameters: Array<string>;
+  shouldShow: boolean;
+  onHide?: () => void;
+  onSubmit: (uri: URI) => void;
+};
 
 const Container = styled(FlexColumn)({
   padding: 10,
@@ -72,7 +72,7 @@ const WarningIconContainer = styled('span')({
 
 export default (props: Props) => {
   const {shouldShow, onHide, onSubmit, uri, requiredParameters} = props;
-  const [isValid, values, setValuesArray] = useRequiredParameterFormValidator(
+  const {isValid, values, setValuesArray} = useRequiredParameterFormValidator(
     requiredParameters,
   );
   if (uri == null || !shouldShow) {
@@ -80,7 +80,7 @@ export default (props: Props) => {
   } else {
     return (
       <Sheet onHideSheet={onHide}>
-        {hide => {
+        {(hide: () => void) => {
           return (
             <Container>
               <Title>
@@ -99,7 +99,7 @@ export default (props: Props) => {
               {requiredParameters.map((paramater, idx) => (
                 <div key={idx}>
                   <RequiredParameterInput
-                    onChange={event =>
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                       setValuesArray([
                         ...values.slice(0, idx),
                         event.target.value,
@@ -138,7 +138,7 @@ export default (props: Props) => {
                   Cancel
                 </Button>
                 <Button
-                  type={isValid ? 'primary' : null}
+                  type={isValid ? 'primary' : undefined}
                   onClick={() => {
                     onSubmit(replaceRequiredParametersWithValues(uri, values));
                     if (onHide != null) {

src/plugins/navigation/components/index.js

@@ -11,7 +11,9 @@ export {default as BookmarksSidebar} from './BookmarksSidebar.tsx';
 export {default as FavoriteButton} from './FavoriteButton.tsx';
 export {default as IconButton} from './IconButton.tsx';
 export {default as NavigationInfoBox} from './NavigationInfoBox.tsx';
-export {default as RequiredParametersDialog} from './RequiredParametersDialog';
+export {
+  default as RequiredParametersDialog,
+} from './RequiredParametersDialog.tsx';
 export {default as SaveBookmarkDialog} from './SaveBookmarkDialog';
 export {default as ScrollableFlexColumn} from './ScrollableFlexColumn';
 export {default as SearchBar} from './SearchBar';

src/plugins/navigation/hooks/requiredParameters.tsx

@@ -29,5 +29,5 @@ export const useRequiredParameterFormValidator = (
       setIsValid(false);
     }
   });
-  return [isValid, values, setValuesArray];
+  return {isValid, values, setValuesArray};
 };

src/ui/components/Sheet.tsx

@@ -24,7 +24,7 @@ type OwnProps = {
    * the sheet.
    */
   children: (onHide: () => void) => React.ReactNode | undefined;
-  onHideSheet: () => void;
+  onHideSheet?: () => void;
 };
 
 type StateFromProps = {