fix(tree-select): label overflow

Tencent · Jan 11, 2023 · d4b7b47 · d4b7b47
1 parent 25be9eb
commit d4b7b47
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 22 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/dropdown/_example/multiple.jsx b/src/dropdown/_example/multiple.jsx
@@ -5,65 +5,115 @@ import { Icon } from 'tdesign-icons-react';
 export default function BasicDropdown() {
   const options = [
     {
-      content: '选项一',
+      content: '操作一',
       value: 1,
       children: [
         {
-          content: '选项九',
+          content: '操作九',
           value: 9,
         },
       ],
     },
     {
-      content: '选项二选项二选项二选项二',
+      content: '操作二操作二操作二操作二',
       value: 2,
       children: [
         {
-          content: '选项五',
+          content: '操作五',
           value: 5,
         },
         {
-          content: '选项六',
+          content: '操作六',
           value: 6,
-          children: [
-            {
-              content: '选项七',
-              value: 7,
-            },
-            {
-              content: '选项八',
-              value: 8,
-            },
-          ],
         },
       ],
     },
     {
-      content: '选项三',
+      content: '操作三',
       value: 3,
       children: [
         {
-          content: '选项十',
+          content: '操作十',
           value: 10,
         },
       ],
     },
     {
-      content: '选项四',
+      content: '操作四',
       value: 4,
       children: [
         {
-          content: '选项十一',
+          content: '操作十一',
           value: 11,
         },
       ],
     },
+    {
+      content: '操作五',
+      value: 5,
+      children: [
+        {
+          content: '操作十二',
+          value: 12,
+        },
+      ],
+    },
+    {
+      content: '操作六',
+      value: 6,
+      children: [
+        {
+          content: '操作十三',
+          value: 13,
+        },
+      ],
+    },
+    {
+      content: '操作七',
+      value: 7,
+    },
+    {
+      content: '操作八',
+      value: 8,
+    },
+    {
+      content: '操作十八',
+      value: 18,
+      children: [
+        {
+          content: '操作十四',
+          value: 14,
+        },
+        {
+          content: '操作十五',
+          value: 15,
+        },
+        {
+          content: '操作十六',
+          value: 16,
+          children: [
+            {
+              content: '三级操作一',
+              value: 20,
+            },
+            {
+              content: '三级操作二',
+              value: 21,
+            },
+          ],
+        },
+        {
+          content: '操作十七',
+          value: 17,
+        },
+      ],
+    },
   ];
   const clickHandler = (data) => {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
-    <Dropdown options={options} onClick={clickHandler}>
+    <Dropdown options={options} onClick={clickHandler} maxHeight={200}>
       <Button theme="default" variant="outline" shape="square">
         <Icon name="ellipsis" size="16" />
       </Button>

diff --git a/src/tree-select/_example/base.jsx b/src/tree-select/_example/base.jsx
@@ -13,6 +13,12 @@ const options = [
       {
         label: '深圳市',
         value: 'shenzhen',
+        children: [
+          {
+            label: '南山区海天二路33号腾讯滨海大厦',
+            value: 'Tencent',
+          },
+        ],
       },
     ],
   },

diff --git a/src/tree/TreeItem.tsx b/src/tree/TreeItem.tsx
@@ -222,7 +222,7 @@ const TreeItem = forwardRef((props: TreeItemProps, ref: React.Ref<HTMLDivElement
       );
     }
     return (
-      <span ref={setRefCurrent} date-target="label" className={labelClasses}>
+      <span ref={setRefCurrent} date-target="label" className={labelClasses} title={node.label}>
         <span style={{ position: 'relative' }}>{labelText}</span>
       </span>
     );