Browse Source

refactor ant-popover-open

pull/1604/head
afc163 9 years ago
parent
commit
5b6d356fb8
  1. 1
      components/popover/index.jsx
  2. 3
      components/popover/index.md
  3. 18
      components/tooltip/index.jsx
  4. 2
      components/tooltip/index.md

1
components/popover/index.jsx

@ -8,7 +8,6 @@ const placements = getPlacements();
export default class Popover extends React.Component { export default class Popover extends React.Component {
static defaultProps = { static defaultProps = {
prefixCls: 'ant-popover', prefixCls: 'ant-popover',
openClassName: 'ant-popup',
placement: 'top', placement: 'top',
transitionName: 'zoom-big', transitionName: 'zoom-big',
trigger: 'hover', trigger: 'hover',

3
components/popover/index.md

@ -26,5 +26,4 @@ english: Popover
| visible | 用于手动控制浮层显隐 | boolean | false | | visible | 用于手动控制浮层显隐 | boolean | false |
| onVisibleChange | 显示隐藏改变的回调 | function | 无 | | onVisibleChange | 显示隐藏改变的回调 | function | 无 |
| getTooltipContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](http://codepen.io/anon/pen/ONjyba?editors=001) | Function(triggerNode) | () => document.body | | getTooltipContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](http://codepen.io/anon/pen/ONjyba?editors=001) | Function(triggerNode) | () => document.body |
| openClassName | 气泡框展现时触发器添加的class,可用于触发时触发器的样式指定 | string | ant-popup | | openClassName | 气泡框展现时触发器添加的类名,可用于打开浮层时高亮触发器 | string | ant-popover-open |

18
components/tooltip/index.jsx

@ -1,4 +1,4 @@
import React from 'react'; import React, { cloneElement } from 'react';
import RcTooltip from 'rc-tooltip'; import RcTooltip from 'rc-tooltip';
import getPlacements from '../popover/placements'; import getPlacements from '../popover/placements';
@ -9,7 +9,6 @@ const placements = getPlacements({
export default class Tooltip extends React.Component { export default class Tooltip extends React.Component {
static defaultProps = { static defaultProps = {
prefixCls: 'ant-tooltip', prefixCls: 'ant-tooltip',
openClassName: 'ant-popup',
placement: 'top', placement: 'top',
transitionName: 'zoom-big', transitionName: 'zoom-big',
mouseEnterDelay: 0.1, mouseEnterDelay: 0.1,
@ -63,26 +62,29 @@ export default class Tooltip extends React.Component {
} }
render() { render() {
const { prefixCls, title, overlay, children, transitionName } = this.props;
// Hide tooltip when there is no title // Hide tooltip when there is no title
let visible = this.state.visible; let visible = this.state.visible;
if (!this.props.title && !this.props.overlay) { if (!title && !overlay) {
visible = false; visible = false;
} }
if ('visible' in this.props) { if ('visible' in this.props) {
visible = this.props.visible; visible = this.props.visible;
} }
const children = this.props.children; const openClassName = this.props.openClassName || `${prefixCls}-open`;
const childrenCls = children.props.className ? `${children.props.className} ${this.props.openClassName}` : this.props.openClassName; const childrenCls = (children && children.props && children.props.className)
? `${children.props.className} ${openClassName}` : openClassName;
return ( return (
<RcTooltip transitionName={this.props.transitionName} <RcTooltip
transitionName={transitionName}
builtinPlacements={placements} builtinPlacements={placements}
overlay={this.props.title} overlay={title}
visible={visible} visible={visible}
onVisibleChange={this.onVisibleChange} onVisibleChange={this.onVisibleChange}
onPopupAlign={this.onPopupAlign} onPopupAlign={this.onPopupAlign}
ref="tooltip" ref="tooltip"
{...this.props}> {...this.props}>
{visible ? React.cloneElement(children, { className: childrenCls }) : this.props.children} {visible ? cloneElement(children, { className: childrenCls, }) : children}
</RcTooltip> </RcTooltip>
); );
} }

2
components/tooltip/index.md

@ -19,5 +19,3 @@ english: Tooltip
|-----------|------------------------------------------|------------|--------| |-----------|------------------------------------------|------------|--------|
| placement | 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top | | placement | 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| title | 提示文字 | string/React.Element | 无 | | title | 提示文字 | string/React.Element | 无 |
| openClassName | 气泡框展现时触发器添加的class,可用于触发时触发器的样式指定 | string | ant-popup |

Loading…
Cancel
Save