ant-design/components/popover/index.tsx

71 lines
1.8 KiB
TypeScript
Raw Normal View History

2016-09-21 11:54:53 +08:00
import React from 'react';
2016-10-24 12:04:26 +08:00
import assign from 'object-assign';
2016-04-07 15:02:22 +08:00
import Tooltip from '../tooltip';
import { TooltipPlacement } from '../tooltip';
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';
placement?: TooltipPlacement;
2016-07-29 14:45:06 +08:00
/** title of popup-container */
2016-10-24 12:04:26 +08:00
title?: React.ReactNode;
2016-07-29 14:45:06 +08:00
/** 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) => HTMLElement;
2016-07-29 14:45:06 +08:00
/** content of popup-container */
content?: React.ReactNode | string;
2016-07-29 14:45:06 +08:00
style?: React.CSSProperties;
transitionName?: string;
openClassName?: string;
arrowPointAtCenter?: boolean;
2016-07-29 14:45:06 +08:00
}
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
};
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>
);
}
render() {
const props = assign({}, this.props);
delete props.title;
return (
<Tooltip
{...props}
ref="tooltip"
overlay={this.getOverlay()}
/>
);
}
}