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

hoist activeTab state

Browse Source
This commit is contained in:
dannyrb 2020-05-22 15:33:07 -04:00
parent a41a455237
commit 7c1dcb53c2
2 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/default/src/Panels/PanelStudyBrowser.jsx
View File

@ -138,10 +138,12 @@ function PanelStudyBrowser({
return ( return (
<StudyBrowser <StudyBrowser
activeTabName={activeTabName}
tabs={tabs} tabs={tabs}
activeTabName={activeTabName}
onClickStudy={_handleStudyClick} onClickStudy={_handleStudyClick}
onSetTabActive={setActiveTabName} onClickTab={clickedTabName => {
setActiveTabName(clickedTabName);
}}
/> />
); );
} }

22
platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
View File

@ -7,10 +7,6 @@ import { ButtonGroup, Button, StudyItem, ThumbnailList } from '@ohif/ui';
const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18'; const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
const activeButtonClasses = 'bg-primary-main'; const activeButtonClasses = 'bg-primary-main';
const getInitialActiveTab = tabs => {
return tabs && tabs[0] && tabs[0].name;
};
const getTrackedSeries = displaySets => { const getTrackedSeries = displaySets => {
let trackedSeries = 0; let trackedSeries = 0;
displaySets.forEach(displaySet => { displaySets.forEach(displaySet => {
@ -25,18 +21,15 @@ const getTrackedSeries = displaySets => {
const StudyBrowser = ({ const StudyBrowser = ({
tabs, tabs,
activeTabName, activeTabName,
onSetTabActive, onClickTab,
onClickStudy, onClickStudy,
onClickThumbnail, onClickThumbnail,
}) => { }) => {
const [tabActive, setTabActive] = useState(
activeTabName || getInitialActiveTab(tabs)
);
const [studyActive, setStudyActive] = useState(null); const [studyActive, setStudyActive] = useState(null);
const [thumbnailActive, setThumbnailActive] = useState(null); const [thumbnailActive, setThumbnailActive] = useState(null);
const getTabContent = () => { const getTabContent = () => {
const tabData = tabs.find(tab => tab.name === tabActive); const tabData = tabs.find(tab => tab.name === activeTabName);
if (!tabData || !tabData.studies || !Array.isArray(tabData.studies)) { if (!tabData || !tabData.studies || !Array.isArray(tabData.studies)) {
return; return;
@ -101,7 +94,7 @@ const StudyBrowser = ({
> >
{tabs.map(tab => { {tabs.map(tab => {
const { name, label } = tab; const { name, label } = tab;
const isActive = tabActive === name; const isActive = activeTabName === name;
return ( return (
<Button <Button
key={name} key={name}
@ -111,12 +104,7 @@ const StudyBrowser = ({
)} )}
size="initial" size="initial"
onClick={() => { onClick={() => {
setTabActive(name); onClickTab(name);
setStudyActive(null);
if (onSetTabActive) {
onSetTabActive(name);
}
}} }}
> >
{label} {label}
@ -133,8 +121,10 @@ const StudyBrowser = ({
}; };
StudyBrowser.propTypes = { StudyBrowser.propTypes = {
onClickTab: PropTypes.func.isRequired,
onClickStudy: PropTypes.func, onClickStudy: PropTypes.func,
onClickThumbnail: PropTypes.func, onClickThumbnail: PropTypes.func,
activeTabName: PropTypes.string.isRequired,
tabs: PropTypes.arrayOf( tabs: PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,