fk-react-ui-components/lib/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 React.createElement(
            "div",
            { className: (this.props.className || "") + "rc-tab", onClick: this.handleClick.bind(this) },
            this.props.children
        );
    }
}

export class Panel extends React.Component {

    render() {
        return React.createElement(
            "div",
            { className: (this.props.className || "") + "rc-panel" },
            this.props.children
        );
    }
}

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 React.createElement(
            PanelTabsContainer,
            { className: this.props.containerClass || "" },
            React.createElement(
                HorizontalTabsContainer,
                { className: this.props.tabContainerClass || "" },
                this.tabs.map((tab, index) => React.cloneElement(tab, {
                    changePanel: this.changePanel.bind(this),
                    currentPanel: this.state.currentPanel
                }))
            ),
            this.panels.map((panel, index) => {
                return React.createElement(
                    "div",
                    { className: panel.props.name === this.state.currentPanel ? "show" : "hide" },
                    panel
                );
            })
        );
    }
    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 });
        }
    }
}
//# sourceMappingURL=index.js.map