diff --git a/types/react-router-navigation-core/index.d.ts b/types/react-router-navigation-core/index.d.ts new file mode 100644 index 0000000000..a7ad09748c --- /dev/null +++ b/types/react-router-navigation-core/index.d.ts @@ -0,0 +1,156 @@ +// Type definitions for react-router-navigation-core 1.0 +// Project: https://github.com/LeoLeBras/react-router-navigation#readme +// Definitions by: Kalle Ott +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.4 + +// High-level wrappers +import { PureComponent, ReactNode, ComponentClass, ReactElement } from "react"; +import { BackHandler, StyleProp, ViewStyle } from "react-native"; +import { History, Location } from "history"; +import { RouterProps, RouteProps, match } from "react-router"; + +export type Route = { + key: string; + routeName: string; + match?: match; +}; + +export type NavigationState = { + index: number; + routes: Array; +}; + +export type RouteProps = { + component?: ComponentClass; + render?: (props: RouterProps) => ReactNode; + children?: ((props: RouterProps) => ReactNode) | ReactNode; + path?: string; + exact?: boolean; + strict?: boolean; +}; + +export type Card = RouteProps & { + key: string; +}; + +export type CardsRendererProps = { + onNavigateBack: (routeKey?: string) => boolean; + navigationState: NavigationState<{ + path?: string; + params?: object; + }>; + cards: Card[]; +}; + +export type Tab = RouteProps & { + key: string; + onIndexChange?: (index: number) => void; +}; + +export type TabsRendererProps = { + onIndexChange: (index: number) => void; + navigationState: NavigationState<{ + title?: string; + testID?: string; + }>; + loadedTabs: string[]; + tabs: Tab[]; +}; + +export type CardStackProps = { + children?: ReactNode[]; + render: (props: CardsRendererProps) => ReactNode; +}; + +export class CardStack extends PureComponent< + CardStackProps, + { + key: number; + navigationState: NavigationState<{ + path?: string; + params?: object; + }>; + cards: Card[]; + } +> { + unlistenHistory: () => void; + + constructor(props: CardStackProps, context?: any); + + onListenHistory: (history: History, nextHistory: History) => void; + + // Pop to previous scene (n-1) + onNavigateBack: () => boolean; +} + +export type TabStackProps = { + children?: ReactNode[]; + render: (props: TabsRendererProps) => ReactNode; + lazy?: boolean; + forceSync?: boolean; + style?: StyleProp; +}; + +export class TabStack extends PureComponent< + TabStackProps, + { + navigationState: NavigationState<{ + title?: string; + testID?: string; + }>; + tabs: Tab[]; + loadedTabs: string[]; + rootIndex: number; + tabsHistory: { [key: number]: Location[] }; + } +> { + static defaultProps: { + forceSync: false; + }; + + unlistenHistory?: () => void; + + constructor(props: TabStackProps); + + onListenHistory: (history: History, nextHistory: History) => void; + + onIndexChange: (index: number) => void; +} + +// Test if current stack item should be updated +export const shouldUpdate: ( + currentItem: RouteProps, + nextItem: RouteProps, + currentLocation: Location, + nextLocation: Location +) => boolean; + +// Get stack item from a specific route +export const get: (items: Item[], route: Route) => Item; + +// Generate unique key +export const createKey: (route: Route) => string; + +// Get current route from a specific history location +export const getRoute: ( + stack: RouteProps[], + location: Location +) => Route | undefined; + +// Render a subview with props +export const renderSubView: ( + render: (propsA: any, propsB: any) => ReactNode, + additionalProps?: any +) => (ownProps: any) => ReactNode; + +// Build stack with React elements +export const build: ( + children: Array>, + oldBuild?: Item[] +) => Item[]; + +export const runHistoryListenner: ( + history: History, + onListenHistory: () => void +) => () => void; diff --git a/types/react-router-navigation-core/react-router-navigation-core-tests.tsx b/types/react-router-navigation-core/react-router-navigation-core-tests.tsx new file mode 100644 index 0000000000..6d6d048886 --- /dev/null +++ b/types/react-router-navigation-core/react-router-navigation-core-tests.tsx @@ -0,0 +1,49 @@ +import * as React from "react"; +import { View } from "react-native"; +import { TabStack, renderSubView } from "react-router-navigation-core"; +import { TabBarProps, TabProps } from "react-router-navigation"; +import { TabViewAnimated } from "react-native-tab-view"; + +type Props = TabBarProps & { + children?: Array>; + lazy?: boolean; +}; + +type State = { + key: string; +}; + +class BottomNavigation extends React.Component { + state = { key: Math.random().toString(10) }; + + render() { + return ( + { + const ownProps = { ...this.props, ...props }; + return ( + , + ownProps + )} + renderFooter={renderSubView( + sceneProps => , + ownProps + )} + renderScene={renderSubView( + sceneProps => , + ownProps + )} + /> + ); + }} + /> + ); + } +} diff --git a/types/react-router-navigation-core/tsconfig.json b/types/react-router-navigation-core/tsconfig.json new file mode 100644 index 0000000000..b4572aa56c --- /dev/null +++ b/types/react-router-navigation-core/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "module": "commonjs", + "lib": ["es6", "dom"], + "jsx": "react", + "strictNullChecks": true, + "strictFunctionTypes": true, + "noImplicitAny": true, + "noImplicitThis": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true + }, + "files": ["index.d.ts", "react-router-navigation-core-tests.tsx"] +} diff --git a/types/react-router-navigation-core/tslint.json b/types/react-router-navigation-core/tslint.json new file mode 100644 index 0000000000..9771c6e171 --- /dev/null +++ b/types/react-router-navigation-core/tslint.json @@ -0,0 +1,9 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "interface-over-type-literal": false, + "prefer-method-signature": false, + "prefer-declare-function": false, + "semicolon": false + } +} diff --git a/types/react-router-navigation/index.d.ts b/types/react-router-navigation/index.d.ts new file mode 100644 index 0000000000..0053f7ea30 --- /dev/null +++ b/types/react-router-navigation/index.d.ts @@ -0,0 +1,184 @@ +// Type definitions for react-router-navigation 1.0 +// Project: https://github.com/LeoLeBras/react-router-navigation#readme +// Definitions by: Kalle Ott +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.4 + +import { Component, ReactNode, ReactElement, ComponentClass } from "react"; +import { StyleProp, ViewProperties, ViewStyle, TextStyle } from "react-native"; +import { TabViewAnimated, TabViewPagerPan } from "react-native-tab-view"; +import { RouteProps } from "react-router-navigation-core"; +import { + NavigationTransitionProps, + NavigationTransitionSpec +} from "react-navigation"; + +/** + * Navigation + */ + +export type CardProps = RouteProps & NavBarProps; + +// TODO specify exact type when lib changes +export type CardSubViewProps = any; +// NavigationSceneRendererProps & +// CardsRendererProps & +// CardProps + +export type NavBarProps = { + // General + hideNavBar?: boolean; + renderNavBar?: (props: CardSubViewProps) => ReactNode; + navBarStyle?: StyleProp; + // Left button + hideBackButton?: boolean; + backButtonTintColor?: string; + backButtonTitle?: string; + renderLeftButton?: (props: CardSubViewProps) => ReactNode; + // Title + title?: string; + titleStyle?: StyleProp; + renderTitle?: (props: CardSubViewProps) => ReactNode; + // Right button + renderRightButton?: (props: CardSubViewProps) => ReactNode; +}; + +export type NavigationProps = NavBarProps & { + cardStyle?: StyleProp; + configureTransition?: ( + transitionProps: NavigationTransitionProps, + prevTransitionProps?: NavigationTransitionProps + ) => NavigationTransitionSpec; + onTransitionStart?: (...args: any[]) => void; + onTransitionEnd?: (...args: any[]) => void; +}; + +export type Card = CardProps & { key: string }; + +/** + * Tabs + */ + +// TODO specify exact type when lib changes +export type TabSubViewProps = any; +// SceneRendererProps & +// TabsRendererProps & +// TabBarProps + +export type TabBarProps = { + hideTabBar?: boolean; + renderTabBar?: (props: TabSubViewProps) => ReactNode; + tabBarStyle?: StyleProp; + tabStyle?: StyleProp; + label?: string; + labelStyle?: StyleProp; + renderLabel?: (props: TabSubViewProps) => ReactNode; + tabTintColor?: string; + tabActiveTintColor?: string; + // only: + renderTabIcon?: (props: TabSubViewProps) => ReactNode; + // only: + tabBarPosition?: "top" | "bottom"; + tabBarIndicatorStyle?: StyleProp; +}; + +export type TabsProps = TabBarProps & { + // only: + initialLayout?: { width?: number; height?: number }; + configureTransition?: ( + transitionProps: NavigationTransitionProps, + prevTransitionProps?: NavigationTransitionProps + ) => NavigationTransitionSpec; +}; + +export type TabProps = RouteProps & + TabBarProps & { + onReset?: (props: TabBarProps & RouteProps) => void; + onIndexChange?: (index: number) => void; + }; + +export type Tab = TabProps & { key: string }; + +// High-level wrappers +export type BottomNavigationProps = TabBarProps & { + children?: ReactNode[]; + lazy?: boolean; + style?: StyleProp; +}; + +export class BottomNavigation extends Component< + BottomNavigationProps, + { + key: string; + } +> { + static defaultProps: { + lazy: true; + }; + + renderPager: (sceneProps: TabSubViewProps) => ReactNode; + + renderNavigationBar: ( + sceneProps: TabSubViewProps, + props: TabSubViewProps + ) => ReactNode; + + renderSceneView: (sceneProps: TabSubViewProps) => ReactNode; + + renderScene: (sceneProps: TabSubViewProps) => ReactElement; +} + +export const Card: (props: CardProps) => ReactElement; + +export class NavBar extends Component { + props: CardSubViewProps; + + renderLeftComponent: (sceneProps: CardSubViewProps) => ReactNode; + + renderTitleComponent: (sceneProps: CardSubViewProps) => ReactNode; + + renderRightComponent: (sceneProps: CardSubViewProps) => ReactNode; +} + +export type NavigationComponentProps = NavigationProps & { + children?: Array>; +}; + +export class Navigation extends Component { + props: NavigationComponentProps; + + renderHeader: ( + sceneProps: CardSubViewProps, + props: CardSubViewProps + ) => ReactNode; + + renderSceneComponent: ( + sceneProps: CardSubViewProps + ) => ComponentClass | undefined; +} + +export const Tab: (props: TabProps) => ReactElement<{}>; + +export type TabBarComponentProps = TabBarProps & { + children?: Array>; +}; + +export class Tabs extends Component< + TabBarComponentProps, + { + key: string; + } +> { + props: TabBarComponentProps; + + renderHeader: (sceneProps: TabSubViewProps) => ReactElement | null; + + renderFooter: (sceneProps: TabSubViewProps) => ReactElement | null; + + renderTabBar: ( + sceneProps: TabSubViewProps, + props: TabSubViewProps + ) => ReactElement | null; + + renderScene: (sceneProps: TabSubViewProps) => ReactElement | null; +} diff --git a/types/react-router-navigation/react-router-navigation-tests.tsx b/types/react-router-navigation/react-router-navigation-tests.tsx new file mode 100644 index 0000000000..a70ad1ef60 --- /dev/null +++ b/types/react-router-navigation/react-router-navigation-tests.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; +import { Text } from "react-native"; +import { NativeRouter, Link } from "react-router-native"; +import { Navigation, Card } from "react-router-navigation"; + +const App = () => ( + + + ( + + Press it + + )} + /> + Hello} /> + + +); diff --git a/types/react-router-navigation/tsconfig.json b/types/react-router-navigation/tsconfig.json new file mode 100644 index 0000000000..d9909d32a6 --- /dev/null +++ b/types/react-router-navigation/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "module": "commonjs", + "lib": ["es6", "dom"], + "jsx": "react", + "strictNullChecks": true, + "strictFunctionTypes": true, + "noImplicitAny": true, + "noImplicitThis": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true + }, + "files": ["index.d.ts", "react-router-navigation-tests.tsx"] +} diff --git a/types/react-router-navigation/tslint.json b/types/react-router-navigation/tslint.json new file mode 100644 index 0000000000..34f6d3563e --- /dev/null +++ b/types/react-router-navigation/tslint.json @@ -0,0 +1,8 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "interface-over-type-literal": false, + "prefer-method-signature": false, + "prefer-declare-function": false + } +}