fk-react-ui-components/lib/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 React.createElement("i", { className: iconName });
        }
    }
    getCollapseBtn() {
        let { getCollapseIcon, expanded } = this.props;
        let icon = "";
        if (getCollapseIcon && typeof getCollapseIcon === "function") {
            icon = getCollapseIcon(expanded);
        } else if (expanded) {
            icon = React.createElement("i", { className: "fa fa-chevron-up" });
        } else {
            icon = React.createElement("i", { className: "fa fa-chevron-down" });
        }
        return React.createElement(
            FlexCell,
            { flex: "0.6" },
            React.createElement(
                "button",
                { className: "checkbox-tree-collapse-btn", onClick: this.onExpand },
                icon
            )
        );
    }
    render() {
        let { expanded, listChildren, label, labelClassName, className, noCheckbox } = this.props;
        return React.createElement(
            "li",
            { className: "checkbox-tree-item " + (className || "") },
            React.createElement(
                Flex,
                null,
                React.createElement(
                    FlexCell,
                    { flex: "1.3", onClick: this.onCheck },
                    React.createElement(
                        "span",
                        { className: "checkbox-tree-box " + (noCheckbox ? "hide-checkbox" : "") },
                        this.getCheckboxIcon()
                    ),
                    React.createElement(
                        "span",
                        { className: "checkbox-tree-label " + (labelClassName || "") },
                        label
                    )
                ),
                listChildren ? this.getCollapseBtn() : ""
            ),
            expanded && React.createElement(
                "div",
                { className: "child-list" },
                this.props.children
            )
        );
    }
}

export default CheckboxTreeItem;
//# sourceMappingURL=tree-item.js.map