fk-react-ui-components/components/TreeView/TreeElement.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 { Li } from './styles';
import { colors } from '../colorCodes';

export default class TreeElement extends React.Component {
    constructor(props) {
        super(props);
        this.onClickHandler = this.onClickHandler.bind(this);
    }

    componentDidUpdate(prevProps) {
        if (this.props.active && this.props.active !== prevProps.active) {
            this.props.setActiveTab(this.props.name, this.props.level);
        }
    }

    onClickHandler() {
        this.props.onSelect(this.props.name);
        this.props.setActiveTab(this.props.name, this.props.level);
    }

    render() {
        return (
            <Li
                onClick={() => this.onClickHandler()}
                style={{
                    backgroundColor: this.props.isActive
                        ? colors.activeMenu
                        : colors.whiteText
                }}
            >
                {this.props.children}
            </Li>
        );
    }
}

TreeElement.propTypes = {
    children: PropTypes.node.isRequired,
    setActiveTab: PropTypes.func.isRequired,
    onSelect: PropTypes.func.isRequired,
    isActive: PropTypes.bool.isRequired,
    active: PropTypes.bool.isRequired,
    level: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired
};