fk-react-ui-components/components/Tabs/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

import React from "react";
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import styles from "../StyleComponents";
const TabComponent = styles.tab(Tabs);
const map = React.Children.map;
export default class ReactTabComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    computeTabs(){
        return map(this.props.children,function (node) {
            if(node.props.refs == "tabNames"){
                return map(node.props.children, function (tabNode) {
                    return <Tab>{tabNode}</Tab>;
                });
            }
        });
    }

    computeTabPanels(){
        return map(this.props.children,function (node) {
            if(node.props.refs == "tabPanels"){
                return map(node.props.children, function (tabNode) {
                    return <TabPanel>{tabNode}</TabPanel>;
                });
            }
        });
    }

    render(){
        return(
            <TabComponent className="tab-component" selectedIndex={this.props.selectedIndex} onSelect={this.props.setTabData}>
                <TabList>
                {this.computeTabs()}
                </TabList>
                {this.computeTabPanels()}
            </TabComponent>
        )
    }
}