fk-react-ui-components/components/PanelTabs/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 {PanelTabsContainer, TabContainer, VerticalTabsContainer, HorizontalTabsContainer, PanelContainer} from "./styles/PanelTabs"

export class Tab extends React.Component {
    constructor(){
        super()
    }
    handleClick() {
        if(!this.props.isDisabled && (this.props.currentPanel !== this.props.tabFor)) {
            this.props.changePanel(this.props.tabFor)
        }
    }
    render() {
        return (<div className={(this.props.className || "") + "rc-tab"} onClick={this.handleClick.bind(this)}>
            {this.props.children}
        </div>)
    }
}

export class Panel extends React.Component {

    render() {
        return (
            <div className={(this.props.className || "") + "rc-panel"}>{this.props.children}</div>
        )
    }
}

export class PanelTabs extends React.Component {
    constructor(){
        super();
        this.panels = [];
        this.tabs = [];
        this.state = {
            currentPanel : ""
        }
    }
    addTab(tab) {
        this.tabs.push(tab);
    }
    addPanel(panel) {
        this.panels.push(panel);
    }
    changePanel(panelName) {
        this.setState({currentPanel: panelName});
        this.props.onPanelChange && this.props.onPanelChange(panelName);
    }

    preparePanelsAndTabs() {
        var self = this;
        this.tabs.length = 0;
        this.panels.length = 0;
        React.Children.forEach(this.props.children, function (child) {
            if(child.type == Tab) {
                self.addTab.call(self, child);
            } else if (child.type == Panel) {
                self.addPanel.call(self, child);
            }
        });
    }
    render() {
        this.preparePanelsAndTabs.call(this);
        return (
            <PanelTabsContainer className={this.props.containerClass || ""}>
                <HorizontalTabsContainer className={this.props.tabContainerClass || ""}>
                    {this.tabs.map((tab, index) => React.cloneElement(tab, {
                        changePanel : this.changePanel.bind(this),
                        currentPanel : this.state.currentPanel
                    }))}
                </HorizontalTabsContainer>
                {this.panels.map((panel, index) => {
                    return <div className={panel.props.name === this.state.currentPanel ? "show" : "hide"}>{panel}</div>
                })}
            </PanelTabsContainer>
        )
    }
    componentDidMount(){
        if(this.props.default) {
            this.setState({currentPanel: this.props.default});
        } else {
            this.setState({currentPanel: this.panels[0].props.name});
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.default !== this.props.currentPanel) {
            this.setState({currentPanel: nextProps.default})
        }
    }
}