fk-react-ui-components/components/TreeView/TreePanel.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 PropTypes from 'prop-types';
import Card from '../Card';
import { Ul, Pointer } from './styles';
import { FlexCell } from '../Layout';

export default class TreePanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeTab: ''
        };
        this.setActiveTab = this.setActiveTab.bind(this);
        this.clearActiveTab = this.clearActiveTab.bind(this);
    }

    componentDidUpdate() {
        if (this.props.level > this.props.currentLevel) {
            if (this.state.activeTab) {
                this.clearActiveTab();
            }
        }
    }

    setActiveTab(tab, level) {
        this.setState({
            activeTab: tab
        });
        this.props.setCurrentLevel(level);
    }

    clearActiveTab() {
        this.setState({
            activeTab: ''
        });
    }

    render() {
        const items = React.Children.map(this.props.children, child =>
            React.cloneElement(child, {
                setActiveTab: this.setActiveTab,
                isActive:
                    this.state.activeTab === child.props.name ||
                    child.props.active,
                level: this.props.level
            })
        );

        let pointer = null;

        if (this.props.pointer === 'true') {
            pointer = <Pointer />;
        }

        return (
            <FlexCell
                flex={0}
                style={{
                    margin: '0px 10px 0px 0px',
                    flex: 0,
                    position: 'relative',
                    display: this.props.children.length ? 'block' : 'none',
                    width: this.props.width
                }}
            >
                <Card width={this.props.width || '100%'} padding="0px">
                    <Ul height={this.props.height}>{items}</Ul>
                </Card>
                {pointer}
            </FlexCell>
        );
    }
}

TreePanel.propTypes = {
    children: PropTypes.node.isRequired,
    setCurrentLevel: PropTypes.func.isRequired,
    currentLevel: PropTypes.number.isRequired,
    level: PropTypes.number.isRequired,
    pointer: PropTypes.string.isRequired,
    width: PropTypes.string.isRequired,
    height: PropTypes.string.isRequired
};