ant-design/components/popover/index.jsx

61 lines
1.3 KiB
React
Raw Normal View History

2015-06-19 12:29:22 +08:00
import React from 'react';
import Tooltip from 'rc-tooltip';
2015-06-19 12:29:22 +08:00
const prefixCls = 'ant-popover';
2015-06-17 16:58:13 +08:00
const Popover = React.createClass({
2015-06-17 17:15:34 +08:00
getDefaultProps() {
2015-06-17 16:58:13 +08:00
return {
prefixCls: prefixCls,
2015-06-17 16:58:13 +08:00
placement: 'top',
2015-08-19 20:16:20 +08:00
trigger: 'hover',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
2015-08-19 20:16:20 +08:00
overlayStyle: {}
2015-06-17 16:58:13 +08:00
};
},
2015-06-17 17:10:10 +08:00
render() {
2015-06-19 12:29:22 +08:00
const transitionName = ({
2015-06-17 17:10:10 +08:00
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
right: 'zoom-left',
topLeft: 'zoom-down',
bottomLeft: 'zoom-up',
leftTop: 'zoom-right',
rightTop: 'zoom-left',
topRight: 'zoom-down',
bottomRight: 'zoom-up',
leftBottom: 'zoom-right',
rightBottom: 'zoom-left',
2015-06-17 17:10:10 +08:00
})[this.props.placement];
2015-06-17 16:58:13 +08:00
return (
<Tooltip transitionName={transitionName}
2015-11-04 17:15:33 +08:00
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() {
return this.refs.tooltip.refs.trigger.popupDomNode;
},
getOverlay() {
return <div>
<div className={prefixCls + '-title'}>
{this.props.title}
</div>
<div className={prefixCls + '-content'}>
{this.props.overlay}
</div>
</div>;
},
2015-06-17 16:58:13 +08:00
});
export default Popover;