2019-10-07 11:39:21 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import ReactTooltip from "react-tooltip";
|
2021-10-29 11:24:48 +00:00
|
|
|
import Portal from "../portal";
|
2021-02-05 11:10:15 +00:00
|
|
|
import StyledTooltip from "./styled-tooltip";
|
2019-10-07 11:39:21 +00:00
|
|
|
|
|
|
|
class Tooltip extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
2019-10-14 12:58:33 +00:00
|
|
|
componentDidUpdate() {
|
|
|
|
ReactTooltip.rebuild();
|
|
|
|
}
|
|
|
|
|
2019-10-07 11:39:21 +00:00
|
|
|
render() {
|
2019-10-08 12:00:27 +00:00
|
|
|
const {
|
|
|
|
effect,
|
|
|
|
place,
|
|
|
|
id,
|
|
|
|
getContent,
|
|
|
|
offsetTop,
|
|
|
|
offsetRight,
|
|
|
|
offsetBottom,
|
2019-10-14 07:30:03 +00:00
|
|
|
offsetLeft,
|
2019-10-17 10:53:11 +00:00
|
|
|
children,
|
|
|
|
afterShow,
|
2019-10-17 12:49:01 +00:00
|
|
|
afterHide,
|
2019-12-03 13:55:43 +00:00
|
|
|
reference,
|
|
|
|
className,
|
2020-10-16 13:16:01 +00:00
|
|
|
style,
|
2021-06-09 01:02:28 +00:00
|
|
|
color,
|
2021-10-28 12:06:43 +00:00
|
|
|
maxWidth,
|
2019-10-08 12:00:27 +00:00
|
|
|
} = this.props;
|
2019-10-07 11:39:21 +00:00
|
|
|
|
2021-10-29 11:24:48 +00:00
|
|
|
const renderTooltip = () => (
|
2021-10-28 12:06:43 +00:00
|
|
|
<StyledTooltip
|
|
|
|
className={className}
|
|
|
|
style={style}
|
|
|
|
color={color}
|
|
|
|
maxWidth={maxWidth}
|
|
|
|
>
|
2019-10-07 11:39:21 +00:00
|
|
|
<ReactTooltip
|
2019-10-08 08:42:12 +00:00
|
|
|
id={id}
|
2019-10-17 12:49:01 +00:00
|
|
|
ref={reference}
|
2019-10-08 08:42:12 +00:00
|
|
|
getContent={getContent}
|
|
|
|
type="light"
|
2019-10-07 11:39:21 +00:00
|
|
|
effect={effect}
|
|
|
|
place={place}
|
2019-10-08 12:00:27 +00:00
|
|
|
offset={{
|
|
|
|
top: offsetTop,
|
|
|
|
right: offsetRight,
|
|
|
|
bottom: offsetBottom,
|
2020-10-16 13:16:01 +00:00
|
|
|
left: offsetLeft,
|
2019-10-08 12:00:27 +00:00
|
|
|
}}
|
2019-10-10 11:46:12 +00:00
|
|
|
wrapper="div"
|
2019-10-17 10:53:11 +00:00
|
|
|
afterShow={afterShow}
|
|
|
|
afterHide={afterHide}
|
2019-10-18 06:41:26 +00:00
|
|
|
isCapture={true}
|
2019-10-14 07:30:03 +00:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</ReactTooltip>
|
2021-10-29 11:24:48 +00:00
|
|
|
</StyledTooltip>
|
2019-10-07 11:39:21 +00:00
|
|
|
);
|
2021-10-29 11:24:48 +00:00
|
|
|
|
|
|
|
const tooltip = renderTooltip();
|
|
|
|
|
|
|
|
return <Portal element={tooltip} />;
|
2019-10-07 11:39:21 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Tooltip.propTypes = {
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Used as HTML id property */
|
2019-10-08 08:42:12 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Behavior of tooltip */
|
2019-10-07 11:39:21 +00:00
|
|
|
effect: PropTypes.oneOf(["float", "solid"]),
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Global tooltip placement */
|
2019-10-08 08:42:12 +00:00
|
|
|
place: PropTypes.oneOf(["top", "right", "bottom", "left"]),
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Generate the tip content dynamically */
|
2019-10-08 12:00:27 +00:00
|
|
|
getContent: PropTypes.func,
|
2019-10-17 10:53:11 +00:00
|
|
|
afterHide: PropTypes.func,
|
|
|
|
afterShow: PropTypes.func,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Offset top all tooltips on page */
|
2019-10-08 12:00:27 +00:00
|
|
|
offsetTop: PropTypes.number,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Offset right all tooltips on page */
|
2019-10-08 12:00:27 +00:00
|
|
|
offsetRight: PropTypes.number,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Offset bottom all tooltips on page */
|
2019-10-08 12:00:27 +00:00
|
|
|
offsetBottom: PropTypes.number,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Offset left all tooltips on page */
|
2019-10-14 12:58:33 +00:00
|
|
|
offsetLeft: PropTypes.number,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Child elements */
|
2019-10-17 12:49:01 +00:00
|
|
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
|
|
reference: PropTypes.oneOfType([
|
2019-10-18 12:13:08 +00:00
|
|
|
PropTypes.func,
|
2020-10-16 13:16:01 +00:00
|
|
|
PropTypes.shape({ current: PropTypes.any }),
|
2019-12-03 13:55:43 +00:00
|
|
|
]),
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 13:55:43 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-11 23:34:57 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2021-06-09 01:02:28 +00:00
|
|
|
color: PropTypes.string,
|
2021-10-28 12:06:43 +00:00
|
|
|
maxWidth: PropTypes.string,
|
2019-10-07 11:39:21 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Tooltip.defaultProps = {
|
2019-10-08 08:42:12 +00:00
|
|
|
effect: "float",
|
2019-10-07 11:39:21 +00:00
|
|
|
place: "top",
|
2019-10-08 12:00:27 +00:00
|
|
|
offsetTop: 0,
|
|
|
|
offsetRight: 0,
|
|
|
|
offsetBottom: 0,
|
2020-10-16 13:16:01 +00:00
|
|
|
offsetLeft: 0,
|
2021-10-29 13:28:55 +00:00
|
|
|
color: "#f8f7bf",
|
2019-10-07 11:39:21 +00:00
|
|
|
};
|
|
|
|
|
2020-01-24 07:26:35 +00:00
|
|
|
export default Tooltip;
|