From 5b6d356fb85b9040488a846383976284d32a6439 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 7 May 2016 15:37:26 +0800 Subject: [PATCH] refactor ant-popover-open --- components/popover/index.jsx | 1 - components/popover/index.md | 3 +-- components/tooltip/index.jsx | 18 ++++++++++-------- components/tooltip/index.md | 2 -- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/components/popover/index.jsx b/components/popover/index.jsx index b232b66c61..cd79327ab9 100644 --- a/components/popover/index.jsx +++ b/components/popover/index.jsx @@ -8,7 +8,6 @@ const placements = getPlacements(); export default class Popover extends React.Component { static defaultProps = { prefixCls: 'ant-popover', - openClassName: 'ant-popup', placement: 'top', transitionName: 'zoom-big', trigger: 'hover', diff --git a/components/popover/index.md b/components/popover/index.md index 24b64c0da9..5c87d0f325 100644 --- a/components/popover/index.md +++ b/components/popover/index.md @@ -26,5 +26,4 @@ english: Popover | visible | 用于手动控制浮层显隐 | boolean | false | | onVisibleChange | 显示隐藏改变的回调 | function | 无 | | getTooltipContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](http://codepen.io/anon/pen/ONjyba?editors=001) | Function(triggerNode) | () => document.body | -| openClassName | 气泡框展现时触发器添加的class,可用于触发时触发器的样式指定 | string | ant-popup | - +| openClassName | 气泡框展现时触发器添加的类名,可用于打开浮层时高亮触发器 | string | ant-popover-open | diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index e52cd710b3..9c4962e4bd 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { cloneElement } from 'react'; import RcTooltip from 'rc-tooltip'; import getPlacements from '../popover/placements'; @@ -9,7 +9,6 @@ const placements = getPlacements({ export default class Tooltip extends React.Component { static defaultProps = { prefixCls: 'ant-tooltip', - openClassName: 'ant-popup', placement: 'top', transitionName: 'zoom-big', mouseEnterDelay: 0.1, @@ -63,26 +62,29 @@ export default class Tooltip extends React.Component { } render() { + const { prefixCls, title, overlay, children, transitionName } = this.props; // Hide tooltip when there is no title let visible = this.state.visible; - if (!this.props.title && !this.props.overlay) { + if (!title && !overlay) { visible = false; } if ('visible' in this.props) { visible = this.props.visible; } - const children = this.props.children; - const childrenCls = children.props.className ? `${children.props.className} ${this.props.openClassName}` : this.props.openClassName; + const openClassName = this.props.openClassName || `${prefixCls}-open`; + const childrenCls = (children && children.props && children.props.className) + ? `${children.props.className} ${openClassName}` : openClassName; return ( - - {visible ? React.cloneElement(children, { className: childrenCls }) : this.props.children} + {visible ? cloneElement(children, { className: childrenCls, }) : children} ); } diff --git a/components/tooltip/index.md b/components/tooltip/index.md index f0a4305262..64f23567aa 100644 --- a/components/tooltip/index.md +++ b/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 | | title | 提示文字 | string/React.Element | 无 | -| openClassName | 气泡框展现时触发器添加的class,可用于触发时触发器的样式指定 | string | ant-popup | -