docs: extensions (#1258)

* docs: process docs to include UX Stories requirement * docs: include note regarding different environments * Services init * Remove unused canny logos * docs: add ModalService diagram * docs: GIF of notification * docs: add ui-services page * docs: simplify ui services call out in the general services docs * docs: tips and tricks for UI services * docs: moar pages * docs: dialog gif * docs: services in summary/sidebar * docs: gif examples at top of dialog and notification pages * docs: add UIModal gif * docs: details for Dialog Service * docs: include usage information for ui modal service * docs: detailed information about our UI Notification Service * docs: services diagram * docs: remove unused links * docs: services example and image * docs: stubbing extension pages * docs: UX Stories --> User Cases * chore: eslint fix * docs: extensions overview + diagram * docs: update extensions in sidebar * docs: extension skeleton and registration info * docs: copy of maintained extensions table partial in the extensions folder * docs: swap out old extensions structure for new
2019-12-06 16:31:46 -05:00
1 parent fd1d29820a
commit 02572b4928
@@ -0,0 +1,48 @@
+# Module: Toolbar
+
+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`.
+
+![Toolbar Extension](../assets/img/extensions-toolbar.gif)
+
+<center><i>A toolbar extension example</i></center>
+
+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