refactor: migrate code to typescript (facebook#59)

Author: satya164

packages/drawer/.babelrc

@@ -0,0 +1,23 @@
+/**
+ * Navigators
+ */
+/**
+ * Router
+ */
+import * as DrawerAcions from './routers/DrawerActions';
+
+export {
+  default as createDrawerNavigator,
+} from './navigators/createDrawerNavigator';
+
+export { DrawerAcions };
+export { default as DrawerRouter } from './routers/DrawerRouter';
+
+/**
+ * Views
+ */
+export { default as DrawerNavigatorItems } from './views/DrawerNavigatorItems';
+export { default as DrawerSidebar } from './views/DrawerSidebar';
+export { default as DrawerView } from './views/DrawerView';
+
+export { default as DrawerGestureContext } from './utils/DrawerGestureContext';

packages/drawer/src/index.js

@@ -1,16 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 import { Dimensions, Platform, ScrollView } from 'react-native';
 import { createNavigator } from '@react-navigation/core';
 import { SafeAreaView } from '@react-navigation/native';
 import DrawerRouter from '../routers/DrawerRouter';
 import DrawerView from '../views/DrawerView';
-import DrawerItems from '../views/DrawerNavigatorItems';
+import DrawerItems, { Props } from '../views/DrawerNavigatorItems';
 
 // A stack navigators props are the intersection between
 // the base navigator props (navgiation, screenProps, etc)
 // and the view's props
 
-const defaultContentComponent = props => (
+const defaultContentComponent = (props: Props) => (
   <ScrollView alwaysBounceVertical={false}>
     <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
       <DrawerItems {...props} />
@@ -45,7 +45,7 @@ const DefaultDrawerConfig = {
   overlayColor: 'black',
 };
 
-const DrawerNavigator = (routeConfigs, config = {}) => {
+const DrawerNavigator = (routeConfigs: object, config: any = {}) => {
   const mergedConfig = { ...DefaultDrawerConfig, ...config };
   const drawerRouter = DrawerRouter(routeConfigs, mergedConfig);
   const navigator = createNavigator(DrawerView, drawerRouter, mergedConfig);

packages/drawer/src/index.tsx

@@ -0,0 +1,33 @@
+import { DrawerActionType } from './routers/DrawerActions';
+
+export type Route = {
+  key: string;
+  routeName: string;
+};
+
+export type Scene = {
+  route: Route;
+  index: number;
+  focused: boolean;
+  tintColor?: string;
+};
+
+export type Navigation = {
+  state: {
+    key: string;
+    index: number;
+    routes: Route[];
+    openId: string;
+    closeId: string;
+    toggleId: string;
+    isDrawerIdle: boolean;
+    isDrawerOpen: boolean;
+  };
+  openDrawer: () => void;
+  closeDrawer: () => void;
+  dispatch: (action: {
+    type: DrawerActionType;
+    key: string;
+    willShow?: boolean;
+  }) => void;
+};

packages/drawer/src/navigators/createDrawerNavigator.js renamed to packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<React.RefObject<any> | null>(null);

packages/drawer/src/types.tsx

@@ -20,7 +20,11 @@
  * will remain to ensure logic does not differ in production.
  */
 
-export default function invariant(condition, format, a, b, c, d, e, f) {
+export default function invariant(
+  condition: any,
+  format: string,
+  ...args: any[]
+) {
   if (format === undefined) {
     throw new Error('invariant requires an error message argument');
   }
@@ -32,12 +36,12 @@ export default function invariant(condition, format, a, b, c, d, e, f) {
         'Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.'
       );
     } else {
-      var args = [a, b, c, d, e, f];
       var argIndex = 0;
       error = new Error(format.replace(/%s/g, () => args[argIndex++]));
       error.name = 'Invariant Violation';
     }
 
+    // @ts-ignore
     error.framesToPop = 1; // we don't care about invariant's own frame
     throw error;
   }

packages/drawer/src/utils/DrawerGestureContext.js

@@ -1,7 +1,27 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import * as React from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import { SafeAreaView } from '@react-navigation/native';
 import TouchableItem from './TouchableItem';
+import { Scene, Route } from '../types';
+
+export type Props = {
+  items: Route[];
+  activeItemKey?: string | null;
+  activeTintColor?: string;
+  activeBackgroundColor?: string;
+  inactiveTintColor?: string;
+  inactiveBackgroundColor?: string;
+  getLabel: (scene: Scene) => React.ReactNode;
+  renderIcon: (scene: Scene) => React.ReactNode;
+  onItemPress: (scene: { route: Route; focused: boolean }) => void;
+  itemsContainerStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  activeLabelStyle?: TextStyle;
+  inactiveLabelStyle?: TextStyle;
+  iconContainerStyle?: ViewStyle;
+  drawerPosition: 'left' | 'right';
+};
 
 /**
  * Component that renders the navigation list in the drawer.
@@ -23,9 +43,9 @@ const DrawerNavigatorItems = ({
   inactiveLabelStyle,
   iconContainerStyle,
   drawerPosition,
-}) => (
+}: Props) => (
   <View style={[styles.container, itemsContainerStyle]}>
-    {items.map((route, index) => {
+    {items.map((route, index: number) => {
       const focused = activeItemKey === route.key;
       const color = focused ? activeTintColor : inactiveTintColor;
       const backgroundColor = focused

packages/drawer/src/utils/DrawerGestureContext.tsx

@@ -1,15 +1,34 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
+import * as React from 'react';
+import { StyleSheet, View, Animated, ViewStyle } from 'react-native';
 import { NavigationActions } from '@react-navigation/core';
+
+import { Props as DrawerNavigatorItemsProps } from './DrawerNavigatorItems';
 import invariant from '../utils/invariant';
+import { Navigation, Scene, Route } from '../types';
+
+export type ContentComponentProps = DrawerNavigatorItemsProps & {
+  navigation: Navigation;
+  descriptors: { [key: string]: any };
+  drawerOpenProgress: Animated.AnimatedInterpolation;
+  screenProps: unknown;
+};
+
+type Props = {
+  contentComponent?: React.ComponentType<ContentComponentProps>;
+  contentOptions?: object;
+  screenProps?: unknown;
+  navigation: Navigation;
+  descriptors: { [key: string]: any };
+  drawerOpenProgress: Animated.AnimatedInterpolation;
+  drawerPosition: 'left' | 'right';
+  style?: ViewStyle;
+};
 
 /**
  * Component that renders the sidebar screen of the drawer.
  */
-
-class DrawerSidebar extends React.PureComponent {
-  _getScreenOptions = routeKey => {
+class DrawerSidebar extends React.PureComponent<Props> {
+  _getScreenOptions = (routeKey: string) => {
     const descriptor = this.props.descriptors[routeKey];
     invariant(
       descriptor.options,
@@ -18,7 +37,7 @@ class DrawerSidebar extends React.PureComponent {
     return descriptor.options;
   };
 
-  _getLabel = ({ focused, tintColor, route }) => {
+  _getLabel = ({ focused, tintColor, route }: Scene) => {
     const { drawerLabel, title } = this._getScreenOptions(route.key);
     if (drawerLabel) {
       return typeof drawerLabel === 'function'
@@ -33,7 +52,7 @@ class DrawerSidebar extends React.PureComponent {
     return route.routeName;
   };
 
-  _renderIcon = ({ focused, tintColor, route }) => {
+  _renderIcon = ({ focused, tintColor, route }: Scene) => {
     const { drawerIcon } = this._getScreenOptions(route.key);
     if (drawerIcon) {
       return typeof drawerIcon === 'function'
@@ -43,7 +62,7 @@ class DrawerSidebar extends React.PureComponent {
     return null;
   };
 
-  _onItemPress = ({ route, focused }) => {
+  _onItemPress = ({ route, focused }: { route: Route; focused: boolean }) => {
     if (focused) {
       this.props.navigation.closeDrawer();
     } else {
@@ -55,11 +74,15 @@ class DrawerSidebar extends React.PureComponent {
 
   render() {
     const ContentComponent = this.props.contentComponent;
+
     if (!ContentComponent) {
       return null;
     }
+
     const { state } = this.props.navigation;
+
     invariant(typeof state.index === 'number', 'should be set');
+
     return (
       <View style={[styles.container, this.props.style]}>
         <ContentComponent