antd/es/tree/style/index.js

An enterprise-class UI design language and React components implementation

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { Keyframes } from '@ant-design/cssinjs';
import { genCollapseMotion } from '../../style/motion';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { genFocusOutline, resetComponent } from '../../style'; // ============================ Keyframes =============================

var treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
  '0%': {
    opacity: 0
  },
  '100%': {
    opacity: 1
  }
}); // ============================== Switch ==============================

var getSwitchStyle = function getSwitchStyle(prefixCls, token) {
  return _defineProperty({}, ".".concat(prefixCls, "-switcher-icon"), {
    display: 'inline-block',
    fontSize: 10,
    verticalAlign: 'baseline',
    svg: {
      transition: "transform ".concat(token.motionDurationSlow)
    }
  });
}; // =============================== Drop ===============================


var getDropIndicatorStyle = function getDropIndicatorStyle(prefixCls, token) {
  return _defineProperty({}, ".".concat(prefixCls, "-drop-indicator"), {
    position: 'absolute',
    // it should displayed over the following node
    zIndex: 1,
    height: 2,
    backgroundColor: token.colorPrimary,
    borderRadius: 1,
    pointerEvents: 'none',
    '&:after': {
      position: 'absolute',
      top: -3,
      insetInlineStart: -6,
      width: 8,
      height: 8,
      backgroundColor: 'transparent',
      border: "".concat(token.lineWidthBold, "px solid ").concat(token.colorPrimary),
      borderRadius: '50%',
      content: '""'
    }
  });
};

export var genBaseStyle = function genBaseStyle(prefixCls, token) {
  var _$concat, _draggable, _$concat5, _$concat$con, _showLine, _extends2;

  var treeCls = token.treeCls,
      treeNodeCls = token.treeNodeCls,
      treeNodePadding = token.treeNodePadding,
      treeTitleHeight = token.treeTitleHeight;
  var treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2;
  var treeCheckBoxMarginHorizontal = token.paddingXS;
  return _defineProperty({}, treeCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    background: token.colorBgContainer,
    borderRadius: token.controlRadius,
    transition: "background-color ".concat(token.motionDurationSlow),
    '&&-rtl': _defineProperty({}, "".concat(treeCls, "-switcher"), {
      '&_close': _defineProperty({}, "".concat(treeCls, "-switcher-icon"), {
        svg: {
          transform: 'rotate(90deg)'
        }
      })
    }),
    '&-focused:not(:hover):not(&-active-focused)': _extends({}, genFocusOutline(token))
  }, _defineProperty(_extends2, "".concat(treeCls, "-list-holder-inner"), {
    alignItems: 'flex-start'
  }), _defineProperty(_extends2, "&".concat(treeCls, "-block-node"), _defineProperty({}, "".concat(treeCls, "-list-holder-inner"), (_$concat = {
    alignItems: 'stretch'
  }, _defineProperty(_$concat, "".concat(treeCls, "-node-content-wrapper"), {
    flex: 'auto'
  }), _defineProperty(_$concat, "".concat(treeNodeCls, ".dragging"), {
    position: 'relative',
    '&:after': {
      position: 'absolute',
      top: 0,
      insetInlineEnd: 0,
      bottom: treeNodePadding,
      insetInlineStart: 0,
      border: "1px solid ".concat(token.colorPrimary),
      opacity: 0,
      animationName: treeNodeFX,
      animationDuration: token.motionDurationSlow,
      animationPlayState: 'running',
      animationFillMode: 'forwards',
      content: '""',
      pointerEvents: 'none'
    }
  }), _$concat))), _defineProperty(_extends2, "".concat(treeNodeCls), (_$concat5 = {
    display: 'flex',
    alignItems: 'flex-start',
    padding: "0 0 ".concat(treeNodePadding, "px 0"),
    outline: 'none',
    '&-rtl': {
      direction: 'rtl'
    },
    // Disabled
    '&-disabled': _defineProperty({}, "".concat(treeCls, "-node-content-wrapper"), {
      color: token.colorTextDisabled,
      cursor: 'not-allowed',
      '&:hover': {
        background: 'transparent'
      }
    })
  }, _defineProperty(_$concat5, "&-active ".concat(treeCls, "-node-content-wrapper"), _extends({}, genFocusOutline(token))), _defineProperty(_$concat5, "&:not(&-disabled).filter-node ".concat(treeCls, "-title"), {
    color: 'inherit',
    fontWeight: 500
  }), _defineProperty(_$concat5, '&-draggable', (_draggable = {}, _defineProperty(_draggable, "".concat(treeCls, "-draggable-icon"), _defineProperty({
    width: treeTitleHeight,
    lineHeight: "".concat(treeTitleHeight, "px"),
    textAlign: 'center',
    visibility: 'visible',
    opacity: 0.2,
    transition: "opacity ".concat(token.motionDurationSlow)
  }, "".concat(treeNodeCls, ":hover &"), {
    opacity: 0.45
  })), _defineProperty(_draggable, "&".concat(treeNodeCls, "-disabled"), _defineProperty({}, "".concat(treeCls, "-draggable-icon"), {
    visibility: 'hidden'
  })), _draggable)), _$concat5)), _defineProperty(_extends2, "".concat(treeCls, "-indent"), {
    alignSelf: 'stretch',
    whiteSpace: 'nowrap',
    userSelect: 'none',
    '&-unit': {
      display: 'inline-block',
      width: treeTitleHeight
    }
  }), _defineProperty(_extends2, "".concat(treeCls, "-draggable-icon"), {
    visibility: 'hidden'
  }), _defineProperty(_extends2, "".concat(treeCls, "-switcher"), _extends(_extends({}, getSwitchStyle(prefixCls, token)), {
    position: 'relative',
    flex: 'none',
    alignSelf: 'stretch',
    width: treeTitleHeight,
    margin: 0,
    lineHeight: "".concat(treeTitleHeight, "px"),
    textAlign: 'center',
    cursor: 'pointer',
    userSelect: 'none',
    '&-noop': {
      cursor: 'default'
    },
    '&_close': _defineProperty({}, "".concat(treeCls, "-switcher-icon"), {
      svg: {
        transform: 'rotate(-90deg)'
      }
    }),
    '&-loading-icon': {
      color: token.colorPrimary
    },
    '&-leaf-line': {
      position: 'relative',
      zIndex: 1,
      display: 'inline-block',
      width: '100%',
      height: '100%',
      // https://github.com/ant-design/ant-design/issues/31884
      '&:before': {
        position: 'absolute',
        top: 0,
        insetInlineEnd: treeTitleHeight / 2,
        bottom: -treeNodePadding,
        marginInlineStart: -1,
        borderInlineEnd: "1px solid ".concat(token.colorBorder),
        content: '""'
      },
      '&:after': {
        position: 'absolute',
        width: treeTitleHeight / 2 * 0.8,
        height: treeTitleHeight / 2,
        borderBottom: "1px solid ".concat(token.colorBorder),
        content: '""'
      }
    }
  })), _defineProperty(_extends2, "".concat(treeCls, "-checkbox"), {
    top: 'initial',
    marginInlineEnd: treeCheckBoxMarginHorizontal,
    marginBlockStart: treeCheckBoxMarginVertical
  }), _defineProperty(_extends2, "\n        ".concat(treeCls, "-node-content-wrapper,\n        ").concat(treeCls, "-checkbox + span\n      "), (_$concat$con = {
    display: 'flex',
    flexWrap: 'nowrap',
    position: 'relative',
    zIndex: 'auto',
    minHeight: treeTitleHeight,
    margin: 0,
    padding: "0 ".concat(token.paddingXS / 2, "px"),
    color: 'inherit',
    lineHeight: "".concat(treeTitleHeight, "px"),
    background: 'transparent',
    borderRadius: token.controlRadius,
    cursor: 'pointer',
    transition: "all ".concat(token.motionDurationFast, ", border 0s, line-height 0s, box-shadow 0s"),
    '&:hover': {
      backgroundColor: token.controlItemBgHover
    }
  }, _defineProperty(_$concat$con, "&".concat(treeCls, "-node-selected"), {
    backgroundColor: token.controlOutline
  }), _defineProperty(_$concat$con, "".concat(treeCls, "-iconEle"), {
    display: 'inline-block',
    width: treeTitleHeight,
    height: treeTitleHeight,
    lineHeight: "".concat(treeTitleHeight, "px"),
    textAlign: 'center',
    verticalAlign: 'top',
    '&:empty': {
      display: 'none'
    }
  }), _$concat$con)), _defineProperty(_extends2, "".concat(treeCls, "-unselectable ").concat(treeCls, "-node-content-wrapper:hover"), {
    backgroundColor: 'transparent'
  }), _defineProperty(_extends2, "".concat(treeCls, "-node-content-wrapper"), _extends({
    lineHeight: "".concat(treeTitleHeight, "px"),
    userSelect: 'none'
  }, getDropIndicatorStyle(prefixCls, token))), _defineProperty(_extends2, "".concat(treeNodeCls, ".drop-container"), {
    '> [draggable]': {
      boxShadow: "0 0 0 2px ".concat(token.colorPrimary)
    }
  }), _defineProperty(_extends2, '&-show-line', (_showLine = {}, _defineProperty(_showLine, "".concat(treeCls, "-indent"), {
    '&-unit': {
      position: 'relative',
      height: '100%',
      '&:before': {
        position: 'absolute',
        top: 0,
        insetInlineEnd: treeTitleHeight / 2,
        bottom: -treeNodePadding,
        borderInlineEnd: "1px solid ".concat(token.colorBorder),
        content: '""'
      },
      '&-end': {
        '&:before': {
          display: 'none'
        }
      }
    }
  }), _defineProperty(_showLine, "".concat(treeCls, "-switcher"), {
    background: token.colorBgContainer,
    '&-line-icon': {
      // https://github.com/ant-design/ant-design/issues/32813
      verticalAlign: '-0.15em'
    }
  }), _showLine)), _defineProperty(_extends2, "".concat(treeNodeCls, "-leaf-last"), _defineProperty({}, "".concat(treeCls, "-switcher"), {
    '&-leaf-line': {
      '&:before': {
        top: 'auto !important',
        bottom: 'auto !important',
        height: "".concat(treeTitleHeight / 2, "px !important")
      }
    }
  })), _extends2)));
}; // ============================ Directory =============================

export var genDirectoryStyle = function genDirectoryStyle(token) {
  var _selected, _treeNodeCls;

  var treeCls = token.treeCls,
      treeNodeCls = token.treeNodeCls,
      treeNodePadding = token.treeNodePadding;
  return _defineProperty({}, "".concat(treeCls).concat(treeCls, "-directory"), _defineProperty({}, treeNodeCls, (_treeNodeCls = {
    position: 'relative',
    // Hover color
    '&:before': {
      position: 'absolute',
      top: 0,
      insetInlineEnd: 0,
      bottom: treeNodePadding,
      insetInlineStart: 0,
      transition: "background-color ".concat(token.motionDurationFast),
      content: '""',
      pointerEvents: 'none'
    },
    '&:hover': {
      '&:before': {
        background: token.controlItemBgHover
      }
    },
    // Elements
    '> *': {
      zIndex: 1
    }
  }, _defineProperty(_treeNodeCls, "".concat(treeCls, "-switcher"), {
    transition: "color ".concat(token.motionDurationFast)
  }), _defineProperty(_treeNodeCls, "".concat(treeCls, "-node-content-wrapper"), _defineProperty({
    borderRadius: 0,
    userSelect: 'none',
    '&:hover': {
      background: 'transparent'
    }
  }, "&.".concat(treeCls, "-node-selected"), {
    color: token.colorTextLightSolid,
    background: 'transparent'
  })), _defineProperty(_treeNodeCls, '&-selected', (_selected = {}, _defineProperty(_selected, "\n            &:hover::before,\n            &::before\n          ", {
    background: token.colorPrimary
  }), _defineProperty(_selected, "".concat(treeCls, "-switcher"), {
    color: token.colorTextLightSolid
  }), _defineProperty(_selected, "".concat(treeCls, "-node-content-wrapper"), {
    color: token.colorTextLightSolid,
    background: 'transparent'
  }), _selected)), _treeNodeCls)));
}; // ============================== Merged ==============================

export var genTreeStyle = function genTreeStyle(prefixCls, token) {
  var treeCls = ".".concat(prefixCls);
  var treeNodeCls = "".concat(treeCls, "-treenode");
  var treeNodePadding = token.paddingXS / 2;
  var treeTitleHeight = token.controlHeightSM;
  var treeToken = mergeToken(token, {
    treeCls: treeCls,
    treeNodeCls: treeNodeCls,
    treeNodePadding: treeNodePadding,
    treeTitleHeight: treeTitleHeight
  });
  return [// Basic
  genBaseStyle(prefixCls, treeToken), // Directory
  genDirectoryStyle(treeToken)];
}; // ============================== Export ==============================

export default genComponentStyleHook('Tree', function (token, _ref5) {
  var prefixCls = _ref5.prefixCls;
  return [_defineProperty({}, token.componentCls, getCheckboxStyle("".concat(prefixCls, "-checkbox"), token)), genTreeStyle(prefixCls, token), genCollapseMotion(token)];
});