From b799d29dff1f761436e006c109933b7e86e6faac Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Mon, 4 Jun 2018 05:02:16 -0400 Subject: [PATCH] (react-native-tab-view) Update types for 1.0 --- types/react-native-tab-view/index.d.ts | 344 +++++++++--------- .../react-native-tab-view-tests.tsx | 87 ++--- 2 files changed, 213 insertions(+), 218 deletions(-) diff --git a/types/react-native-tab-view/index.d.ts b/types/react-native-tab-view/index.d.ts index 2c6546a628..a5a62f8270 100644 --- a/types/react-native-tab-view/index.d.ts +++ b/types/react-native-tab-view/index.d.ts @@ -1,237 +1,231 @@ -// Type definitions for react-native-tab-view 0.0 +// Type definitions for react-native-tab-view 1.0 // Project: https://github.com/react-native-community/react-native-tab-view // Definitions by: Kalle Ott +// Kyle Roach // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 -import { PureComponent, ReactNode, ComponentType } from 'react' -import { - Animated, - StyleProp, - ViewStyle, - EasingFunction -} from 'react-native' +import { PureComponent, ReactNode, ComponentType } from 'react'; +import { Animated, StyleProp, ViewStyle, EasingFunction } from 'react-native'; -export type Key = { key: string } -export type RouteBase = Key & { testID?: string } +export type Key = { key: string }; +export type RouteBase = Key & { testID?: string }; -export type Route = T +export type Route = T; export type NavigationState = { - index: number - routes: T[] -} + index: number; + routes: T[]; +}; export type Scene = { - route: T - focused: boolean - index: number -} + route: T; + focused: boolean; + index: number; +}; export type Layout = { - height: number - width: number -} + 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 } -} + layout: Layout & { + measured: boolean; + }; + navigationState: NavigationState; + position: Animated.Value; + jumpTo: (key: string) => void; + getLastPosition: () => number; + subscribe: ( + event: SubscriptionName, + callback: () => void + ) => { remove: () => void }; +}; -export type SubscriptionName = 'reset' | 'position' +export type SubscriptionName = 'reset' | 'position'; export type TransitionProps = { - progress: number -} + progress: number; +}; export type NavigationTransitionSpec = { - duration?: number, - // An easing function from `Easing`. - easing?: EasingFunction, - // A timing function such as `Animated.timing`. - timing?: (value: Animated.Value, config: any) => any, -} + duration?: number; + // An easing function from `Easing`. + easing?: EasingFunction; + // A timing function such as `Animated.timing`. + timing?: (value: Animated.Value, config: any) => any; +}; export type TransitionConfigurator = ( - currentTransitionProps: TransitionProps, - nextTransitionProps: TransitionProps -) => NavigationTransitionSpec + currentTransitionProps: TransitionProps, + nextTransitionProps: TransitionProps +) => NavigationTransitionSpec; export type PagerProps = { - configureTransition?: TransitionConfigurator - animationEnabled?: boolean - swipeEnabled?: boolean - swipeDistanceThreshold?: number - swipeVelocityThreshold?: number - children?: ReactNode -} + 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 type TabViewProps = PagerProps & { + navigationState: NavigationState; + tabBarPosition?: 'bottom' | 'top'; + 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; + renderTabBar?: (props: SceneRendererProps) => ReactNode; + lazy?: boolean; + style?: StyleProp; +}; -export class TabViewAnimated extends PureComponent< - TabViewAnimatedProps, - any +export class TabView extends PureComponent< + TabViewProps, + any > {} export type GestureEvent = { - nativeEvent: { - changedTouches: any[] - identifier: number - locationX: number - locationY: number - pageX: number - pageY: number - target: number - timestamp: number - touches: any[] - } -} + 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 -} + 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 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 PagerPanProps = SceneRendererProps< + T +> & { + 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 -} + timing: typeof Animated.spring; + tension: 300; + friction: 35; +}; -export class TabViewPagerPan extends PureComponent< - TabViewPagerPanProps, - void +export class PagerPan extends PureComponent< + PagerPanProps, + void > { - static defaultProps: { - configureTransition: () => DefaultTransitionSpec - initialLayout: { - height: 0 - width: 0 - } - swipeDistanceThreshold: 120 - swipeVelocityThreshold: 0.25 - } + static defaultProps: { + configureTransition: () => DefaultTransitionSpec; + initialLayout: { + height: 0; + width: 0; + }; + swipeDistanceThreshold: 120; + swipeVelocityThreshold: 0.25; + }; } export type ScrollEvent = { - nativeEvent: { - contentOffset: { - x: number - y: number - } - } -} + nativeEvent: { + contentOffset: { + x: number; + y: number; + }; + }; +}; -export type TabViewPagerScrollProps< - T extends RouteBase = RouteBase +export type PagerScrollProps< + T extends RouteBase = RouteBase > = SceneRendererProps & { - animationEnabled?: boolean - swipeEnabled?: boolean - children?: ReactNode -} + animationEnabled?: boolean; + swipeEnabled?: boolean; + children?: ReactNode; +}; -export class TabViewPagerScroll extends PureComponent< - TabViewPagerScrollProps, - any +export class PagerScroll extends PureComponent< + PagerScrollProps, + any > {} export type PageScrollEvent = { - nativeEvent: { - position: number - offset: number - } -} + nativeEvent: { + position: number; + offset: number; + }; +}; -export type PageScrollState = 'dragging' | 'settling' | 'idle' +export type PageScrollState = 'dragging' | 'settling' | 'idle'; -export type TabViewPagerAndroidProps< - T extends RouteBase = RouteBase +export type PagerAndroidProps< + T extends RouteBase = RouteBase > = SceneRendererProps & { - animationEnabled?: boolean - swipeEnabled?: boolean - children?: ReactNode -} + animationEnabled?: boolean; + swipeEnabled?: boolean; + children?: ReactNode; +}; -export class TabViewPagerAndroid extends PureComponent< - TabViewPagerAndroidProps, - void +export class PagerAndroid extends PureComponent< + PagerAndroidProps, + void > {} export type IndicatorProps< - T extends RouteBase = RouteBase + T extends RouteBase = RouteBase > = SceneRendererProps & { - width: Animated.Value -} + width: Animated.Value; +}; export type TabBarProps = SceneRendererProps< - T + 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 -} + 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 + TabBarProps, + any > {} export function SceneMap(scenes: { - [key: string]: ComponentType -}): (props: { route: Route }) => ReactNode + [key: string]: ComponentType; +}): (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 index 97d8c09257..a3e53558ae 100644 --- a/types/react-native-tab-view/react-native-tab-view-tests.tsx +++ b/types/react-native-tab-view/react-native-tab-view-tests.tsx @@ -1,58 +1,59 @@ -import { PureComponent, Component } from 'react' -import { View, StyleSheet } from 'react-native' +import { PureComponent, Component } from 'react'; +import { View, StyleSheet } from 'react-native'; import { - TabViewAnimated, - TabBar, - SceneMap, - TabBarProps, - RouteBase, -} from 'react-native-tab-view' + TabView, + TabBar, + SceneMap, + TabBarProps, + RouteBase +} from 'react-native-tab-view'; const FirstRoute = () => ( - -) + +); class SecondRoute extends Component { - render() { - return ( - - ); - } + render() { + return ( + + ); + } } class TabViewExample extends PureComponent { - state: { index: number; routes: Array } = { - index: 0, - routes: [ - { key: 'first', title: 'First' }, - { key: 'second', title: 'Second' }, - ], - } + state: { index: number; routes: Array } = { + index: 0, + routes: [ + { key: 'first', title: 'First' }, + { key: 'second', title: 'Second' } + ] + }; - _handleIndexChange = (index: number) => this.setState({ index }) + _handleIndexChange = (index: number) => this.setState({ index }); - _renderHeader = (props: TabBarProps) => + _renderTabBar = (props: TabBarProps) => ; - _renderScene = SceneMap({ - first: FirstRoute, - second: SecondRoute, - }) + _renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute + }); - render() { - return ( - - ) - } + render() { + return ( + + ); + } } const styles = StyleSheet.create({ - container: { - flex: 1, - }, -}) + container: { + flex: 1 + } +});