TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: OHIF-307 - Click outside patient info should close tooltip (#1886)

Browse Source
This commit is contained in:
Rodrigo Antinarelli authored and GitHub committed 2020-07-22 21:07:20 +02:00
1 parent a6b7657840
commit afcd3f5263
5 files changed
+109 -90
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+90 -68
View File
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
import useOnClickOutside from '../../utils/useOnClickOutside';
const classes = {
infoHeader: 'text-base text-primary-light',
@@ -50,6 +51,23 @@ const ViewportActionBar = ({
} = patientInformation;
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
const closePatientInfo = () => setShowPatientInfo(false);
const showPatientInfoRef = useRef(null);
const clickOutsideListener = useOnClickOutside(
showPatientInfoRef,
closePatientInfo
);
useEffect(() => {
if (showPatientInfo) {
clickOutsideListener.add();
} else {
clickOutsideListener.remove();
}
return () => clickOutsideListener.remove();
}, [clickOutsideListener, showPatientInfo]);
const renderIconStatus = () => {
if (modality === 'SR') {
@@ -188,6 +206,7 @@ const ViewportActionBar = ({
)}
<div className="flex ml-4 mr-2" onClick={onPatientInfoClick}>
<PatientInfo
showPatientInfoRef={showPatientInfoRef}
isOpen={showPatientInfo}
patientName={patientName}
patientSex={patientSex}
@@ -240,82 +259,85 @@ function PatientInfo({
spacing,
scanner,
isOpen,
showPatientInfoRef,
}) {
return (
<Tooltip
isSticky
isDisabled={!isOpen}
position="bottom-right"
content={
isOpen && (
<div className="flex py-2">
<div className="flex pt-1">
<Icon name="info-link" className="w-4 text-primary-main" />
</div>
<div className="flex flex-col ml-2">
<span className="text-base font-bold text-white">
{patientName}
</span>
<div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
<div className={classnames(classes.firstRow)}>
<span className={classnames(classes.infoHeader)}>Sex</span>
<span className={classnames(classes.infoText)}>
{patientSex}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>Age</span>
<span className={classnames(classes.infoText)}>
{patientAge}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>MRN</span>
<span className={classnames(classes.infoText)}>{MRN}</span>
</div>
<div ref={showPatientInfoRef}>
<Tooltip
isSticky
isDisabled={!isOpen}
position="bottom-right"
content={
isOpen && (
<div className="flex py-2">
<div className="flex pt-1">
<Icon name="info-link" className="w-4 text-primary-main" />
</div>
<div className="flex">
<div className={classnames(classes.firstRow)}>
<span className={classnames(classes.infoHeader)}>
Thickness
</span>
<span className={classnames(classes.infoText)}>
{thickness ? thickness : 'N/A'}
</span>
<div className="flex flex-col ml-2">
<span className="text-base font-bold text-white">
{patientName}
</span>
<div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
<div className={classnames(classes.firstRow)}>
<span className={classnames(classes.infoHeader)}>Sex</span>
<span className={classnames(classes.infoText)}>
{patientSex}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>Age</span>
<span className={classnames(classes.infoText)}>
{patientAge}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>MRN</span>
<span className={classnames(classes.infoText)}>{MRN}</span>
</div>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>
Spacing
</span>
<span className={classnames(classes.infoText)}>
{spacing}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>
Scanner
</span>
<span className={classnames(classes.infoText)}>
{scanner}
</span>
<div className="flex">
<div className={classnames(classes.firstRow)}>
<span className={classnames(classes.infoHeader)}>
Thickness
</span>
<span className={classnames(classes.infoText)}>
{thickness ? thickness : 'N/A'}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>
Spacing
</span>
<span className={classnames(classes.infoText)}>
{spacing}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>
Scanner
</span>
<span className={classnames(classes.infoText)}>
{scanner}
</span>
</div>
</div>
</div>
</div>
)
}
>
<div className="relative flex justify-end cursor-pointer">
<div className="relative">
<Icon name="profile" className="w-5 text-white" />
<Icon
name="info-link"
className="absolute w-5 text-white bg-black"
style={{ right: -7, bottom: -10 }}
/>
</div>
)
}
>
<div className="relative flex justify-end cursor-pointer">
<div className="relative">
<Icon name="profile" className="w-5 text-white" />
<Icon
name="info-link"
className="absolute w-5 text-white bg-black"
style={{ right: -7, bottom: -10 }}
/>
</div>
</div>
</Tooltip>
</Tooltip>
</div>
);
}