fk-react-ui-components/lib/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 = React.createElement(Pointer, null);
        }

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

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
};
//# sourceMappingURL=TreePanel.js.map