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

Add active state

Browse Source
This commit is contained in:
igoroctaviano 2020-06-25 16:51:48 -03:00
parent 52521c5b56
commit 6eb474be88
2 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { ToolbarButton } from '@ohif/ui'; import { ToolbarButton } from '@ohif/ui';
function NestedMenu({ children, label, icon }) { function NestedMenu({ children, label, icon, isActive }) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const toggleNestedMenu = () => setIsOpen(!isOpen); const toggleNestedMenu = () => setIsOpen(!isOpen);
@ -20,8 +20,6 @@ function NestedMenu({ children, label, icon }) {
}; };
}, [isOpen]); }, [isOpen]);
const isActive = isOpen || children.props.children.some(c => c.props.isActive);
return ( return (
<ToolbarButton <ToolbarButton
id="NestedMenu" id="NestedMenu"
@ -29,7 +27,7 @@ function NestedMenu({ children, label, icon }) {
icon={icon} icon={icon}
onClick={toggleNestedMenu} onClick={toggleNestedMenu}
dropdownContent={isOpen && children} dropdownContent={isOpen && children}
isActive={isActive} isActive={isActive || isOpen}
type="primary" type="primary"
/> />
); );

4
extensions/default/src/ViewerLayout/index.jsx
View File

@ -55,7 +55,7 @@ function ViewerLayout({
}; };
}; };
const defaultTool = { icon: 'tool-more-menu', label: 'More' }; const defaultTool = { icon: 'tool-more-menu', label: 'More', isActive: false };
const [toolbars, setToolbars] = useState({ primary: [], secondary: [] }); const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
const [activeTool, setActiveTool] = useState(defaultTool); const [activeTool, setActiveTool] = useState(defaultTool);
@ -102,7 +102,7 @@ function ViewerLayout({
return <Component key={id} id={id} {...componentProps} />; return <Component key={id} id={id} {...componentProps} />;
} else { } else {
return ( return (
<NestedMenu icon={activeTool.icon} label={activeTool.label}> <NestedMenu isActive={activeTool.isActive} icon={activeTool.icon} label={activeTool.label}>
<div className="flex"> <div className="flex">
{toolDef.map(x => { {toolDef.map(x => {
const { id, Component, componentProps } = x; const { id, Component, componentProps } = x;