|
|
|
@ -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> |
|
|
|
|