Commit 344681e8 authored by michael's avatar michael Committed by 陈帅

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)
parent b042b097
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;
......
......@@ -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>
{displayText}
{tail}
</span>
</Tooltip>
);
}
return (
<span {...other}>
const spanAttrs = tooltip ? {} : { ...other };
return getTooltip(
{
tooltip,
overlayStyle:TooltipOverlayStyle,
title: text,
children: (
<span {...spanAttrs}>
{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>
......
......@@ -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;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment