make tooltip smarter

This commit is contained in:
btzr-io 2018-09-23 16:01:12 -06:00
parent b972064f1c
commit d6cfc8d5fc

View file

@ -16,8 +16,66 @@ class ToolTip extends React.PureComponent<Props> {
direction: 'bottom',
};
constructor(props) {
super(props);
this.tooltip = React.createRef();
this.state = {
direction: this.props.direction,
};
}
componentDidMount() {
this.handleVisibility();
}
getVisibility = () => {
const node = this.tooltip.current;
const rect = node.getBoundingClientRect();
// Get parent-container
const viewport = document.getElementById('content');
const visibility = {
top: rect.top >= 0,
left: rect.left >= 0,
right: rect.right <= viewport.offsetWidth,
bottom: rect.bottom <= viewport.offsetHeight,
};
return visibility;
};
invertDirection = () => {
// Get current direction
const { direction } = this.state;
// Inverted directions
const directions = {
top: 'bottom',
left: 'right',
right: 'left',
bottom: 'top',
};
const inverted = directions[direction];
// Update direction
if (inverted) {
this.setState({ direction: inverted });
}
};
handleVisibility = () => {
const { direction } = this.state;
const visibility = this.getVisibility();
if (!visibility[direction]) {
this.invertDirection();
}
};
render() {
const { children, label, body, icon, direction, onComponent } = this.props;
const { direction } = this.state;
const { children, label, body, icon, onComponent } = this.props;
const tooltipContent = children || label;
const bodyLength = body.length;
@ -25,6 +83,8 @@ class ToolTip extends React.PureComponent<Props> {
return (
<span
onFocus={this.handleVisibility}
onMouseOver={this.handleVisibility}
className={classnames('tooltip', {
'tooltip--label': label && !icon,
'tooltip--icon': icon,
@ -37,6 +97,7 @@ class ToolTip extends React.PureComponent<Props> {
>
{tooltipContent}
<span
ref={this.tooltip}
className={classnames('tooltip__body', {
'tooltip__body--short': isShortDescription,
})}