feat: modal provider (#1151)

* feat: 🎸 New modal provider

A new modal provider/context component to unify modal related code and
simplify modal use

Closes: #1086

* refactor(ModalContext): Keep current modal lib

* Update modal provider version according to PR #1116

* Update modal provider props to use inner props

* Add custom class prop

* CR Update: Refactor provider to extract specific modal

* Fix modal import

* CR Update: Move from spread to object assign

* CR Update: Add proptypes, use classnames dependency over interpolation and rename modal

* fix: 🎸 Update AboutModal to use new modal provider (#1116)

* feat: 🎸 Update AboutModal to use new modal provider

This feature updates the AboutModal component and Header to use the new
modal context (modal provider)

* feat(ModalProvider): Add title prop to provider

* fix(ModalContext): Add defaults on hide

* CR Updates: Refactor modal provider and fix import

* CR Update: Expose props and flat modal optons

* Use customclassname instead of static

* Add cypress tag

* test: set right viewport when layout is decreased (#1146)

* chore(release): publish [skip ci]

 - @ohif/viewer@2.3.6

* fix: 🐛 Minor issues measurement panel related to description (#1142)

* chore(release): publish [skip ci]

 - @ohif/extension-vtk@0.52.28
 - @ohif/ui@0.58.5
 - @ohif/viewer@2.3.7

* fix: 🐛 Upgrade react-vtkjs-viewport to fix volume orientation (#1143)

* chore(release): publish [skip ci]

 - @ohif/extension-vtk@0.52.29
 - @ohif/viewer@2.3.8

* CR Update: Extract and rename AboutModal to AboutContent

* feat: 🎸 New modal provider (#1110)

* feat: 🎸 New modal provider

A new modal provider/context component to unify modal related code and
simplify modal use

Closes: #1086

* refactor(ModalContext): Keep current modal lib

* Update modal provider version according to PR #1116

* Update modal provider props to use inner props

* Add custom class prop

* CR Update: Refactor provider to extract specific modal

* Fix modal import

* CR Update: Move from spread to object assign

* CR Update: Add proptypes, use classnames dependency over interpolation and rename modal

* chore(release): publish [skip ci]

 - @ohif/extension-vtk@0.52.30
 - @ohif/ui@0.59.0
 - @ohif/viewer@2.4.0

* CR Update: Keep translation name

* CR Update: Reposition cy tag of about modal in the correct level

* feat: 🎸 Update DownloadModal to use new modal provider (#1119)

* feat: 🎸 Update AboutModal to use new modal provider

This feature updates the AboutModal component and Header to use the new
modal context (modal provider)

* feat(ModalProvider): Add title prop to provider

* feat(DownloadModal): Refactor to use new modal provider

* Update modal provider props

* Use translation for DownloadDialog

* CR Update: Use useTranslation hook

* CR Update: Extract downloadDialog and rename to downloadContent

* CR Update: Fix typo

* CR Update: Rename download content to viewport download form

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -6,17 +6,17 @@ import {
   ExpandableToolMenu,
   RoundedButtonGroup,
   ToolbarButton,
+  withModal,
 } from '@ohif/ui';
 
 import './ToolbarRow.css';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
-import ConnectedDownloadDialog from './ConnectedDownloadDialog';
+import ConnectedViewportDownloadForm from './ConnectedViewportDownloadForm';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 
-
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
   // closed if selected is null/undefined
@@ -46,13 +46,10 @@ class ToolbarRow extends Component {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
       isCineDialogOpen: false,
-      isDownloadScreenShotDialogOpen: false,
     };
 
     this._handleBuiltIn = _handleBuiltIn.bind(this);
 
-    this.toggleDownloadDialog = toggleDownloadDialog.bind(this);
-
     const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
     this.buttonGroups = {
       left: [
@@ -116,13 +113,6 @@ class ToolbarRow extends Component {
       zIndex: 999,
     };
 
-    const downloadScreenShotContainerStyle = {
-      display: this.state.isDownloadScreenShotDialogOpen ? 'block' : 'none',
-      position: 'absolute',
-      top: '82px',
-      zIndex: 1001,
-    };
-
     const onPress = (side, value) => {
       this.props.handleSidePanelChange(side, value);
     };
@@ -158,12 +148,6 @@ class ToolbarRow extends Component {
         <div className="CineDialogContainer" style={cineDialogContainerStyle}>
           <ConnectedCineDialog />
         </div>
-        <div className="DownloadScreenShotContainer" style={downloadScreenShotContainerStyle}>
-          <ConnectedDownloadDialog
-            isOpen={this.state.isDownloadScreenShotDialogOpen}
-            toggleDownloadDialog={this.toggleDownloadDialog}
-          />
-        </div>
       </>
     );
   }
@@ -295,15 +279,6 @@ function _getVisibleToolbarButtons() {
   return toolbarButtonDefinitions;
 }
 
-/**
- * Toggles the Download Dialog Modal
- */
-function toggleDownloadDialog() {
-  this.setState({
-    isDownloadScreenShotDialogOpen: !this.state.isDownloadScreenShotDialogOpen,
-  });
-}
-
 function _handleBuiltIn({ behavior } = {}) {
   if (behavior === 'CINE') {
     this.setState({
@@ -312,8 +287,13 @@ function _handleBuiltIn({ behavior } = {}) {
   }
 
   if (behavior === 'DOWNLOAD_SCREEN_SHOT') {
-    this.toggleDownloadDialog();
+    this.props.modalContext.show(ConnectedViewportDownloadForm, {
+      title: this.props.t('Download High Quality Image'),
+      customClassName: 'ViewportDownloadForm',
+    });
   }
 }
 
-export default withTranslation('Common')(ToolbarRow);
+export default withTranslation(['Common', 'ViewportDownloadForm'])(
+  withModal(ToolbarRow)
+);