mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
Merge pull request #23363 from egorshulga/RN-ScrollableTabView
[react-native-scrollable-tab-view] Update definitions and tests
This commit is contained in:
Daniel Rosenwasser
GitHub
commit
c19f45ef3f
219
types/react-native-scrollable-tab-view/index.d.ts
vendored
219
types/react-native-scrollable-tab-view/index.d.ts
vendored
@ -1,107 +1,154 @@
|
||||
// Type definitions for react-native-scrollable-tab-view 0.7
|
||||
// Project: https://github.com/brentvatne/react-native-scrollable-tab-view#readme
|
||||
// Type definitions for react-native-scrollable-tab-view 0.8
|
||||
// Project: https://github.com/skv-headless/react-native-scrollable-tab-view
|
||||
// Definitions by: CaiHuan <https://github.com/CaiHuan>
|
||||
// Egor Shulga <https://github.com/egorshulga>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.6
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Animated,
|
||||
ViewStyle,
|
||||
ScrollViewProperties
|
||||
} from 'react-native';
|
||||
|
||||
export interface onChangeTabProperties {
|
||||
// currentPage
|
||||
i: number;
|
||||
|
||||
// currentPage object
|
||||
ref: JSX.Element;
|
||||
|
||||
// previousPage
|
||||
from: number;
|
||||
}
|
||||
|
||||
export interface renderTabBarProperties {
|
||||
goToPage(pageNumber: number): void;
|
||||
|
||||
tabs: JSX.Element;
|
||||
|
||||
activeTab: number;
|
||||
|
||||
scrollValue: Animated.Value;
|
||||
|
||||
containerWidth: number;
|
||||
}
|
||||
import { Animated, ScrollViewProperties, ViewStyle, TextStyle } from 'react-native';
|
||||
|
||||
export interface ScrollableTabViewProperties extends React.Props<ScrollableTabView> {
|
||||
/**
|
||||
* tabBarPosition (String) Defaults to "top".
|
||||
* "bottom" to position the tab bar below content.
|
||||
* "overlayTop" or "overlayBottom" for a semitransparent tab bar that overlays content. Custom
|
||||
* tab bars must consume a style prop on their outer element to support this feature: style={this.props.style}.
|
||||
*/
|
||||
tabBarPosition?: 'top' | 'bottom' | 'overlayTop' | 'overlayBottom';
|
||||
/**
|
||||
* accept 1 argument props and should return a component
|
||||
* to use as the tab bar. The component has goToPage, tabs, activeTab and ref added to the props,
|
||||
* and should implement setAnimationValue to be able to animate itself along with the tab content.
|
||||
* You can manually pass the props to the TabBar component.
|
||||
*/
|
||||
renderTabBar?: ((props: TabBarProps) => JSX.Element) | false;
|
||||
|
||||
/**
|
||||
* (Integer) - the index of the initially selected tab, defaults to 0 === first tab
|
||||
*/
|
||||
initialPage?: number;
|
||||
/**
|
||||
* Defaults to "top".
|
||||
* "bottom" to position the tab bar below content.
|
||||
* "overlayTop" or "overlayBottom" for a semitransparent tab bar that overlays content. Custom
|
||||
* tab bars must consume a style prop on their outer element to support this feature: style={this.props.style}.
|
||||
*/
|
||||
tabBarPosition?: 'top' | 'bottom' | 'overlayTop' | 'overlayBottom';
|
||||
|
||||
/**
|
||||
* (Integer) - set selected tab(can be buggy see
|
||||
* https://github.com/skv-headless/react-native-scrollable-tab-view/issues/126
|
||||
*/
|
||||
page?: number;
|
||||
/**
|
||||
* function to call when tab changes, should accept 1 argument which is
|
||||
* an Object containing two keys: i: the index of the tab that is selected, ref: the ref of the
|
||||
* tab that is selected
|
||||
*/
|
||||
onChangeTab?(value: ChangeTabProperties): void;
|
||||
|
||||
/**
|
||||
* onChangeTab (Function) - function to call when tab changes, should accept 1 argument which is
|
||||
* an Object containing two keys: i: the index of the tab that is selected, ref: the ref of the
|
||||
* tab that is selected
|
||||
*/
|
||||
onChangeTab?(value: onChangeTabProperties): void;
|
||||
/**
|
||||
* function to call when the pages are sliding,
|
||||
* should accept 1 argument which is an Float number representing the page position in the slide frame.
|
||||
*/
|
||||
onScroll?(value: number): void;
|
||||
|
||||
/**
|
||||
* onScroll (Function) - function to call when the pages are sliding,
|
||||
* should accept 1 argument which is an Float number representing the page position in the slide frame.
|
||||
*/
|
||||
onScroll?(value: number): void;
|
||||
/**
|
||||
* disables horizontal dragging to scroll between tabs, default is false.
|
||||
*/
|
||||
locked?: boolean;
|
||||
|
||||
/**
|
||||
* renderTabBar (Function:ReactComponent) - accept 1 argument props and should return a component
|
||||
* to use as the tab bar. The component has goToPage, tabs, activeTab and ref added to the props,
|
||||
* and should implement setAnimationValue to be able to animate itself along with the tab content.
|
||||
* You can manually pass the props to the TabBar component.
|
||||
*/
|
||||
renderTabBar?(value: JSX.Element): JSX.Element;
|
||||
/**
|
||||
* the index of the initially selected tab, defaults to 0 === first tab
|
||||
*/
|
||||
initialPage?: number;
|
||||
|
||||
/**
|
||||
* style (View.propTypes.style)
|
||||
*/
|
||||
style?: ViewStyle;
|
||||
/**
|
||||
* set selected tab(can be buggy see
|
||||
* https://github.com/skv-headless/react-native-scrollable-tab-view/issues/126
|
||||
*/
|
||||
page?: number;
|
||||
|
||||
/**
|
||||
* contentProps (Object) - props that are applied to root ScrollView/ViewPagerAndroid.
|
||||
* Note that overriding defaults set by the library may break functionality; see the source for details.
|
||||
*/
|
||||
contentProps?: ScrollViewProperties;
|
||||
/**
|
||||
* style of the default tab bar's underline
|
||||
*/
|
||||
tabBarUnderlineStyle?: ViewStyle;
|
||||
|
||||
/**
|
||||
* scrollWithoutAnimation (Bool) - on tab press change tab without animation.
|
||||
*/
|
||||
scrollWithoutAnimation?: boolean;
|
||||
/**
|
||||
* color of the default tab bar's background, defaults to white
|
||||
*/
|
||||
tabBarBackgroundColor?: string;
|
||||
|
||||
/**
|
||||
* locked (Bool) - disables horizontal dragging to scroll between tabs, default is false.
|
||||
*/
|
||||
locked?: boolean;
|
||||
/**
|
||||
* color of the default tab bar's text when active, defaults to navy
|
||||
*/
|
||||
tabBarActiveTextColor?: string;
|
||||
|
||||
/**
|
||||
* prerenderingSiblingsNumber (Integer) - pre-render nearby # sibling, Infinity === render all
|
||||
* the siblings, default to 0 === render current page.
|
||||
*/
|
||||
prerenderingSiblingsNumber?: number;
|
||||
/**
|
||||
* color of the default tab bar's text when inactive, defaults to black
|
||||
*/
|
||||
tabBarInactiveTextColor?: string;
|
||||
|
||||
/**
|
||||
* additional styles to the tab bar's text
|
||||
*/
|
||||
tabBarTextStyle?: TextStyle;
|
||||
|
||||
/**
|
||||
* style (View.propTypes.style)
|
||||
*/
|
||||
style?: ViewStyle;
|
||||
|
||||
/**
|
||||
* props that are applied to root ScrollView/ViewPagerAndroid.
|
||||
* Note that overriding defaults set by the library may break functionality; see the source for details.
|
||||
*/
|
||||
contentProps?: ScrollViewProperties;
|
||||
|
||||
/**
|
||||
* on tab press change tab without animation.
|
||||
*/
|
||||
scrollWithoutAnimation?: boolean;
|
||||
|
||||
/**
|
||||
* pre-render nearby # sibling, Infinity === render all
|
||||
* the siblings, default to 0 === render current page.
|
||||
*/
|
||||
prerenderingSiblingsNumber?: number;
|
||||
}
|
||||
|
||||
export type TabBarProps<T = {}> = T & {
|
||||
goToPage?: (pageNumber: number) => void;
|
||||
tabs?: JSX.Element[];
|
||||
activeTab?: number;
|
||||
scrollValue?: Animated.Value;
|
||||
containerWidth?: number;
|
||||
};
|
||||
|
||||
export interface ChangeTabProperties {
|
||||
// currentPage
|
||||
i: number;
|
||||
// currentPage object
|
||||
ref: JSX.Element;
|
||||
// previousPage
|
||||
from: number;
|
||||
}
|
||||
|
||||
export default class ScrollableTabView extends React.Component<ScrollableTabViewProperties> {
|
||||
}
|
||||
|
||||
// Each top-level child component should have a tabLabel prop
|
||||
// that can be used by the tab bar component to render out the labels.
|
||||
export type TabProps<T = {}> = T & {
|
||||
tabLabel: React.ReactType;
|
||||
};
|
||||
|
||||
export interface DefaultTabBarProps {
|
||||
backgroundColor?: string;
|
||||
activeTextColor?: string;
|
||||
inactiveTextColor?: string;
|
||||
textStyle?: TextStyle;
|
||||
tabStyle?: ViewStyle;
|
||||
renderTab?: RenderTabProperties;
|
||||
underlineStyle?: ViewStyle;
|
||||
}
|
||||
|
||||
export type RenderTabProperties =
|
||||
(name: string, pageIndex: number, isTabActive: boolean, goToPage: (pageNumber: number) => void) => JSX.Element;
|
||||
|
||||
export class DefaultTabBar extends React.Component<TabBarProps<DefaultTabBarProps>> {
|
||||
}
|
||||
|
||||
export interface ScrollableTabBarProps extends DefaultTabBarProps {
|
||||
scrollOffset?: number;
|
||||
style?: ViewStyle;
|
||||
tabsContainerStyle?: ViewStyle;
|
||||
}
|
||||
|
||||
export class ScrollableTabBar extends React.Component<TabBarProps<ScrollableTabBarProps>> {
|
||||
}
|
||||
|
||||
@ -1,44 +1,37 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Text
|
||||
} from 'react-native';
|
||||
import ScrollableTabView from 'react-native-scrollable-tab-view';
|
||||
import { Text, TextStyle, View, ViewStyle } from 'react-native';
|
||||
import ScrollableTabView, { ScrollableTabBar, TabProps } from 'react-native-scrollable-tab-view';
|
||||
|
||||
interface MyTextProperties extends React.Props<MyText> {
|
||||
tabLabel: string;
|
||||
|
||||
text: string;
|
||||
}
|
||||
class MyText extends React.Component<MyTextProperties> {
|
||||
constructor(props: MyTextProperties) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return(
|
||||
<Text>this.props.text</Text>
|
||||
);
|
||||
}
|
||||
interface MyTextProps {
|
||||
style?: TextStyle;
|
||||
}
|
||||
|
||||
class ScrollableTabViewDemo extends React.Component {
|
||||
constructor(props: ScrollableTabViewDemo) {
|
||||
super(props);
|
||||
}
|
||||
const MyText: React.SFC<TabProps<MyTextProps>> = (props) => (
|
||||
<Text style={props.style}>{props.children}</Text>
|
||||
);
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<ScrollableTabView>
|
||||
<MyText tabLabel='t1' text='t1'></MyText>
|
||||
<MyText tabLabel='t2' text='t2'></MyText>
|
||||
<MyText tabLabel='t3' text='t3'></MyText>
|
||||
</ScrollableTabView>
|
||||
);
|
||||
}
|
||||
|
||||
componentWillMount?(): void {
|
||||
}
|
||||
|
||||
componentWillUnmount?(): void {
|
||||
}
|
||||
interface MyViewProps {
|
||||
style?: ViewStyle;
|
||||
}
|
||||
|
||||
class MyView extends React.Component<TabProps<MyViewProps>> {
|
||||
render() {
|
||||
return (
|
||||
<View style={this.props.style}>{this.props.children}</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const TabView1 = () => (
|
||||
<ScrollableTabView
|
||||
style={{ marginTop: 20, }}
|
||||
initialPage={0}
|
||||
renderTabBar={() => <ScrollableTabBar />}
|
||||
>
|
||||
<MyText tabLabel='Tab #1'>My</MyText>
|
||||
<MyText tabLabel='Tab #2 word word'>favorite</MyText>
|
||||
<MyText tabLabel='Tab #3 word word word'>project</MyText>
|
||||
<MyView tabLabel='Tab #4 word word word word'><Text>favorite</Text></MyView>
|
||||
<MyView tabLabel='Tab #5'><Text>project</Text></MyView>
|
||||
</ScrollableTabView>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user