fk-react-ui-components/components/TabBar/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/**
 * Created by manoraj.k on 17/08/17.
 */
import React from 'react';
import PropTypes from 'prop-types';
import { TabContainer, Tab } from './styles/TabBar';

class TabBar extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: 0
        };
        this.onTabChange = this.onTabChange.bind(this);
    }

    componentWillMount() {
        if (this.props.selected !== undefined) {
            this.setState({ selected: this.props.selected });
        } else {
            this.setState({ selected: 0 });
        }
    }

    componentWillReceiveProps(nextProps) {
        if (
            nextProps.selected !== undefined &&
            nextProps.selected !== this.state.selected
        ) {
            this.setState({ selected: nextProps.selected });
        }
    }

    onTabChange(index) {
        this.setState({ selected: index });
        if (this.props.onTabChange) {
            this.props.onTabChange(index);
        }
    }

    render() {
        return (
            <TabContainer className="tabbar-container">
                {this.props.tabBarName && (
                    <span className="tab-bar-name">
                        {this.props.tabBarName}
                    </span>
                )}
                {this.props.tabs.map((tab, index) => (
                    <Tab
                        key={tab.label}
                        className={
                            index === this.state.selected ? 'tab active' : 'tab'
                        }
                        onClick={() => this.onTabChange(index)}
                    >
                        {tab.label}
                    </Tab>
                ))}
            </TabContainer>
        );
    }
}

export default TabBar;

TabBar.propTypes = {
    selected: PropTypes.number.isRequired,
    onTabChange: PropTypes.func.isRequired,
    tabBarName: PropTypes.string.isRequired,
    tabs: PropTypes.arrayOf(
        PropTypes.shape({
            label: PropTypes.string.isRequired,
            value: PropTypes.string.isRequired
        })
    ).isRequired
};