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 { ToolbarButton } from '@ohif/ui';
function NestedMenu({ children, label, icon }) {
function NestedMenu({ children, label, icon, isActive }) {
const [isOpen, setIsOpen] = useState(false);
const toggleNestedMenu = () => setIsOpen(!isOpen);
@ -20,8 +20,6 @@ function NestedMenu({ children, label, icon }) {
};
}, [isOpen]);
const isActive = isOpen || children.props.children.some(c => c.props.isActive);
return (
<ToolbarButton
id="NestedMenu"
@ -29,7 +27,7 @@ function NestedMenu({ children, label, icon }) {
icon={icon}
onClick={toggleNestedMenu}
dropdownContent={isOpen && children}
isActive={isActive}
isActive={isActive || isOpen}
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 [activeTool, setActiveTool] = useState(defaultTool);
@ -102,7 +102,7 @@ function ViewerLayout({
return <Component key={id} id={id} {...componentProps} />;
} else {
return (
<NestedMenu icon={activeTool.icon} label={activeTool.label}>
<NestedMenu isActive={activeTool.isActive} icon={activeTool.icon} label={activeTool.label}>
<div className="flex">
{toolDef.map(x => {
const { id, Component, componentProps } = x;