You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

52 lines
1.4 KiB

import * as React from 'react';
import Tooltip, { AbstractTooltipProps, TooltipPlacement, TooltipTrigger } from '../tooltip';
import warning from '../_util/warning';
export interface PopoverProps extends AbstractTooltipProps {
6 years ago
title?: React.ReactNode;
content?: React.ReactNode;
}
export default class Popover extends React.Component<PopoverProps, {}> {
static defaultProps = {
prefixCls: 'ant-popover',
placement: 'top' as TooltipPlacement,
transitionName: 'zoom-big',
trigger: 'hover' as TooltipTrigger,
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
overlayStyle: {},
};
private tooltip: Tooltip;
getPopupDomNode() {
return this.tooltip.getPopupDomNode();
}
getOverlay() {
const { title, prefixCls, content } = this.props;
warning(
!('overlay' in this.props),
'Popover[overlay] is removed, please use Popover[content] instead, ' +
6 years ago
'see: https://u.ant.design/popover-content',
);
return (
<div>
{title && <div className={`${prefixCls}-title`}>{title}</div>}
6 years ago
<div className={`${prefixCls}-inner-content`}>{content}</div>
</div>
);
}
saveTooltip = (node: any) => {
this.tooltip = node;
6 years ago
};
render() {
const props = { ...this.props };
delete props.title;
6 years ago
return <Tooltip {...props} ref={this.saveTooltip} overlay={this.getOverlay()} />;
}
}