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
This commit is contained in:
Danny Brown authored and GitHub committed
1 parent
9827d1bf84
commit
75d88bc454
21 files changed
+317
-398
No files matched your search
@@ -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))
|
||||
);
|
||||
Reference in new issue
Block a user