230 lines
6.7 KiB
JavaScript
230 lines
6.7 KiB
JavaScript
/* 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);
|
|
|
|
.rc-tree-switcher {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
& li span.rc-tree-iconEle {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
${props => props.isEmptyRootNode &&
|
|
css`
|
|
& > li > span.rc-tree-switcher-noop {
|
|
display: none;
|
|
}
|
|
`
|
|
}
|
|
.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 |