Move TabControllerScreen to ts

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, TabBarItemProps} 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: TabBarItemProps[];
+}
+
+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.setState({items: this.generateTabItems()});
   }
 
+  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected): TabBarItemProps[] => {
+    let items: TabBarItemProps[] = _.chain(TABS)
+      .take(fewItems ? 3 : TABS.length)
+      .map<TabBarItemProps>(tab => ({label: tab, key: tab}))
+      .value();
+
+    const addItem: TabBarItemProps = {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/tabController/TabBarItem.d.ts

@@ -14,11 +14,11 @@ export interface TabBarItemProps {
     /**
      * custom label style
      */
-    labelStyle: TextStyle;
+    labelStyle?: TextStyle;
     /**
      * custom selected label style
      */
-    selectedLabelStyle: TextStyle;
+    selectedLabelStyle?: TextStyle;
     /**
      * the default label color
      */
@@ -102,7 +102,7 @@ export default class TabBarItem extends PureComponent<Props> {
     onLayout: ({ nativeEvent: { layout: { width } } }: LayoutChangeEvent) => void;
     onPress: () => void;
     getItemStyle(): TouchableOpacityProps['style'];
-    getLabelStyle(): (TextStyle | _.Dictionary<Reanimated.Node<number> | Reanimated.Node<"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"> | Reanimated.Node<string | number | boolean> | undefined>)[];
+    getLabelStyle(): (TextStyle | _.Dictionary<Reanimated.Node<number> | Reanimated.Node<"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"> | Reanimated.Node<string | number | boolean> | undefined> | undefined)[];
     getIconStyle(): {
         tintColor: Reanimated.Node<string>;
     };

generatedTypes/components/tabController/index.d.ts

@@ -3,7 +3,8 @@ import TabBar from './TabBar';
 import TabBarItem, { TabBarItemProps } from './TabBarItem';
 import TabPage from './TabPage';
 import PageCarousel from './PageCarousel';
-interface TabControllerProps {
+export { TabBarItemProps };
+export interface TabControllerProps {
     /**
      * The list of tab bar items
      */

generatedTypes/index.d.ts

@@ -42,6 +42,7 @@ export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes, RadioButtonProps} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes, RadioGroupProps} from './components/radioButton/RadioGroup';
 export {default as Switch, SwitchProps} from './components/switch';
+export {default as TabController, TabControllerProps, TabBarItemProps} from './components/tabController';
 export {default as TabBar, TabBarProps} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
@@ -115,6 +116,5 @@ export const SafeAreaInsetsManager;
 export const SafeAreaSpacerView;
 export const ScrollBar;
 export const SelectableComponent;
-export const TabController;
 export const TextField;
 export const Wizard;

src/components/tabController/TabBarItem.tsx

@@ -30,11 +30,11 @@ export interface TabBarItemProps {
   /**
    * custom label style
    */
-  labelStyle: TextStyle;
+  labelStyle?: TextStyle;
   /**
    * custom selected label style
    */
-  selectedLabelStyle: TextStyle;
+  selectedLabelStyle?: TextStyle;
   /**
    * the default label color
    */
@@ -201,31 +201,31 @@ export default class TabBarItem extends PureComponent<Props> {
 
     let fontWeight, letterSpacing, fontFamily;
 
-    if (labelStyle.fontWeight || selectedLabelStyle.fontWeight) {
+    if (labelStyle?.fontWeight || selectedLabelStyle?.fontWeight) {
       fontWeight = cond(
         // @ts-ignore TODO: typescript - add or delete and?
         and(eq(targetPage, index) /* , defined(itemWidth) */),
-        selectedLabelStyle.fontWeight || 'normal',
-        labelStyle.fontWeight || 'normal'
+        selectedLabelStyle?.fontWeight || 'normal',
+        labelStyle?.fontWeight || 'normal'
       );
     }
 
-    if (labelStyle.letterSpacing || selectedLabelStyle.letterSpacing) {
+    if (labelStyle?.letterSpacing || selectedLabelStyle?.letterSpacing) {
       letterSpacing = cond(
         // @ts-ignore TODO: typescript - add or delete and?
         and(eq(targetPage, index) /* , defined(itemWidth) */),
-        selectedLabelStyle.letterSpacing || 0,
-        labelStyle.letterSpacing || 0
+        selectedLabelStyle?.letterSpacing || 0,
+        labelStyle?.letterSpacing || 0
       );
     }
 
-    if (labelStyle.fontFamily || selectedLabelStyle.fontFamily) {
+    if (labelStyle?.fontFamily || selectedLabelStyle?.fontFamily) {
       fontFamily = cond(
         // @ts-ignore TODO: typescript - add or delete and?
         and(eq(targetPage, index) /* , defined(itemWidth) */),
         // @ts-ignore
         selectedLabelStyle.fontFamily,
-        labelStyle.fontFamily
+        labelStyle?.fontFamily
       );
     }
 

src/components/tabController/index.tsx

@@ -11,6 +11,7 @@ import TabBar from './TabBar';
 import TabBarItem, {TabBarItemProps} from './TabBarItem';
 import TabPage from './TabPage';
 import PageCarousel from './PageCarousel';
+export {TabBarItemProps};
 
 const {
   and,
@@ -35,7 +36,7 @@ const {
   multiply
 } = Reanimated;
 
-interface TabControllerProps {
+export interface TabControllerProps {
   /**
    * The list of tab bar items
    */

src/index.ts

@@ -36,6 +36,7 @@ export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes, RadioButtonProps} from './components/radioButton/RadioButton';
 export {default as RadioGroup, RadioGroupPropTypes, RadioGroupProps} from './components/radioButton/RadioGroup';
 export {default as Switch, SwitchProps} from './components/switch';
+export {default as TabController, TabControllerProps, TabBarItemProps} from './components/tabController';
 export {default as TabBar, TabBarProps} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';