|
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