Jelajahi Sumber

Ellipsis组件tooltip属性支持TooltipProps, 修复Exception的linkElement的类型错误 (#2713)

* feat:(https://github.com/ant-design/ant-design-pro/issues/2649)

* fix:(https://github.com/ant-design/ant-design-pro/issues/2674)
michael 7 tahun lalu
induk
melakukan
344681e822

+ 8 - 1
src/components/Ellipsis/index.d.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
+import { TooltipProps } from 'antd/lib/tooltip';
+
+export interface IEllipsisTooltipProps extends TooltipProps {
+  title?: undefined;
+  overlayStyle?: undefined;
+}
+
 export interface IEllipsisProps {
-  tooltip?: boolean;
+  tooltip?: boolean | IEllipsisTooltipProps;
   length?: number;
   lines?: number;
   style?: React.CSSProperties;

+ 27 - 28
src/components/Ellipsis/index.js

@@ -38,6 +38,18 @@ export const cutStrByFullLength = (str = '', maxLength) => {
   }, '');
 };
 
+const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
+  if(tooltip) {
+    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
+    return (
+      <Tooltip {...props}>
+        {children}
+      </Tooltip>
+    )
+  }
+  return children;
+}
+
 const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
   if (typeof text !== 'string') {
     throw new Error('Ellipsis children must be string.');
@@ -54,23 +66,19 @@ const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other })
     displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
   }
 
-  if (tooltip) {
-    return (
-      <Tooltip overlayStyle={TooltipOverlayStyle} title={text}>
-        <span>
+  const spanAttrs = tooltip ? {} : { ...other };
+  return getTooltip(
+    {
+      tooltip,
+      overlayStyle:TooltipOverlayStyle,
+      title: text,
+      children: (
+        <span {...spanAttrs}>
           {displayText}
           {tail}
         </span>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <span {...other}>
-      {displayText}
-      {tail}
-    </span>
-  );
+      )
+    });
 };
 
 export default class Ellipsis extends Component {
@@ -230,13 +238,7 @@ export default class Ellipsis extends Component {
         </div>
       );
 
-      return tooltip ? (
-        <Tooltip overlayStyle={TooltipOverlayStyle} title={children}>
-          {node}
-        </Tooltip>
-      ) : (
-        node
-      );
+      return getTooltip({ tooltip, overlayStyle:TooltipOverlayStyle, title: children, children: node });
     }
 
     const childNode = (
@@ -246,16 +248,13 @@ export default class Ellipsis extends Component {
       </span>
     );
 
+
     return (
       <div {...restProps} ref={this.handleRoot} className={cls}>
         <div ref={this.handleContent}>
-          {tooltip ? (
-            <Tooltip overlayStyle={TooltipOverlayStyle} title={text}>
-              {childNode}
-            </Tooltip>
-          ) : (
-            childNode
-          )}
+          {
+            getTooltip({ tooltip, overlayStyle:TooltipOverlayStyle, title: text, children: childNode })
+          }
           <div className={styles.shadow} ref={this.handleShadowChildren}>
             {children}
           </div>

+ 1 - 1
src/components/Exception/index.d.ts

@@ -5,7 +5,7 @@ export interface IExceptionProps {
   desc?: React.ReactNode;
   img?: string;
   actions?: React.ReactNode;
-  linkElement?: React.ReactNode;
+  linkElement?: string | React.ComponentType;
   style?: React.CSSProperties;
   className?: string;
   backText?: React.ReactNode;