ant-design/components/popover/index.tsx

76 lines
2.1 KiB
TypeScript
Raw Normal View History

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';
import getPlacements from './placements';
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> {
static defaultProps = {
2016-04-01 01:36:42 +08:00
prefixCls: 'ant-popover',
placement: 'top',
2016-04-07 15:02:22 +08:00
transitionName: 'zoom-big',
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
};
render() {
2015-06-17 16:58:13 +08:00
return (
2016-04-07 15:02:22 +08:00
<Tooltip transitionName={this.props.transitionName}
builtinPlacements={placements}
ref="tooltip"
{...this.props}
overlay={this.getOverlay()}
>
2015-06-17 16:58:13 +08:00
{this.props.children}
</Tooltip>
);
}
2015-11-04 17:15:33 +08:00
getPopupDomNode() {
2016-07-29 14:45:06 +08:00
return (this.refs as any).tooltip.getPopupDomNode();
}
2015-11-04 17:15:33 +08:00
getOverlay() {
const { title, prefixCls, content } = this.props;
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`}>
{content}
</div>
</div>
);
}
}