Browse Source

refactor(Tooltip): rewrite Tooltip

pull/2177/head^2
bang88 9 years ago
parent
commit
38b18eef2d
  1. 2
      components/index.tsx
  2. 19
      components/tooltip/index.tsx

2
components/index.tsx

@ -7,3 +7,5 @@ export { default as Tag } from './Tag';
export { default as TimePicker } from './time-picker'; export { default as TimePicker } from './time-picker';
export { default as Timeline } from './timeline'; export { default as Timeline } from './timeline';
export { default as Tooltip } from './tooltip';

19
components/tooltip/index.tsx

@ -1,19 +1,30 @@
import React, { cloneElement } from 'react'; import * as React from 'react';
const { cloneElement } = React;
import RcTooltip from 'rc-tooltip'; import RcTooltip from 'rc-tooltip';
import getPlacements from '../popover/placements'; import getPlacements from '../popover/placements';
const placements = getPlacements({ const placements = getPlacements({
verticalArrowShift: 8, verticalArrowShift: 8,
}); });
type PopoverPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
export default class Tooltip extends React.Component { // Tooltip
export interface TooltipProps {
/** 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`*/
placement?: PopoverPlacement,
/** 提示文字*/
title?: string | React.ReactNode,
style?: React.CSSProperties
}
export default class Tooltip extends React.Component<TooltipProps, any> {
static defaultProps = { static defaultProps = {
prefixCls: 'ant-tooltip', prefixCls: 'ant-tooltip',
placement: 'top', placement: 'top',
transitionName: 'zoom-big', transitionName: 'zoom-big',
mouseEnterDelay: 0.1, mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1, mouseLeaveDelay: 0.1,
onVisibleChange() {}, onVisibleChange() { },
} }
constructor(props) { constructor(props) {
@ -86,7 +97,7 @@ export default class Tooltip extends React.Component {
ref="tooltip" ref="tooltip"
{...this.props} {...this.props}
onVisibleChange={this.onVisibleChange} onVisibleChange={this.onVisibleChange}
> >
{visible ? cloneElement(children, { className: childrenCls }) : children} {visible ? cloneElement(children, { className: childrenCls }) : children}
</RcTooltip> </RcTooltip>
); );

Loading…
Cancel
Save