DocSpace-buildtools/packages/asc-web-components/tree-menu/sub-components/tree-node.js

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";
import PropTypes from "prop-types";
import NoUserSelect from "../../utils/commonStyles";
import Base from "../../themes/base";
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";
import commonIconsStyles from "../../utils/common-icons-style";

const StyledCheckboxIcon = styled(CheckboxIcon)`
  ${(props) => props.color && `color: ${props.color}`};
  ${commonIconsStyles}
`;

const StyledCheckboxCheckedIcon = styled(CheckboxCheckedIcon)`
  ${(props) => props.color && `color: ${props.color}`};
  ${commonIconsStyles}
`;

const StyledCheckboxIndeterminateIcon = styled(CheckboxIndeterminateIcon)`
  ${(props) => props.color && `color: ${props.color}`};
  ${commonIconsStyles}
`;

var checkboxIcon,
  checkboxСheckedIcon,
  сheckboxDisabledIcon,
  сheckboxHoverIcon,
  сheckboxIndeterminateIcon,
  checkboxCheckedDisabledIcon,
  checkboxCheckedHoverIcon,
  checkboxIndeterminateDisabledIcon,
  checkboxIndeterminateHoverIcon,
  // eslint-disable-next-line no-unused-vars
  treeIcon;

(function () {
  checkboxIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIcon />)
  );
  сheckboxDisabledIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIcon color="#F8F9F9" />)
  );
  сheckboxHoverIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIcon color="white" />)
  );

  checkboxСheckedIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxCheckedIcon />)
  );
  checkboxCheckedDisabledIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxCheckedIcon
        //isfill={true}
        color="#F8F9F9"
        //isStroke={true}
        //stroke="#ECEEF1"
      />
    )
  );
  checkboxCheckedHoverIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxCheckedIcon
        //isfill={true}
        color="white"
        //isStroke={true}
        //stroke="#A3A9AE"
      />
    )
  );

  сheckboxIndeterminateIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIndeterminateIcon />)
  );
  checkboxIndeterminateDisabledIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxIndeterminateIcon
        //isfill={true}
        color="#F8F9F9"
        //isStroke={true}
        //stroke="#ECEEF1"
      />
    )
  );
  checkboxIndeterminateHoverIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxIndeterminateIcon
        //isfill={true}
        color="white"
        //isStroke={true}
        //stroke="#A3A9AE"
      />
    )
  );

  treeIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<CatalogFolderIcon />)
  );
})();

const TreeNodeMenu = styled(TreeNode)`
  padding: 0;
  margin: 0 0 6px 0;
  list-style: none;
  white-space: nowrap;
  outline: 0;

  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 24px;

  position: relative;

  ${NoUserSelect}

  .rc-tree-node-selected {
    max-width: ${(props) => (props.newItems > 999 ? "71%" : "102%")} !important;
  }

  ${(props) =>
    props.dragging &&
    css`
      .draggable {
        background: ${(props) =>
          props.theme.treeNode.dragging.draggable.background};
        border-radius: ${(props) =>
          props.theme.treeNode.dragging.draggable.borderRadius};
        ${(props) =>
          !props.isFullFillSelection &&
          `
            width: min-content !important; 
            padding-right: 4px;
            max-width: ${(props) =>
              props.newItems > 999 ? "71%" : "98%"} !important;
          `}

        :hover {
          background: ${(props) =>
            props.theme.treeNode.dragging.draggable.hoverBackgroundColor};
        }
        .rc-tree-title {
          width: ${(props) =>
            props.theme.treeNode.dragging.title.width} !important;
        }
      }
    `}
  .draggable {
    color: ${(props) => props.theme.treeNode.draggable.color};
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: none;
    -webkit-user-drag: none;
  }
  &.drag-over > .draggable {
    background-color: ${(props) =>
      props.theme.treeNode.draggable.dragOverBackgroundColor};
    color: ${(props) => props.theme.treeNode.draggable.dragOverColor};
    border: ${(props) => props.theme.treeNode.draggable.border};
    opacity: 0.8;
  }
  &.drag-over-gap-top > .draggable {
    border-top: ${(props) => props.theme.treeNode.draggable.gapTop.borderTop};
  }
  &.drag-over-gap-bottom > .draggable {
    border-bottom: ${(props) =>
      props.theme.treeNode.draggable.gapBottom.borderBottom};
  }
  &.filter-node > .rc-tree-node-content-wrapper {
    color: ${(props) => props.theme.treeNode.contentWrapper.color} !important;
    font-weight: bold !important;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  .rc-tree-node-content-wrapper {
    width: ${(props) => (props.disableSwitch ? "90%" : "108%")};
    display: inline-block;
    position: relative;
    /*min-width: ${(props) => (props.disableSwitch ? "160px" : "190px")};*/
    // overflow: hidden;

    cursor: pointer;
    height: 24px;
    text-decoration: none;
    vertical-align: top;

    left: 0;
  }

  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;

    svg {
      height: 16px;
    }
  }
  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;
    vertical-align: 1px;
    height: 24px;
    width: 8px;
  }
  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}");
  }

  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;
    border: ${(props) => props.theme.treeNode.checkbox.border};
    border-top: ${(props) => props.theme.treeNode.checkbox.borderTop};
    border-left: ${(props) => props.theme.treeNode.checkbox.borderLeft};
  }
  span.rc-tree-title {
    display: inline-block;
    width: ${(props) =>
      !props.disableSwitch
        ? props.icon
          ? props.newItems > 999
            ? "calc(100% - 104px)"
            : "calc(100% - 44px)"
          : "calc(100% - 20px)"
        : "100%"};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: ${(props) => props.theme.treeNode.title.color};
    padding-left: ${(props) =>
      props.icon || props.disableSwitch ? "0" : "20px"};
  }
  span.rc-tree-title:first-child {
    max-width: 100%;
  }

  .rc-tree-node-selected {
    background: ${(props) => props.theme.treeNode.selected.background};
    mix-blend-mode: normal;
    border-radius: ${(props) => props.theme.treeNode.selected.borderRadius};
    z-index: 0;
    ${(props) =>
      props.disableSwitch &&
      css`
        min-width: 0;
        width: auto;
      `}
    :hover {
      background: ${(props) =>
        props.theme.treeNode.selected.hoverBackgroundColor};
    }
    overflow: visible;
  }

  .newItem {
    position: absolute;
    right: -10px;
    top: 2px;
    @media (max-width: 1024px) {
      right: -29px;
    }
  }
  ${(props) =>
    props.needTopMargin &&
    css`
      margin-top: 18px !important;
      @media (max-width: 1024px) {
        margin-top: 14px !important;
      }
    `}
`;

TreeNodeMenu.propTypes = {
  /** The number of new elements in the node */
  newItems: PropTypes.number,
  /** to display the badge */
  showBadge: PropTypes.bool,
  /** call when click on badge */
  onBadgeClick: PropTypes.func,
};
TreeNodeMenu.defaultProps = { theme: Base };

export default TreeNodeMenu;