|
1 | | -import React from 'react'; |
2 | 1 | import classNames from 'classnames'; |
3 | | -import BootstrapMixin from './BootstrapMixin'; |
4 | | -import CustomPropTypes from './utils/CustomPropTypes'; |
5 | | - |
6 | | -const Tooltip = React.createClass({ |
7 | | - mixins: [BootstrapMixin], |
8 | | - |
9 | | - propTypes: { |
10 | | - /** |
11 | | - * An html id attribute, necessary for accessibility |
12 | | - * @type {string} |
13 | | - * @required |
14 | | - */ |
15 | | - id: CustomPropTypes.isRequiredForA11y( |
16 | | - React.PropTypes.oneOfType([ |
17 | | - React.PropTypes.string, |
18 | | - React.PropTypes.number |
19 | | - ]) |
20 | | - ), |
21 | | - |
22 | | - /** |
23 | | - * Sets the direction the Tooltip is positioned towards. |
24 | | - */ |
25 | | - placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']), |
26 | | - |
27 | | - /** |
28 | | - * The "left" position value for the Tooltip. |
29 | | - */ |
30 | | - positionLeft: React.PropTypes.number, |
31 | | - /** |
32 | | - * The "top" position value for the Tooltip. |
33 | | - */ |
34 | | - positionTop: React.PropTypes.number, |
35 | | - /** |
36 | | - * The "left" position value for the Tooltip arrow. |
37 | | - */ |
38 | | - arrowOffsetLeft: React.PropTypes.oneOfType([ |
39 | | - React.PropTypes.number, React.PropTypes.string |
40 | | - ]), |
41 | | - /** |
42 | | - * The "top" position value for the Tooltip arrow. |
43 | | - */ |
44 | | - arrowOffsetTop: React.PropTypes.oneOfType([ |
45 | | - React.PropTypes.number, React.PropTypes.string |
46 | | - ]), |
47 | | - /** |
48 | | - * Title text |
49 | | - */ |
50 | | - title: React.PropTypes.node |
51 | | - }, |
| 2 | +import React from 'react'; |
52 | 3 |
|
53 | | - getDefaultProps() { |
54 | | - return { |
55 | | - placement: 'right' |
56 | | - }; |
57 | | - }, |
| 4 | +import CustomPropTypes from './utils/CustomPropTypes'; |
58 | 5 |
|
| 6 | +export default class Tooltip extends React.Component { |
59 | 7 | render() { |
60 | | - const classes = { |
61 | | - 'tooltip': true, |
62 | | - [this.props.placement]: true |
63 | | - }; |
64 | | - |
65 | | - const style = { |
66 | | - 'left': this.props.positionLeft, |
67 | | - 'top': this.props.positionTop, |
68 | | - ...this.props.style |
69 | | - }; |
70 | | - |
71 | | - const arrowStyle = { |
72 | | - 'left': this.props.arrowOffsetLeft, |
73 | | - 'top': this.props.arrowOffsetTop |
74 | | - }; |
| 8 | + const { |
| 9 | + placement, |
| 10 | + positionLeft, |
| 11 | + positionTop, |
| 12 | + arrowOffsetLeft, |
| 13 | + arrowOffsetTop, |
| 14 | + className, |
| 15 | + style, |
| 16 | + children, |
| 17 | + ...props |
| 18 | + } = this.props; |
75 | 19 |
|
76 | 20 | return ( |
77 | | - <div role="tooltip" {...this.props} className={classNames(this.props.className, classes)} style={style}> |
78 | | - <div className="tooltip-arrow" style={arrowStyle} /> |
79 | | - <div className="tooltip-inner"> |
80 | | - {this.props.children} |
81 | | - </div> |
| 21 | + <div |
| 22 | + role="tooltip" |
| 23 | + {...props} |
| 24 | + className={classNames(className, 'tooltip', placement)} |
| 25 | + style={{left: positionLeft, top: positionTop, ...style}} |
| 26 | + > |
| 27 | + <div |
| 28 | + className="tooltip-arrow" |
| 29 | + style={{left: arrowOffsetLeft, top: arrowOffsetTop}} |
| 30 | + /> |
| 31 | + |
| 32 | + <div className="tooltip-inner"> |
| 33 | + {children} |
82 | 34 | </div> |
83 | | - ); |
| 35 | + </div> |
| 36 | + ); |
84 | 37 | } |
85 | | -}); |
| 38 | +} |
| 39 | + |
| 40 | +Tooltip.propTypes = { |
| 41 | + /** |
| 42 | + * An html id attribute, necessary for accessibility |
| 43 | + * @type {string} |
| 44 | + * @required |
| 45 | + */ |
| 46 | + id: CustomPropTypes.isRequiredForA11y( |
| 47 | + React.PropTypes.oneOfType([ |
| 48 | + React.PropTypes.string, |
| 49 | + React.PropTypes.number |
| 50 | + ]) |
| 51 | + ), |
| 52 | + |
| 53 | + /** |
| 54 | + * The direction the tooltip is positioned towards |
| 55 | + */ |
| 56 | + placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']), |
| 57 | + |
| 58 | + /** |
| 59 | + * The `left` position value for the tooltip |
| 60 | + */ |
| 61 | + positionLeft: React.PropTypes.number, |
| 62 | + /** |
| 63 | + * The `top` position value for the tooltip |
| 64 | + */ |
| 65 | + positionTop: React.PropTypes.number, |
| 66 | + /** |
| 67 | + * The `left` position value for the tooltip arrow |
| 68 | + */ |
| 69 | + arrowOffsetLeft: React.PropTypes.oneOfType([ |
| 70 | + React.PropTypes.number, React.PropTypes.string |
| 71 | + ]), |
| 72 | + /** |
| 73 | + * The `top` position value for the tooltip arrow |
| 74 | + */ |
| 75 | + arrowOffsetTop: React.PropTypes.oneOfType([ |
| 76 | + React.PropTypes.number, React.PropTypes.string |
| 77 | + ]) |
| 78 | +}; |
86 | 79 |
|
87 | | -export default Tooltip; |
| 80 | +Tooltip.defaultProps = { |
| 81 | + placement: 'right' |
| 82 | +}; |
0 commit comments