Infra/tabbar typescript (#839)

* migrating to TS

* adding style and testID props and fixing style types

* update generateTypes

* fix for optional props

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

Author: Inbal-Tish

demo/src/screens/componentScreens/TabBarScreen.js renamed to demo/src/screens/componentScreens/TabBarScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, Typography, View, Button, TabBar} from 'react-native-ui-lib';
+import {Colors, View, Button, TabBar} from 'react-native-ui-lib';
 
 
 const labelsArray = [
@@ -16,30 +16,30 @@ const themeColors = [Colors.violet30, Colors.green30, Colors.red30, Colors.blue3
 
 
 export default class TabBarScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedIndex: 1,
-      selectedIndex1: 1,
-      labels: labelsArray[0],
-      currentTabs: [],
-      themeColor: themeColors[0]
-    };
-
-    this.counter = 0;
-    this.colorCounter = 0;
-  }
+  state = {
+    selectedIndex: 1,
+    selectedIndex1: 1,
+    selectedIndex2: 1,
+    labels: labelsArray[0],
+    currentTabs: [],
+    themeColor: themeColors[0]
+  };
+
+  counter = 0;
+  colorCounter = 0;
+  tabbar: any = undefined;
 
   /** Index change */
   changeIndex = () => {
     let index;
-    
-    do {
-      index = Math.floor(Math.random() * this.tabbar.props.children.length);
-    } while (index === this.state.selectedIndex);
 
-    this.setState({selectedIndex: index});
+    if (this.tabbar) {
+      do {
+        index = Math.floor(Math.random() * this.tabbar.props.children.length);
+      } while (index === this.state.selectedIndex);
+  
+      this.setState({selectedIndex: index});
+    }
   };
 
   /** Labels change */
@@ -74,8 +74,8 @@ export default class TabBarScreen extends Component {
   addTab = () => {
     const random = Math.floor(Math.random() * 100000);
     const newTabs = this.state.currentTabs;
-    
-    newTabs.push({id: random, displayLabel: `tab #${this.state.currentTabs.length}`});
+    const item = {id: random, displayLabel: `tab #${this.state.currentTabs.length}`};
+    newTabs.push(item);
     this.setState({currentTabs: newTabs});
   };
 
@@ -90,7 +90,7 @@ export default class TabBarScreen extends Component {
   };
 
   /** Actions */
-  getTabs(showAddTab) {
+  getTabs(showAddTab: boolean) {
     const tabs = _.map(this.state.currentTabs, tab => this.renderTabs(tab));
 
     if (showAddTab) {
@@ -104,7 +104,7 @@ export default class TabBarScreen extends Component {
   }
 
   /** Renders */
-  renderTabs(tab) {
+  renderTabs(tab: any) {
     return <TabBar.Item key={tab.id} label={tab.displayLabel} onPress={tab.onPress}/>;
   }
 
@@ -154,8 +154,8 @@ export default class TabBarScreen extends Component {
           </TabBar>
 
           <View center row>
-            <Button size={'small'} margin-20 label={`Add tabs`} onPress={this.addTab}/>
-            <Button size={'small'} margin-20 label={`Remove tabs`} onPress={this.removeTab}/>
+            <Button size={Button.sizes.small} margin-20 label={`Add tabs`} onPress={this.addTab}/>
+            <Button size={Button.sizes.small} margin-20 label={`Remove tabs`} onPress={this.removeTab}/>
           </View>
           <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
             {this.getTabs(false)}
@@ -170,7 +170,7 @@ export default class TabBarScreen extends Component {
           </TabBar>
 
           <Button
-            size={'small'}
+            size={Button.sizes.small}
             margin-20
             label={`Change index: ${this.state.selectedIndex}`}
             onPress={this.changeIndex}
@@ -188,13 +188,13 @@ export default class TabBarScreen extends Component {
           </TabBar>
 
           <View row>
-            <Button size={'small'} margin-20 label={`Change Labels`} onPress={this.changeLabels}/>
-            <Button size={'small'} margin-20 label={`Change Color`} onPress={this.changeColors}/>
+            <Button size={Button.sizes.small} margin-20 label={`Change Labels`} onPress={this.changeLabels}/>
+            <Button size={Button.sizes.small} margin-20 label={`Change Color`} onPress={this.changeColors}/>
           </View>
           <TabBar
             style={styles.tabbar}
             selectedIndex={this.state.selectedIndex1}
-            onChangeIndex={index => this.setState({selectedIndex1: index})}
+            onChangeIndex={(index: number) => this.setState({selectedIndex1: index})}
             indicatorStyle={{backgroundColor: this.state.themeColor}}
             enableShadow
           >
@@ -205,7 +205,7 @@ export default class TabBarScreen extends Component {
           <TabBar
             style={styles.tabbar}
             selectedIndex={this.state.selectedIndex2}
-            onChangeIndex={index => this.setState({selectedIndex2: index})}
+            onChangeIndex={(index: number) => this.setState({selectedIndex2: index})}
             enableShadow
           >
             <TabBar.Item label={this.state.labels[0]}/>

generatedTypes/components/tabBar/TabBarItem.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Animated, ViewStyle, TextStyle } from 'react-native';
+import { BaseComponentInjectedProps } from '../../commons/new';
+import { BadgeProps } from '../badge';
+export declare type TabBarItemProps = BaseComponentInjectedProps & {
+    /**
+     * icon of the tab
+     */
+    icon?: number;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    iconSelectedColor?: string;
+    /**
+     * label of the tab
+     */
+    label?: string;
+    /**
+     * custom label style
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Badge component props to display next the item label
+     */
+    badge?: BadgeProps;
+    /**
+     * maximum number of lines the label can break
+     */
+    maxLines?: number;
+    /**
+     * custom selected tab label style
+     */
+    selectedLabelStyle: TextStyle;
+    /**
+     * whether the tab is selected or not
+     */
+    selected?: boolean;
+    /**
+     * whether the tab will have a divider on its right
+     */
+    showDivider?: boolean;
+    /**
+     * A fixed width for the item
+     */
+    width?: number;
+    /**
+     * ignore of the tab
+     */
+    ignore?: boolean;
+    /**
+     * callback for when pressing a tab
+     */
+    onPress?: (props: any) => void;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    indicatorStyle?: ViewStyle;
+    style?: ViewStyle;
+    testID?: string;
+};
+export declare type State = {
+    indicatorOpacity?: Animated.Value;
+};
+declare const _default: React.ComponentClass<TabBarItemProps, any> & State;
+export default _default;

generatedTypes/components/tabBar/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Animated, ViewStyle } from 'react-native';
+import { BaseComponentInjectedProps } from '../../commons/new';
+import { ViewPropTypes } from '../view';
+import { TabBarItemProps } from './TabBarItem';
+export declare type TabBarProps = BaseComponentInjectedProps & ViewPropTypes & {
+    /**
+     * Show Tab Bar bottom shadow
+     */
+    enableShadow?: boolean;
+    /**
+     * The minimum number of tabs to render
+     */
+    minTabsForScroll?: number;
+    /**
+     * current selected tab index
+     */
+    selectedIndex?: number;
+    /**
+     * callback for when index has change (will not be called on ignored items)
+     */
+    onChangeIndex?: (props: any) => void;
+    /**
+     * callback for when tab selected
+     */
+    onTabSelected?: (props: any) => void;
+    /**
+     * custom style for the selected indicator
+     */
+    indicatorStyle?: ViewStyle;
+    /**
+     * Tab Bar height
+     */
+    height?: number;
+    children: React.ReactNode;
+    style?: ViewStyle;
+    testID?: string;
+};
+export declare type State = {
+    gradientOpacity: Animated.Value;
+    scrollEnabled?: boolean;
+    currentIndex?: number;
+};
+declare const _default: React.ComponentClass<TabBarProps, any> & {
+    Item: React.ComponentClass<TabBarItemProps, any> & import("./TabBarItem").State;
+};
+export default _default;

generatedTypes/index.d.ts

@@ -15,6 +15,7 @@ export {default as Image, ImageProps} from './components/image';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
+export {default as TabBar} from './components/TabBar';
 
 /* All components with manual typings */
 export {
@@ -47,7 +48,6 @@ export {
   GradientSlider,
   ColorSliderGroup,
   Stepper,
-  TabBar,
   TagsInput,
   SharedTransition,
   StackAggregator,