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 [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);
}

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

@ -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',

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

@ -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 }), //
};
}
}