chore(release): publish [skip ci]

- @ohif/viewer@1.2.0
feat: 🎸 React custom component on toolbar button (#935 )
2019-09-26 17:56:20 +00:00 · 2019-09-26 13:45:19 -04:00 · 2019-09-26 14:21:10 +00:00 · 2019-09-26 10:08:30 -04:00 · 2019-09-26 12:24:19 +00:00 · 2019-09-26 11:35:13 +02:00
31 changed files with 457 additions and 77 deletions
@@ -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`.

 ![Toolbar Extension](../assets/img/extensions-toolbar.gif)

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

 ...
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -34,5 +35,10 @@ module.exports = (env, argv) => {
      libraryExport: 'default',
      filename: pkg.main,
    },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
  });
 };
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.1...@ohif/extension-cornerstone@1.2.2) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
 ## [1.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.0...@ohif/extension-cornerstone@1.2.1) (2019-09-17)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "1.2.1",
+  "version": "1.2.2",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -0,0 +1,37 @@
+/**
+ * We use this component to leverage "Code Splitting"
+ *
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null,
+      };
+    }
+
+    async componentDidMount() {
+      // Add dynamically loaded component to state
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component: component,
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+
+      // Render the loaded component, or null
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
+}
@@ -1,7 +1,9 @@
-import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js';
+import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';

+const OHIFCornerstoneViewport = asyncComponent(() => import( /* webpackChunkName: "OHIFCornerstoneViewport" */ './OHIFCornerstoneViewport.js'));
+
 /**
 *
 */
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -34,5 +35,10 @@ module.exports = (env, argv) => {
      libraryExport: 'default',
      filename: pkg.main,
    },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
  });
 };
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.50.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.7...@ohif/extension-dicom-html@0.50.8) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
 ## [0.50.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.6...@ohif/extension-dicom-html@0.50.7) (2019-09-12)

 **Note:** Version bump only for package @ohif/extension-dicom-html
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-html",
-  "version": "0.50.7",
+  "version": "0.50.8",
  "description": "OHIF extension for rendering structured reports to HTML",
  "author": "OHIF",
  "license": "MIT",
@@ -0,0 +1,37 @@
+/**
+ * We use this component to leverage "Code Splitting"
+ *
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null,
+      };
+    }
+
+    async componentDidMount() {
+      // Add dynamically loaded component to state
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component: component,
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+
+      // Render the loaded component, or null
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
+}
@@ -1,5 +1,11 @@
+import asyncComponent from './asyncComponent.js';
 import OHIFDicomHtmlSopClassHandler from './OHIFDicomHtmlSopClassHandler.js';
-import OHIFDicomHtmlViewport from './OHIFDicomHtmlViewport.js';
+
+const OHIFDicomHtmlViewport = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "OHIFDicomHtmlViewport" */ './OHIFDicomHtmlViewport.js'
+  )
+);

 export default {
  /**
@@ -12,5 +18,5 @@ export default {
  },
  getSopClassHandlerModule() {
    return OHIFDicomHtmlSopClassHandler;
-  }
+  },
 };
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -34,5 +35,10 @@ module.exports = (env, argv) => {
      libraryExport: 'default',
      filename: pkg.main,
    },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+           maxChunks: 1
+       })
+    ]
  });
 };
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.5...@ohif/extension-dicom-microscopy@0.50.6) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
 ## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.4...@ohif/extension-dicom-microscopy@0.50.5) (2019-09-10)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-microscopy",
-  "version": "0.50.5",
+  "version": "0.50.6",
  "description": "OHIF extension for Dicom Microscopy",
  "author": "OHIF",
  "license": "MIT",
@@ -1,10 +1,7 @@
 import React, { Component } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
-import { api } from 'dicom-microscopy-viewer';
 import debounce from 'lodash.debounce';

-const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
-
 class DicomMicroscopyViewport extends Component {
  state = {
    error: null,
@@ -56,9 +53,12 @@ class DicomMicroscopyViewport extends Component {
        }
        return Promise.all(promises);
      })
-      .then(metadata => {
+      .then(async metadata => {
        metadata = metadata.filter(m => m);

+        const { api } = await import(/* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer');
+        const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
+
        this.viewer = new microscopyViewer({
          client: dicomWebClient,
          metadata,
@@ -0,0 +1,37 @@
+/**
+ * We use this component to leverage "Code Splitting"
+ *
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null,
+      };
+    }
+
+    async componentDidMount() {
+      // Add dynamically loaded component to state
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component: component,
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+
+      // Render the loaded component, or null
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
+}
@@ -1,5 +1,11 @@
+import asyncComponent from './asyncComponent.js';
 import DicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler.js';
-import DicomMicroscopyViewport from './DicomMicroscopyViewport.js';
+
+const DicomMicroscopyViewport = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "DicomMicroscopyViewport" */ './DicomMicroscopyViewport.js'
+  )
+);

 export default {
  /**
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -34,5 +35,10 @@ module.exports = (env, argv) => {
      libraryExport: 'default',
      filename: pkg.main,
    },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
  });
 };
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.50.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.19...@ohif/extension-vtk@0.50.20) (2019-09-26)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.18...@ohif/extension-vtk@0.50.19) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
 ## [0.50.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.17...@ohif/extension-vtk@0.50.18) (2019-09-23)

 **Note:** Version bump only for package @ohif/extension-vtk
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "0.50.18",
+  "version": "0.50.20",
  "description": "OHIF extension for VTK.js",
  "author": "OHIF",
  "license": "MIT",
@@ -52,7 +52,7 @@
  },
  "devDependencies": {
    "@ohif/core": "^0.50.10",
-    "@ohif/ui": "^0.51.1",
+    "@ohif/ui": "^0.51.2",
    "cornerstone-tools": "^4.0.9",
    "cornerstone-wado-image-loader": "^3.0.0",
    "dcmjs": "^0.6.1",
@@ -0,0 +1,37 @@
+/**
+ * We use this component to leverage "Code Splitting"
+ *
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+
+import React, { Component } from 'react';
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null,
+      };
+    }
+
+    async componentDidMount() {
+      // Add dynamically loaded component to state
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component: component,
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+
+      // Render the loaded component, or null
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
+}
@@ -1,9 +1,13 @@
-import OHIFVTKViewport from './OHIFVTKViewport.js';
+import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
 // This feels weird
 // import loadLocales from './loadLocales';

+const OHIFVTKViewport = asyncComponent(() =>
+  import(/* webpackChunkName: "OHIFVTKViewport" */ './OHIFVTKViewport.js')
+);
+
 const vtkExtension = {
  /**
   * Only required property. Should be a unique value across all extensions.
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.51.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.51.1...@ohif/ui@0.51.2) (2019-09-26)
+
+
+### Bug Fixes
+
+* 🐛 Set series into active viewport by clicking on thumbnail ([#945](https://github.com/OHIF/Viewers/issues/945)) ([5551f81](https://github.com/OHIF/Viewers/commit/5551f81)), closes [#895](https://github.com/OHIF/Viewers/issues/895) [#895](https://github.com/OHIF/Viewers/issues/895)
+
+
+
+
+
 ## [0.51.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.51.0...@ohif/ui@0.51.1) (2019-09-19)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/ui",
-  "version": "0.51.1",
+  "version": "0.51.2",
  "description": "A set of React components for Medical Imaging Viewers",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -99,13 +99,13 @@ class ThumbnailEntry extends Component {

  onClick = () => {
    if (this.props.onClick) {
-      this.props.onClick();
+      this.props.onClick(this.props.displaySetInstanceUid);
    }
  };

  onDoubleClick = () => {
    if (this.props.onDoubleClick) {
-      this.props.onDoubleClick();
+      this.props.onDoubleClick(this.props.displaySetInstanceUid);
    }
  };
 }
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const merge = require('webpack-merge');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -54,6 +55,9 @@ module.exports = (env, argv) => {
        template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
        filename: 'index.html',
      }),
+      new webpack.optimize.LimitChunkCountPlugin({
+           maxChunks: 1
+       })
    ],
  });
 };
@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.1.14...@ohif/viewer@1.2.0) (2019-09-26)
+
+
+### Features
+
+* 🎸 React custom component on toolbar button ([#935](https://github.com/OHIF/Viewers/issues/935)) ([a90605c](https://github.com/OHIF/Viewers/commit/a90605c))
+
+
+
+
+
+## [1.1.14](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.1.13...@ohif/viewer@1.1.14) (2019-09-26)
+
+
+### Bug Fixes
+
+* 🐛 Set series into active viewport by clicking on thumbnail ([#945](https://github.com/OHIF/Viewers/issues/945)) ([5551f81](https://github.com/OHIF/Viewers/commit/5551f81)), closes [#895](https://github.com/OHIF/Viewers/issues/895) [#895](https://github.com/OHIF/Viewers/issues/895)
+
+
+
+
+
+## [1.1.13](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.1.12...@ohif/viewer@1.1.13) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
 ## [1.1.12](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.1.11...@ohif/viewer@1.1.12) (2019-09-26)

 **Note:** Version bump only for package @ohif/viewer
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/viewer",
-  "version": "1.1.12",
+  "version": "1.2.0",
  "description": "OHIF Viewer",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -47,13 +47,13 @@
  "dependencies": {
    "@babel/runtime": "^7.5.5",
    "@ohif/core": "^0.50.10",
-    "@ohif/extension-cornerstone": "^1.2.1",
-    "@ohif/extension-dicom-html": "^0.50.7",
-    "@ohif/extension-dicom-microscopy": "^0.50.5",
+    "@ohif/extension-cornerstone": "^1.2.2",
+    "@ohif/extension-dicom-html": "^0.50.8",
+    "@ohif/extension-dicom-microscopy": "^0.50.6",
    "@ohif/extension-dicom-pdf": "^0.50.4",
-    "@ohif/extension-vtk": "^0.50.18",
+    "@ohif/extension-vtk": "^0.50.20",
    "@ohif/i18n": "^0.50.4",
-    "@ohif/ui": "^0.51.1",
+    "@ohif/ui": "^0.51.2",
    "@tanem/react-nprogress": "^1.1.25",
    "classnames": "^2.2.6",
    "core-js": "^3.2.1",
@@ -7,13 +7,7 @@ import { CSSTransition } from 'react-transition-group';
 import { connect } from 'react-redux';
 import { ViewerbaseDragDropContext } from '@ohif/ui';
 import { SignoutCallbackComponent } from 'redux-oidc';
-// import asyncComponent from './components/AsyncComponent.js'
-import IHEInvokeImageDisplay from './routes/IHEInvokeImageDisplay.js';
-import ViewerRouting from './routes/ViewerRouting.js';
-import ViewerLocalFileData from './connectedComponents/ViewerLocalFileData.js';
-import StudyListRouting from './studylist/StudyListRouting.js';
-import StandaloneRouting from './routes/StandaloneRouting.js';
-import CallbackPage from './routes/CallbackPage.js';
+import asyncComponent from './components/AsyncComponent.js';
 import NotFound from './routes/NotFound.js';
 import { Bar, Container } from './components/LoadingBar/';
 import './OHIFStandaloneViewer.css';
@@ -24,18 +18,32 @@ import './theme-tide.css';
 import AppContext from './context/AppContext';

 // Dynamic Import Routes (CodeSplitting)
-// const IHEInvokeImageDisplay = asyncComponent(() =>
-//   import('./routes/IHEInvokeImageDisplay.js')
-// )
-// const ViewerRouting = asyncComponent(() => import('./routes/ViewerRouting.js'))
-// const StudyListRouting = asyncComponent(() =>
-//   import('./studylist/StudyListRouting.js')
-// )
-// const StandaloneRouting = asyncComponent(() =>
-//   import('./routes/StandaloneRouting.js')
-// )
-// const CallbackPage = asyncComponent(() => import('./CallbackPage.js'))
-//
+const IHEInvokeImageDisplay = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "IHEInvokeImageDisplay" */ './routes/IHEInvokeImageDisplay.js'
+  )
+);
+const ViewerRouting = asyncComponent(() =>
+  import(/* webpackChunkName: "ViewerRouting" */ './routes/ViewerRouting.js')
+);
+const StudyListRouting = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "StudyListRouting" */ './studylist/StudyListRouting.js'
+  )
+);
+const StandaloneRouting = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "StandaloneRouting" */ './routes/StandaloneRouting.js'
+  )
+);
+const CallbackPage = asyncComponent(() =>
+  import(/* webpackChunkName: "CallbackPage" */ './routes/CallbackPage.js')
+);
+const ViewerLocalFileData = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "ViewerLocalFileData" */ './connectedComponents/ViewerLocalFileData.js'
+  )
+);

 const reload = () => window.location.reload();

@@ -188,10 +196,14 @@ class OHIFStandaloneViewer extends Component {
                  classNames="fade"
                  unmountOnExit
                  onEnter={() => {
-                    this.setState({ isLoading: true });
+                    this.setState({
+                      isLoading: true,
+                    });
                  }}
                  onEntered={() => {
-                    this.setState({ isLoading: false });
+                    this.setState({
+                      isLoading: false,
+                    });
                  }}
                >
                  {match === null ? (
@@ -1,7 +1,10 @@
+import OHIF from '@ohif/core';
 import { connect } from 'react-redux';
 import { StudyBrowser } from '@ohif/ui';
 import cloneDeep from 'lodash.clonedeep';

+const { setActiveViewportSpecificData } = OHIF.redux.actions;
+
 // TODO
 // - Determine in which display set is active from Redux (activeViewportIndex and layout viewportData)
 // - Pass in errors and stack loading progress from Redux
@@ -32,9 +35,21 @@ const mapStateToProps = (state, ownProps) => {
  };
 };

+const mapDispatchToProps = dispatch => {
+  return {
+    onThumbnailClick: displaySetInstanceUid => {
+      dispatch(
+        setActiveViewportSpecificData({
+          displaySetInstanceUid,
+        })
+      );
+    },
+  };
+};
+
 const ConnectedStudyBrowser = connect(
  mapStateToProps,
-  null
+  mapDispatchToProps
 )(StudyBrowser);

 export default ConnectedStudyBrowser;
@@ -150,45 +150,82 @@ class ToolbarRow extends Component {
  }
 }

+function _getCustomButtonComponent(button, activeButtons) {
+  const CustomComponent = button.CustomComponent;
+  const isValidComponent = typeof CustomComponent === 'function';
+
+  // Check if its a valid customComponent. Later on an CustomToolbarComponent interface could be implemented.
+  if (isValidComponent) {
+    const parentContext = this;
+    const isActive = activeButtons.includes(button.id);
+
+    return (
+      <CustomComponent
+        parentContext={parentContext}
+        toolbarClickCallback={_handleToolbarButtonClick.bind(this)}
+        button={button}
+        key={button.id}
+        activeButtons={activeButtons}
+        isActive={isActive}
+      />
+    );
+  }
+}
+
+function _getExpandableButtonComponent(button, activeButtons) {
+  // Iterate over button definitions and update `onClick` behavior
+  let activeCommand;
+  const childButtons = button.buttons.map(childButton => {
+    childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);
+
+    if (activeButtons.indexOf(childButton.id) > -1) {
+      activeCommand = childButton.id;
+    }
+
+    return childButton;
+  });
+
+  return (
+    <ExpandableToolMenu
+      key={button.id}
+      label={button.label}
+      icon={button.icon}
+      buttons={childButtons}
+      activeCommand={activeCommand}
+    />
+  );
+}
+
+function _getDefaultButtonComponent(button, activeButtons) {
+  return (
+    <ToolbarButton
+      key={button.id}
+      label={button.label}
+      icon={button.icon}
+      onClick={_handleToolbarButtonClick.bind(this, button)}
+      isActive={activeButtons.includes(button.id)}
+    />
+  );
+}
 /**
 * Determine which extension buttons should be showing, if they're
 * active, and what their onClick behavior should be.
 */
 function _getButtonComponents(toolbarButtons, activeButtons) {
-  return toolbarButtons.map((button, index) => {
-    let activeCommand = undefined;
+  const _this = this;
+  return toolbarButtons.map(button => {
+    const hasCustomComponent = button.CustomComponent;
+    const hasNestedButtonDefinitions = button.buttons && button.buttons.length;

-    if (button.buttons && button.buttons.length) {
-      // Iterate over button definitions and update `onClick` behavior
-      const childButtons = button.buttons.map(childButton => {
-        childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);
-
-        if (activeButtons.indexOf(childButton.id) > -1) {
-          activeCommand = childButton.id;
-        }
-
-        return childButton;
-      });
-
-      return (
-        <ExpandableToolMenu
-          key={button.id}
-          label={button.label}
-          icon={button.icon}
-          buttons={childButtons}
-          activeCommand={activeCommand}
-        />
-      );
+    if (hasCustomComponent) {
+      return _getCustomButtonComponent.call(_this, button, activeButtons);
    }
-    return (
-      <ToolbarButton
-        key={button.id}
-        label={button.label}
-        icon={button.icon}
-        onClick={_handleToolbarButtonClick.bind(this, button)}
-        isActive={activeButtons.includes(button.id)}
-      />
-    );
+
+    if (hasNestedButtonDefinitions) {
+      return _getExpandableButtonComponent.call(_this, button, activeButtons);
+    }
+
+    return _getDefaultButtonComponent.call(_this, button, activeButtons);
  });
 }
Author	SHA1	Message	Date
ohif-bot	7f4d71e412	chore(release): publish [skip ci] - @ohif/viewer@1.2.0	2019-09-26 17:56:20 +00:00
ladeirarodolfo	a90605c82d	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	2019-09-26 13:45:19 -04:00
ohif-bot	5b523c2afa	chore(release): publish [skip ci] - @ohif/extension-vtk@0.50.20 - @ohif/ui@0.51.2 - @ohif/viewer@1.1.14	2019-09-26 14:21:10 +00:00
Gustavo André Lelis	5551f817e3	fix: 🐛 Set series into active viewport by clicking on thumbnail (#945 ) * fix: 🐛 Set series into active viewport by clicking on thumbnail Users should be able to set the series for the active viewport by clicking it's thumbnail into Study browser Closes: #895 * fix: 🐛 Set series into active viewport by clicking on thumbnail Small refactor into onClick data callback and thumbnailClick function Closes: #895 * fix: 🐛 Refactor thumbnail click code changes * fix: 🐛 We must clear the sopInstanceUid if we don't update it together with the viewportSpecificData, preventing console warning. * fix: 🐛 Cleaning up a few more code changes	2019-09-26 10:08:30 -04:00
ohif-bot	a9ca3fa026	chore(release): publish [skip ci] - @ohif/extension-cornerstone@1.2.2 - @ohif/extension-dicom-html@0.50.8 - @ohif/extension-dicom-microscopy@0.50.6 - @ohif/extension-vtk@0.50.19 - @ohif/viewer@1.1.13	2019-09-26 12:24:19 +00:00
Erik Ziegler	89380353d2	fix: Add some code splitting for PWA build (#937 ) * fix: Add some code splitting for PWA build * Fix missing files	2019-09-26 11:35:13 +02:00