Merge pull request #605 from jsonz1993/fix/cascader_tooltip

fix(cascader): 多选或筛选时文本过长的展示
Tencent · Apr 14, 2022 · ec5b6a4 · ec5b6a4
2 parents 967edac + c407fc3
commit ec5b6a4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/src/cascader/_example/ellipsis.jsx b/src/cascader/_example/ellipsis.jsx
@@ -48,7 +48,7 @@ export default function Example() {
 
   return (
     <div className="tdesign-demo-block-column">
-      <Cascader style={itemStyle} options={options} value={value1} onChange={onChange1} />
+      <Cascader style={itemStyle} options={options} value={value1} onChange={onChange1} filterable />
     </div>
   );
 }
diff --git a/src/cascader/components/Item.tsx b/src/cascader/components/Item.tsx
@@ -25,6 +25,13 @@ import { CheckboxProps } from '../../checkbox';
 const RenderLabelInner = (name: string, node: TreeNode, cascaderContext: CascaderContextType) => {
   const { filterActive, inputVal } = cascaderContext;
   const labelText = filterActive ? getFullPathLabel(node) : node.label;
+  const isEllipsis = getLabelIsEllipsis(labelText, cascaderContext.size);
+  const EllipsisNode = isEllipsis ? (
+    <div className={`${name}-label--ellipsis`}>
+      <Tooltip content={labelText} placement="top-left" />
+    </div>
+  ) : null;
+
   if (filterActive) {
     const texts = labelText.split(inputVal);
     const doms = [];
@@ -37,29 +44,32 @@ const RenderLabelInner = (name: string, node: TreeNode, cascaderContext: Cascade
         </span>,
       );
     }
-    return doms;
+    return (
+      <>
+        {doms}
+        {EllipsisNode}
+      </>
+    );
   }
-  return labelText;
+  return (
+    <>
+      {labelText}
+      {EllipsisNode}
+    </>
+  );
 };
 
 const RenderLabelContent = (node: TreeNode, cascaderContext: CascaderContextType) => {
   const { classPrefix: prefix } = useConfig();
   const name = `${prefix}-cascader__item`;
 
   const label = RenderLabelInner(name, node, cascaderContext);
-  const isEllipsis = getLabelIsEllipsis(node, cascaderContext.size);
 
-  if (isEllipsis) {
-    return (
-      <span className={`${name}-label`} role="label">
-        {label}
-        <div className={`${name}-label--ellipsis`}>
-          <Tooltip content={node.label} placement="top-left" />
-        </div>
-      </span>
-    );
-  }
-  return <span className={`${name}-label`}>{label}</span>;
+  return (
+    <span className={`${name}-label`} role="label">
+      {label}
+    </span>
+  );
 };
 
 const RenderCheckBox = (node: TreeNode, cascaderContext: CascaderContextType, handleChange) => {

diff --git a/src/cascader/utils/item.ts b/src/cascader/utils/item.ts
@@ -2,17 +2,17 @@ import { CascaderContextType, TreeNode, TreeNodeValue } from '../interface';
 
 /**
  * 是否显示省略计算方法
- * @param node
+ * @param label
  * @param size
  * @returns
  */
-export function getLabelIsEllipsis(node: TreeNode, size: CascaderContextType['size']) {
+export function getLabelIsEllipsis(label: string, size: CascaderContextType['size']) {
   const sizeMap = {
     small: 11,
     medium: 9,
     large: 8,
   };
-  return sizeMap[size] < node.label.length;
+  return sizeMap[size] < label.length;
 }
 
 export function getNodeStatusClass(node: TreeNode, CLASSNAMES: any, cascaderContext: CascaderContextType) {