2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2016-04-07 15:02:22 +08:00
|
|
|
import Tooltip from '../tooltip';
|
2016-11-30 16:43:35 +08:00
|
|
|
import { AbstractTooltipProps } from '../tooltip';
|
2016-12-02 15:07:33 +08:00
|
|
|
import warning from '../_util/warning';
|
2015-06-17 16:58:13 +08:00
|
|
|
|
2016-11-30 16:43:35 +08:00
|
|
|
export interface PopoverProps extends AbstractTooltipProps {
|
2016-10-24 12:04:26 +08:00
|
|
|
title?: React.ReactNode;
|
2016-12-22 12:00:57 +08:00
|
|
|
content?: React.ReactNode;
|
2016-07-29 14:45:06 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class Popover extends React.Component<PopoverProps, any> {
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
2016-04-01 01:36:42 +08:00
|
|
|
prefixCls: 'ant-popover',
|
2016-03-29 14:01:10 +08:00
|
|
|
placement: 'top',
|
2016-04-07 15:02:22 +08:00
|
|
|
transitionName: 'zoom-big',
|
2016-03-29 14:01:10 +08:00
|
|
|
trigger: 'hover',
|
|
|
|
mouseEnterDelay: 0.1,
|
|
|
|
mouseLeaveDelay: 0.1,
|
2016-04-01 01:36:42 +08:00
|
|
|
overlayStyle: {},
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2016-11-30 16:43:35 +08:00
|
|
|
refs: {
|
|
|
|
tooltip: Tooltip,
|
|
|
|
};
|
|
|
|
|
2015-11-04 17:15:33 +08:00
|
|
|
getPopupDomNode() {
|
2016-11-30 16:43:35 +08:00
|
|
|
return this.refs.tooltip.getPopupDomNode();
|
2016-03-20 20:41:34 +08:00
|
|
|
}
|
2015-11-04 17:15:33 +08:00
|
|
|
|
2015-09-28 21:02:04 +08:00
|
|
|
getOverlay() {
|
2016-09-09 13:55:46 +08:00
|
|
|
const { title, prefixCls, content } = this.props;
|
2016-12-02 15:07:33 +08:00
|
|
|
warning(
|
|
|
|
!('overlay' in this.props),
|
|
|
|
'Popover[overlay] is removed, please use Popover[content] instead, ' +
|
2017-07-19 13:59:53 +08:00
|
|
|
'see: https://u.ant.design/popover-content',
|
2016-12-02 15:07:33 +08:00
|
|
|
);
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
|
|
|
<div>
|
2016-04-01 01:36:42 +08:00
|
|
|
{title && <div className={`${prefixCls}-title`}>{title}</div>}
|
2016-03-17 15:10:49 +08:00
|
|
|
<div className={`${prefixCls}-inner-content`}>
|
2016-09-09 13:55:46 +08:00
|
|
|
{content}
|
2016-01-07 14:21:29 +08:00
|
|
|
</div>
|
2015-09-28 21:02:04 +08:00
|
|
|
</div>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2016-03-20 20:41:34 +08:00
|
|
|
}
|
2016-11-30 15:46:50 +08:00
|
|
|
|
|
|
|
render() {
|
2017-07-03 16:57:11 +08:00
|
|
|
const props = { ...this.props };
|
2016-11-30 15:46:50 +08:00
|
|
|
delete props.title;
|
|
|
|
return (
|
|
|
|
<Tooltip
|
|
|
|
{...props}
|
|
|
|
ref="tooltip"
|
|
|
|
overlay={this.getOverlay()}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2016-03-20 20:41:34 +08:00
|
|
|
}
|