From da51cedff44f44a9096e8a31fe6838cf58f12bc9 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Wed, 11 Sep 2019 17:01:30 +0200 Subject: [PATCH] fix: fix typescript definitions (#95) --- packages/drawer/example/package.json | 2 +- packages/drawer/example/yarn.lock | 8 +- packages/drawer/package.json | 6 +- packages/drawer/src/index.tsx | 11 ++ .../src/navigators/createDrawerNavigator.tsx | 37 ++++-- packages/drawer/src/routers/DrawerRouter.tsx | 3 +- packages/drawer/src/types.tsx | 109 +++++++++++++++--- .../drawer/src/views/DrawerNavigatorItems.tsx | 32 +---- packages/drawer/src/views/DrawerSidebar.tsx | 34 +++--- packages/drawer/src/views/DrawerView.tsx | 18 ++- packages/drawer/yarn.lock | 8 +- 11 files changed, 178 insertions(+), 90 deletions(-) diff --git a/packages/drawer/example/package.json b/packages/drawer/example/package.json index ff49cb68..8a791b96 100644 --- a/packages/drawer/example/package.json +++ b/packages/drawer/example/package.json @@ -20,7 +20,7 @@ "react-native-paper": "^2.2.0", "react-native-reanimated": "~1.1.0", "react-native-webview": "~5.12.0", - "react-navigation": "^4.0.1", + "react-navigation": "^4.0.3", "react-navigation-stack": "^1.4.0" }, "devDependencies": { diff --git a/packages/drawer/example/yarn.lock b/packages/drawer/example/yarn.lock index d97c3b3c..5f92875f 100644 --- a/packages/drawer/example/yarn.lock +++ b/packages/drawer/example/yarn.lock @@ -4440,10 +4440,10 @@ react-navigation-stack@^1.4.0: dependencies: prop-types "^15.7.2" -react-navigation@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.1.tgz#96c17ac90afcf0a5bc957358152326211a79d183" - integrity sha512-6XzuqvhOnY6FA6tCErD6+vfZdnP+O/7hCQper9qDulxxW2ZVkCF4xWdzoVcv3DDR6P5CK6l1tcbJ1ku256AdFQ== +react-navigation@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724" + integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA== dependencies: "@react-navigation/core" "^3.5.0" "@react-navigation/native" "^3.6.2" diff --git a/packages/drawer/package.json b/packages/drawer/package.json index 39a27c70..535cc1b5 100644 --- a/packages/drawer/package.json +++ b/packages/drawer/package.json @@ -15,7 +15,7 @@ "lint": "eslint --ext .js,.ts,.tsx .", "typescript": "tsc --noEmit", "example": "yarn --cwd example", - "bootstrap": "yarn && yarn example", + "bootstrap": "yarn example && yarn", "prepare": "bob build", "release": "release-it" }, @@ -68,7 +68,7 @@ "react-native-reanimated": "^1.2.0", "react-native-screens": "^1.0.0-alpha.23", "react-native-testing-library": "^1.7.0", - "react-navigation": "^4.0.1", + "react-navigation": "^4.0.3", "react-test-renderer": "16.8.6", "release-it": "^12.3.6", "typescript": "^3.4.5" @@ -80,7 +80,7 @@ "react-native-gesture-handler": "^1.0.12", "react-native-reanimated": "^1.0.0", "react-native-screens": "^1.0.0 || ^1.0.0-alpha", - "react-navigation": "^4.0.1" + "react-navigation": "^4.0.3" }, "jest": { "preset": "react-native", diff --git a/packages/drawer/src/index.tsx b/packages/drawer/src/index.tsx index fffd66c3..4bbb0a20 100644 --- a/packages/drawer/src/index.tsx +++ b/packages/drawer/src/index.tsx @@ -21,3 +21,14 @@ export { default as DrawerSidebar } from './views/DrawerSidebar'; export { default as DrawerView } from './views/DrawerView'; export { default as DrawerGestureContext } from './utils/DrawerGestureContext'; + +/** + * Types + */ +export { + NavigationDrawerState, + NavigationDrawerProp, + NavigationDrawerOptions, + NavigationDrawerConfig, + NavigationDrawerRouterConfig, +} from './types'; diff --git a/packages/drawer/src/navigators/createDrawerNavigator.tsx b/packages/drawer/src/navigators/createDrawerNavigator.tsx index b9a1b94a..39732a64 100644 --- a/packages/drawer/src/navigators/createDrawerNavigator.tsx +++ b/packages/drawer/src/navigators/createDrawerNavigator.tsx @@ -1,15 +1,24 @@ import * as React from 'react'; import { Dimensions, Platform, ScrollView, I18nManager } from 'react-native'; -import { createNavigator, ThemeColors, SafeAreaView } from 'react-navigation'; +import { + createNavigator, + ThemeColors, + SafeAreaView, + NavigationRouteConfigMap, + CreateNavigatorConfig, +} from 'react-navigation'; import DrawerRouter from '../routers/DrawerRouter'; import DrawerView from '../views/DrawerView'; -import DrawerItems, { Props } from '../views/DrawerNavigatorItems'; +import DrawerItems from '../views/DrawerNavigatorItems'; +import { + NavigationDrawerOptions, + NavigationDrawerProp, + NavigationDrawerConfig, + NavigationDrawerRouterConfig, + ContentComponentProps, +} from '../types'; -// A stack navigators props are the intersection between -// the base navigator props (navgiation, screenProps, etc) -// and the view's props - -const defaultContentComponent = (props: Props) => ( +const defaultContentComponent = (props: ContentComponentProps) => ( @@ -17,7 +26,7 @@ const defaultContentComponent = (props: Props) => ( ); -const DefaultDrawerConfig = { +const DefaultDrawerConfig: NavigationDrawerConfig = { drawerWidth: () => { /* * Default drawer width is screen width - header height @@ -49,7 +58,17 @@ const DefaultDrawerConfig = { statusBarAnimation: 'slide', }; -const DrawerNavigator = (routeConfigs: object, config: any = {}) => { +const DrawerNavigator = ( + routeConfigs: NavigationRouteConfigMap< + NavigationDrawerOptions, + NavigationDrawerProp + >, + config: CreateNavigatorConfig< + NavigationDrawerConfig, + NavigationDrawerRouterConfig, + NavigationDrawerProp + > = {} +) => { const mergedConfig = { ...DefaultDrawerConfig, ...config }; const drawerRouter = DrawerRouter(routeConfigs, mergedConfig); diff --git a/packages/drawer/src/routers/DrawerRouter.tsx b/packages/drawer/src/routers/DrawerRouter.tsx index 5984dc21..8a689382 100644 --- a/packages/drawer/src/routers/DrawerRouter.tsx +++ b/packages/drawer/src/routers/DrawerRouter.tsx @@ -3,6 +3,7 @@ import { NavigationActions, NavigationAction, NavigationRoute, + NavigationRouteConfigMap, } from 'react-navigation'; import * as DrawerActions from './DrawerActions'; @@ -34,7 +35,7 @@ const getActiveRouteKey = (route: NavigationRoute): string => { }; export default ( - routeConfigs: object, + routeConfigs: NavigationRouteConfigMap, config: { unmountInactiveRoutes?: boolean; resetOnBlur?: boolean; diff --git a/packages/drawer/src/types.tsx b/packages/drawer/src/types.tsx index 7079936a..574a6c88 100644 --- a/packages/drawer/src/types.tsx +++ b/packages/drawer/src/types.tsx @@ -1,25 +1,104 @@ -import { NavigationAction } from 'react-navigation'; - -export type Route = { - key: string; - routeName: string; -}; +import { + NavigationScreenProp, + NavigationState, + NavigationRoute, + NavigationParams, + NavigationProp, + NavigationDescriptor, +} from 'react-navigation'; +import { StyleProp, ViewStyle, TextStyle } from 'react-native'; +import Animated from 'react-native-reanimated'; export type Scene = { - route: Route; + route: NavigationRoute; index: number; focused: boolean; tintColor?: string; }; -export type Navigation = { - state: { - key: string; - index: number; - routes: Route[]; - isDrawerOpen: boolean; - }; +export type NavigationDrawerState = NavigationState & { + isDrawerOpen: boolean; +}; + +export type NavigationDrawerProp< + State = NavigationRoute, + Params = NavigationParams +> = NavigationScreenProp & { openDrawer: () => void; closeDrawer: () => void; - dispatch: (action: NavigationAction) => boolean; + toggleDrawer: () => void; + jumpTo: (routeName: string, key?: string) => void; +}; + +export type NavigationDrawerOptions = { + title?: string; + drawerLabel?: + | React.ReactNode + | ((props: { tintColor?: string; focused: boolean }) => React.ReactNode); + drawerIcon?: + | React.ReactNode + | ((props: { tintColor?: string; focused: boolean }) => React.ReactNode); + drawerLockMode?: 'locked-closed' | 'locked-open'; +}; + +export type NavigationDrawerConfig = { + drawerWidth?: number | (() => number); + contentComponent?: React.ComponentType; + drawerPosition?: 'left' | 'right'; + drawerType?: 'front' | 'back' | 'slide'; + keyboardDismissMode?: 'none' | 'on-drag'; + swipeEdgeWidth?: number; + swipeDistanceThreshold?: number; + swipeVelocityThreshold?: number; + hideStatusBar?: boolean; + statusBarAnimation?: 'slide' | 'none' | 'fade'; + drawerBackgroundColor?: ThemedColor; + overlayColor?: ThemedColor; +}; + +export type NavigationDrawerRouterConfig = { + unmountInactiveRoutes?: boolean; + resetOnBlur?: boolean; + initialRouteName?: string; + contentComponent?: React.ComponentType; + contentOptions?: object; +}; + +export type ThemedColor = { + light: string; + dark: string; +}; + +export type DrawerNavigatorItemsProps = { + items: NavigationRoute[]; + activeItemKey?: string | null; + activeTintColor?: string | ThemedColor; + activeBackgroundColor?: string | ThemedColor; + inactiveTintColor?: string | ThemedColor; + inactiveBackgroundColor?: string | ThemedColor; + getLabel: (scene: Scene) => React.ReactNode; + renderIcon: (scene: Scene) => React.ReactNode; + onItemPress: (scene: { route: NavigationRoute; focused: boolean }) => void; + itemsContainerStyle?: StyleProp; + itemStyle?: StyleProp; + labelStyle?: StyleProp; + activeLabelStyle?: StyleProp; + inactiveLabelStyle?: StyleProp; + iconContainerStyle?: StyleProp; + drawerPosition: 'left' | 'right'; +}; + +export type ContentComponentProps = DrawerNavigatorItemsProps & { + navigation: NavigationProp; + descriptors: { [key: string]: any }; + drawerOpenProgress: Animated.Node; + screenProps: unknown; +}; + +export type SceneDescriptorMap = { + [key: string]: NavigationDescriptor< + NavigationParams, + NavigationDrawerOptions, + NavigationDrawerProp + >; }; diff --git a/packages/drawer/src/views/DrawerNavigatorItems.tsx b/packages/drawer/src/views/DrawerNavigatorItems.tsx index 026b107e..4c31db4c 100644 --- a/packages/drawer/src/views/DrawerNavigatorItems.tsx +++ b/packages/drawer/src/views/DrawerNavigatorItems.tsx @@ -1,37 +1,15 @@ import * as React from 'react'; -import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'; +import { View, Text, StyleSheet } from 'react-native'; import { SafeAreaView, ThemeContext } from 'react-navigation'; import TouchableItem from './TouchableItem'; -import { Scene, Route } from '../types'; - -export type ThemedColor = { - light: string; - dark: string; -}; - -export type Props = { - items: Route[]; - activeItemKey?: string | null; - activeTintColor?: string | ThemedColor; - activeBackgroundColor?: string | ThemedColor; - inactiveTintColor?: string | ThemedColor; - inactiveBackgroundColor?: string | ThemedColor; - 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'; -}; +import { DrawerNavigatorItemsProps } from '../types'; /** * Component that renders the navigation list in the drawer. */ -export default class DrawerNavigatorItems extends React.Component { +export default class DrawerNavigatorItems extends React.Component< + DrawerNavigatorItemsProps +> { /* Material design specs - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-specs */ static defaultProps = { activeTintColor: { diff --git a/packages/drawer/src/views/DrawerSidebar.tsx b/packages/drawer/src/views/DrawerSidebar.tsx index 70003a46..f68677ce 100644 --- a/packages/drawer/src/views/DrawerSidebar.tsx +++ b/packages/drawer/src/views/DrawerSidebar.tsx @@ -1,24 +1,25 @@ import * as React from 'react'; -import { StyleSheet, View, Animated, ViewStyle } from 'react-native'; -import { NavigationActions } from 'react-navigation'; - -import { Props as DrawerNavigatorItemsProps } from './DrawerNavigatorItems'; -import { Navigation, Scene, Route } from '../types'; - -export type ContentComponentProps = DrawerNavigatorItemsProps & { - navigation: Navigation; - descriptors: { [key: string]: any }; - drawerOpenProgress: Animated.AnimatedInterpolation; - screenProps: unknown; -}; +import { StyleSheet, View, ViewStyle } from 'react-native'; +import { + NavigationActions, + NavigationRoute, + NavigationProp, +} from 'react-navigation'; +import Animated from 'react-native-reanimated'; +import { + Scene, + NavigationDrawerState, + ContentComponentProps, + SceneDescriptorMap, +} from '../types'; type Props = { contentComponent?: React.ComponentType; contentOptions?: object; screenProps?: unknown; - navigation: Navigation; - descriptors: { [key: string]: any }; - drawerOpenProgress: Animated.AnimatedInterpolation; + navigation: NavigationProp; + descriptors: SceneDescriptorMap; + drawerOpenProgress: Animated.Node; drawerPosition: 'left' | 'right'; style?: ViewStyle; }; @@ -68,10 +69,11 @@ class DrawerSidebar extends React.PureComponent { route, focused, }: { - route: Route; + route: NavigationRoute; focused: boolean; }) => { if (focused) { + // @ts-ignore this.props.navigation.closeDrawer(); } else { this.props.navigation.dispatch( diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx index 89f4ade6..e2ca197e 100644 --- a/packages/drawer/src/views/DrawerView.tsx +++ b/packages/drawer/src/views/DrawerView.tsx @@ -9,11 +9,15 @@ import { import { ScreenContainer } from 'react-native-screens'; import * as DrawerActions from '../routers/DrawerActions'; -import DrawerSidebar, { ContentComponentProps } from './DrawerSidebar'; +import DrawerSidebar from './DrawerSidebar'; import DrawerGestureContext from '../utils/DrawerGestureContext'; import ResourceSavingScene from './ResourceSavingScene'; import Drawer from './Drawer'; -import { Navigation } from '../types'; +import { + NavigationDrawerState, + ContentComponentProps, + SceneDescriptorMap, +} from '../types'; import { PanGestureHandler } from 'react-native-gesture-handler'; type DrawerOptions = { @@ -37,14 +41,8 @@ type DrawerOptions = { type Props = { lazy: boolean; - navigation: Navigation; - descriptors: { - [key: string]: { - navigation: NavigationProp; - getComponent: () => React.ComponentType<{}>; - options: DrawerOptions; - }; - }; + navigation: NavigationProp; + descriptors: SceneDescriptorMap; navigationConfig: DrawerOptions & { contentComponent?: React.ComponentType; unmountInactiveRoutes?: boolean; diff --git a/packages/drawer/yarn.lock b/packages/drawer/yarn.lock index d33a8442..6e83590f 100644 --- a/packages/drawer/yarn.lock +++ b/packages/drawer/yarn.lock @@ -7349,10 +7349,10 @@ react-native@~0.59.10: xmldoc "^0.4.0" yargs "^9.0.0" -react-navigation@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.1.tgz#96c17ac90afcf0a5bc957358152326211a79d183" - integrity sha512-6XzuqvhOnY6FA6tCErD6+vfZdnP+O/7hCQper9qDulxxW2ZVkCF4xWdzoVcv3DDR6P5CK6l1tcbJ1ku256AdFQ== +react-navigation@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724" + integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA== dependencies: "@react-navigation/core" "^3.5.0" "@react-navigation/native" "^3.6.2"