From 3ad090bdf675a2ddd7c4fcb5ccee9d4a3bb23b1d Mon Sep 17 00:00:00 2001 From: Kalle Ott Date: Sat, 14 Oct 2017 08:16:16 +0200 Subject: [PATCH] created typings for react-native-tab-view (#20575) --- types/react-native-tab-view/index.d.ts | 229 ++++++++++++++++++ .../react-native-tab-view-tests.tsx | 53 ++++ types/react-native-tab-view/tsconfig.json | 17 ++ types/react-native-tab-view/tslint.json | 8 + 4 files changed, 307 insertions(+) create mode 100644 types/react-native-tab-view/index.d.ts create mode 100644 types/react-native-tab-view/react-native-tab-view-tests.tsx create mode 100644 types/react-native-tab-view/tsconfig.json create mode 100644 types/react-native-tab-view/tslint.json diff --git a/types/react-native-tab-view/index.d.ts b/types/react-native-tab-view/index.d.ts new file mode 100644 index 0000000000..92fc92a21d --- /dev/null +++ b/types/react-native-tab-view/index.d.ts @@ -0,0 +1,229 @@ +// Type definitions for react-native-tab-view 0.0 +// Project: https://github.com/react-native-community/react-native-tab-view +// Definitions by: Kalle Ott +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.4 + +import { PureComponent, ReactNode } from 'react' +import { + Animated, + StyleProp, + ViewStyle, + NavigationTransitionSpec, +} from 'react-native' + +export type Key = { key: string } +export type RouteBase = Key & { testID?: string } + +export type Route = T + +export type NavigationState = { + index: number + routes: T[] +} + +export type Scene = { + route: T + focused: boolean + index: number +} + +export type Layout = { + height: number + width: number +} + +export type SceneRendererProps = { + layout: Layout & { + measured: boolean + } + navigationState: NavigationState + position: Animated.Value + jumpToIndex: (index: number) => void + getLastPosition: () => number + subscribe: ( + event: SubscriptionName, + callback: () => void + ) => { remove: () => void } +} + +export type SubscriptionName = 'reset' | 'position' + +export type TransitionProps = { + progress: number +} + +export type TransitionConfigurator = ( + currentTransitionProps: TransitionProps, + nextTransitionProps: TransitionProps +) => NavigationTransitionSpec + +export type PagerProps = { + configureTransition?: TransitionConfigurator + animationEnabled?: boolean + swipeEnabled?: boolean + swipeDistanceThreshold?: number + swipeVelocityThreshold?: number + children?: ReactNode +} + +export type TabViewAnimatedProps< + T extends RouteBase = RouteBase +> = PagerProps & { + navigationState: NavigationState + onIndexChange: (index: number) => void + onPositionChange?: (props: { value: number }) => void + initialLayout?: Layout + canJumpToTab?: (route: T) => boolean + renderPager?: (props: SceneRendererProps & PagerProps) => ReactNode + renderScene: (props: SceneRendererProps & Scene) => ReactNode + renderHeader?: (props: SceneRendererProps) => ReactNode + renderFooter?: (props: SceneRendererProps) => ReactNode + lazy?: boolean + style?: StyleProp +} + +export class TabViewAnimated extends PureComponent< + TabViewAnimatedProps, + any +> {} + +export type GestureEvent = { + nativeEvent: { + changedTouches: any[] + identifier: number + locationX: number + locationY: number + pageX: number + pageY: number + target: number + timestamp: number + touches: any[] + } +} + +export type GestureState = { + stateID: number + moveX: number + moveY: number + x0: number + y0: number + dx: number + dy: number + vx: number + vy: number + numberActiveTouches: number +} + +export type GestureHandler = (event: GestureEvent, state: GestureState) => void + +export type TabViewPagerPanProps< + T extends RouteBase = RouteBase +> = SceneRendererProps & { + configureTransition?: TransitionConfigurator + animationEnabled?: boolean + swipeEnabled?: boolean + swipeDistanceThreshold?: number + swipeVelocityThreshold?: number + onSwipeStart?: GestureHandler + onSwipeEnd?: GestureHandler + children?: ReactNode +} + +export type DefaultTransitionSpec = { + timing: typeof Animated.spring + tension: 300 + friction: 35 +} + +export class TabViewPagerPan extends PureComponent< + TabViewPagerPanProps, + void +> { + static defaultProps: { + configureTransition: () => DefaultTransitionSpec + initialLayout: { + height: 0 + width: 0 + } + swipeDistanceThreshold: 120 + swipeVelocityThreshold: 0.25 + } +} + +export type ScrollEvent = { + nativeEvent: { + contentOffset: { + x: number + y: number + } + } +} + +export type TabViewPagerScrollProps< + T extends RouteBase = RouteBase +> = SceneRendererProps & { + animationEnabled?: boolean + swipeEnabled?: boolean + children?: ReactNode +} + +export class TabViewPagerScroll extends PureComponent< + TabViewPagerScrollProps, + any +> {} + +export type PageScrollEvent = { + nativeEvent: { + position: number + offset: number + } +} + +export type PageScrollState = 'dragging' | 'settling' | 'idle' + +export type TabViewPagerAndroidProps< + T extends RouteBase = RouteBase +> = SceneRendererProps & { + animationEnabled?: boolean + swipeEnabled?: boolean + children?: ReactNode +} + +export class TabViewPagerAndroid extends PureComponent< + TabViewPagerAndroidProps, + void +> {} + +export type IndicatorProps< + T extends RouteBase = RouteBase +> = SceneRendererProps & { + width: Animated.Value +} + +export type TabBarProps = SceneRendererProps< + T +> & { + scrollEnabled?: boolean + pressColor?: string + pressOpacity?: number + getLabelText?: (scene: Scene) => string | undefined | null + renderLabel?: (scene: Scene) => ReactNode + renderIcon?: (scene: Scene) => ReactNode + renderBadge?: (scene: Scene) => ReactNode + renderIndicator?: (props: IndicatorProps) => ReactNode + onTabPress?: (scene: Scene) => void + tabStyle?: StyleProp + indicatorStyle?: StyleProp + labelStyle?: StyleProp + style?: StyleProp +} + +export class TabBar extends PureComponent< + TabBarProps, + any +> {} + +export function SceneMap(scenes: { + [key: string]: (props: any) => ReactNode +}): (props: { route: Route }) => ReactNode diff --git a/types/react-native-tab-view/react-native-tab-view-tests.tsx b/types/react-native-tab-view/react-native-tab-view-tests.tsx new file mode 100644 index 0000000000..f57952cbc4 --- /dev/null +++ b/types/react-native-tab-view/react-native-tab-view-tests.tsx @@ -0,0 +1,53 @@ +import { PureComponent } from 'react' +import { View, StyleSheet } from 'react-native' +import { + TabViewAnimated, + TabBar, + SceneMap, + TabBarProps, + RouteBase, +} from 'react-native-tab-view' + +const FirstRoute = () => ( + +) +const SecondRoute = () => ( + +) + +class TabViewExample extends PureComponent { + state: { index: number; routes: Array } = { + index: 0, + routes: [ + { key: 'first', title: 'First' }, + { key: 'second', title: 'Second' }, + ], + } + + _handleIndexChange = (index: number) => this.setState({ index }) + + _renderHeader = (props: TabBarProps) => + + _renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + }) + + render() { + return ( + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}) diff --git a/types/react-native-tab-view/tsconfig.json b/types/react-native-tab-view/tsconfig.json new file mode 100644 index 0000000000..7449ff01dd --- /dev/null +++ b/types/react-native-tab-view/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6"], + "jsx": "preserve", + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "strictFunctionTypes": true, + "forceConsistentCasingInFileNames": true + }, + "files": ["index.d.ts", "react-native-tab-view-tests.tsx"] +} diff --git a/types/react-native-tab-view/tslint.json b/types/react-native-tab-view/tslint.json new file mode 100644 index 0000000000..80ebdb1ea5 --- /dev/null +++ b/types/react-native-tab-view/tslint.json @@ -0,0 +1,8 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "semicolon": false, + "interface-over-type-literal": false, + "prefer-method-signature": false + } +}