mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-04 06:47:03 +00:00
Merge branch 'react-router-navigation' of https://github.com/kaoDev/DefinitelyTyped into kaoDev-react-router-navigation
This commit is contained in:
Andy Hanson
+156
@@ -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 <https://github.com/kaoDev>
|
||||
// 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<T = {}> = {
|
||||
key: string;
|
||||
routeName: string;
|
||||
match?: match<T>;
|
||||
};
|
||||
|
||||
export type NavigationState<OwnRoute> = {
|
||||
index: number;
|
||||
routes: Array<Route & OwnRoute>;
|
||||
};
|
||||
|
||||
export type RouteProps = {
|
||||
component?: ComponentClass<RouterProps>;
|
||||
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<ViewStyle>;
|
||||
};
|
||||
|
||||
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: <Item extends Route>(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: <Item>(
|
||||
children: Array<ReactElement<Item>>,
|
||||
oldBuild?: Item[]
|
||||
) => Item[];
|
||||
|
||||
export const runHistoryListenner: (
|
||||
history: History,
|
||||
onListenHistory: () => void
|
||||
) => () => void;
|
||||
@@ -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<React.ReactElement<TabProps>>;
|
||||
lazy?: boolean;
|
||||
};
|
||||
|
||||
type State = {
|
||||
key: string;
|
||||
};
|
||||
|
||||
class BottomNavigation extends React.Component<Props, State> {
|
||||
state = { key: Math.random().toString(10) };
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TabStack
|
||||
{...this.props}
|
||||
forceSync
|
||||
render={props => {
|
||||
const ownProps = { ...this.props, ...props };
|
||||
return (
|
||||
<TabViewAnimated
|
||||
{...props}
|
||||
key={`transitioner_${this.state.key}`}
|
||||
animationEnabled={false}
|
||||
renderPager={renderSubView(
|
||||
sceneProps => <View />,
|
||||
ownProps
|
||||
)}
|
||||
renderFooter={renderSubView(
|
||||
sceneProps => <View />,
|
||||
ownProps
|
||||
)}
|
||||
renderScene={renderSubView(
|
||||
sceneProps => <View />,
|
||||
ownProps
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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"]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"interface-over-type-literal": false,
|
||||
"prefer-method-signature": false,
|
||||
"prefer-declare-function": false,
|
||||
"semicolon": false
|
||||
}
|
||||
}
|
||||
+184
@@ -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 <https://github.com/kaoDev>
|
||||
// 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<ViewStyle>;
|
||||
// Left button
|
||||
hideBackButton?: boolean;
|
||||
backButtonTintColor?: string;
|
||||
backButtonTitle?: string;
|
||||
renderLeftButton?: (props: CardSubViewProps) => ReactNode;
|
||||
// Title
|
||||
title?: string;
|
||||
titleStyle?: StyleProp<TextStyle>;
|
||||
renderTitle?: (props: CardSubViewProps) => ReactNode;
|
||||
// Right button
|
||||
renderRightButton?: (props: CardSubViewProps) => ReactNode;
|
||||
};
|
||||
|
||||
export type NavigationProps = NavBarProps & {
|
||||
cardStyle?: StyleProp<ViewStyle>;
|
||||
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<ViewStyle>;
|
||||
tabStyle?: StyleProp<ViewStyle>;
|
||||
label?: string;
|
||||
labelStyle?: StyleProp<TextStyle>;
|
||||
renderLabel?: (props: TabSubViewProps) => ReactNode;
|
||||
tabTintColor?: string;
|
||||
tabActiveTintColor?: string;
|
||||
// <BottomNavigation /> only:
|
||||
renderTabIcon?: (props: TabSubViewProps) => ReactNode;
|
||||
// <Tabs /> only:
|
||||
tabBarPosition?: "top" | "bottom";
|
||||
tabBarIndicatorStyle?: StyleProp<ViewStyle>;
|
||||
};
|
||||
|
||||
export type TabsProps = TabBarProps & {
|
||||
// <Tabs /> 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<ViewStyle>;
|
||||
};
|
||||
|
||||
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<ViewProperties>;
|
||||
}
|
||||
|
||||
export const Card: (props: CardProps) => ReactElement<CardProps>;
|
||||
|
||||
export class NavBar extends Component<CardSubViewProps, void> {
|
||||
props: CardSubViewProps;
|
||||
|
||||
renderLeftComponent: (sceneProps: CardSubViewProps) => ReactNode;
|
||||
|
||||
renderTitleComponent: (sceneProps: CardSubViewProps) => ReactNode;
|
||||
|
||||
renderRightComponent: (sceneProps: CardSubViewProps) => ReactNode;
|
||||
}
|
||||
|
||||
export type NavigationComponentProps = NavigationProps & {
|
||||
children?: Array<ReactElement<any>>;
|
||||
};
|
||||
|
||||
export class Navigation extends Component<NavigationComponentProps> {
|
||||
props: NavigationComponentProps;
|
||||
|
||||
renderHeader: (
|
||||
sceneProps: CardSubViewProps,
|
||||
props: CardSubViewProps
|
||||
) => ReactNode;
|
||||
|
||||
renderSceneComponent: (
|
||||
sceneProps: CardSubViewProps
|
||||
) => ComponentClass<any> | undefined;
|
||||
}
|
||||
|
||||
export const Tab: (props: TabProps) => ReactElement<{}>;
|
||||
|
||||
export type TabBarComponentProps = TabBarProps & {
|
||||
children?: Array<ReactElement<any>>;
|
||||
};
|
||||
|
||||
export class Tabs extends Component<
|
||||
TabBarComponentProps,
|
||||
{
|
||||
key: string;
|
||||
}
|
||||
> {
|
||||
props: TabBarComponentProps;
|
||||
|
||||
renderHeader: (sceneProps: TabSubViewProps) => ReactElement<any> | null;
|
||||
|
||||
renderFooter: (sceneProps: TabSubViewProps) => ReactElement<any> | null;
|
||||
|
||||
renderTabBar: (
|
||||
sceneProps: TabSubViewProps,
|
||||
props: TabSubViewProps
|
||||
) => ReactElement<any> | null;
|
||||
|
||||
renderScene: (sceneProps: TabSubViewProps) => ReactElement<any> | null;
|
||||
}
|
||||
@@ -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 = () => (
|
||||
<NativeRouter>
|
||||
<Navigation>
|
||||
<Card
|
||||
exact
|
||||
path="/"
|
||||
render={() => (
|
||||
<Link to="/hello">
|
||||
<Text>Press it</Text>
|
||||
</Link>
|
||||
)}
|
||||
/>
|
||||
<Card path="/hello" render={() => <Text>Hello</Text>} />
|
||||
</Navigation>
|
||||
</NativeRouter>
|
||||
);
|
||||
@@ -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"]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"interface-over-type-literal": false,
|
||||
"prefer-method-signature": false,
|
||||
"prefer-declare-function": false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user