Notes

import React, {useState, useRef, useEffect} from 'react';
import PopperTooltip from './PopperToolTip';
import {v4 as uuidv4} from 'uuid';
import SidebarModal from './SidebarModal';
import {getHtml} from '../../utils/contextualHelpUtilsV2';

import emailImg from '../../images/email_128x128.png';
import chorusImg from '../../images/chorus_128x128.png';
import confluenceImg from '../../images/confluence_128x128.png';
import slackImg from '../../images/slack_128x128.png';
import radarImg from '../../images/radar_128x128.png';

export default function Tooltip({item, lms, appId, pageId}) {
const id = `actions-${uuidv4()}`;

const [showModal, setShowModal] = useState(false);
const [showDetailView, setShowDetailView] = useState(true);
const html = showModal ? getHtml(JSON.parse(item.longDescription)) : undefined;

const Content = () => {
console.log("Content")
const ref = useRef();
const learnMoreRef = useRef();
const handler = e => {
if (e.target === learnMoreRef.current) {
document.body.classList.add('prevent-scroll');
setShowModal(true);
}
e.stopImmediatePropagation?.();
e.stopPropagation();
};

useEffect(() => {
ref.current.addEventListener('click', handler);
return () => {
ref?.current?.removeEventListener('click', handler);
};
}, []);

return (
<div className="brucke-popover" onClick={handler} ref={ref}>
{item.shortDescription && <p className="global-body-medium">{item.shortDescription}</p>}
{item.longDescription && (
<a className="global-link-medium" ref={learnMoreRef}>
Learn More
</a>
)}
</div>
);
};

const Control = () => {
console.log("Control")
const ref = useRef();
const handler = e => {
e.stopPropagation();
e.preventDefault();
};

useEffect(() => {
ref.current.addEventListener('click', handler);
return () => {
ref?.current?.removeEventListener('click', handler);
};
}, []);

return (
<div className="brucke-tooltip" ref={ref}>
<a id={id}>
<span className={`apple-icons ac-icon-info tips-icon`} />
</a>
</div>
);
};

const renderCoreLinks = () => {
console.log("renderCoreLinks")
if (!lms) return null;
const sectSlack = Object.entries(lms.slackChannel || {})?.[0];
const sectEmail = Object.entries(lms.emailGroup || {})?.[0];
const sectConfluence = Object.entries(lms.confluenceUrl || {})?.[0];
const sectChorus = Object.entries(lms.chorusUrl || {})?.[0];
const sectRadar = Object.entries(lms.radarComponentId || {})?.[0];
return (
<section className="learn-more-core-links">
{sectSlack && (
<a href={sectSlack[1]} target="_blank">
<img src={slackImg} title={sectSlack[0]} />
</a>
)}
{sectEmail && (
<a href={`mailto:${sectEmail[1]}`} target="_blank">
<img src={emailImg} title={sectEmail[0]} />
</a>
)}
{sectConfluence && (
<a href={sectConfluence[1]} target="_blank">
<img src={confluenceImg} title={sectConfluence[0]} />
</a>
)}
{sectChorus && (
<a href={sectChorus[1]} target="_blank">
<img src={chorusImg} title={sectChorus[0]} />
</a>
)}
{sectRadar && (
<a href={`rdar://${sectRadar[1]}`} target="_blank">
<img src={radarImg} title={sectRadar[0]} />
</a>
)}
</section>
);
};

const renderTabs = () => {
return (
<section className="learn-more-tabs" onClick={e => e.preventDefault()}>
<div
id="brucke-tooltip-detail-tab"
className={`learn-more-tab global-link-large-bold ${showDetailView ? 'active' : ''}`}
>
Detail Page
</div>
<div
id="brucke-tooltip-explore-further-tab"
className={`learn-more-tab global-link-large-bold ${!showDetailView ? 'active' : ''}`}
>
Explore Further
</div>
</section>
);
};

const renderHelpfulLinks = () => {
console.log("renderHelpfulLinks")
if (!lms) return null;

const links = Object.entries(lms.referenceUrl || {});

return (
<ul className="helpful-links">
{links.map(([linkName, linkValue]) => {
return (
<li key={`${linkName}-${linkValue}`}>
<a href={linkValue} rel="noopener noreferrer" target="_blank">
<span className="icon icon-after icon-external">{linkName}</span>
</a>
</li>
);
})}
</ul>
);
};

return (
<>
<PopperTooltip
Control={Control}
Content={Content}
controlClassName={'brucke-tooltip-control'}
contentClassName={'brucke-tooltip-content'}
/>
<SidebarModal
appId={appId}
pageId={pageId}
show={showModal}
onHide={() => {
document.body.classList.remove('prevent-scroll');
setShowModal(false);
}}
letPropagate={e => {
if (e.target.classList.contains('learn-more-tab')) {
console.log(e, 'e.target');
if (e.target.id === 'brucke-tooltip-detail-tab') {
setShowDetailView(true);
} else if (e.target.id === 'brucke-tooltip-explore-further-tab') {
setShowDetailView(false);
}
e.stopPropagation();
e.preventDefault();
return true;
} else {
return false;
}
}}
title={item.elementName}
modalFooter={() => (
<>
{renderCoreLinks()}
<hr />
{renderTabs()}
</>
)}
>
{showDetailView ? (
<div
className={`long-desc ${html?.includes?.('<img') ? 'has-images' : ''}`}
dangerouslySetInnerHTML={{__html: html}}
/>
) : (
<div className="helpful-links">
<h4>Helpful Links</h4>
{renderHelpfulLinks()}
</div>
)}
</SidebarModal>
</>
);
}
import React from 'react';
import {createPortal} from 'react-dom';
import {usePopperTooltip} from 'react-popper-tooltip';

import 'react-popper-tooltip/dist/styles.css';

const Portal = ({children}) => createPortal(children, document.body);

function PopperTooltip({Control, controlClassName, Content, contentClassName}) {
const {getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible} = usePopperTooltip({
trigger: ['click', 'hover'],
placement: 'right',
delayHide: 150,
closeOnOutsideClick: true,
interactive: true,
offset: [0, 8]
});

return (
<>
<div ref={setTriggerRef} className={controlClassName}>
<Control />
</div>
{visible && (
<Portal>
<div ref={setTooltipRef} {...getTooltipProps({className: `tooltip-container ${contentClassName}`})}>
<Content />
<div {...getArrowProps({className: 'tooltip-arrow'})} />
</div>
</Portal>
)}
</>
);
}

export default PopperTooltip;