2020-10-14 16:09:03 +00:00
|
|
|
|
import React from "react";
|
|
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
|
import { getCssFromSvg } from "../../icons/get-css-from-svg";
|
|
|
|
|
import { TreeNode } from "rc-tree";
|
|
|
|
|
import ReactDOMServer from "react-dom/server";
|
2020-10-15 07:50:49 +00:00
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-24 17:11:23 +00:00
|
|
|
|
import NoUserSelect from "../../utils/commonStyles";
|
2021-02-25 21:19:45 +00:00
|
|
|
|
import Base from "../../themes/base";
|
2021-02-24 17:11:23 +00:00
|
|
|
|
import CatalogFolderIcon from "../../../../public/images/catalog.folder.react.svg";
|
|
|
|
|
import CheckboxCheckedIcon from "../../../../public/images/checkbox.checked.react.svg";
|
|
|
|
|
import CheckboxIndeterminateIcon from "../../../../public/images/checkbox.indeterminate.react.svg";
|
|
|
|
|
import CheckboxIcon from "../../../../public/images/checkbox.react.svg";
|
2021-02-26 13:29:50 +00:00
|
|
|
|
import commonIconsStyles from "../../utils/common-icons-style";
|
|
|
|
|
|
|
|
|
|
const StyledCheckboxIcon = styled(CheckboxIcon)`
|
2021-12-14 04:29:56 +00:00
|
|
|
|
color: ${(props) => props.theme.checkbox.fillColor};
|
|
|
|
|
${commonIconsStyles};
|
2021-02-26 13:29:50 +00:00
|
|
|
|
`;
|
|
|
|
|
|
2022-01-27 13:54:58 +00:00
|
|
|
|
StyledCheckboxIcon.defaultProps = { theme: Base };
|
2021-12-14 04:29:56 +00:00
|
|
|
|
|
2021-02-26 13:29:50 +00:00
|
|
|
|
const StyledCheckboxCheckedIcon = styled(CheckboxCheckedIcon)`
|
2021-12-14 04:29:56 +00:00
|
|
|
|
color: ${(props) => props.theme.checkbox.arrowColor};
|
2021-02-26 13:29:50 +00:00
|
|
|
|
${commonIconsStyles}
|
|
|
|
|
`;
|
|
|
|
|
|
2022-01-27 13:54:58 +00:00
|
|
|
|
StyledCheckboxCheckedIcon.defaultProps = { theme: Base };
|
2021-12-14 04:29:56 +00:00
|
|
|
|
|
2021-02-26 13:29:50 +00:00
|
|
|
|
const StyledCheckboxIndeterminateIcon = styled(CheckboxIndeterminateIcon)`
|
2021-12-14 04:29:56 +00:00
|
|
|
|
color: ${(props) => props.theme.checkbox.indeterminateColor};
|
2021-02-26 13:29:50 +00:00
|
|
|
|
${commonIconsStyles}
|
|
|
|
|
`;
|
2019-06-11 12:00:02 +00:00
|
|
|
|
|
2022-01-27 13:54:58 +00:00
|
|
|
|
StyledCheckboxIndeterminateIcon.defaultProps = { theme: Base };
|
2021-12-14 04:29:56 +00:00
|
|
|
|
|
2019-07-05 06:55:22 +00:00
|
|
|
|
var checkboxIcon,
|
2020-10-14 16:09:03 +00:00
|
|
|
|
checkboxСheckedIcon,
|
|
|
|
|
сheckboxDisabledIcon,
|
|
|
|
|
сheckboxHoverIcon,
|
|
|
|
|
сheckboxIndeterminateIcon,
|
|
|
|
|
checkboxCheckedDisabledIcon,
|
|
|
|
|
checkboxCheckedHoverIcon,
|
|
|
|
|
checkboxIndeterminateDisabledIcon,
|
|
|
|
|
checkboxIndeterminateHoverIcon,
|
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
|
|
treeIcon;
|
2019-07-05 06:55:22 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
(function () {
|
2021-02-26 13:29:50 +00:00
|
|
|
|
checkboxIcon = getCssFromSvg(
|
|
|
|
|
ReactDOMServer.renderToString(<StyledCheckboxIcon />)
|
|
|
|
|
);
|
2020-10-14 16:09:03 +00:00
|
|
|
|
сheckboxDisabledIcon = getCssFromSvg(
|
2021-12-14 04:29:56 +00:00
|
|
|
|
ReactDOMServer.renderToString(<StyledCheckboxIcon />)
|
2020-10-14 16:09:03 +00:00
|
|
|
|
);
|
|
|
|
|
сheckboxHoverIcon = getCssFromSvg(
|
2021-12-14 04:29:56 +00:00
|
|
|
|
ReactDOMServer.renderToString(<StyledCheckboxIcon />)
|
2020-10-14 16:09:03 +00:00
|
|
|
|
);
|
2019-07-31 13:37:13 +00:00
|
|
|
|
|
2020-10-14 16:09:03 +00:00
|
|
|
|
checkboxСheckedIcon = getCssFromSvg(
|
2021-02-26 13:29:50 +00:00
|
|
|
|
ReactDOMServer.renderToString(<StyledCheckboxCheckedIcon />)
|
2020-10-14 16:09:03 +00:00
|
|
|
|
);
|
|
|
|
|
checkboxCheckedDisabledIcon = getCssFromSvg(
|
|
|
|
|
ReactDOMServer.renderToString(
|
2021-02-26 13:29:50 +00:00
|
|
|
|
<StyledCheckboxCheckedIcon
|
2021-12-14 04:29:56 +00:00
|
|
|
|
//isfill={true}
|
|
|
|
|
//isStroke={true}
|
|
|
|
|
//stroke="#ECEEF1"
|
2020-10-14 16:09:03 +00:00
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
checkboxCheckedHoverIcon = getCssFromSvg(
|
|
|
|
|
ReactDOMServer.renderToString(
|
2021-02-26 13:29:50 +00:00
|
|
|
|
<StyledCheckboxCheckedIcon
|
2021-12-14 04:29:56 +00:00
|
|
|
|
//isfill={true}
|
|
|
|
|
//isStroke={true}
|
|
|
|
|
//stroke="#A3A9AE"
|
2020-10-14 16:09:03 +00:00
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
);
|
2019-07-31 13:37:13 +00:00
|
|
|
|
|
2020-10-14 16:09:03 +00:00
|
|
|
|
сheckboxIndeterminateIcon = getCssFromSvg(
|
2021-02-26 13:29:50 +00:00
|
|
|
|
ReactDOMServer.renderToString(<StyledCheckboxIndeterminateIcon />)
|
2020-10-14 16:09:03 +00:00
|
|
|
|
);
|
|
|
|
|
checkboxIndeterminateDisabledIcon = getCssFromSvg(
|
|
|
|
|
ReactDOMServer.renderToString(
|
2021-02-26 13:29:50 +00:00
|
|
|
|
<StyledCheckboxIndeterminateIcon
|
2021-12-14 04:29:56 +00:00
|
|
|
|
//isfill={true}
|
|
|
|
|
//isStroke={true}
|
|
|
|
|
//stroke="#ECEEF1"
|
2020-10-14 16:09:03 +00:00
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
checkboxIndeterminateHoverIcon = getCssFromSvg(
|
|
|
|
|
ReactDOMServer.renderToString(
|
2021-02-26 13:29:50 +00:00
|
|
|
|
<StyledCheckboxIndeterminateIcon
|
2021-12-14 04:29:56 +00:00
|
|
|
|
//isfill={true}
|
|
|
|
|
//isStroke={true}
|
|
|
|
|
//stroke="#A3A9AE"
|
2020-10-14 16:09:03 +00:00
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
);
|
2019-07-05 06:55:22 +00:00
|
|
|
|
|
2020-10-14 16:09:03 +00:00
|
|
|
|
treeIcon = getCssFromSvg(
|
2021-02-20 08:46:32 +00:00
|
|
|
|
ReactDOMServer.renderToString(<CatalogFolderIcon />)
|
2020-10-14 16:09:03 +00:00
|
|
|
|
);
|
|
|
|
|
})();
|
2019-06-11 12:00:02 +00:00
|
|
|
|
|
|
|
|
|
const TreeNodeMenu = styled(TreeNode)`
|
2020-10-16 13:16:01 +00:00
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0 0 6px 0;
|
|
|
|
|
list-style: none;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
outline: 0;
|
2019-06-28 09:11:56 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
font-family: Open Sans;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-weight: 600;
|
2021-09-14 10:51:37 +00:00
|
|
|
|
font-size: 13px;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
line-height: 24px;
|
2020-02-12 11:35:25 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
position: relative;
|
2020-06-18 07:08:36 +00:00
|
|
|
|
|
2021-02-15 12:22:21 +00:00
|
|
|
|
${NoUserSelect}
|
2020-02-12 11:35:25 +00:00
|
|
|
|
|
2021-05-15 21:50:09 +00:00
|
|
|
|
.rc-tree-node-selected {
|
2022-04-15 11:09:18 +00:00
|
|
|
|
max-width: ${(props) => (props.newItems > 999 ? "71%" : "87%")} !important;
|
2021-05-15 21:50:09 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-11-03 14:35:56 +00:00
|
|
|
|
${(props) =>
|
|
|
|
|
props.dragging &&
|
|
|
|
|
css`
|
2020-11-09 16:02:40 +00:00
|
|
|
|
.draggable {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
background: ${(props) =>
|
|
|
|
|
props.theme.treeNode.dragging.draggable.background};
|
|
|
|
|
border-radius: ${(props) =>
|
|
|
|
|
props.theme.treeNode.dragging.draggable.borderRadius};
|
2020-11-03 14:35:56 +00:00
|
|
|
|
${(props) =>
|
|
|
|
|
!props.isFullFillSelection &&
|
|
|
|
|
`
|
2021-12-14 04:29:56 +00:00
|
|
|
|
width: min-content !important;
|
2020-11-03 14:35:56 +00:00
|
|
|
|
padding-right: 4px;
|
2021-05-15 21:50:09 +00:00
|
|
|
|
max-width: ${(props) =>
|
|
|
|
|
props.newItems > 999 ? "71%" : "98%"} !important;
|
2020-11-03 14:35:56 +00:00
|
|
|
|
`}
|
|
|
|
|
|
|
|
|
|
:hover {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
background: ${(props) =>
|
|
|
|
|
props.theme.treeNode.dragging.draggable.hoverBackgroundColor};
|
2020-11-03 14:35:56 +00:00
|
|
|
|
}
|
|
|
|
|
.rc-tree-title {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
width: ${(props) =>
|
|
|
|
|
props.theme.treeNode.dragging.title.width} !important;
|
2020-11-03 14:35:56 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`}
|
2020-10-16 13:16:01 +00:00
|
|
|
|
.draggable {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
color: ${(props) => props.theme.treeNode.draggable.color};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
/* Required to make elements draggable in old WebKit */
|
|
|
|
|
-khtml-user-drag: none;
|
|
|
|
|
-webkit-user-drag: none;
|
|
|
|
|
}
|
|
|
|
|
&.drag-over > .draggable {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
background-color: ${(props) =>
|
|
|
|
|
props.theme.treeNode.draggable.dragOverBackgroundColor};
|
|
|
|
|
color: ${(props) => props.theme.treeNode.draggable.dragOverColor};
|
|
|
|
|
border: ${(props) => props.theme.treeNode.draggable.border};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
&.drag-over-gap-top > .draggable {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
border-top: ${(props) => props.theme.treeNode.draggable.gapTop.borderTop};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
|
|
|
|
&.drag-over-gap-bottom > .draggable {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
border-bottom: ${(props) =>
|
|
|
|
|
props.theme.treeNode.draggable.gapBottom.borderBottom};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
|
|
|
|
&.filter-node > .rc-tree-node-content-wrapper {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
color: ${(props) => props.theme.treeNode.contentWrapper.color} !important;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
font-weight: bold !important;
|
|
|
|
|
}
|
|
|
|
|
ul {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.rc-tree-node-content-wrapper {
|
2022-04-15 08:23:20 +00:00
|
|
|
|
// width: ${(props) => (props.disableSwitch ? "90%" : "108%")};
|
|
|
|
|
width: calc(100% - 16px);
|
2020-10-16 13:16:01 +00:00
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
2022-04-12 11:09:05 +00:00
|
|
|
|
z-index: 2;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
/*min-width: ${(props) => (props.disableSwitch ? "160px" : "190px")};*/
|
2020-10-30 14:56:24 +00:00
|
|
|
|
// overflow: hidden;
|
2020-02-13 13:23:12 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 24px;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
vertical-align: top;
|
2019-07-05 06:55:22 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
left: 0;
|
2021-12-14 04:29:56 +00:00
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
path {
|
|
|
|
|
fill: ${(props) => props.theme.treeNode.title.color};
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
2020-11-03 07:01:01 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
span.rc-tree-switcher,
|
|
|
|
|
span.rc-tree-iconEle {
|
|
|
|
|
line-height: 0;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
border: 0 none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-attachment: scroll;
|
2021-03-19 17:53:26 +00:00
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
height: 16px;
|
2022-04-15 12:04:35 +00:00
|
|
|
|
margin-top: 10px;
|
2021-03-19 17:53:26 +00:00
|
|
|
|
}
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
|
|
|
|
span.rc-tree-iconEle {
|
|
|
|
|
display: ${(props) => (props.icon ? "inline-block" : "none")};
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-switcher {
|
|
|
|
|
background-image: url("data:image/png;base64,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
|
|
|
|
|
z-index: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-iconEle {
|
|
|
|
|
margin: 3px 7px 3px 12px;
|
|
|
|
|
${(props) => props.disableSwitch && "margin-left: 0;"}
|
|
|
|
|
${(props) => props.disableSwitch && "margin-right: 10px;"}
|
|
|
|
|
height: 17px;
|
|
|
|
|
width: 17px;
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-switcher {
|
|
|
|
|
margin: 0px 4px;
|
2021-03-19 17:53:26 +00:00
|
|
|
|
vertical-align: 1px;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
height: 24px;
|
|
|
|
|
width: 8px;
|
2022-04-11 15:47:12 +00:00
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
|
|
|
|
span.rc-tree-switcher.rc-tree-icon__customize,
|
|
|
|
|
span.rc-tree-checkbox.rc-tree-icon__customize,
|
|
|
|
|
span.rc-tree-iconEle.rc-tree-icon__customize {
|
|
|
|
|
background-image: none;
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-icon_loading {
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
background: url("data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7")
|
|
|
|
|
no-repeat scroll 0 0 transparent;
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-switcher.rc-tree-switcher-noop {
|
|
|
|
|
cursor: auto;
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-switcher.rc-tree-switcher_open {
|
|
|
|
|
background-position: -93px -56px;
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-switcher.rc-tree-switcher_close {
|
|
|
|
|
background-position: -75px -56px;
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox {
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
border: 0 none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
margin: 0 3px;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-image: url("data:image/svg+xml,${checkboxIcon}");
|
|
|
|
|
}
|
2020-10-14 16:09:03 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
span.rc-tree-checkbox:hover {
|
|
|
|
|
background-image: url("data:image/svg+xml,${сheckboxHoverIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox.rc-tree-checkbox-checked:hover {
|
|
|
|
|
background-image: url("data:image/svg+xml,${checkboxCheckedHoverIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox-indeterminate:hover {
|
|
|
|
|
background-image: url("data:image/svg+xml,${checkboxIndeterminateHoverIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox-checked {
|
|
|
|
|
background-image: url("data:image/svg+xml,${checkboxСheckedIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox-indeterminate {
|
|
|
|
|
background-image: url("data:image/svg+xml,${сheckboxIndeterminateIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox-disabled,
|
|
|
|
|
span.rc-tree-checkbox-disabled:hover {
|
|
|
|
|
background-image: url("data:image/svg+xml,${сheckboxDisabledIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled {
|
|
|
|
|
background-image: url("data:image/svg+xml,${checkboxCheckedDisabledIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled {
|
|
|
|
|
background-image: url("data:image/svg+xml,${checkboxIndeterminateDisabledIcon}");
|
|
|
|
|
}
|
|
|
|
|
span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled::after {
|
|
|
|
|
content: " ";
|
|
|
|
|
-webkit-transform: scale(1);
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 3px;
|
|
|
|
|
top: 5px;
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 0;
|
2021-02-15 12:22:21 +00:00
|
|
|
|
border: ${(props) => props.theme.treeNode.checkbox.border};
|
|
|
|
|
border-top: ${(props) => props.theme.treeNode.checkbox.borderTop};
|
|
|
|
|
border-left: ${(props) => props.theme.treeNode.checkbox.borderLeft};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
|
|
|
|
span.rc-tree-title {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: ${(props) =>
|
|
|
|
|
!props.disableSwitch
|
|
|
|
|
? props.icon
|
2021-05-15 21:50:09 +00:00
|
|
|
|
? props.newItems > 999
|
|
|
|
|
? "calc(100% - 104px)"
|
|
|
|
|
: "calc(100% - 44px)"
|
2020-10-16 13:16:01 +00:00
|
|
|
|
: "calc(100% - 20px)"
|
|
|
|
|
: "100%"};
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
2021-02-15 12:22:21 +00:00
|
|
|
|
color: ${(props) => props.theme.treeNode.title.color};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
padding-left: ${(props) =>
|
|
|
|
|
props.icon || props.disableSwitch ? "0" : "20px"};
|
2022-04-15 12:04:35 +00:00
|
|
|
|
margin-top: 2px;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
|
|
|
|
span.rc-tree-title:first-child {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
2021-04-19 11:08:40 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
.rc-tree-node-selected {
|
2022-04-11 15:47:12 +00:00
|
|
|
|
//background: ${(props) => props.theme.treeNode.selected.background};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
mix-blend-mode: normal;
|
2021-02-15 12:22:21 +00:00
|
|
|
|
border-radius: ${(props) => props.theme.treeNode.selected.borderRadius};
|
2020-10-16 13:16:01 +00:00
|
|
|
|
z-index: 0;
|
|
|
|
|
${(props) =>
|
|
|
|
|
props.disableSwitch &&
|
|
|
|
|
css`
|
|
|
|
|
min-width: 0;
|
|
|
|
|
width: auto;
|
|
|
|
|
`}
|
|
|
|
|
:hover {
|
2021-02-15 12:22:21 +00:00
|
|
|
|
background: ${(props) =>
|
|
|
|
|
props.theme.treeNode.selected.hoverBackgroundColor};
|
2019-06-11 12:00:02 +00:00
|
|
|
|
}
|
2020-10-16 13:16:01 +00:00
|
|
|
|
overflow: visible;
|
2022-04-11 15:47:12 +00:00
|
|
|
|
z-index: 2;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-top: 4px;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
2020-10-30 14:56:24 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
.newItem {
|
|
|
|
|
position: absolute;
|
2021-05-15 21:50:09 +00:00
|
|
|
|
right: -10px;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
top: 2px;
|
2020-10-28 11:51:53 +00:00
|
|
|
|
@media (max-width: 1024px) {
|
2021-04-19 11:16:42 +00:00
|
|
|
|
right: -29px;
|
2020-10-28 11:51:53 +00:00
|
|
|
|
}
|
2020-10-16 13:16:01 +00:00
|
|
|
|
}
|
2020-10-23 11:26:10 +00:00
|
|
|
|
${(props) =>
|
2020-10-26 05:38:04 +00:00
|
|
|
|
props.needTopMargin &&
|
2020-10-23 11:26:10 +00:00
|
|
|
|
css`
|
|
|
|
|
margin-top: 18px !important;
|
2020-10-26 07:52:49 +00:00
|
|
|
|
@media (max-width: 1024px) {
|
|
|
|
|
margin-top: 14px !important;
|
|
|
|
|
}
|
2020-10-23 11:26:10 +00:00
|
|
|
|
`}
|
2019-06-11 12:00:02 +00:00
|
|
|
|
`;
|
|
|
|
|
|
2020-10-15 07:50:49 +00:00
|
|
|
|
TreeNodeMenu.propTypes = {
|
2021-03-13 22:00:46 +00:00
|
|
|
|
/** The number of new elements in the node */
|
2020-10-15 07:50:49 +00:00
|
|
|
|
newItems: PropTypes.number,
|
2021-03-13 22:00:46 +00:00
|
|
|
|
/** to display the badge */
|
2020-10-15 07:50:49 +00:00
|
|
|
|
showBadge: PropTypes.bool,
|
2021-03-13 22:00:46 +00:00
|
|
|
|
/** call when click on badge */
|
2020-10-16 13:16:01 +00:00
|
|
|
|
onBadgeClick: PropTypes.func,
|
2020-10-15 07:50:49 +00:00
|
|
|
|
};
|
2021-02-15 12:22:21 +00:00
|
|
|
|
TreeNodeMenu.defaultProps = { theme: Base };
|
2020-10-15 07:50:49 +00:00
|
|
|
|
|
2020-10-14 16:09:03 +00:00
|
|
|
|
export default TreeNodeMenu;
|