diff --git a/web/ASC.Web.Components/src/components/tree-menu/README.md b/web/ASC.Web.Components/src/components/tree-menu/README.md
index 2337c98eef..e275fe89f7 100644
--- a/web/ASC.Web.Components/src/components/tree-menu/README.md
+++ b/web/ASC.Web.Components/src/components/tree-menu/README.md
@@ -14,37 +14,37 @@ import { TreeMenu } from "asc-web-components";
### Properties TreeMenu
-| Props | Type | Required | Values | Default | Description |
-| --------------------- | :----------------: | :------: | :----: | :-----: | ------------------------------------------------------------------------------------------------------- |
-| `autoExpandParent` | `bool` | - | - | `false` | Whether auto expand parent treeNodes |
-| `checkable` | `bool` | - | - | `false` | Whether support checked |
-| `className` | `string` | - | - | - | Accepts class |
-| `defaultExpandAll` | `bool` | - | - | `false` | Expand all treeNodes |
-| `defaultExpandParent` | `bool` | - | - | `true` | Auto expand parent treeNodes when init |
-| `disabled` | `bool` | - | - | `false` | Whether disabled the tree |
-| `draggable` | `bool` | - | - | `false` | Whether can drag treeNode |
-| `id` | `string` | - | - | - | Accepts id |
-| `multiple` | `bool` | - | - | `false` | Whether multiple select |
-| `onDragEnd` | `func` | - | - | - | it execs when fire the tree's dragend event |
-| `onDragEnter` | `func` | - | - | - | it execs when fire the tree's dragenter event |
-| `onDragLeave` | `func` | - | - | - | it execs when fire the tree's dragleave event |
-| `onDragOver` | `func` | - | - | - | it execs when fire the tree's dragover event |
-| `onDragStart` | `func` | - | - | - | it execs when fire the tree's dragstart event |
-| `onDrop` | `func` | - | - | - | it execs when fire the tree's drop event |
-| `onExpand` | `func` | - | - | - | fire on treeNode expand or not |
-| `onLoad` | `func` | - | - | - | Trigger when a node is loaded. If you set the loadedKeys, you must handle onLoad to avoid infinity loop |
-| `onMouseEnter` | `func` | - | - | - | call when mouse enter a treeNode |
-| `onMouseLeave` | `func` | - | - | - | call when mouse leave a treeNode |
-| `onRightClick` | `func` | - | - | - | select current treeNode and show customized contextmenu |
-| `onSelect` | `func` | - | - | - | click the treeNode to fire |
-| `showIcon` | `bool` | - | - | `true` | Whether show icon |
-| `showLine` | `bool` | - | - | `false` | Whether show line |
-| `style` | `obj`, `array` | - | - | - | Accepts css style |
-| `loadData` | `func` | - | - | - | load data asynchronously and the return value should be a promise |
-| `isFullFillSelection` | `bool` | - | - | `true` | to select the selection style of the active node |
-| `gapBetweenNodes` | `string` | - | - | `15` | for setting the spacing between nodes |
-|`gapBetweenNodesTablet`| `string` | - | - | - | to set spacing between nodes on tablets and phones (if necessary) |
-| `isEmptyRootNode` | `bool` | - | - | `false` | swipe the root node to the left if there are no nested elements |
+| Props | Type | Required | Values | Default | Description |
+| ----------------------- | :------------: | :------: | :----: | :-----: | ------------------------------------------------------------------------------------------------------- |
+| `autoExpandParent` | `bool` | - | - | `false` | Whether auto expand parent treeNodes |
+| `checkable` | `bool` | - | - | `false` | Whether support checked |
+| `className` | `string` | - | - | - | Accepts class |
+| `defaultExpandAll` | `bool` | - | - | `false` | Expand all treeNodes |
+| `defaultExpandParent` | `bool` | - | - | `true` | Auto expand parent treeNodes when init |
+| `disabled` | `bool` | - | - | `false` | Whether disabled the tree |
+| `draggable` | `bool` | - | - | `false` | Whether can drag treeNode |
+| `id` | `string` | - | - | - | Accepts id |
+| `multiple` | `bool` | - | - | `false` | Whether multiple select |
+| `onDragEnd` | `func` | - | - | - | it execs when fire the tree's dragend event |
+| `onDragEnter` | `func` | - | - | - | it execs when fire the tree's dragenter event |
+| `onDragLeave` | `func` | - | - | - | it execs when fire the tree's dragleave event |
+| `onDragOver` | `func` | - | - | - | it execs when fire the tree's dragover event |
+| `onDragStart` | `func` | - | - | - | it execs when fire the tree's dragstart event |
+| `onDrop` | `func` | - | - | - | it execs when fire the tree's drop event |
+| `onExpand` | `func` | - | - | - | fire on treeNode expand or not |
+| `onLoad` | `func` | - | - | - | Trigger when a node is loaded. If you set the loadedKeys, you must handle onLoad to avoid infinity loop |
+| `onMouseEnter` | `func` | - | - | - | call when mouse enter a treeNode |
+| `onMouseLeave` | `func` | - | - | - | call when mouse leave a treeNode |
+| `onRightClick` | `func` | - | - | - | select current treeNode and show customized contextmenu |
+| `onSelect` | `func` | - | - | - | click the treeNode to fire |
+| `showIcon` | `bool` | - | - | `true` | Whether show icon |
+| `showLine` | `bool` | - | - | `false` | Whether show line |
+| `style` | `obj`, `array` | - | - | - | Accepts css style |
+| `loadData` | `func` | - | - | - | load data asynchronously and the return value should be a promise |
+| `isFullFillSelection` | `bool` | - | - | `true` | to select the selection style of the active node |
+| `gapBetweenNodes` | `string` | - | - | `15` | for setting the spacing between nodes |
+| `gapBetweenNodesTablet` | `string` | - | - | - | to set spacing between nodes on tablets and phones (if necessary) |
+| `isEmptyRootNode` | `bool` | - | - | `false` | swipe the root node to the left if there are no nested elements |
### Properties TreeNode
@@ -59,3 +59,5 @@ import { TreeMenu } from "asc-web-components";
| `key` | `bool` | - | - | - | it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes |
| `style` | `object` | - | - | - | set style to treeNode |
| `title` | `string`,`element` | - | - | - | tree/subTree's title |
+| `newItems` | `number` | - | - | - | If value > 0 then a badge with the number of new elements will be displayed |
+| `onBadgeClick` | `func` | - | - | - | call when click on badge |
diff --git a/web/ASC.Web.Components/src/components/tree-menu/index.js b/web/ASC.Web.Components/src/components/tree-menu/index.js
index 3582f475d7..9ee9766357 100644
--- a/web/ASC.Web.Components/src/components/tree-menu/index.js
+++ b/web/ASC.Web.Components/src/components/tree-menu/index.js
@@ -1,8 +1,10 @@
/* 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';
+import React from "react";
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import Tree from "rc-tree";
+
+import Badge from "../badge";
const StyledTreeMenu = styled(Tree)`
margin: 0;
@@ -18,32 +20,33 @@ const StyledTreeMenu = styled(Tree)`
margin-left: 4px;
}
- ${props => props.isEmptyRootNode &&
- css`
- & > li > span.rc-tree-switcher-noop {
- display: none;
- }
- `
- }
+ ${props =>
+ props.isEmptyRootNode &&
+ css`
+ & > li > span.rc-tree-switcher-noop {
+ display: none;
+ }
+ `}
.rc-tree-node-content-wrapper {
- margin-bottom: ${props => +props.gapBetweenNodes - 15 + 'px;'};
+ position: static !important;
+ margin-bottom: ${props => +props.gapBetweenNodes - 15 + "px;"};
@media(max-width: 1024px) {
- margin-bottom: ${props => props.gapBetweenNodesTablet
- ? +props.gapBetweenNodesTablet - 15 + 'px;'
- : +props.gapBetweenNodes - 15 + 'px;'
- };
+ 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%;
- }
- `
- }
-
+ ${props =>
+ !props.isFullFillSelection &&
+ css`
+ span.rc-tree-node-selected {
+ width: min-content !important;
+ padding-right: 5px;
+ max-width: 85%;
+ }
+ `}
+
& .rc-tree-node-selected .rc-tree-title {
${props => !props.isFullFillSelection && "width: 85%;"}
}
@@ -69,9 +72,9 @@ const StyledTreeMenu = styled(Tree)`
.rc-tree-child-tree-open {
display: block;
${props => props.disableSwitch && "margin: 0 0 25px 0;"}
- margin-left: ${props => props.disableSwitch ? "27px" : "8px"};
+ margin-left: ${props => (props.disableSwitch ? "27px" : "8px")};
li:first-child{
- margin-top: ${props => props.disableSwitch ? "10px" : "6px"};
+ margin-top: ${props => (props.disableSwitch ? "10px" : "6px")};
margin-left: 0;
}
@@ -102,129 +105,201 @@ const StyledTreeMenu = styled(Tree)`
margin-right: 2px;
vertical-align: top;
}
- ${props => props.switcherIcon != null ?
- css`
- li span.rc-tree-switcher{
- background: none;
+ ${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;
+ `
+ : ""}
+ ${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;
+ //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 expandedKeysProp = expandedKeys ? { expandedKeys: expandedKeys } : {};
- const onTreeNodeSelect = (data, e) => {
- const result = e.selected ? data : [e.node.props.eventKey];
- onSelect(result, e);
- }
- return (
-