From d98026325d4e0a72e1ab57ccde702d342bfaa55d Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Wed, 11 Sep 2019 17:03:45 +0200 Subject: [PATCH] fix: fix typescript definitions (#54) --- .../material-bottom-tabs/example/package.json | 2 +- .../material-bottom-tabs/example/yarn.lock | 8 +- packages/material-bottom-tabs/package.json | 4 +- .../createMaterialBottomTabNavigator.tsx | 78 +++++------------ packages/material-bottom-tabs/src/types.tsx | 87 +++++++++++++++++++ .../src/views/MaterialBottomTabView.tsx | 32 +++---- packages/material-bottom-tabs/yarn.lock | 8 +- 7 files changed, 133 insertions(+), 86 deletions(-) create mode 100644 packages/material-bottom-tabs/src/types.tsx diff --git a/packages/material-bottom-tabs/example/package.json b/packages/material-bottom-tabs/example/package.json index 7ba28477..008724fc 100644 --- a/packages/material-bottom-tabs/example/package.json +++ b/packages/material-bottom-tabs/example/package.json @@ -19,7 +19,7 @@ "react-native-gesture-handler": "~1.3.0", "react-native-paper": "^3.0.0-alpha.4", "react-native-reanimated": "~1.1.0", - "react-navigation": "^4.0.2", + "react-navigation": "^4.0.3", "react-navigation-stack": "^1.5.4" }, "devDependencies": { diff --git a/packages/material-bottom-tabs/example/yarn.lock b/packages/material-bottom-tabs/example/yarn.lock index 5a0963fd..91f2502a 100644 --- a/packages/material-bottom-tabs/example/yarn.lock +++ b/packages/material-bottom-tabs/example/yarn.lock @@ -4318,10 +4318,10 @@ react-navigation-stack@^1.5.4: dependencies: prop-types "^15.7.2" -react-navigation@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.2.tgz#09fe915cdc2436c964b8f85b642eaf8d429305c6" - integrity sha512-c95NfoOCTb5GEHUTcngtJ9h9lxU484UftYAZ8oeNWWVW4YPbCuvUqwviUCSq3uT0JVkcEhdUqHekmL+eqYhg8g== +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/material-bottom-tabs/package.json b/packages/material-bottom-tabs/package.json index bedb6fe5..725c5892 100644 --- a/packages/material-bottom-tabs/package.json +++ b/packages/material-bottom-tabs/package.json @@ -60,7 +60,7 @@ "react-native-gesture-handler": "^1.4.1", "react-native-paper": "^3.0.0-alpha.4", "react-native-reanimated": "^1.2.0", - "react-navigation": "^4.0.1", + "react-navigation": "^4.0.3", "release-it": "^12.3.6", "typescript": "^3.5.2" }, @@ -68,7 +68,7 @@ "react": "*", "react-native": "*", "react-native-paper": "^2.2.2 || ^3.0.0-alpha.1", - "react-navigation": "^4.0.2" + "react-navigation": "^4.0.3" }, "husky": { "hooks": { diff --git a/packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx b/packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx index 2c819145..1fe0cb48 100644 --- a/packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx +++ b/packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { StyleProp, ViewStyle } from 'react-native'; import { TabRouter, StackActions, @@ -10,57 +9,18 @@ import { NavigationScreenProp, NavigationRoute, NavigationDescriptor, + NavigationRouteConfigMap, + NavigationParams, + CreateNavigatorConfig, + NavigationTabRouterConfig, } from 'react-navigation'; import MaterialBottomTabView from '../views/MaterialBottomTabView'; - -type NavigationMaterialBottomTabOptions = { - shifting?: boolean; - labeled?: boolean; - activeColor?: string; - activeColorLight?: string; - activeColorDark?: string; - inactiveColor?: string; - inactiveColorLight?: string; - inactiveColorDark?: string; - barStyle?: StyleProp; - barStyleLight?: StyleProp; - barStyleDark?: StyleProp; - title?: string; - tabBarLabel?: React.ReactNode; - tabBarVisible?: boolean; - tabBarAccessibilityLabel?: string; - tabBarTestID?: string; - tabBarIcon?: - | React.ReactNode - | ((props: { - focused: boolean; - tintColor?: string; - horizontal?: boolean; - }) => React.ReactNode); - tabBarOnPress?: (props: { - navigation: NavigationScreenProp; - defaultHandler: () => void; - }) => void; -}; - -type Screen< - Options extends NavigationMaterialBottomTabOptions -> = React.ComponentType & { - navigationOptions?: Options & { - [key: string]: any; - }; -}; - -type RouteConfig = { - [key: string]: - | Screen - | ({ screen: Screen } | { getScreen(): Screen }) & { - path?: string; - navigationOptions?: - | Options - | ((options: { navigation: NavigationScreenProp }) => Options); - }; -}; +import { + NavigationMaterialBottomTabOptions, + NavigationTabState, + NavigationMaterialBottomTabConfig, + NavigationTabProp, +} from '../types'; export type RenderIconProps = { route: NavigationRoute; @@ -70,11 +30,12 @@ export type RenderIconProps = { }; export type NavigationViewProps = { - navigation: NavigationProp; + navigation: NavigationProp; descriptors: { [key: string]: NavigationDescriptor< - any, - NavigationMaterialBottomTabOptions + NavigationParams, + NavigationMaterialBottomTabOptions, + NavigationTabProp >; }; screenProps?: unknown; @@ -91,8 +52,15 @@ export type NavigationViewProps = { }; export default function createMaterialBottomTabNavigator( - routes: RouteConfig, - config: NavigationMaterialBottomTabOptions + routes: NavigationRouteConfigMap< + NavigationMaterialBottomTabOptions, + NavigationTabProp + >, + config: CreateNavigatorConfig< + NavigationMaterialBottomTabConfig, + NavigationTabRouterConfig, + NavigationMaterialBottomTabOptions + > = {} ) { class NavigationView extends React.Component { _renderScene = ({ route }: { route: { key: string } }) => { diff --git a/packages/material-bottom-tabs/src/types.tsx b/packages/material-bottom-tabs/src/types.tsx new file mode 100644 index 00000000..6df8f249 --- /dev/null +++ b/packages/material-bottom-tabs/src/types.tsx @@ -0,0 +1,87 @@ +import { StyleProp, ViewStyle } from 'react-native'; +import { + NavigationRoute, + NavigationState, + NavigationScreenProp, + NavigationParams, +} from 'react-navigation'; + +export type NavigationTabState = NavigationState; + +export type NavigationTabProp< + State = NavigationRoute, + Params = NavigationParams +> = NavigationScreenProp & { + jumpTo(routeName: string, key?: string): void; +}; + +export type NavigationMaterialBottomTabOptions = { + shifting?: boolean; + labeled?: boolean; + activeColor?: string; + activeColorLight?: string; + activeColorDark?: string; + inactiveColor?: string; + inactiveColorLight?: string; + inactiveColorDark?: string; + barStyle?: StyleProp; + barStyleLight?: StyleProp; + barStyleDark?: StyleProp; + title?: string; + tabBarLabel?: React.ReactNode; + tabBarVisible?: boolean; + tabBarAccessibilityLabel?: string; + tabBarTestID?: string; + tabBarIcon?: + | React.ReactNode + | ((props: { + focused: boolean; + tintColor?: string; + horizontal?: boolean; + }) => React.ReactNode); + tabBarOnPress?: (props: { + navigation: NavigationTabProp; + defaultHandler: () => void; + }) => void; +}; + +export type NavigationMaterialBottomTabConfig = { + /** + * Whether the shifting style is used, the active tab appears wider and the inactive tabs won't have a label. + * By default, this is `true` when you have more than 3 tabs. + */ + shifting?: boolean; + /** + * Whether to show labels in tabs. When `false`, only icons will be displayed. + */ + labeled?: boolean; + /** + * Custom color for icon and label in the active tab. + */ + activeColor?: string; + activeColorLight?: string; + activeColorDark?: string; + /** + * Custom color for icon and label in the inactive tab. + */ + inactiveColor?: string; + inactiveColorLight?: string; + inactiveColorDark?: string; + /** + * Whether the bottom navigation bar is hidden when keyboard is shown. + * On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`. + */ + keyboardHidesNavigationBar?: boolean; + /** + * Style for the bottom navigation bar. + * You can set a bottom padding here if you have a translucent navigation bar on Android: + * + * ```js + * barStyle={{ paddingBottom: 48 }} + * ``` + */ + barStyle?: StyleProp; + barStyleLight?: StyleProp; + barStyleDark?: StyleProp; + style?: StyleProp; +}; diff --git a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx index d90d6a6f..e760a306 100644 --- a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx +++ b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { StyleProp, ViewStyle } from 'react-native'; import { ThemeContext, NavigationRoute, @@ -7,6 +6,7 @@ import { NavigationDescriptor, } from 'react-navigation'; import { BottomNavigation } from 'react-native-paper'; +import { NavigationMaterialBottomTabConfig } from '../types'; type Options = { tabBarVisible?: boolean; @@ -15,25 +15,17 @@ type Options = { tabBarColorDark?: string; }; -type Props = React.ComponentProps & { - navigation: NavigationProp; - descriptors: { [key: string]: NavigationDescriptor }; - screenProps?: unknown; - renderIcon: (options: { - route: NavigationRoute; - focused: boolean; - tintColor: string; - }) => React.ReactNode; - activeColor?: string; - activeColorLight?: string; - activeColorDark?: string; - inactiveColor?: string; - inactiveColorLight?: string; - inactiveColorDark?: string; - barStyle?: StyleProp; - barStyleLight?: StyleProp; - barStyleDark?: StyleProp; -}; +type Props = React.ComponentProps & + NavigationMaterialBottomTabConfig & { + navigation: NavigationProp; + descriptors: { [key: string]: NavigationDescriptor }; + screenProps?: unknown; + renderIcon: (options: { + route: NavigationRoute; + focused: boolean; + tintColor: string; + }) => React.ReactNode; + }; export default class MaterialBottomTabView extends React.Component { static contextType = ThemeContext; diff --git a/packages/material-bottom-tabs/yarn.lock b/packages/material-bottom-tabs/yarn.lock index 413a470f..66dc8953 100644 --- a/packages/material-bottom-tabs/yarn.lock +++ b/packages/material-bottom-tabs/yarn.lock @@ -7378,10 +7378,10 @@ react-native@~0.59.8: xmldoc "^0.4.0" yargs "^9.0.0" -react-navigation@^4.0.1: - version "4.0.2" - resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.2.tgz#09fe915cdc2436c964b8f85b642eaf8d429305c6" - integrity sha512-c95NfoOCTb5GEHUTcngtJ9h9lxU484UftYAZ8oeNWWVW4YPbCuvUqwviUCSq3uT0JVkcEhdUqHekmL+eqYhg8g== +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"