TrizTech/ohif-viewer
15
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 2020-07-22 16:07:20 -03:00 committed by GitHub
parent a6b7657840
commit afcd3f5263
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 109 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
platform/ui/src/components/Thumbnail/Thumbnail.jsx
View File

@ -1,9 +1,8 @@
import React, { useRef } from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { useDrag } from 'react-dnd'; import { useDrag } from 'react-dnd';
import { Icon } from '@ohif/ui'; import { Icon } from '@ohif/ui';
import blurHandlerListener from '../../utils/blurHandlerListener';
/** /**
* *
@ -31,12 +30,8 @@ const Thumbnail = ({
}, },
}); });
const thumbnailElement = useRef(null);
return ( return (
<div <div
onFocus={() => blurHandlerListener(thumbnailElement)}
ref={thumbnailElement}
className={classnames( className={classnames(
className, className,
'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none select-none group' 'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none select-none group'

7
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
View File

@ -1,9 +1,8 @@
import React, { useRef } from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useDrag } from 'react-dnd'; import { useDrag } from 'react-dnd';
import { Icon, Tooltip, Typography } from '@ohif/ui'; import { Icon, Tooltip, Typography } from '@ohif/ui';
import blurHandlerListener from '../../utils/blurHandlerListener';
const ThumbnailNoImage = ({ const ThumbnailNoImage = ({
displaySetInstanceUID, displaySetInstanceUID,
@ -23,12 +22,8 @@ const ThumbnailNoImage = ({
}, },
}); });
const thumbnailElement = useRef(null);
return ( return (
<div <div
ref={thumbnailElement}
onFocus={() => blurHandlerListener(thumbnailElement)}
className={classnames( className={classnames(
'flex flex-row flex-1 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded select-none', 'flex flex-row flex-1 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded select-none',
isActive ? 'border-2 border-primary-light' : 'border' isActive ? 'border-2 border-primary-light' : 'border'

158
platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
View File

@ -1,7 +1,8 @@
import React, { useState } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui'; import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
import useOnClickOutside from '../../utils/useOnClickOutside';
const classes = { const classes = {
infoHeader: 'text-base text-primary-light', infoHeader: 'text-base text-primary-light',
@ -50,6 +51,23 @@ const ViewportActionBar = ({
} = patientInformation; } = patientInformation;
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo); 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 = () => { const renderIconStatus = () => {
if (modality === 'SR') { if (modality === 'SR') {
@ -188,6 +206,7 @@ const ViewportActionBar = ({
)} )}
<div className="flex ml-4 mr-2" onClick={onPatientInfoClick}> <div className="flex ml-4 mr-2" onClick={onPatientInfoClick}>
<PatientInfo <PatientInfo
showPatientInfoRef={showPatientInfoRef}
isOpen={showPatientInfo} isOpen={showPatientInfo}
patientName={patientName} patientName={patientName}
patientSex={patientSex} patientSex={patientSex}
@ -240,82 +259,85 @@ function PatientInfo({
spacing, spacing,
scanner, scanner,
isOpen, isOpen,
showPatientInfoRef,
}) { }) {
return ( return (
<Tooltip <div ref={showPatientInfoRef}>
isSticky <Tooltip
isDisabled={!isOpen} isSticky
position="bottom-right" isDisabled={!isOpen}
content={ position="bottom-right"
isOpen && ( content={
<div className="flex py-2"> isOpen && (
<div className="flex pt-1"> <div className="flex py-2">
<Icon name="info-link" className="w-4 text-primary-main" /> <div className="flex pt-1">
</div> <Icon name="info-link" className="w-4 text-primary-main" />
<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>
<div className="flex"> <div className="flex flex-col ml-2">
<div className={classnames(classes.firstRow)}> <span className="text-base font-bold text-white">
<span className={classnames(classes.infoHeader)}> {patientName}
Thickness </span>
</span> <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
<span className={classnames(classes.infoText)}> <div className={classnames(classes.firstRow)}>
{thickness ? thickness : 'N/A'} <span className={classnames(classes.infoHeader)}>Sex</span>
</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>
<div className={classnames(classes.row)}> <div className="flex">
<span className={classnames(classes.infoHeader)}> <div className={classnames(classes.firstRow)}>
Spacing <span className={classnames(classes.infoHeader)}>
</span> Thickness
<span className={classnames(classes.infoText)}> </span>
{spacing} <span className={classnames(classes.infoText)}>
</span> {thickness ? thickness : 'N/A'}
</div> </span>
<div className={classnames(classes.row)}> </div>
<span className={classnames(classes.infoHeader)}> <div className={classnames(classes.row)}>
Scanner <span className={classnames(classes.infoHeader)}>
</span> Spacing
<span className={classnames(classes.infoText)}> </span>
{scanner} <span className={classnames(classes.infoText)}>
</span> {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>
</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>
)
}
>
<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>
</div> </Tooltip>
</Tooltip> </div>
); );
} }

10
platform/ui/src/utils/blurHandlerListener.js
View File

@ -1,10 +0,0 @@
export default element => {
const handleClickOutside = event => {
if (element.current && !element.current.contains(event.target)) {
element.current.blur();
document.removeEventListener('mousedown', handleClickOutside);
}
};
document.addEventListener('mousedown', handleClickOutside);
};

17
platform/ui/src/utils/useOnClickOutside.js Normal file
View File

@ -0,0 +1,17 @@
export default (element, onClickOutside) => {
const clickOutsideHandler = event => {
if (element.current && !element.current.contains(event.target)) {
onClickOutside();
window.removeEventListener('mousedown', clickOutsideHandler);
}
};
const add = () => window.addEventListener('mousedown', clickOutsideHandler);
const remove = () =>
window.removeEventListener('mousedown', clickOutsideHandler);
return {
add,
remove,
};
};