DocSpace-client/web/ASC.Web.Components/src/components/tree-menu/index.js

/* eslint-disable react/prop-types */
import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import Tree from 'rc-tree';

const StyledTreeMenu = styled(Tree)`
    margin: 0;
    padding: 0;
    width: 93%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
  
    ${props => props.isEmptyRootNode &&
        css`
            & > li > span.rc-tree-switcher-noop {
                display: none;
            }
            & li span.rc-tree-iconEle {
                margin-left: 4px;
            }
        `
    }
    .rc-tree-node-content-wrapper {
        margin-bottom: ${props => +props.gapBetweenNodes - 15 + 'px;'};
        @media(max-width: 1024px) {
            margin-bottom: ${props => props.gapBetweenNodesTablet 
                ? +props.gapBetweenNodesTablet - 15 + 'px;'
                : +props.gapBetweenNodes - 15 + 'px;'
            };
        }
    };
    ${props => !props.isFullFillSelection && 
        css`
            & .rc-tree-node-selected {
                width: min-content !important;
                padding-right: 5px;
                max-width: 100%;
            }
        `
    }
    
    & .rc-tree-node-selected .rc-tree-title {
      ${props => !props.isFullFillSelection && "width: 85%;"}
    } 

    &:not(.rc-tree-show-line) .rc-tree-switcher-noop {
        background: none;
    }
    &.rc-tree-show-line li:not(:last-child) > ul {
        background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y;
    }
    &.rc-tree-show-line li:not(:last-child) > .rc-tree-switcher-noop {
        background-position: -56px -18px;
    }
    &.rc-tree-show-line li:last-child > .rc-tree-switcher-noop {
        background-position: -56px -36px;
    }
    .rc-tree-child-tree {
        display: none;
    }
    .rc-tree-treenode-switcher-open{
        ${props => props.disableSwitch && "margin-bottom:10px;"}
    }
    .rc-tree-child-tree-open {
        display: block;
        ${props => props.disableSwitch && "margin: 0 0 25px 0;"}
        margin-left: ${props => props.disableSwitch ? "27px" : "8px"};
        li:first-child{
            margin-top: ${props => props.disableSwitch ? "10px" : "6px"};
            margin-left: 0;
        }
        
    }
    .rc-tree-treenode-disabled > span:not(.rc-tree-switcher),
    .rc-tree-treenode-disabled > a,
    .rc-tree-treenode-disabled > a span {
        color: #767676;
        cursor: not-allowed;
    }
    
    .rc-tree-icon__open {
        margin-right: 2px;
        background-position: -110px -16px;
        vertical-align: top;
    }
    .rc-tree-icon__close {
        margin-right: 2px;
        background-position: -110px 0;
        vertical-align: top;
    }
    .rc-tree-icon__docu {
        margin-right: 2px;
        background-position: -110px -32px;
        vertical-align: top;
    }
    .rc-tree-icon__customize {
        margin-right: 2px;
        vertical-align: top;
    }
    ${props => props.switcherIcon != null ?
        css`
            li span.rc-tree-switcher{
                background: none;
            }
        `
        : ''
    }
    ${props => props.disableSwitch ? 
        css`
            li span.rc-tree-switcher{
                height: 0;
                margin: 0;
                width: 0;
            }
        `
        : ``
    }
`;

const TreeMenu = React.forwardRef((props, ref) => {
    //console.log("TreeMenu render");
    const { defaultExpandAll, defaultExpandParent, showIcon, showLine, multiple, disabled, draggable, checkable, children, switcherIcon, icon,
        onDragStart, onDrop, onSelect, onDragEnter, onDragEnd, onDragLeave, onDragOver, onCheck, onExpand, onLoad, onMouseEnter, onMouseLeave, onRightClick,
        defaultSelectedKeys, expandedKeys, defaultExpandedKeys, defaultCheckedKeys, selectedKeys, className, id, style, loadData, disableSwitch,
        isFullFillSelection, gapBetweenNodes, gapBetweenNodesTablet, isEmptyRootNode } = props;

    const expandedKeysProp = expandedKeys ? { expandedKeys: expandedKeys } : {};

    const onTreeNodeSelect = (data, e) => {
        const result = e.selected ? data : [e.node.props.eventKey];
        onSelect(result, e);
    }
    return (
        <StyledTreeMenu
            id={id}
            style={style}
            className={className}
            ref={ref}
            {...expandedKeysProp}
            loadData={loadData}
            checkable={!!checkable}
            draggable={!!draggable}
            disabled={!!disabled}
            multiple={!!multiple}
            showLine={!!showLine}
            showIcon={!!showIcon}
            defaultExpandAll={!!defaultExpandAll}
            defaultExpandParent={!!defaultExpandParent}
            icon={icon}

            selectedKeys={selectedKeys}
            defaultSelectedKeys={defaultSelectedKeys}
            defaultExpandedKeys={defaultExpandedKeys}
            defaultCheckedKeys={defaultCheckedKeys}

            onDragStart={onDragStart}
            onDrop={onDrop}
            onDragEnd={onDragEnd}
            onDragLeave={onDragLeave}
            onDragOver={onDragOver}

            switcherIcon={switcherIcon}
            onSelect={onTreeNodeSelect}
            onDragEnter={onDragEnter}

            onCheck={onCheck}
            onExpand={onExpand}

            onLoad={onLoad}
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
            onRightClick={onRightClick}

            disableSwitch={disableSwitch}
            isFullFillSelection={isFullFillSelection}
            gapBetweenNodes={gapBetweenNodes}
            gapBetweenNodesTablet={gapBetweenNodesTablet}
            isEmptyRootNode={isEmptyRootNode}
        >
            {children}
        </StyledTreeMenu>
    );
})

TreeMenu.propTypes = {
    checkable: PropTypes.bool,
    draggable: PropTypes.bool,
    disabled: PropTypes.bool,
    multiple: PropTypes.bool,
    showIcon: PropTypes.bool,
    showLine: PropTypes.bool,
    defaultExpandAll: PropTypes.bool,
    defaultExpandParent: PropTypes.bool,

    icon: PropTypes.func,
    onDragStart: PropTypes.func,
    onDrop: PropTypes.func,
    loadData: PropTypes.func,

    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]),
    className: PropTypes.string,
    id: PropTypes.string,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),

    disableSwitch: PropTypes.bool,

    isFullFillSelection: PropTypes.bool,
    gapBetweenNodes: PropTypes.string,
    gapBetweenNodesTablet: PropTypes.string,
    isEmptyRootNode: PropTypes.bool
}

TreeMenu.defaultProps = {
    disableSwitch: false,
    isFullFillSelection: true,
    gapBetweenNodes: '15',
    isEmptyRootNode: false
}

TreeMenu.displayName = "TreeMenu";

export default TreeMenu