react-jam-ui/components/Tabs/index.js

React JAM UI components

import React from 'react';
import classNames from 'classnames';
import './styles.styl'

class Tabs extends React.Component {
    constructor(props) {
        super(props);

        const tabHeader = React.Children.toArray(props.children).filter(x => x.ref === 'Header');
        let active = props.active || '';

        if (tabHeader[0] && tabHeader[0].props.children) {

            React.Children.map(tabHeader[0].props.children, (child) => {
                if (child.ref === 'Tab' && child.props.for && active == '') {
                    active = child.props.for
                }
            })            
        }

        this.state = {
            active: active
        }
    }

    /* getTabsCount() {
        const tabHeader = React.Children.toArray(this.props.children).filter(x => x.ref === 'Header');

        if (tabHeader[0] && tabHeader[0].props.children) {
            return React.Children.count(
                React.Children.toArray(tabHeader[0].props.children).filter(x => x.ref === 'Tab'),
            );
        }

        return 0;
    }
    
    getContentsCount() {
        const tabBody = React.Children.toArray(this.props.children).filter(x => x.ref === 'Body');

        if (tabBody[0] && tabBody[0].props.children) {
            return React.Children.count(
                React.Children.toArray(tabBody[0].props.children).filter(x => x.ref === 'Content'),
            );
        }

        return 0;
    } */

    tabClick = id => {
        this.setState({
            active: id
        })
    }

    render() {
        const classes = classNames(
            'tabs',
            this.props.className,
            {
                'disabled': this.props.disabled
            }
        );
        
        return (
            <div className='tabs'>
                {
                    React.Children.map(this.props.children, child => {

                        if (child === null) {
                            return null;
                        }
                        
                        let result = child;

                        if(child.ref === 'Header') {
                            result = React.cloneElement(child, {
                                children: React.Children.map(child.props.children, HeaderChild => {
                                    if (HeaderChild === null) {
                                        return null;
                                    }
                                                            
                                    if (HeaderChild.ref !== 'Tab') return HeaderChild;

                                    return React.cloneElement(HeaderChild, {
                                        tabClick: this.tabClick,
                                        active: HeaderChild.props.for === this.state.active
                                    });
                                })
                            })
                        } else
                        if (child.ref === 'Body') {
                            result = React.cloneElement(child, {
                                children: React.Children.map(child.props.children, (BodyChild) => {
                                    if (BodyChild === null) {
                                        return null;
                                    }
                                    if (BodyChild.ref !== 'Content') return BodyChild;

                                    return React.cloneElement(BodyChild, {
                                        active: BodyChild.props.id === this.state.active
                                    });
                                })
                            })
                        }
                        return result
                    }) 
                }
            </div>
        )
    }
}

class Header extends React.Component {
    constructor() {
        super();

        this.state = {
        }

    }

    render() {
        let classes = classNames('tabs-header', this.props.className);

        return (
            <div className={ classes } >{ this.props.children }</div>
        )
    }
}

class Body extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        let classes = classNames('tabs-body', this.props.className);

        return (
            <div className={ classes }>{ this.props.children }</div>
        )
    }
}

class Tab extends React.Component {
    constructor() {
        super();

        this.state = {
        }

        //this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (e, id) => {
        if (!this.props.disabled) this.props.tabClick(id)
        if (this.props.onClick) this.props.onClick(e)
    }

    render() {
        let classes = classNames(
            'tabs-tab', 
            this.props.className,
            {
                'active': this.props.active,
                'disabled': this.props.disabled
            }
        );

        return (
            <div className={ classes } onClick={(e) => { this.handleClick(e, this.props.for ) } } >{ this.props.children }</div>
        )
    }
}

class Content extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        let classes = classNames('tabs-content', this.props.className);

        return ( this.props.active ? <div className={ classes }>{ this.props.children }</div> : null )
    }
}

Tabs.Header = Header;
Tabs.Body = Body;
Tabs.Tab = Tab;
Tabs.Content = Content;

export default Tabs

{/*<Tabs active='tab-2'>
    <Tabs.Header ref='Header'>
        <Tabs.Tab for='tab-1' ref='Tab'>1</Tabs.Tab>
        <Tabs.Tab for='tab-2' ref='Tab'>2</Tabs.Tab>
        <Tabs.Tab for='tab-3' ref='Tab'>3</Tabs.Tab>
    </Tabs.Header>
    <Tabs.Body ref='Body'>
        <Tabs.Content id='tab-1' ref='Content'>1</Tabs.Content>
        <Tabs.Content id='tab-2' ref='Content'>2</Tabs.Content>
        <Tabs.Content id='tab-3' ref='Content'>3</Tabs.Content>
    </Tabs.Body>
</Tabs>*/}