import React, { useState, useEffect, useRef } from 'react';
import { arrayToClassName } from '../utils/utils';
export default function Tooltip( props ) {
const baseClassName = 'e-app-tooltip',
classes = [ baseClassName, props.className ],
childRef = useRef( null ),
isAborted = useRef( false ),
isManualControl = Object.prototype.hasOwnProperty.call( props, 'show' ),
[ isLibraryLoaded, setIsLibraryLoaded ] = useState( false ),
[ showTooltip, setShowTooltip ] = useState( false ),
directionsMap = {
top: 's',
right: 'w',
down: 'n',
left: 'e',
},
tipsyConfig = {
trigger: isManualControl ? 'manual' : 'hover',
gravity: directionsMap[ props.direction ],
offset: props.offset,
title() {
return props.title;
},
},
setTipsy = () => {
const $tooltipContainer = jQuery( childRef.current );
$tooltipContainer.tipsy( tipsyConfig );
if ( isManualControl ) {
const displayMode = showTooltip ? 'show' : 'hide';
$tooltipContainer.tipsy( displayMode );
}
};
useEffect( () => {
// In case that the component is disabled the tipsy library will not be loaded by default.
if ( ! props.disabled ) {
isAborted.current = false;
import(
/* webpackIgnore: true */
`${ elementorCommon.config.urls.assets }lib/tipsy/tipsy.min.js?ver=1.0.0`
).then( () => {
if ( ! isAborted.current ) {
if ( isLibraryLoaded ) {
setTipsy();
} else {
setIsLibraryLoaded( true );
}
}
} );
}
return () => {
if ( ! props.disabled ) {
// Aborting the current dynamic-import state update in case of re-render.
isAborted.current = true;
// Cleanup of existing tipsy element in case of re-render.
const nodes = document.querySelectorAll( '.tipsy' );
nodes[ nodes.length - 1 ].remove();
}
};
}, [ props.disabled ] );
useEffect( () => {
if ( isLibraryLoaded ) {
setTipsy();
}
}, [ isLibraryLoaded, showTooltip ] );
useEffect( () => {
// The "show" state should not be changed while the component is disabled.
if ( ! props.disabled && props.show !== showTooltip ) {
setShowTooltip( props.show );
}
}, [ props.show ] );
return (
<props.tag className={ arrayToClassName( classes ) } ref={ childRef }>
{ props.children }
</props.tag>
);
}
Tooltip.propTypes = {
className: PropTypes.string,
offset: PropTypes.number,
show: PropTypes.bool,
direction: PropTypes.oneOf( [ 'top', 'right', 'left', 'down' ] ),
tag: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
disabled: PropTypes.bool,
children: PropTypes.any,
};
Tooltip.defaultProps = {
className: '',
offset: 10,
direction: 'top',
disabled: false,
};