2016-07-07 20:25:03 +08:00
|
|
|
import * as React from 'react';
|
2016-04-07 15:02:22 +08:00
|
|
|
import Tooltip from '../tooltip';
|
2016-03-09 17:23:10 +08:00
|
|
|
import getPlacements from './placements';
|
2015-09-28 21:02:04 +08:00
|
|
|
|
2016-03-09 17:23:10 +08:00
|
|
|
const placements = getPlacements();
|
2015-06-17 16:58:13 +08:00
|
|
|
|
2016-07-29 14:45:06 +08:00
|
|
|
export interface PopoverProps {
|
|
|
|
/** trigger type, options: `hover` `focus` `click` */
|
|
|
|
trigger?: 'hover' | 'focus' | 'click';
|
|
|
|
/** Position of popup-container,
|
|
|
|
* options: `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight`
|
|
|
|
* `leftTop` `leftBottom` `rightTop` `rightBottom`
|
|
|
|
*/
|
|
|
|
placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' |
|
|
|
|
'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
|
|
|
|
/** title of popup-container */
|
|
|
|
title?: React.ReactNode;
|
|
|
|
/** classname of popup-container */
|
|
|
|
overlayClassName?: string;
|
|
|
|
/** Style of overlay */
|
|
|
|
overlayStyle?: React.CSSProperties;
|
|
|
|
prefixCls?: string;
|
|
|
|
/** to control visibility of popup-container */
|
|
|
|
visible?: boolean;
|
|
|
|
/** callback when visible change */
|
|
|
|
onVisibleChange?: (visible: boolean) => void;
|
|
|
|
/** specify wrapper of popup-container */
|
|
|
|
getTooltipContainer?: (triggerNode: React.ReactNode) => React.ReactNode;
|
|
|
|
/** content of popup-container */
|
|
|
|
content?: React.ReactNode;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
transitionName?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
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
|
|
|
|
2015-09-28 21:02:04 +08:00
|
|
|
render() {
|
2015-06-17 16:58:13 +08:00
|
|
|
return (
|
2016-04-07 15:02:22 +08:00
|
|
|
<Tooltip transitionName={this.props.transitionName}
|
2016-03-09 17:23:10 +08:00
|
|
|
builtinPlacements={placements}
|
2016-01-07 17:46:46 +08:00
|
|
|
ref="tooltip"
|
|
|
|
{...this.props}
|
2016-06-06 13:54:10 +08:00
|
|
|
overlay={this.getOverlay()}
|
|
|
|
>
|
2015-06-17 16:58:13 +08:00
|
|
|
{this.props.children}
|
|
|
|
</Tooltip>
|
|
|
|
);
|
2016-03-20 20:41:34 +08:00
|
|
|
}
|
2015-09-28 21:02:04 +08:00
|
|
|
|
2015-11-04 17:15:33 +08:00
|
|
|
getPopupDomNode() {
|
2016-07-29 14:45:06 +08:00
|
|
|
return (this.refs as any).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-04-01 14:28:35 +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
|
|
|
}
|
|
|
|
}
|