65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
import BDV2 from "../v2";
|
|
import Utils from "../utils";
|
|
|
|
export default function(Component, options) {
|
|
const {style = "black", side = "top", text = ""} = options;
|
|
const id = BDV2.KeyGenerator();
|
|
|
|
return class extends BDV2.reactComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.onMouseEnter = this.onMouseEnter.bind(this);
|
|
this.onMouseLeave = this.onMouseLeave.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.node = BDV2.reactDom.findDOMNode(this);
|
|
this.node.addEventListener("mouseenter", this.onMouseEnter);
|
|
this.node.addEventListener("mouseleave", this.onMouseLeave);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.node.removeEventListener("mouseenter", this.onMouseEnter);
|
|
this.node.removeEventListener("mouseleave", this.onMouseLeave);
|
|
}
|
|
|
|
onMouseEnter() {
|
|
if (!BDV2.Tooltips) return;
|
|
const {left, top, width, height} = this.node.getBoundingClientRect();
|
|
BDV2.Tooltips.show(id, {
|
|
position: side,
|
|
text: text,
|
|
color: style,
|
|
targetWidth: width,
|
|
targetHeight: height,
|
|
windowWidth: Utils.screenWidth,
|
|
windowHeight: Utils.screenHeight,
|
|
x: left,
|
|
y: top
|
|
});
|
|
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
const nodes = Array.from(mutation.removedNodes);
|
|
const directMatch = nodes.indexOf(this.node) > -1;
|
|
const parentMatch = nodes.some(parent => parent.contains(this.node));
|
|
if (directMatch || parentMatch) {
|
|
this.onMouseLeave();
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe(document.body, {subtree: true, childList: true});
|
|
}
|
|
|
|
onMouseLeave() {
|
|
if (!BDV2.Tooltips) return;
|
|
BDV2.Tooltips.hide(id);
|
|
}
|
|
|
|
render() {
|
|
return BDV2.react.createElement(Component, this.props);
|
|
}
|
|
};
|
|
} |