Typescript/tab controller move to typescript (#1079)

* Move TabBarContext from js ro ts

* Move TabPage from js to tsx

* TabPage - move to typescript (fix typescript)

* Move PageCarousel from js to tsx

* PageCarousel - move to typescript (fix typescript)

* Fix TabPage exception

* Delete ReanimatedObject

* Move TabBarItem from js to tsx

* export TabPageProps

* TabPage - fix description

* Commit .d files

* TabBarItem - move to typescript (fix typescript)

* PageCarousel - move to typescript (fix typescript) - part 2

* Move TabBar from js to tsx

* Move ScrollBarGradient from js to tsx

* ScrollBarGradient add props and docs

* Commit .d file

* TabBar - move to typescript (fix typescript)

* Move TabBarController from js to tsx

* TabController - move to typescript (fix typescript)

* Move TabControllerScreen to ts

* Fix screen and some errors

* Fix PR comments

* Fix prop

* Fix/tab controller transition (#1089)

* Fix first tab item change doesn't repsond

* Memoize renderCodeBlock in TabController components

* Move TabBarController from index.tsx to TabBarController.tsx

* Create TabControllerProps namespace

* Create TabControllerProps namespace (fix screen)

* Revert "Create TabControllerProps namespace (fix screen)"

This reverts commit 0d3cff5.

* Revert "Create TabControllerProps namespace"

This reverts commit cd52f05.

* Revert "Move TabBarController from index.tsx to TabBarController.tsx"

This reverts commit 2b493ee.

* Change interfaces names for TabController related classes

Co-authored-by: Ethan Sharabi <[email protected]>

Author: M-i-k-e-l

demo/src/screens/componentScreens/TabControllerScreen/index.js renamed to demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -1,50 +1,54 @@
 import React, {Component} from 'react';
 import {ActivityIndicator} from 'react-native';
-import {
-  Assets,
-  TabController,
-  Colors,
-  View,
-  Text,
-  Button
-} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, TabController, Colors, View, Text, Button, TabControllerItemProps} from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import _ from 'lodash';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';
 import Tab3 from './tab3';
 
-const TABS = [
-  'Home',
-  'Posts',
-  'Reviews',
-  'Videos',
-  'Photos',
-  'Events',
-  'About',
-  'Community',
-  'Groups',
-  'Offers'
-];
-
-class TabControllerScreen extends Component {
-  constructor(props) {
-    super(props);
+const TABS = ['Home', 'Posts', 'Reviews', 'Videos', 'Photos', 'Events', 'About', 'Community', 'Groups', 'Offers'];
+
+interface State {
+  asCarousel: boolean;
+  centerSelected: boolean;
+  fewItems: boolean;
+  selectedIndex: number;
+  key: string | number;
+  items: TabControllerItemProps[];
+}
+
+class TabControllerScreen extends Component<{}, State> {
 
-    
+  constructor(props: {}) {
+    super(props);
     this.state = {
       asCarousel: true,
       centerSelected: false,
       fewItems: false,
       selectedIndex: 0,
-      key: Date.now()
+      key: Date.now(),
+      items: []
     };
-    
-    const items = this.generateTabItems();
-    this.state.items = items;
+
+    this.state.items = this.generateTabItems();
   }
 
+  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected): TabControllerItemProps[] => {
+    let items: TabControllerItemProps[] = _.chain(TABS)
+      .take(fewItems ? 3 : TABS.length)
+      .map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
+      .value();
+
+    const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
+
+    if (!centerSelected) {
+      items = [...items, addItem];
+    }
+    return items;
+  };
+
   componentDidMount() {
     // this.slow();
   }
@@ -61,19 +65,7 @@ class TabControllerScreen extends Component {
 
   onAddItem = () => {
     console.warn('Add Item');
-  }
-
-  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected)  => {
-    let items = _.chain(TABS)
-      .take(fewItems ? 3 : TABS.length)
-      .map((tab) => ({label: tab, key: tab}))
-      .value();
-    
-    if (!centerSelected) {
-      items = [...items, {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem}];
-    }
-    return items;
-  }
+  };
 
   toggleItemsCount = () => {
     const {fewItems} = this.state;
@@ -97,14 +89,14 @@ class TabControllerScreen extends Component {
     });
   };
 
-  onChangeIndex = (selectedIndex) => {
+  onChangeIndex = (selectedIndex: number) => {
     this.setState({selectedIndex});
   };
 
   renderLoadingPage() {
     return (
       <View flex center>
-        <ActivityIndicator size="large"/>
+        <ActivityIndicator size="large" />
         <Text text60L marginT-10>
           Loading
         </Text>
@@ -119,18 +111,13 @@ class TabControllerScreen extends Component {
     return (
       <Container {...containerProps}>
         <TabController.TabPage index={0}>
-          <Tab1/>
+          <Tab1 />
         </TabController.TabPage>
         <TabController.TabPage index={1}>
-          <Tab2/>
+          <Tab2 />
         </TabController.TabPage>
-        <TabController.TabPage
-          index={2}
-          lazy
-          lazyLoadTime={1500}
-          renderLoading={this.renderLoadingPage}
-        >
-          <Tab3/>
+        <TabController.TabPage index={2} lazy lazyLoadTime={1500} renderLoading={this.renderLoadingPage}>
+          <Tab3 />
         </TabController.TabPage>
 
         {_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
@@ -147,14 +134,7 @@ class TabControllerScreen extends Component {
   }
 
   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
@@ -166,7 +146,7 @@ class TabControllerScreen extends Component {
         >
           <TabController.TabBar
             // items={items}
-            // key={key}
+            key={key}
             // uppercase
             // indicatorStyle={{backgroundColor: 'green', height: 3}}
             // labelColor={'green'}
@@ -188,22 +168,22 @@ class TabControllerScreen extends Component {
             bg-green30={fewItems}
             label={fewItems ? 'Show Many Items' : 'Show Few Items'}
             marginB-12
-            size="small"
+            size={Button.sizes.small}
             onPress={this.toggleItemsCount}
           />
           <Button
             bg-grey20={!asCarousel}
             bg-green30={asCarousel}
             label={`Carousel : ${asCarousel ? 'ON' : 'OFF'}`}
             marginB-12
-            size="small"
+            size={Button.sizes.small}
             onPress={this.toggleCarouselMode}
           />
           <Button
             bg-grey20={!centerSelected}
             bg-green30={centerSelected}
             label={`centerSelected : ${centerSelected ? 'ON' : 'OFF'}`}
-            size="small"
+            size={Button.sizes.small}
             onPress={this.toggleCenterSelected}
           />
         </View>

demo/src/screens/componentScreens/TabControllerScreen/tab1.js renamed to demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Colors, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Image, Assets, Button} from 'react-native-ui-lib';
 
 class Tab1 extends Component {
   state = {};
@@ -19,7 +19,14 @@ class Tab1 extends Component {
           Home
         </Text>
         <View absR marginR-20>
-          <Button marginT-20 round style={{width: 50}} size="small" iconSource={Assets.icons.search} white/>
+          <Button
+            marginT-20
+            round
+            style={{width: 50}}
+            size={Button.sizes.small}
+            iconSource={Assets.icons.search}
+            white
+          />
         </View>
       </View>
     );

demo/src/screens/componentScreens/TabControllerScreen/tab2.js renamed to demo/src/screens/componentScreens/TabControllerScreen/tab2.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Colors, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Image} from 'react-native-ui-lib';
 
 class Tab2 extends Component {
   state = {

demo/src/screens/componentScreens/TabControllerScreen/tab3.js renamed to demo/src/screens/componentScreens/TabControllerScreen/tab3.tsx

@@ -1,11 +1,11 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
 import _ from 'lodash';
-import {Card, Avatar, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {Card, Avatar, View, Text} from 'react-native-ui-lib';
 
 class Tab2 extends Component {
   state = {
-    loading: true,
+    loading: true
   };
 
   componentDidMount() {
@@ -51,10 +51,12 @@ class Tab2 extends Component {
                   <Avatar
                     size={50}
                     source={{
-                      uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg',
+                      uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
                     }}
                   />
-                  <Text text40 marginL-20>{index}</Text>
+                  <Text text40 marginL-20>
+                    {index}
+                  </Text>
                 </Card>
               );
             })}

generatedTypes/components/scrollBar/ScrollBarGradient.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { ImageSourcePropType } from 'react-native';
+export interface ScrollBarGradientProps {
+    /**
+     * Is the gradient visible
+     */
+    visible?: boolean;
+    /**
+     * Should the gradient be on the left (reverse)
+     */
+    left?: boolean;
+    /**
+     * The gradient's width (default is 76)
+     */
+    gradientWidth?: number;
+    /**
+     * The gradient's height (default 100%)
+     */
+    gradientHeight?: number;
+    /**
+     * The gradient's margins (default is 0)
+     */
+    gradientMargins?: number;
+    /**
+     * The gradient's height (default 100%)
+     * @deprecated
+     */
+    height?: number;
+    /**
+     * The gradient's color (default is white)
+     */
+    gradientColor?: string;
+    /**
+     * Image source for the gradient (default is assets/gradientOverlay.png)
+     */
+    gradientImage?: ImageSourcePropType;
+}
+declare const ScrollBarGradient: {
+    ({ visible, left, gradientWidth, gradientHeight, gradientMargins, height, gradientColor, gradientImage }: ScrollBarGradientProps): JSX.Element;
+    displayName: string;
+};
+export default ScrollBarGradient;

generatedTypes/components/tabController/PageCarousel.d.ts

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+import Animated from 'react-native-reanimated';
+/**
+ * @description: TabController's Page Carousel
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.js
+ * @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;
+}
+export default PageCarousel;