refactor(tab-set): merge tabSet types

src/components/tabset/rkTab.component.js

@@ -4,10 +4,8 @@ import {
   View,
   Text,
   Image,
-  ViewPropTypes,
 } from 'react-native';
 import { RkBadge } from '../badge/rkBadge.component';
-import { RkComponent } from '../rkComponent';
 
 /**
  * @extends React.Component
@@ -22,9 +20,8 @@ import { RkComponent } from '../rkComponent';
  * @property {boolean} isLazyLoad - Defines if tab should use content lazy loading.
  * Default is `true`.
  */
-export class RkTab extends RkComponent {
+export class RkTab extends React.Component {
   static propTypes = {
-    rkType: RkComponent.propTypes.rkType,
     title: PropTypes.string,
     icon: PropTypes.node,
     badgeTitle: PropTypes.string,
@@ -34,23 +31,45 @@ export class RkTab extends RkComponent {
     // used in RkTabView
     // eslint-disable-next-line react/no-unused-prop-types,
     isLazyLoad: PropTypes.bool,
-    ...ViewPropTypes,
+
+    style: PropTypes.shape({
+      container: PropTypes.shape({
+        base: View.propTypes.style,
+        selected: View.propTypes.style,
+      }),
+      title: PropTypes.shape({
+        base: Text.propTypes.style,
+        selected: Text.propTypes.style,
+      }),
+      icon: PropTypes.shape({
+        base: Image.propTypes.style,
+        selected: Image.propTypes.style,
+      }),
+    }),
   };
   static defaultProps = {
-    rkType: RkComponent.defaultProps.rkType,
     title: '',
     icon: undefined,
     badgeTitle: '',
     badgePosition: RkBadge.defaultProps.position,
     badgeStatus: RkBadge.defaultProps.rkType,
     isSelected: false,
     isLazyLoad: true,
-  };
-  componentName = 'RkTab';
-  typeMapping = {
-    container: {},
-    title: {},
-    icon: {},
+
+    style: {
+      container: {
+        base: {},
+        selected: {},
+      },
+      title: {
+        base: {},
+        selected: {},
+      },
+      icon: {
+        base: {},
+        selected: {},
+      },
+    },
   };
 
   state = {
@@ -67,32 +86,29 @@ export class RkTab extends RkComponent {
     return this.props.isSelected !== nextProps.isSelected;
   }
 
-  defineStyles(additionalTypes) {
-    const { container, title, icon } = super.defineStyles(additionalTypes);
-    return {
-      container: {
-        base: this.extractNonStyleValue(container, 'base'),
-        selected: this.state.isSelected ? this.extractNonStyleValue(container, 'selected') : null,
-      },
-      title: {
-        base: this.extractNonStyleValue(title, 'base'),
-        selected: this.state.isSelected ? this.extractNonStyleValue(title, 'selected') : null,
-      },
-      icon: {
-        base: this.extractNonStyleValue(icon, 'base'),
-        selected: this.state.isSelected ? this.extractNonStyleValue(icon, 'selected') : null,
-      },
-      badge: {
-        base: { opacity: this.props.badgeTitle.length > 0 ? 1 : 0 },
-        selected: {},
-      },
-    };
-  }
+  getContentStyle = (state, style) => ({
+    container: {
+      base: style.container.base,
+      selected: state.isSelected ? style.container.selected : null,
+    },
+    title: {
+      base: style.title.base,
+      selected: state.isSelected ? style.title.selected : null,
+    },
+    icon: {
+      base: style.icon.base,
+      selected: this.state.isSelected ? style.icon.selected : null,
+    },
+    badge: {
+      base: { opacity: this.props.badgeTitle.length > 0 ? 1 : 0 },
+      selected: {},
+    },
+  });
 
   render() {
-    const styles = this.defineStyles(this.props.rkType);
+    const styles = this.getContentStyle(this.state, this.props.style);
     return (
-      <View style={[styles.container.base, styles.container.selected, this.props.style]}>
+      <View style={[styles.container.base, styles.container.selected]}>
         <RkBadge
           rkType={this.props.badgeStatus}
           style={[styles.badge.base, styles.badge.selected]}

src/components/tabset/rkTabBar.component.js

@@ -4,9 +4,8 @@ import {
   View,
   ScrollView,
   TouchableOpacity,
-  ViewPropTypes,
 } from 'react-native';
-import { RkComponent } from '../rkComponent';
+import { RkTab } from './rkTab.component';
 
 /**
  * `RkTabBar` is a component that manages `RkTab`s.
@@ -21,25 +20,34 @@ import { RkComponent } from '../rkComponent';
  * @property {number} componentWidth - width of `RkTabBar`.
  * Needed for `RkTab` equal distribution.
  */
-export class RkTabBar extends RkComponent {
+export class RkTabBar extends React.Component {
   static propTypes = {
     children: PropTypes.arrayOf(PropTypes.element).isRequired,
     selectedIndex: PropTypes.number,
     isScrollable: PropTypes.bool,
     onSelect: PropTypes.func,
-
     componentWidth: PropTypes.number.isRequired,
 
-    ...ViewPropTypes,
+    style: PropTypes.shape({
+      container: PropTypes.shape({
+        base: ScrollView.propTypes.contentContainerStyle,
+        scrollable: ScrollView.propTypes.contentContainerStyle,
+      }),
+      tab: RkTab.propTypes.style,
+    }),
   };
   static defaultProps = {
     selectedIndex: 0,
     isScrollable: false,
     onSelect: (() => null),
-  };
-  componentName = 'RkTabBar';
-  typeMapping = {
-    container: {},
+
+    style: {
+      container: {
+        base: {},
+        scrollable: {},
+      },
+      tab: RkTab.defaultProps.style,
+    },
   };
 
   containerRef = undefined;
@@ -86,36 +94,27 @@ export class RkTabBar extends RkComponent {
     this.containerRef = ref;
   };
 
-  defineStyles(additionalTypes) {
-    const derivedStyles = super.defineStyles(additionalTypes);
-    const containerStyleKey = this.props.isScrollable ? 'scrollable' : 'base';
-    return {
-      container: this.extractNonStyleValue(derivedStyles.container, containerStyleKey),
-    };
-  }
-
   renderItem = (item, index) => (
     <TouchableOpacity
+      style={{ width: this.props.componentWidth / this.props.children.length }}
       key={index.toString()}
       activeOpacity={0.5}
       onPress={() => this.onItemPress(index)}>
       {React.cloneElement(item, {
-        style: {
-          width: this.props.componentWidth / this.props.children.length,
-        },
         isSelected: this.props.selectedIndex === index,
+        style: this.props.style.tab,
       })}
     </TouchableOpacity>
   );
 
   renderChildComponents = () => this.props.children.map(this.renderItem);
 
   render() {
-    const styles = this.defineStyles(this.props.rkType);
+    const { container } = this.props.style;
     return (
       <View>
         <ScrollView
-          contentContainerStyle={styles.container}
+          contentContainerStyle={this.props.isScrollable ? container.base : container.scrollable}
           ref={this.setContainerRef}
           horizontal={true}
           bounces={false}

src/components/tabset/rkTabBarIndicator.component.js

@@ -4,11 +4,9 @@ import {
   View,
   Animated,
 } from 'react-native';
-import { RkComponent } from '../rkComponent';
 
 const defaultAnimationDuration = 200;
 
-
 /**
  * `RkTabBarIndicator` is a component that indicates `RkTabBar` current selection.
  *
@@ -18,20 +16,21 @@ const defaultAnimationDuration = 200;
  * Should be one of: `` or `rounded`.
  * @property {number} componentWidth - width of `RkTabBar`.
  */
-export class RkTabBarIndicator extends RkComponent {
+export class RkTabBarIndicator extends React.Component {
   static propTypes = {
-    rkType: PropTypes.oneOf(['', 'rounded']),
     itemCount: PropTypes.number.isRequired,
-
     componentWidth: PropTypes.number.isRequired,
+
+    style: PropTypes.shape({
+      container: View.propTypes.style,
+      content: View.propTypes.style,
+    }),
   };
   static defaultProps = {
-    rkType: RkComponent.defaultProps.rkType,
-  };
-  componentName = 'RkTabBarIndicator';
-  typeMapping = {
-    container: {},
-    content: {},
+    style: {
+      container: {},
+      content: {},
+    },
   };
 
   contentOffset = new Animated.Value(0);
@@ -88,14 +87,13 @@ export class RkTabBarIndicator extends RkComponent {
   };
 
   render() {
-    const styles = super.defineStyles(this.props.rkType);
     const transform = {
       transform: [{ translateX: this.contentOffset }],
     };
     return (
-      <View style={styles.container}>
+      <View style={this.props.style.container}>
         <Animated.View style={[
-          styles.content,
+          this.props.style.content,
           { width: this.props.componentWidth / this.props.itemCount },
           transform,
         ]}

src/components/tabset/rkTabPager.component.js

@@ -25,11 +25,19 @@ export class RkTabPager extends React.Component {
     shouldUseLazyLoad: PropTypes.func,
 
     componentWidth: PropTypes.number.isRequired,
+
+    style: PropTypes.shape({
+      container: View.propTypes.style,
+    }),
   };
   static defaultProps = {
     selectedIndex: 0,
     onSelect: (() => null),
     shouldUseLazyLoad: (() => true),
+
+    style: {
+      container: {},
+    },
   };
 
   state = {
@@ -125,6 +133,7 @@ export class RkTabPager extends React.Component {
   render() {
     return (
       <FlatList
+        style={this.props.style.container}
         ref={this.setContainerRef}
         horizontal={true}
         pagingEnabled={true}