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

Update code to avoid intercepting onclick

Browse Source
This commit is contained in:
igoroctaviano 2020-06-25 16:03:06 -03:00
parent 911f93d378
commit 3f0619848b
3 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,9 +58,9 @@ function ViewerLayout({
const defaultTool = { icon: 'tool-more-menu', label: 'More' }; const defaultTool = { icon: 'tool-more-menu', label: 'More' };
const [toolbars, setToolbars] = useState({ primary: [], secondary: [] }); const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
const [activeTool, setActiveTool] = useState(defaultTool); const [activeTool, setActiveTool] = useState(defaultTool);
const onSecondaryClickHandler = () => setActiveTool(defaultTool);
const onPrimaryClickHandler = (evt, btn) => { const setActiveToolHandler = (tool, isNested) => {
setActiveTool(btn.props.isActive ? btn.props : defaultTool); setActiveTool(isNested ? tool : defaultTool);
}; };
useEffect(() => { useEffect(() => {
@ -69,8 +69,8 @@ function ViewerLayout({
() => { () => {
console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT'); console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
const updatedToolbars = { const updatedToolbars = {
primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler }), primary: ToolBarService.getButtonSection('primary', { setActiveTool: setActiveToolHandler }),
secondary: ToolBarService.getButtonSection('secondary', { onClick: onSecondaryClickHandler }), secondary: ToolBarService.getButtonSection('secondary', { setActiveTool: setActiveToolHandler }),
}; };
setToolbars(updatedToolbars); setToolbars(updatedToolbars);
} }

10
extensions/default/src/getToolbarModule.js
View File

@ -9,7 +9,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
{ {
name: 'ohif.divider', name: 'ohif.divider',
defaultComponent: ToolbarDivider, defaultComponent: ToolbarDivider,
clickHandler: () => {}, clickHandler: () => { },
}, },
{ {
name: 'ohif.action', name: 'ohif.action',
@ -30,7 +30,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
optionalConfig: [], optionalConfig: [],
requiredProps: [], requiredProps: [],
optionalProps: [], optionalProps: [],
clickHandler: (evt, clickedBtn, btnSectionName) => { clickHandler: (evt, clickedBtn, btnSectionName, metadata, viewerProps) => {
const { props } = clickedBtn; const { props } = clickedBtn;
const allButtons = toolbarService.getButtons(); const allButtons = toolbarService.getButtons();
@ -47,6 +47,10 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
clickedBtn.config.groupName === btn.config.groupName clickedBtn.config.groupName === btn.config.groupName
) { ) {
btn.props.isActive = false; 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', name: 'ohif.layoutSelector',
defaultComponent: ToolbarLayoutSelector, defaultComponent: ToolbarLayoutSelector,
clickHandler: (evt, clickedBtn, btnSectionName) => {}, clickHandler: (evt, clickedBtn, btnSectionName) => { },
}, },
{ {
name: 'ohif.toggle', name: 'ohif.toggle',

15
platform/core/src/services/ToolBarService/ToolBarService.js
View File

@ -79,7 +79,8 @@ export default class ToolBarService {
btnIds.forEach(nestedBtnId => { btnIds.forEach(nestedBtnId => {
const nestedBtn = this.buttons[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); nestedButtons.push(mappedNestedBtn);
}); });
@ -90,7 +91,8 @@ export default class ToolBarService {
} else { } else {
const btnId = btnIdOrArray; const btnId = btnIdOrArray;
const btn = this.buttons[btnId]; 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); buttonsInSection.push(mappedBtn);
} }
@ -136,7 +138,7 @@ export default class ToolBarService {
* @param {*} btn * @param {*} btn
* @param {*} btnSection * @param {*} btnSection
*/ */
_mapButtonToDisplay(btn, btnSection, props) { _mapButtonToDisplay(btn, btnSection, metadata, props) {
const { id, type, component } = btn; const { id, type, component } = btn;
const buttonType = this._buttonTypes()[type]; const buttonType = this._buttonTypes()[type];
@ -146,7 +148,7 @@ export default class ToolBarService {
const onClick = evt => { const onClick = evt => {
if (buttonType.clickHandler) { if (buttonType.clickHandler) {
buttonType.clickHandler(evt, btn, btnSection); buttonType.clickHandler(evt, btn, btnSection, metadata, props);
} }
if (btn.props.onClick) { if (btn.props.onClick) {
btn.onClick(evt, btn, btnSection); btn.onClick(evt, btn, btnSection);
@ -154,15 +156,12 @@ export default class ToolBarService {
if (btn.props.clickHandler) { if (btn.props.clickHandler) {
btn.clickHandler(evt, btn, btnSection); btn.clickHandler(evt, btn, btnSection);
} }
if (props && props.onClick) {
props.onClick(evt, btn, btnSection, props);
}
}; };
return { return {
id, id,
Component: component || buttonType.defaultComponent, Component: component || buttonType.defaultComponent,
componentProps: Object.assign({}, btn.props, props, { onClick }), // componentProps: Object.assign({}, btn.props, { onClick }), //
}; };
} }
} }