From 32b3618c128ecadc4a696728378f73b6ebeafa46 Mon Sep 17 00:00:00 2001 From: hirakawa Date: Sat, 23 Feb 2019 13:45:27 +0900 Subject: [PATCH 1/4] Added for collapsable header --- index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index af94d866..a776e668 100644 --- a/index.js +++ b/index.js @@ -43,6 +43,7 @@ const ScrollableTabView = createReactClass({ scrollWithoutAnimation: PropTypes.bool, locked: PropTypes.bool, prerenderingSiblingsNumber: PropTypes.number, + collapsableBar: PropTypes.node, }, getDefaultProps() { @@ -159,6 +160,13 @@ const ScrollableTabView = createReactClass({ } }, + renderCollapsableBar() { + if (!this.props.collapsableBar) { + return null + } + return this.props.collapsableBar + }, + updateSceneKeys({ page, children = this.props.children, callback = () => {}, }) { let newKeys = this.newSceneKeys({ previousKeys: this.state.sceneKeys, currentPage: page, children, }); this.setState({currentPage: page, sceneKeys: newKeys, }, callback); @@ -386,11 +394,14 @@ const ScrollableTabView = createReactClass({ }; } - return + const ContainerView = this.props.collapsableBar ? ScrollView : View + + return + {this.renderCollapsableBar()} {this.props.tabBarPosition === 'top' && this.renderTabBar(tabBarProps)} {this.renderScrollableContent()} {(this.props.tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)} - ; + ; }, }); From ff19aa7d109085040eb63567abf251074aaeea45 Mon Sep 17 00:00:00 2001 From: hirakawa Date: Sat, 23 Feb 2019 13:50:04 +0900 Subject: [PATCH 2/4] Added index.d.ts --- index.d.ts | 156 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 00000000..5d6042ca --- /dev/null +++ b/index.d.ts @@ -0,0 +1,156 @@ +// Type definitions for react-native-scrollable-tab-view 0.8 +// Project: https://github.com/brentvatne/react-native-scrollable-tab-view +// Definitions by: CaiHuan +// Egor Shulga +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from 'react'; +import { Animated, ScrollViewProps, ViewStyle, TextStyle, StyleProp } from 'react-native'; + +export interface ScrollableTabViewProperties extends React.Props { + /** + * 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; + + /** + * 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'; + + /** + * 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; + + /** + * 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; + + /** + * the index of the initially selected tab, defaults to 0 === first tab + */ + initialPage?: number; + + /** + * set selected tab(can be buggy see + * https://github.com/skv-headless/react-native-scrollable-tab-view/issues/126 + */ + page?: number; + + /** + * style of the default tab bar's underline + */ + tabBarUnderlineStyle?: StyleProp; + + /** + * color of the default tab bar's background, defaults to white + */ + tabBarBackgroundColor?: string; + + /** + * color of the default tab bar's text when active, defaults to navy + */ + tabBarActiveTextColor?: string; + + /** + * color of the default tab bar's text when inactive, defaults to black + */ + tabBarInactiveTextColor?: string; + + /** + * additional styles to the tab bar's text + */ + tabBarTextStyle?: StyleProp; + + /** + * style (View.propTypes.style) + */ + style?: StyleProp; + + /** + * 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?: ScrollViewProps; + + /** + * 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; + + collapsableBar?: () => JSX.Element; +} + +export type TabBarProps = 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 { +} + +// 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 & { + tabLabel: React.ReactChild; +}; + +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> { +} + +export interface ScrollableTabBarProps extends DefaultTabBarProps { + scrollOffset?: number; + style?: ViewStyle; + tabsContainerStyle?: ViewStyle; +} + +export class ScrollableTabBar extends React.Component> { +} From efd572115a52b58c5d22cdd1600cd3441164502a Mon Sep 17 00:00:00 2001 From: hirakawa Date: Sat, 23 Feb 2019 13:58:13 +0900 Subject: [PATCH 3/4] Modified type declaration --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 5d6042ca..762b1586 100644 --- a/index.d.ts +++ b/index.d.ts @@ -101,7 +101,7 @@ export interface ScrollableTabViewProperties extends React.Props JSX.Element; + collapsableBar?: JSX.Element; } export type TabBarProps = T & { From c305c294427261125c95e369bdb20cd6444db494 Mon Sep 17 00:00:00 2001 From: hirakawa Date: Sat, 23 Feb 2019 16:18:53 +0900 Subject: [PATCH 4/4] Deleted --- index.d.ts | 156 ----------------------------------------------------- 1 file changed, 156 deletions(-) delete mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts deleted file mode 100644 index 762b1586..00000000 --- a/index.d.ts +++ /dev/null @@ -1,156 +0,0 @@ -// Type definitions for react-native-scrollable-tab-view 0.8 -// Project: https://github.com/brentvatne/react-native-scrollable-tab-view -// Definitions by: CaiHuan -// Egor Shulga -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 - -import * as React from 'react'; -import { Animated, ScrollViewProps, ViewStyle, TextStyle, StyleProp } from 'react-native'; - -export interface ScrollableTabViewProperties extends React.Props { - /** - * 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; - - /** - * 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'; - - /** - * 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; - - /** - * 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; - - /** - * the index of the initially selected tab, defaults to 0 === first tab - */ - initialPage?: number; - - /** - * set selected tab(can be buggy see - * https://github.com/skv-headless/react-native-scrollable-tab-view/issues/126 - */ - page?: number; - - /** - * style of the default tab bar's underline - */ - tabBarUnderlineStyle?: StyleProp; - - /** - * color of the default tab bar's background, defaults to white - */ - tabBarBackgroundColor?: string; - - /** - * color of the default tab bar's text when active, defaults to navy - */ - tabBarActiveTextColor?: string; - - /** - * color of the default tab bar's text when inactive, defaults to black - */ - tabBarInactiveTextColor?: string; - - /** - * additional styles to the tab bar's text - */ - tabBarTextStyle?: StyleProp; - - /** - * style (View.propTypes.style) - */ - style?: StyleProp; - - /** - * 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?: ScrollViewProps; - - /** - * 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; - - collapsableBar?: JSX.Element; -} - -export type TabBarProps = 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 { -} - -// 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 & { - tabLabel: React.ReactChild; -}; - -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> { -} - -export interface ScrollableTabBarProps extends DefaultTabBarProps { - scrollOffset?: number; - style?: ViewStyle; - tabsContainerStyle?: ViewStyle; -} - -export class ScrollableTabBar extends React.Component> { -}