2019-12-03 14:01:10 +00:00
|
|
|
/* eslint-disable react/prop-types */
|
2019-06-11 12:00:02 +00:00
|
|
|
import React from 'react';
|
|
|
|
import styled, { css } from 'styled-components';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Tree from 'rc-tree';
|
|
|
|
|
2020-02-27 14:33:17 +00:00
|
|
|
const StyledTreeMenu = styled(Tree)`
|
2019-06-11 12:00:02 +00:00
|
|
|
margin: 0;
|
2019-10-01 08:39:58 +00:00
|
|
|
padding: 0;
|
2020-06-24 11:06:07 +00:00
|
|
|
width: 93%;
|
2020-02-03 13:08:18 +00:00
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
2019-06-11 12:00:02 +00:00
|
|
|
|
2020-09-15 11:50:14 +00:00
|
|
|
|
|
|
|
${props => props.isEmptyRootNode &&
|
|
|
|
css`
|
|
|
|
& > li > span.rc-tree-switcher-noop {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
& li span.rc-tree-iconEle {
|
|
|
|
margin-left: 4px;
|
|
|
|
}
|
|
|
|
`
|
2020-09-15 10:14:11 +00:00
|
|
|
}
|
|
|
|
.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;'
|
|
|
|
};
|
|
|
|
}
|
2020-09-15 11:50:14 +00:00
|
|
|
};
|
|
|
|
${props => !props.isFullFillSelection &&
|
|
|
|
css`
|
|
|
|
& .rc-tree-node-selected {
|
2020-09-15 10:14:11 +00:00
|
|
|
width: min-content !important;
|
|
|
|
padding-right: 5px;
|
|
|
|
max-width: 100%;
|
2020-09-15 11:50:14 +00:00
|
|
|
}
|
|
|
|
`
|
2020-09-15 10:14:11 +00:00
|
|
|
}
|
2020-09-15 11:50:14 +00:00
|
|
|
|
2020-09-15 10:14:11 +00:00
|
|
|
& .rc-tree-node-selected .rc-tree-title {
|
|
|
|
${props => !props.isFullFillSelection && "width: 85%;"}
|
|
|
|
}
|
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
&: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;
|
|
|
|
}
|
2020-07-20 13:22:52 +00:00
|
|
|
.rc-tree-treenode-switcher-open{
|
|
|
|
${props => props.disableSwitch && "margin-bottom:10px;"}
|
|
|
|
}
|
2019-06-11 12:00:02 +00:00
|
|
|
.rc-tree-child-tree-open {
|
|
|
|
display: block;
|
2020-07-20 13:22:52 +00:00
|
|
|
${props => props.disableSwitch && "margin: 0 0 25px 0;"}
|
|
|
|
margin-left: ${props => props.disableSwitch ? "27px" : "8px"};
|
2020-02-12 11:35:25 +00:00
|
|
|
li:first-child{
|
2020-07-20 13:22:52 +00:00
|
|
|
margin-top: ${props => props.disableSwitch ? "10px" : "6px"};
|
2020-03-06 11:28:18 +00:00
|
|
|
margin-left: 0;
|
2020-02-13 13:23:12 +00:00
|
|
|
}
|
2020-03-06 11:28:18 +00:00
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
2019-10-01 08:39:58 +00:00
|
|
|
${props => props.switcherIcon != null ?
|
2019-06-28 09:11:56 +00:00
|
|
|
css`
|
|
|
|
li span.rc-tree-switcher{
|
|
|
|
background: none;
|
|
|
|
}
|
2019-10-01 08:39:58 +00:00
|
|
|
`
|
2019-06-28 09:11:56 +00:00
|
|
|
: ''
|
|
|
|
}
|
2020-07-20 13:22:52 +00:00
|
|
|
${props => props.disableSwitch ?
|
|
|
|
css`
|
|
|
|
li span.rc-tree-switcher{
|
|
|
|
height: 0;
|
|
|
|
margin: 0;
|
|
|
|
width: 0;
|
|
|
|
}
|
|
|
|
`
|
|
|
|
: ``
|
|
|
|
}
|
2019-06-11 12:00:02 +00:00
|
|
|
`;
|
|
|
|
|
2020-03-06 10:14:04 +00:00
|
|
|
const TreeMenu = React.forwardRef((props, ref) => {
|
2019-07-24 17:39:19 +00:00
|
|
|
//console.log("TreeMenu render");
|
2019-10-01 08:39:58 +00:00
|
|
|
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,
|
2020-09-15 10:14:11 +00:00
|
|
|
defaultSelectedKeys, expandedKeys, defaultExpandedKeys, defaultCheckedKeys, selectedKeys, className, id, style, loadData, disableSwitch,
|
2020-09-15 11:50:14 +00:00
|
|
|
isFullFillSelection, gapBetweenNodes, gapBetweenNodesTablet, isEmptyRootNode } = props;
|
2019-08-30 10:56:43 +00:00
|
|
|
|
2020-03-16 10:29:45 +00:00
|
|
|
const expandedKeysProp = expandedKeys ? { expandedKeys: expandedKeys } : {};
|
|
|
|
|
2019-09-06 09:15:54 +00:00
|
|
|
const onTreeNodeSelect = (data, e) => {
|
|
|
|
const result = e.selected ? data : [e.node.props.eventKey];
|
|
|
|
onSelect(result, e);
|
|
|
|
}
|
2019-06-11 12:00:02 +00:00
|
|
|
return (
|
2020-06-26 12:51:47 +00:00
|
|
|
<StyledTreeMenu
|
2020-03-04 06:11:17 +00:00
|
|
|
id={id}
|
|
|
|
style={style}
|
2020-06-26 12:51:47 +00:00
|
|
|
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}
|
2020-07-20 13:22:52 +00:00
|
|
|
|
|
|
|
disableSwitch={disableSwitch}
|
2020-09-15 10:14:11 +00:00
|
|
|
isFullFillSelection={isFullFillSelection}
|
|
|
|
gapBetweenNodes={gapBetweenNodes}
|
|
|
|
gapBetweenNodesTablet={gapBetweenNodesTablet}
|
2020-09-15 11:50:14 +00:00
|
|
|
isEmptyRootNode={isEmptyRootNode}
|
2020-03-04 06:11:17 +00:00
|
|
|
>
|
2020-06-26 12:51:47 +00:00
|
|
|
{children}
|
|
|
|
</StyledTreeMenu>
|
2019-06-11 12:00:02 +00:00
|
|
|
);
|
2020-03-06 10:14:04 +00:00
|
|
|
})
|
2019-06-11 12:00:02 +00:00
|
|
|
|
|
|
|
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,
|
2020-03-04 10:21:52 +00:00
|
|
|
loadData: PropTypes.func,
|
2019-06-11 12:00:02 +00:00
|
|
|
|
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
2019-12-03 14:01:10 +00:00
|
|
|
]),
|
|
|
|
className: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
2020-07-20 13:22:52 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
|
|
|
2020-09-15 10:14:11 +00:00
|
|
|
disableSwitch: PropTypes.bool,
|
2020-09-15 11:50:14 +00:00
|
|
|
|
2020-09-15 10:14:11 +00:00
|
|
|
isFullFillSelection: PropTypes.bool,
|
|
|
|
gapBetweenNodes: PropTypes.string,
|
2020-09-15 11:50:14 +00:00
|
|
|
gapBetweenNodesTablet: PropTypes.string,
|
|
|
|
isEmptyRootNode: PropTypes.bool
|
2020-07-20 13:22:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
TreeMenu.defaultProps = {
|
2020-09-15 10:14:11 +00:00
|
|
|
disableSwitch: false,
|
|
|
|
isFullFillSelection: true,
|
2020-09-15 11:50:14 +00:00
|
|
|
gapBetweenNodes: '15',
|
|
|
|
isEmptyRootNode: false
|
2019-06-11 12:00:02 +00:00
|
|
|
}
|
|
|
|
|
2020-03-06 10:14:04 +00:00
|
|
|
TreeMenu.displayName = "TreeMenu";
|
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
export default TreeMenu
|