feat: 🎸 React custom component on toolbar button (#935)
* feat: 🎸 React custom component on toolbar button Toolbar button can consume/render react custom components. Its only required to expose the component into toolbar definitions (toolbarModule) Closes: 924 * feat: 🎸 Core review. Minor changes on documentation Closes: 924 * feat: 🎸 Code review * feat: 🎸 Code review. Changing function call to variable decl
This commit is contained in:
1 parent
5b523c2afa
commit
a90605c82d
2 files changed
+95
-32
No files matched your search
@@ -160,6 +160,7 @@ An extension can register a Toolbar Module by providing a `getToolbarModule()`
|
||||
method that returns a React Component. The component does not receive any props.
|
||||
If you want to modify or react to state, you will need to connect to the redux
|
||||
store.
|
||||
The given toolbar must determine its set of elements and the context of them. The set of elements will be listed on toolbar `definitions`.
|
||||
|
||||

|
||||
|
||||
@@ -170,6 +171,31 @@ Toolbar components are rendered in the `ToolbarRow` component.
|
||||
For a complete example implementation,
|
||||
[check out the OHIFCornerstoneViewport's Toolbar Module](https://github.com/OHIF/Viewers/blob/master/extensions/cornerstone/src/toolbarModule.js).
|
||||
|
||||
##### Toolbar Custom Component
|
||||
|
||||
Toolbar elements can define its own custom react component to be consumed when rendering it. So far, it accepts `Functional` and `Class` Components. For that, you just need to expose your `CustomToolbarComponent` as the value of key `CustomComponent`. In case the property `CustomComponent` is not present, a default toolbar component will be used to render it. See bellow
|
||||
|
||||
```js
|
||||
definitions: [
|
||||
...
|
||||
{
|
||||
id: 'Custom',
|
||||
label: 'Custom',
|
||||
icon: 'custom-icon',
|
||||
CustomComponent: CustomToolbarComponent,
|
||||
}
|
||||
...
|
||||
]
|
||||
|
||||
```
|
||||
`CustomComponent` components will receive the following props:
|
||||
- parentContext: parent context. (In most of the cases it will be a ToolbarRow instance)
|
||||
- toolbarClickCallback: callback method when clicking on toolbar
|
||||
- button: its own definition object
|
||||
- key: react key prop
|
||||
- activeButtons: list of active elements
|
||||
- isActive: if current
|
||||
|
||||
#### SopClassHandler
|
||||
|
||||
...
|
||||
|
||||
Reference in new issue
Block a user