cascnauipackages/lib/src/segmentTabControl/index.js

Repo for Common Components for CASCNA

import React, { Component } from 'react';
import { View, ViewPropTypes } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';

import SegmentTab from './SegmentTab';

export default class SegmentTabControl extends Component {
  constructor(props) {
    super(props);
    this.state = { selectedIndex: 0 };
  }

  componentWillReceiveProps(nextProps) {
    const { selectedIndex } = nextProps;
    const { selectedIndex: prevSelectedIndex } = this.props;
    if (selectedIndex !== prevSelectedIndex) {
      this.setState({ selectedIndex });
    }
  }

  tabSelectedAtIndex = (selectedIndex) => {
    this.setState({ selectedIndex }, () => {
      const { selectTab } = this.props;
      selectTab(selectedIndex);
    });
  };

  render() {
    const {
      tabs,
      containerStyle,
      tabsContainerStyle,
      activeTabStyle,
      tabTextStyle,
      activeTabTextStyle,
    } = this.props;
    const { selectedIndex } = this.state;
    const {
      container,
      tabsContainer,
      separator,
    } = styles;

    return (
      <View style={containerStyle || container}>
        <View style={tabsContainerStyle || tabsContainer}>
          {
            tabs.map((item, index) => (
              <SegmentTab
                key={index}
                value={item}
                index={index}
                isSelected={(index === selectedIndex)}
                tabSelectedAtIndex={this.tabSelectedAtIndex}
                activeTabStyle={activeTabStyle}
                tabTextStyle={tabTextStyle}
                activeTabTextStyle={activeTabTextStyle}
              />
            ))}
        </View>
        <View style={separator} />
      </View>
    );
  }
}

SegmentTabControl.propTypes = {
  tabs: PropTypes.arrayOf(String),
  selectTab: PropTypes.func,
  containerStyle: ViewPropTypes.style,
  tabsContainerStyle: ViewPropTypes.style,
  activeTabStyle: ViewPropTypes.style,
  tabTextStyle: ViewPropTypes.style,
  activeTabTextStyle: ViewPropTypes.style,
  selectedIndex: PropTypes.number,
};

SegmentTabControl.defaultProps = {
  tabs: [],
  selectTab: () => {},
  containerStyle: null,
  tabsContainerStyle: null,
  activeTabStyle: null,
  tabTextStyle: null,
  activeTabTextStyle: null,
  selectedIndex: 0,
};