From 911f93d378c161ff5e75bde000dc1c8ee1079631 Mon Sep 17 00:00:00 2001 From: igoroctaviano Date: Wed, 24 Jun 2020 12:11:54 -0300 Subject: [PATCH 1/4] Update toolbar service and add active icon in nested button --- .../ViewerLayout/ToolbarButtonNestedMenu.jsx | 36 +++++++++++-------- extensions/default/src/ViewerLayout/index.jsx | 13 ++++--- .../services/ToolBarService/ToolBarService.js | 15 ++++---- .../ToolbarButton/ToolbarButton.jsx | 1 + 4 files changed, 40 insertions(+), 25 deletions(-) diff --git a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx index 097257e75..c6d8f7a35 100644 --- a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx +++ b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx @@ -2,32 +2,31 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { ToolbarButton } from '@ohif/ui'; -function NestedMenu({ children }) { +function NestedMenu({ children, label, icon }) { const [isOpen, setIsOpen] = useState(false); - useEffect(() => { - function closeNestedMenu() { - if (isOpen) { - setIsOpen(false); - } + const toggleNestedMenu = () => setIsOpen(!isOpen); + + const closeNestedMenu = () => { + if (isOpen) { + setIsOpen(false); } + }; + + useEffect(() => { window.addEventListener('click', closeNestedMenu); return () => { window.removeEventListener('click', closeNestedMenu); }; }, [isOpen]); - const dropdownContent = isOpen ? children : undefined; - return ( { - setIsOpen(!isOpen); - }} - dropdownContent={dropdownContent} + id="NestedMenu" + label={label} + icon={icon} + onClick={toggleNestedMenu} + dropdownContent={isOpen && children} isActive={isOpen} type="primary" /> @@ -36,6 +35,13 @@ function NestedMenu({ children }) { NestedMenu.propTypes = { children: PropTypes.any.isRequired, + icon: PropTypes.string, + label: PropTypes.string, +}; + +NestedMenu.defaultProps = { + icon: "tool-more-menu", + label: "More", }; export default NestedMenu; diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx index 730ee515b..8a92a2d93 100644 --- a/extensions/default/src/ViewerLayout/index.jsx +++ b/extensions/default/src/ViewerLayout/index.jsx @@ -55,7 +55,13 @@ function ViewerLayout({ }; }; + const defaultTool = { icon: 'tool-more-menu', label: 'More' }; const [toolbars, setToolbars] = useState({ primary: [], secondary: [] }); + const [activeTool, setActiveTool] = useState(defaultTool); + const onSecondaryClickHandler = () => setActiveTool(defaultTool); + const onPrimaryClickHandler = (evt, btn) => { + setActiveTool(btn.props.isActive ? btn.props : defaultTool); + }; useEffect(() => { const { unsubscribe } = ToolBarService.subscribe( @@ -63,8 +69,8 @@ function ViewerLayout({ () => { console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT'); const updatedToolbars = { - primary: ToolBarService.getButtonSection('primary'), - secondary: ToolBarService.getButtonSection('secondary'), + primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler }), + secondary: ToolBarService.getButtonSection('secondary', { onClick: onSecondaryClickHandler }), }; setToolbars(updatedToolbars); } @@ -86,11 +92,10 @@ function ViewerLayout({ if (!isNested) { const { id, Component, componentProps } = toolDef; - return ; } else { return ( - +
{toolDef.map(x => { const { id, Component, componentProps } = x; diff --git a/platform/core/src/services/ToolBarService/ToolBarService.js b/platform/core/src/services/ToolBarService/ToolBarService.js index 95cc1b431..589839448 100644 --- a/platform/core/src/services/ToolBarService/ToolBarService.js +++ b/platform/core/src/services/ToolBarService/ToolBarService.js @@ -62,7 +62,7 @@ export default class ToolBarService { this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {}); } - getButtonSection(key) { + getButtonSection(key, props) { const buttonSectionIds = this.buttonSections[key]; const buttonsInSection = []; @@ -79,7 +79,7 @@ export default class ToolBarService { btnIds.forEach(nestedBtnId => { const nestedBtn = this.buttons[nestedBtnId]; - const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key); + const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, props); nestedButtons.push(mappedNestedBtn); }); @@ -90,7 +90,7 @@ export default class ToolBarService { } else { const btnId = btnIdOrArray; const btn = this.buttons[btnId]; - const mappedBtn = this._mapButtonToDisplay(btn, key); + const mappedBtn = this._mapButtonToDisplay(btn, key, props); buttonsInSection.push(mappedBtn); } @@ -136,8 +136,8 @@ export default class ToolBarService { * @param {*} btn * @param {*} btnSection */ - _mapButtonToDisplay(btn, btnSection) { - const { id, type, component, props } = btn; + _mapButtonToDisplay(btn, btnSection, props) { + const { id, type, component } = btn; const buttonType = this._buttonTypes()[type]; if (!buttonType) { @@ -154,12 +154,15 @@ export default class ToolBarService { if (btn.props.clickHandler) { btn.clickHandler(evt, btn, btnSection); } + if (props && props.onClick) { + props.onClick(evt, btn, btnSection, props); + } }; return { id, Component: component || buttonType.defaultComponent, - componentProps: Object.assign({}, props, { onClick }), // + componentProps: Object.assign({}, btn.props, props, { onClick }), // }; } } diff --git a/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx b/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx index 904d0dcf3..3ce1b20e1 100644 --- a/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx +++ b/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx @@ -25,6 +25,7 @@ const ToolbarButton = ({ }; const shouldShowDropdown = !!isActive && !!dropdownContent; + return (
Date: Thu, 25 Jun 2020 16:03:06 -0300 Subject: [PATCH 2/4] Update code to avoid intercepting onclick --- extensions/default/src/ViewerLayout/index.jsx | 10 +++++----- extensions/default/src/getToolbarModule.js | 10 +++++++--- .../src/services/ToolBarService/ToolBarService.js | 15 +++++++-------- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx index 8a92a2d93..0e9a58904 100644 --- a/extensions/default/src/ViewerLayout/index.jsx +++ b/extensions/default/src/ViewerLayout/index.jsx @@ -58,9 +58,9 @@ function ViewerLayout({ const defaultTool = { icon: 'tool-more-menu', label: 'More' }; const [toolbars, setToolbars] = useState({ primary: [], secondary: [] }); const [activeTool, setActiveTool] = useState(defaultTool); - const onSecondaryClickHandler = () => setActiveTool(defaultTool); - const onPrimaryClickHandler = (evt, btn) => { - setActiveTool(btn.props.isActive ? btn.props : defaultTool); + + const setActiveToolHandler = (tool, isNested) => { + setActiveTool(isNested ? tool : defaultTool); }; useEffect(() => { @@ -69,8 +69,8 @@ function ViewerLayout({ () => { console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT'); const updatedToolbars = { - primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler }), - secondary: ToolBarService.getButtonSection('secondary', { onClick: onSecondaryClickHandler }), + primary: ToolBarService.getButtonSection('primary', { setActiveTool: setActiveToolHandler }), + secondary: ToolBarService.getButtonSection('secondary', { setActiveTool: setActiveToolHandler }), }; setToolbars(updatedToolbars); } diff --git a/extensions/default/src/getToolbarModule.js b/extensions/default/src/getToolbarModule.js index 4cc66fda3..293e5cc43 100644 --- a/extensions/default/src/getToolbarModule.js +++ b/extensions/default/src/getToolbarModule.js @@ -9,7 +9,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) { { name: 'ohif.divider', defaultComponent: ToolbarDivider, - clickHandler: () => {}, + clickHandler: () => { }, }, { name: 'ohif.action', @@ -30,7 +30,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) { optionalConfig: [], requiredProps: [], optionalProps: [], - clickHandler: (evt, clickedBtn, btnSectionName) => { + clickHandler: (evt, clickedBtn, btnSectionName, metadata, viewerProps) => { const { props } = clickedBtn; const allButtons = toolbarService.getButtons(); @@ -47,6 +47,10 @@ export default function getToolbarModule({ commandsManager, servicesManager }) { clickedBtn.config.groupName === btn.config.groupName ) { btn.props.isActive = false; + + if (viewerProps.setActiveTool) { + viewerProps.setActiveTool(props, metadata.isNested); + } } }); @@ -63,7 +67,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) { { name: 'ohif.layoutSelector', defaultComponent: ToolbarLayoutSelector, - clickHandler: (evt, clickedBtn, btnSectionName) => {}, + clickHandler: (evt, clickedBtn, btnSectionName) => { }, }, { name: 'ohif.toggle', diff --git a/platform/core/src/services/ToolBarService/ToolBarService.js b/platform/core/src/services/ToolBarService/ToolBarService.js index 589839448..08cc1e3cb 100644 --- a/platform/core/src/services/ToolBarService/ToolBarService.js +++ b/platform/core/src/services/ToolBarService/ToolBarService.js @@ -79,7 +79,8 @@ export default class ToolBarService { btnIds.forEach(nestedBtnId => { const nestedBtn = this.buttons[nestedBtnId]; - const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, props); + const metadata = { isNested: true }; + const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, metadata, props); nestedButtons.push(mappedNestedBtn); }); @@ -90,7 +91,8 @@ export default class ToolBarService { } else { const btnId = btnIdOrArray; const btn = this.buttons[btnId]; - const mappedBtn = this._mapButtonToDisplay(btn, key, props); + const metadata = { isNested: false }; + const mappedBtn = this._mapButtonToDisplay(btn, key, metadata, props); buttonsInSection.push(mappedBtn); } @@ -136,7 +138,7 @@ export default class ToolBarService { * @param {*} btn * @param {*} btnSection */ - _mapButtonToDisplay(btn, btnSection, props) { + _mapButtonToDisplay(btn, btnSection, metadata, props) { const { id, type, component } = btn; const buttonType = this._buttonTypes()[type]; @@ -146,7 +148,7 @@ export default class ToolBarService { const onClick = evt => { if (buttonType.clickHandler) { - buttonType.clickHandler(evt, btn, btnSection); + buttonType.clickHandler(evt, btn, btnSection, metadata, props); } if (btn.props.onClick) { btn.onClick(evt, btn, btnSection); @@ -154,15 +156,12 @@ export default class ToolBarService { if (btn.props.clickHandler) { btn.clickHandler(evt, btn, btnSection); } - if (props && props.onClick) { - props.onClick(evt, btn, btnSection, props); - } }; return { id, Component: component || buttonType.defaultComponent, - componentProps: Object.assign({}, btn.props, props, { onClick }), // + componentProps: Object.assign({}, btn.props, { onClick }), // }; } } From 52521c5b56cb71360805d219c22abafbd93d7645 Mon Sep 17 00:00:00 2001 From: igoroctaviano Date: Thu, 25 Jun 2020 16:49:46 -0300 Subject: [PATCH 3/4] Add active state --- .../default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx index c6d8f7a35..1b0bb5144 100644 --- a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx +++ b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx @@ -20,6 +20,8 @@ function NestedMenu({ children, label, icon }) { }; }, [isOpen]); + const isActive = isOpen || children.props.children.some(c => c.props.isActive); + return ( ); From 6eb474be88f258bd6bfd254995bbed2f171ce592 Mon Sep 17 00:00:00 2001 From: igoroctaviano Date: Thu, 25 Jun 2020 16:51:48 -0300 Subject: [PATCH 4/4] Add active state --- .../default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx | 6 ++---- extensions/default/src/ViewerLayout/index.jsx | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx index 1b0bb5144..6e91c0418 100644 --- a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx +++ b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx @@ -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 ( ); diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx index e82352c57..cf2c11826 100644 --- a/extensions/default/src/ViewerLayout/index.jsx +++ b/extensions/default/src/ViewerLayout/index.jsx @@ -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 ; } else { return ( - +
{toolDef.map(x => { const { id, Component, componentProps } = x;