refactor(tab-set): component structure separation

index.js

@@ -7,9 +7,8 @@ export { RkModalImg } from './src/components/image/rkModalImg';
 export { RkGallery } from './src/components/gallery/rkGallery';
 export { RkGalleryImage } from './src/components/gallery/rkGalleryImage';
 export { RkCalendar } from './src/components/calendar/rkCalendar.component';
-export { RkTabView } from './src/components/tab/rkTabView';
-export { RkTabSet } from './src/components/tabset/rkTabSet.component';
-export { RkTabSetItem } from './src/components/tabset/rkTabSetItem.component';
+export { RkTabView } from './src/components/tabset/rkTabView.component';
+export { RkTab } from './src/components/tabset/rkTab.component';
 export { RkCard } from './src/components/card/rkCard';
 export { RkAvoidKeyboard } from './src/components/avoidKeyboard/rkAvoidKeyboard';
 export { RkComponent } from './src/components/rkComponent';

src/components/tabset/rkTabSetItem.component.js → src/components/tabset/rkTab.component.js

@@ -6,18 +6,20 @@ import {
 } from 'react-native';
 import { RkStyleSheet } from '../../styles/styleSheet';
 
-export class RkTabSetItem extends React.PureComponent {
+export class RkTab extends React.PureComponent {
   static propTypes = {
     title: PropTypes.string,
     isSelected: PropTypes.bool,
+    isLazyLoad: PropTypes.bool,
   };
   static defaultProps = {
     title: '',
     isSelected: false,
+    isLazyLoad: true,
   };
 
   state = {
-    isSelected: RkTabSetItem.defaultProps.isSelected,
+    isSelected: RkTab.defaultProps.isSelected,
   };
 
   static getDerivedStateFromProps(props) {

src/components/tabset/rkTabBar.component.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { RkTab } from './rkTab.component';
+
+export class RkTabBar extends React.Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.instanceOf(RkTab)).isRequired,
+    selectedIndex: PropTypes.number,
+    onSelect: PropTypes.func,
+  };
+  static defaultProps = {
+    selectedIndex: 0,
+    onSelect: (() => null),
+  };
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.selectedIndex !== nextProps.selectedIndex;
+  }
+
+  onChildPress = (index) => {
+    this.props.onSelect(index);
+  };
+
+  renderChild = (item, index) => (
+    <TouchableOpacity key={index.toString()} onPress={() => this.onChildPress(index)}>
+      { React.cloneElement(item, { isSelected: this.props.selectedIndex === index }) }
+    </TouchableOpacity>
+  );
+
+  renderChildComponents = () => this.props.children.map(this.renderChild);
+
+  render = () => (
+    <View style={styles.container}>{this.renderChildComponents()}</View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});

src/components/tabset/rkTabSetIndicator.component.js → src/components/tabset/rkTabBarIndicator.component.js

@@ -8,7 +8,7 @@ import { RkStyleSheet } from '../../styles/styleSheet';
 
 const defaultAnimationDuration = 200;
 
-export class RkTabSetIndicator extends React.PureComponent {
+export class RkTabBarIndicator extends React.PureComponent {
   static propTypes = {
     itemCount: PropTypes.number.isRequired,
     contentWidth: PropTypes.number.isRequired,

src/components/tabset/rkTabPager.component.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  View,
+  FlatList,
+} from 'react-native';
+
+export class RkTabPager extends React.Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.node).isRequired,
+    selectedIndex: PropTypes.number,
+    onSelect: PropTypes.func,
+    shouldUseLazyLoad: PropTypes.func,
+  };
+  static defaultProps = {
+    selectedIndex: 0,
+    onSelect: (() => null),
+    shouldUseLazyLoad: (() => true),
+  };
+
+  state = {
+    items: [],
+    componentWidth: -1,
+  };
+
+  containerRef = undefined;
+  lazyLoadItemMap = new Map();
+
+  static getDerivedStateFromProps(props) {
+    return {
+      items: props.children,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    props.children.forEach((item, index) => {
+      const isDerivedSelection = props.selectedIndex === index;
+      const isShouldUseLazyLoad = isDerivedSelection ? false : props.shouldUseLazyLoad(index);
+      this.setShouldUseLazyLoad(index, isShouldUseLazyLoad);
+    });
+  }
+
+  onLayout = (event) => {
+    this.setState({
+      componentWidth: event.nativeEvent.layout.width,
+    });
+  };
+
+  onContainerScroll = (event) => {
+    const selectedIndex = Math.round(event.nativeEvent.contentOffset.x / this.state.componentWidth);
+    const isIndexInBounds = selectedIndex >= 0 && selectedIndex <= this.props.children.length;
+
+    // TODO: scroll indicator on container gesture scroll
+    //
+    // const contentIndicatorOffset = event.nativeEvent.contentOffset.x / this.props.children.length;
+    // this.contentIndicatorRef.scrollToOffset({ offset: contentIndicatorOffset });
+
+    if (isIndexInBounds && selectedIndex !== this.props.selectedIndex) {
+      this.onItemChange(selectedIndex);
+    }
+  };
+
+  onItemChange = (index) => {
+    this.props.onSelect(index);
+  };
+
+  /**
+   * @param params - object: { index: number, animated: boolean }
+   */
+  scrollToIndex = (params) => {
+    this.containerRef.scrollToIndex(params);
+  };
+
+  /**
+   * @param params - object: { offset: number, animated: boolean }
+   */
+  scrollToOffset = (params) => {
+    this.containerRef.scrollToOffset(params);
+  };
+
+  setContainerRef = (ref) => {
+    this.containerRef = ref;
+  };
+
+  getItemKey = (item, index) => index.toString();
+
+  getItemLayout = (item, index) => ({
+    length: this.state.componentWidth,
+    offset: this.state.componentWidth * index,
+    index,
+  });
+
+  isShouldUseLazyLoad(index) {
+    return this.lazyLoadItemMap.get(index);
+  }
+
+  setShouldUseLazyLoad(index, value) {
+    this.lazyLoadItemMap.set(index, value);
+  }
+
+  renderItem = ({ item, index }) => {
+    const isItemSelected = index === this.props.selectedIndex;
+    const isShouldUseLazyLoad = this.isShouldUseLazyLoad(index);
+    const isShouldLoadContentView = isItemSelected || !isShouldUseLazyLoad;
+    const contentView = isShouldLoadContentView ? item : null;
+
+    this.setShouldUseLazyLoad(index, !isShouldLoadContentView);
+
+    return (
+      <View style={{ width: this.state.componentWidth }}>{contentView}</View>
+    );
+  };
+
+  renderPlaceholder = () => (
+    <View onLayout={this.onLayout} />
+  );
+
+  renderView = () => (
+    <FlatList
+      ref={this.setContainerRef}
+      horizontal={true}
+      pagingEnabled={true}
+      removeClippedSubviews={true}
+      initialScrollIndex={this.props.selectedIndex}
+      data={this.state.items}
+      onScroll={this.onContainerScroll}
+      renderItem={this.renderItem}
+      getItemLayout={this.getItemLayout}
+      keyExtractor={this.getItemKey}
+    />
+  );
+
+  render() {
+    return this.state.componentWidth < 0 ? this.renderPlaceholder() : this.renderView();
+  }
+}