fk-react-ui-components/components/CheckboxTree/js/tree-item.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 styled from "styled-components";
import {CheckboxNodeContainer} from "../styles/checkbox-tree";
import {Flex, FlexCell} from "../../Layout";
import _ from "lodash"

class CheckboxTreeItem extends React.Component {
    constructor(props) {
        super(props);
        _.bindAll(this, 'onCheck', 'onExpand', 'getCheckboxIcon', 'getCollapseBtn')
    }
    onCheck() {
        if(this.props.disabled || this.props.noCheckbox) {
            return true;
        }
        let isChecked = (this.props.checked === 0 || this.props.checked === 2);

        this.props.onCheck({
            value: this.props.value,
            checked: isChecked,
            children: this.props.listChildren
        })
    }
    onExpand() {
        if(this.props.expandDisabled) {
            return true;
        }
        this.props.onExpand({
            value: this.props.value,
            expanded: !this.props.expanded,
            children: this.props.listChildren
        })
    }
    getCheckboxIcon() {
        let {getCheckboxIcon, checked} = this.props;
        if(getCheckboxIcon && (typeof getCheckboxIcon === "function")) {
            return getCheckboxIcon(checked);
        } else {
            let iconName;
            switch (checked) {
                case 0:
                    iconName = "fa fa-square-o"
                    break;
                case 1:
                    iconName = "fa fa-check-square"
                    break;
                default:
                    iconName = "fa fa-check-square-o"
                    break;
            }
            return <i className={iconName}></i>
        }
    }
    getCollapseBtn() {
        let {getCollapseIcon, expanded} = this.props;
        let icon = ""
        if(getCollapseIcon && (typeof getCollapseIcon === "function")) {
            icon = getCollapseIcon(expanded);
        } else if(expanded) {
            icon = <i className="fa fa-chevron-up"></i>
        }  else {
            icon = <i className="fa fa-chevron-down"></i>
        }
        return (
            <FlexCell flex="0.6">
                <button className="checkbox-tree-collapse-btn" onClick={this.onExpand}>
                    {icon}
                </button>
            </FlexCell>
        )
    }
    render() {
        let { expanded, listChildren, label, labelClassName, className, noCheckbox} = this.props;
        return (
            <li className={"checkbox-tree-item " + (className || "")}>
                <Flex>
                    <FlexCell  flex="1.3" onClick={this.onCheck}>
                        <span className={"checkbox-tree-box " + (noCheckbox ? "hide-checkbox" : "")}>{this.getCheckboxIcon()}</span>
                        <span className={"checkbox-tree-label " + (labelClassName || "")}>{label}</span>
                    </FlexCell>
                    {listChildren ? this.getCollapseBtn() : ""}
                </Flex>
                {expanded && <div className="child-list">{this.props.children}</div>}
            </li>
        )
    }
}

export default CheckboxTreeItem