feat: add titleEllipsis api

assets/index.less

@@ -64,6 +64,11 @@
       vertical-align: top;
       cursor: pointer;
     }
+    .@{treePrefixCls}-node-content-ellipsis{
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     span {
       &.@{treePrefixCls}-switcher,
       &.@{treePrefixCls}-checkbox,

examples/basic.jsx

@@ -109,6 +109,7 @@ class Demo extends React.Component {
         <Tree
           ref={this.setTreeRef}
           className="myCls"
+          titleEllipsis
           showLine
           checkable
           defaultExpandAll

src/NodeList.tsx

@@ -59,6 +59,7 @@ interface NodeListProps {
   activeItem: FlattenNode;
   focused?: boolean;
   tabIndex: number;
+  titleEllipsis?: boolean;
   checkable?: boolean;
   selectable?: boolean;
   disabled?: boolean;
@@ -121,10 +122,7 @@ function getAccessibilityPath(item: FlattenNode): string {
   return path;
 }
 
-const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
-  props,
-  ref,
-) => {
+const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (props, ref) => {
   const {
     prefixCls,
     data,
@@ -138,6 +136,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
     halfCheckedKeys,
     keyEntities,
     disabled,
+    titleEllipsis,
 
     dragging,
     dragOverNodeKey,
@@ -175,9 +174,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
   const [prevData, setPrevData] = React.useState(data);
   const [transitionData, setTransitionData] = React.useState(data);
   const [transitionRange, setTransitionRange] = React.useState([]);
-  const [motionType, setMotionType] = React.useState<'show' | 'hide' | null>(
-    null,
-  );
+  const [motionType, setMotionType] = React.useState<'show' | 'hide' | null>(null);
 
   function onMotionEnd() {
     setPrevData(data);
@@ -195,9 +192,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
 
     if (diffExpanded.key !== null) {
       if (diffExpanded.add) {
-        const keyIndex = prevData.findIndex(
-          ({ data: { key } }) => key === diffExpanded.key,
-        );
+        const keyIndex = prevData.findIndex(({ data: { key } }) => key === diffExpanded.key);
 
         if (motion) setDisableVirtual(true);
         const rangeNodes = getMinimumRangeTransitionRange(
@@ -213,9 +208,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
         setTransitionRange(rangeNodes);
         setMotionType('show');
       } else {
-        const keyIndex = data.findIndex(
-          ({ data: { key } }) => key === diffExpanded.key,
-        );
+        const keyIndex = data.findIndex(({ data: { key } }) => key === diffExpanded.key);
 
         if (motion) setDisableVirtual(true);
         const rangeNodes = getMinimumRangeTransitionRange(
@@ -303,10 +296,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
           const mergedKey = getKey(key, pos);
           delete restProps.children;
 
-          const treeNodeProps = getTreeNodeProps(
-            mergedKey,
-            treeNodeRequiredProps,
-          );
+          const treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps);
 
           return (
             <MotionTreeNode
@@ -318,6 +308,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
               isStart={isStart}
               isEnd={isEnd}
               motion={motion}
+              titleEllipsis={titleEllipsis}
               motionNodes={key === MOTION_KEY ? transitionRange : null}
               motionType={motionType}
               onMotionEnd={onMotionEnd}

src/Tree.tsx

@@ -58,6 +58,7 @@ export interface TreeProps {
   style?: React.CSSProperties;
   focusable?: boolean;
   tabIndex?: number;
+  titleEllipsis?: boolean;
   children?: React.ReactNode;
   treeData?: DataNode[]; // Generate treeNode by children
   showLine?: boolean;
@@ -178,6 +179,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     className: PropTypes.string,
     style: PropTypes.object,
     tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    titleEllipsis: PropTypes.bool,
     children: PropTypes.any,
     treeData: PropTypes.array, // Generate treeNode by children
     showLine: PropTypes.bool,
@@ -222,6 +224,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
 
   static defaultProps = {
     prefixCls: 'rc-tree',
+    titleEllipsis: false,
     showLine: false,
     showIcon: true,
     selectable: true,
@@ -1038,6 +1041,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
       showLine,
       focusable,
       tabIndex = 0,
+      titleEllipsis,
       selectable,
       showIcon,
       icon,
@@ -1112,6 +1116,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
             focusable={focusable}
             focused={focused}
             tabIndex={tabIndex}
+            titleEllipsis={titleEllipsis}
             activeItem={this.getActiveItem()}
             onFocus={this.onFocus}
             onBlur={this.onBlur}

src/TreeNode.tsx

@@ -28,6 +28,7 @@ export interface TreeNodeProps {
   loading?: boolean;
   halfChecked?: boolean;
   title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
+  titleEllipsis?: boolean;
   dragOver?: boolean;
   dragOverGapTop?: boolean;
   dragOverGapBottom?: boolean;
@@ -75,6 +76,7 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
     loading: PropTypes.bool,
     halfChecked: PropTypes.bool,
     title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    titleEllipsis: PropTypes.bool,
     dragOver: PropTypes.bool,
     dragOverGapTop: PropTypes.bool,
     dragOverGapBottom: PropTypes.bool,
@@ -428,13 +430,14 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
   // Icon + Title
   renderSelector = () => {
     const { dragNodeHighlight } = this.state;
-    const { title, selected, icon, loading, data } = this.props;
+    const { title, titleEllipsis, selected, icon, loading, data } = this.props;
     const {
       context: { prefixCls, showIcon, icon: treeIcon, draggable, loadData },
     } = this.props;
     const disabled = this.isDisabled();
 
     const wrapClass = `${prefixCls}-node-content-wrapper`;
+    const titleEllipsisClass = `${prefixCls}-node-content-ellipsis`;
 
     // Icon - Still show loading icon when loading without showIcon
     let $icon;
@@ -469,6 +472,7 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
           `${wrapClass}-${this.getNodeState() || 'normal'}`,
           !disabled && (selected || dragNodeHighlight) && `${prefixCls}-node-selected`,
           !disabled && draggable && 'draggable',
+          { [`${titleEllipsisClass}`]: titleEllipsis },
         )}
         draggable={(!disabled && draggable) || undefined}
         aria-grabbed={(!disabled && draggable) || undefined}