2018-03-26 23:32:43 +02:00
|
|
|
// @flow
|
2018-05-23 02:11:20 +02:00
|
|
|
import * as React from 'react';
|
2018-03-26 23:32:43 +02:00
|
|
|
import classnames from 'classnames';
|
|
|
|
|
|
|
|
type Props = {
|
2018-05-23 05:48:22 +02:00
|
|
|
body: string,
|
2018-05-23 02:11:20 +02:00
|
|
|
label?: string,
|
2018-06-20 05:55:25 +02:00
|
|
|
children?: React.Node,
|
|
|
|
icon?: boolean,
|
2018-05-23 02:11:20 +02:00
|
|
|
direction: string,
|
2018-06-20 05:55:25 +02:00
|
|
|
onComponent?: boolean, // extra padding to account for button/form field size
|
2019-01-27 01:23:47 +01:00
|
|
|
alwaysVisible?: boolean, // should tooltip stay open, guide callbacks will close it manually
|
2018-03-26 23:32:43 +02:00
|
|
|
};
|
|
|
|
|
2018-10-10 19:43:15 +02:00
|
|
|
type State = {
|
|
|
|
direction: string,
|
|
|
|
};
|
|
|
|
|
|
|
|
class ToolTip extends React.PureComponent<Props, State> {
|
2018-05-23 02:11:20 +02:00
|
|
|
static defaultProps = {
|
2018-05-23 05:48:22 +02:00
|
|
|
direction: 'bottom',
|
2019-01-27 01:23:47 +01:00
|
|
|
alwaysVisible: false,
|
2018-05-23 02:11:20 +02:00
|
|
|
};
|
2018-03-26 23:32:43 +02:00
|
|
|
|
2018-10-31 17:57:22 +01:00
|
|
|
constructor(props: Props) {
|
2018-09-24 00:01:12 +02:00
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
direction: this.props.direction,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-11-08 20:48:38 +01:00
|
|
|
tooltip: ?HTMLSpanElement;
|
2018-10-31 17:57:22 +01:00
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
render() {
|
2018-09-24 00:01:12 +02:00
|
|
|
const { direction } = this.state;
|
2019-01-27 01:23:47 +01:00
|
|
|
const { children, label, body, icon, onComponent, alwaysVisible } = this.props;
|
2018-05-23 02:11:20 +02:00
|
|
|
|
|
|
|
const tooltipContent = children || label;
|
2018-06-20 05:55:25 +02:00
|
|
|
const bodyLength = body.length;
|
|
|
|
const isShortDescription = bodyLength < 30;
|
2018-03-26 23:32:43 +02:00
|
|
|
|
|
|
|
return (
|
2018-05-23 02:11:20 +02:00
|
|
|
<span
|
|
|
|
className={classnames('tooltip', {
|
|
|
|
'tooltip--label': label && !icon,
|
|
|
|
'tooltip--icon': icon,
|
|
|
|
'tooltip--top': direction === 'top',
|
|
|
|
'tooltip--right': direction === 'right',
|
|
|
|
'tooltip--bottom': direction === 'bottom',
|
|
|
|
'tooltip--left': direction === 'left',
|
2018-06-20 05:55:25 +02:00
|
|
|
'tooltip--on-component': onComponent,
|
2019-01-27 01:23:47 +01:00
|
|
|
'tooltip--always-visible': alwaysVisible,
|
2018-05-23 02:11:20 +02:00
|
|
|
})}
|
|
|
|
>
|
|
|
|
{tooltipContent}
|
2018-06-20 05:55:25 +02:00
|
|
|
<span
|
2018-11-08 20:48:38 +01:00
|
|
|
ref={ref => {
|
|
|
|
this.tooltip = ref;
|
|
|
|
}}
|
2019-02-05 15:16:24 +01:00
|
|
|
className={classnames('tooltip__body', {
|
2018-06-20 05:55:25 +02:00
|
|
|
'tooltip__body--short': isShortDescription,
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
{body}
|
|
|
|
</span>
|
2018-03-26 23:32:43 +02:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ToolTip;
|