Remove old implementations of TabController (#1555)

Author: ethanshar

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -146,13 +146,14 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   render() {
-    const {key, selectedIndex, asCarousel, centerSelected, fewItems, items} = this.state;
+    const {key, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
     return (
       <View flex bg-grey70>
         <TabController
           key={key}
           asCarousel={asCarousel}
-          selectedIndex={selectedIndex}
+          // selectedIndex={selectedIndex}
+          initialIndex={0}
           onChangeIndex={this.onChangeIndex}
           items={items}
         >

generatedTypes/index.d.ts

@@ -57,7 +57,6 @@ export {default as SegmentedControl, SegmentedControlProps, SegmentedControlItem
 export {default as Slider, SliderProps} from './src/components/slider';
 export {default as Switch, SwitchProps} from './src/components/switch';
 export {default as TabController, TabControllerProps, TabControllerItemProps} from './src/components/tabController';
-export {default as TabController2} from './src/components/tabController2';
 export {default as TabBar, TabBarProps} from './src/components/TabBar';
 export {default as ScrollBar, ScrollBarProps} from './src/components/ScrollBar';
 export {default as StackAggregator, StackAggregatorProps} from './src/components/stackAggregator';

generatedTypes/src/components/tabController/PageCarousel.d.ts

@@ -1,20 +1,10 @@
-import React, { PureComponent } from 'react';
-import _ from 'lodash';
-import Animated from 'react-native-reanimated';
+/// <reference types="react" />
 /**
  * @description: TabController's Page Carousel
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
  */
-declare class PageCarousel extends PureComponent {
-    static displayName: string;
-    static contextType: React.Context<{}>;
-    carousel: React.RefObject<Animated.ScrollView>;
-    onScroll: (...args: any[]) => void;
-    componentDidMount(): void;
-    onTabChange: ([index]: readonly number[]) => void;
-    scrollToPage: (pageIndex: number) => void;
-    renderCodeBlock: (() => JSX.Element) & _.MemoizedFunction;
-    render(): JSX.Element;
-}
+declare function PageCarousel({ ...props }: {
+    [x: string]: any;
+}): JSX.Element;
 export default PageCarousel;

generatedTypes/src/components/tabController/TabBar.d.ts

@@ -1,15 +1,11 @@
 import React from 'react';
-import { TextProps, StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 import { TabControllerItemProps } from './TabBarItem';
 export interface TabControllerBarProps {
     /**
      * The list of tab bar items
      */
     items?: TabControllerItemProps[];
-    /**
-     * Whether the tabBar should be spread (default: true)
-     */
-    spreadItems?: boolean;
     /**
      * Tab Bar height
      */
@@ -26,18 +22,14 @@ export interface TabControllerBarProps {
      * custom style for the selected indicator
      */
     indicatorStyle?: StyleProp<ViewStyle>;
-    /**
-     * the indicator insets (default: Spacings.s4, set to 0 to make it wide as the item)
-     */
-    indicatorInsets?: number;
     /**
      * custom label style
      */
-    labelStyle?: TextProps;
+    labelStyle?: TabControllerItemProps['labelStyle'];
     /**
      * custom selected label style
      */
-    selectedLabelStyle?: TextProps;
+    selectedLabelStyle?: TabControllerItemProps['selectedLabelStyle'];
     /**
      * the default label color
      */
@@ -76,13 +68,17 @@ export interface TabControllerBarProps {
      */
     centerSelected?: boolean;
     /**
-     * Additional styles for the container
+     * Whether the tabBar should be spread (default: true)
      */
-    containerStyle?: StyleProp<ViewStyle>;
+    spreadItems?: boolean;
+    /**
+     * The indicator insets (default: Spacings.s4, set to 0 to make it wide as the item)
+     */
+    indicatorInsets?: number;
     /**
-     * Additional styles for the ScrollView
+     * Additional styles for the container
      */
-    scrollViewStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     /**
      * Used as a testing identifier
      */

generatedTypes/src/components/tabController/TabBarContext.d.ts

@@ -1,3 +1,17 @@
 import React from 'react';
-declare const TabBarContext: React.Context<{}>;
+import Reanimated from 'react-native-reanimated';
+interface TabControllerContext {
+    initialIndex?: number;
+    selectedIndex?: number;
+    items?: any[];
+    asCarousel?: boolean;
+    containerWidth: number;
+    pageWidth: number;
+    /** static page index */
+    currentPage: Reanimated.SharedValue<number>;
+    /** transition page index (can be a fraction when transitioning between pages) */
+    targetPage: Reanimated.SharedValue<number>;
+    carouselOffset: Reanimated.SharedValue<number>;
+}
+declare const TabBarContext: React.Context<TabControllerContext>;
 export default TabBarContext;

generatedTypes/src/components/tabController/TabBarItem.d.ts

@@ -1,9 +1,7 @@
-import { PureComponent, ReactElement } from 'react';
-import { /* processColor, */ TextStyle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
-import _ from 'lodash';
+import { ReactElement } from 'react';
+import { TextStyle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import Reanimated from 'react-native-reanimated';
-import { State } from 'react-native-gesture-handler';
-import { BadgeProps } from '../../components/badge';
+import { BadgeProps } from '../badge';
 export interface TabControllerItemProps {
     /**
      * label of the tab
@@ -12,11 +10,11 @@ export interface TabControllerItemProps {
     /**
      * custom label style
      */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * custom selected label style
      */
-    selectedLabelStyle?: TextStyle;
+    selectedLabelStyle?: StyleProp<TextStyle>;
     /**
      * the default label color
      */
@@ -49,12 +47,6 @@ export interface TabControllerItemProps {
      * Pass to render a trailing element
      */
     trailingAccessory?: ReactElement;
-    /**
-     * maximun number of lines the label can break
-     */
-    /**
-     * whether the tab will have a divider on its right
-     */
     /**
      * A fixed width for the item
      */
@@ -88,15 +80,10 @@ export interface TabControllerItemProps {
      * Used as a testing identifier
      */
     testID?: string;
-    /**
-     * disables icon's tint color
-     */
-    disableIconTintColor?: boolean;
 }
 interface Props extends TabControllerItemProps {
     index: number;
     targetPage: any;
-    state: State;
     currentPage: Reanimated.Adaptable<number>;
     onLayout?: (event: LayoutChangeEvent, index: number) => void;
 }
@@ -105,22 +92,5 @@ interface Props extends TabControllerItemProps {
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  * @notes: Must be rendered as a direct child of TabController.TabBar.
  */
-export default class TabBarItem extends PureComponent<Props> {
-    static displayName: string;
-    static defaultProps: {
-        activeOpacity: number;
-        onPress: (...args: any[]) => void;
-    };
-    private itemWidth?;
-    private itemRef;
-    constructor(props: Props);
-    onLayout: (event: LayoutChangeEvent) => void;
-    onPress: () => void;
-    getItemStyle(): any[];
-    getLabelStyle(): (TextStyle | _.Dictionary<Reanimated.Node<number> | Reanimated.Node<string | number> | Reanimated.Node<string | number | boolean> | Reanimated.Node<"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"> | undefined> | undefined)[];
-    getIconStyle(): {
-        tintColor: Reanimated.Node<string>;
-    } | undefined;
-    render(): JSX.Element;
-}
+export default function TabBarItem({ index, label, labelColor, selectedLabelColor, labelStyle, selectedLabelStyle, icon, badge, leadingAccessory, trailingAccessory, uppercase, activeOpacity, activeBackgroundColor, testID, ignore, style, ...props }: Props): JSX.Element;
 export {};

generatedTypes/src/components/tabController/TabPage.d.ts

@@ -1,6 +1,4 @@
-import React, { PureComponent } from 'react';
-import Reanimated from 'react-native-reanimated';
-import _ from 'lodash';
+import { PropsWithChildren } from 'react';
 export interface TabControllerPageProps {
     /**
      * The index of the the TabPage
@@ -27,45 +25,4 @@ export interface TabControllerPageProps {
  * @description: TabController's TabPage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  */
-export default class TabPage extends PureComponent<TabControllerPageProps> {
-    static displayName: string;
-    static contextType: React.Context<{}>;
-    static defaultProps: {
-        lazy: boolean;
-        activeOpacity: number;
-        lazyLoadTime: number;
-        renderLoading: (...args: any[]) => void;
-    };
-    state: {
-        loaded: boolean;
-    };
-    _loaded: Reanimated.Value<number>;
-    _opacity: Reanimated.Value<0>;
-    _zIndex: Reanimated.Value<0>;
-    _pageStyle: ({
-        position: "absolute";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    } | {
-        width: number;
-        flex: number;
-        opacity: number;
-    } | {
-        opacity: Reanimated.Value<0>;
-        width?: undefined;
-        zIndex?: undefined;
-    } | {
-        width: any;
-        opacity?: undefined;
-        zIndex?: undefined;
-    } | {
-        zIndex: Reanimated.Value<0>;
-        opacity?: undefined;
-        width?: undefined;
-    } | undefined)[];
-    lazyLoad: () => void;
-    renderCodeBlock: (() => JSX.Element) & _.MemoizedFunction;
-    render(): JSX.Element;
-}
+export default function TabPage({ testID, index, lazy, renderLoading, ...props }: PropsWithChildren<TabControllerPageProps>): JSX.Element;

generatedTypes/src/components/tabController/index.d.ts

@@ -1,9 +1,5 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import TabBar from './TabBar';
-import TabBarItem, { TabControllerItemProps } from './TabBarItem';
-import TabPage from './TabPage';
-import PageCarousel from './PageCarousel';
+import React, { PropsWithChildren } from 'react';
+import { TabControllerItemProps } from './TabBarItem';
 export { TabControllerItemProps };
 export interface TabControllerProps {
     /**
@@ -13,11 +9,15 @@ export interface TabControllerProps {
     /**
      * Initial selected index
      */
-    selectedIndex: number;
+    initialIndex?: number;
+    /**
+     * DEPRECATED: use initialIndex instead
+     */
+    selectedIndex?: number;
     /**
      * callback for when index has change (will not be called on ignored items)
      */
-    onChangeIndex?: (index: number) => void;
+    onChangeIndex?: (index: number, prevIndex: number | null) => void;
     /**
      * When using TabController.PageCarousel this should be turned on
      */
@@ -27,49 +27,21 @@ export interface TabControllerProps {
      */
     carouselPageWidth?: number;
 }
-interface StateProps {
-    selectedIndex: number;
-    asCarousel?: boolean;
-    pageWidth: number;
-    items: TabControllerProps['items'];
-    itemStates: any[];
-    ignoredItems: any[];
-    targetPage: any;
-    currentPage: any;
-    carouselOffset: any;
-    containerWidth: any;
-    registerTabItems: (tabItemsCount: number, ignoredItems: StateProps['ignoredItems']) => void;
-    onChangeIndex?: (index: number) => void;
-}
 /**
  * @description: A performant solution for a tab controller with lazy load mechanism
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  * @notes: This component is based on react-native-gesture-handler
  * @important: On Android, if using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC
  * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/TabController/Default.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/TabController/PageCarousel.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/TabController/CenterSelected.gif?raw=true
  */
-declare class TabController extends Component<TabControllerProps, StateProps> {
-    static displayName: string;
-    static contextType: React.Context<{}>;
-    static TabBar: typeof TabBar;
-    static TabBarItem: typeof TabBarItem;
-    static TabPage: typeof TabPage;
-    static PageCarousel: typeof PageCarousel;
-    static defaultProps: {
-        selectedIndex: number;
-        activeOpacity: number;
-    };
-    constructor(props: TabControllerProps);
-    static getDerivedStateFromProps(nextProps: TabControllerProps, prevState: StateProps): {
-        pageWidth: number;
-    } | null;
-    componentDidUpdate(_prevProps: TabControllerProps, prevState: StateProps): void;
-    get pageWidth(): number;
-    registerTabItems: (tabItemsCount: number, ignoredItems: StateProps['ignoredItems']) => void;
-    onPageChange: ([index]: readonly number[]) => void;
-    renderCodeBlock: (() => JSX.Element) & _.MemoizedFunction;
-    render(): JSX.Element;
+declare function TabController({ initialIndex, selectedIndex, asCarousel, items, onChangeIndex, carouselPageWidth, children }: PropsWithChildren<TabControllerProps>): JSX.Element;
+declare namespace TabController {
+    var TabBar: React.ComponentClass<import("./TabBar").TabControllerBarProps & {
+        useCustomTheme?: boolean | undefined;
+    }, any>;
+    var TabBarItem: typeof import("./TabBarItem").default;
+    var TabPage: typeof import("./TabPage").default;
+    var PageCarousel: typeof import("./PageCarousel").default;
 }
 declare const _default: React.ComponentClass<TabControllerProps & {
     useCustomTheme?: boolean | undefined;