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
2019-11-05 23:07:03 -05:00
1 parent 9827d1bf84
commit 75d88bc454
@@ -3,6 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+
 # [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.4.1...@ohif/viewer@2.5.0) (2019-11-05)


@@ -1,15 +1,15 @@
-import './Header.css';
-
-import { Link, withRouter } from 'react-router-dom';
 import React, { Component } from 'react';
+import { Link, withRouter } from 'react-router-dom';
+import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';

 import { Dropdown } from '@ohif/ui';
-import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
-import PropTypes from 'prop-types';
-import { AboutModal } from '@ohif/ui';
-import { hotkeysManager } from './../../App.js';
-import { withTranslation } from 'react-i18next';
+import { AboutContent } from '@ohif/ui';
+import { withModal } from '@ohif/ui';

+import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
+import { hotkeysManager } from './../../App.js';
+import './Header.css';
 // Context
 import AppContext from './../../context/AppContext';

@@ -21,6 +21,8 @@ class Header extends Component {
    children: PropTypes.node,
    t: PropTypes.func.isRequired,
    userManager: PropTypes.object,
+    user: PropTypes.object,
+    modalContext: PropTypes.object,
  };

  static defaultProps = {
@@ -50,26 +52,29 @@ class Header extends Component {
  }

  loadOptions() {
-    const { t } = this.props;
+    const {
+      t,
+      user,
+      userManager,
+      modalContext: { show },
+    } = this.props;
    this.options = [
      {
        title: t('About'),
        icon: { name: 'info' },
-        onClick: () => {
-          this.setState({
-            isOpen: true,
-          });
-        },
+        onClick: () =>
+          show(AboutContent, {
+            title: t('OHIF Viewer - About'),
+            customClassName: 'AboutContent',
+          }),
      },
    ];

-    if (this.props.user && this.props.userManager) {
+    if (user && userManager) {
      this.options.push({
        title: t('Logout'),
        icon: { name: 'power-off' },
-        onClick: () => {
-          this.props.userManager.signoutRedirect();
-        },
+        onClick: () => userManager.signoutRedirect(),
      });
    }

@@ -85,32 +90,32 @@ class Header extends Component {

  // ANTD -- Hamburger, Drawer, Menu
  render() {
-    const { t } = this.props;
+    const { t, home, location, children } = this.props;
    const { appConfig = {} } = this.context;
    const showStudyList =
      appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
    return (
      <>
        <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
-        <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
+        <div className={`entry-header ${home ? 'header-big' : ''}`}>
          <div className="header-left-box">
-            {this.props.location && this.props.location.studyLink && (
+            {location && location.studyLink && (
              <Link
-                to={this.props.location.studyLink}
+                to={location.studyLink}
                className="header-btn header-viewerLink"
              >
                {t('Back to Viewer')}
              </Link>
            )}

-            {this.props.children}
+            {children}

-            {showStudyList && !this.props.home && (
+            {showStudyList && !home && (
              <Link
                className="header-btn header-studyListLinkSection"
                to={{
                  pathname: '/',
-                  state: { studyLink: this.props.location.pathname },
+                  state: { studyLink: location.pathname },
                }}
              >
                {t('Study list')}
@@ -123,16 +128,6 @@ class Header extends Component {
              {t('INVESTIGATIONAL USE ONLY')}
            </span>
            <Dropdown title={t('Options')} list={this.options} align="right" />
-
-            {/* TODO: We need a Modal service */}
-            <AboutModal
-              {...this.state}
-              onCancel={() =>
-                this.setState({
-                  isOpen: false,
-                })
-              }
-            />
          </div>
        </div>
      </>
@@ -140,4 +135,6 @@ class Header extends Component {
  }
 }

-export default withTranslation('Header')(withRouter(Header));
+export default withTranslation(['Header', 'AboutModal'])(
+  withRouter(withModal(Header))
+);
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { DownloadDialog } from '@ohif/ui';
+import { ViewportDownloadForm } from '@ohif/ui';
 import { utils } from '@ohif/core';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
@@ -14,11 +14,11 @@ const mapStateToProps = (state, ownProps) => {
    viewportSpecificData[activeViewportIndex] || {};

  return {
+    onClose: ownProps.hide,
    minimumSize: MINIMUM_SIZE,
    maximumSize: MAX_TEXTURE_SIZE,
    defaultSize: DEFAULT_SIZE,
    canvasClass: 'cornerstone-canvas',
-    onClose: ownProps.toggleDownloadDialog,
    activeViewport: activeEnabledElement,
    enableViewport: viewportElement => {
      if (viewportElement) {
@@ -122,9 +122,9 @@ const mapStateToProps = (state, ownProps) => {
  };
 };

-const ConnectedDownloadDialog = connect(
+const ConnectedViewportDownloadForm = connect(
  mapStateToProps,
  null
-)(DownloadDialog);
+)(ViewportDownloadForm);

-export default ConnectedDownloadDialog;
+export default ConnectedViewportDownloadForm;
@@ -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)
+);