From 36ca72dc05d52b3f5b8448b574aa5cac24f8e15d Mon Sep 17 00:00:00 2001
From: Jessie Keck <jessie.keck@gmail.com>
Date: Fri, 1 Mar 2019 12:45:58 -0800
Subject: [PATCH] Use the id stored in config object in redux to create a
scoped query selector to the mirador-viewer (and pass that to the various MUI
Menus as the container prop.
---
__tests__/src/components/WindowList.test.js | 3 +++
__tests__/src/components/WindowTopMenu.test.js | 1 +
__tests__/src/components/WorkspaceMenu.test.js | 1 +
src/components/WindowList.js | 12 ++++++++++--
src/components/WindowTopMenu.js | 14 ++++++++++++--
src/components/WorkspaceMenu.js | 12 ++++++++++--
src/containers/WindowList.js | 1 +
src/containers/WindowTopMenu.js | 18 +++++++++++++++++-
src/containers/WorkspaceMenu.js | 7 ++++---
9 files changed, 59 insertions(+), 10 deletions(-)
diff --git a/__tests__/src/components/WindowList.test.js b/__tests__/src/components/WindowList.test.js
index 06c65b65d..b96948578 100644
--- a/__tests__/src/components/WindowList.test.js
+++ b/__tests__/src/components/WindowList.test.js
@@ -17,6 +17,7 @@ describe('WindowList', () => {
wrapper = shallow(
<WindowList
+ containerId="mirador"
anchorEl={{}}
manifests={manifests}
windows={windows}
@@ -36,6 +37,7 @@ describe('WindowList', () => {
wrapper = shallow(
<WindowList
+ containerId="mirador"
anchorEl={{}}
manifests={manifests}
windows={windows}
@@ -64,6 +66,7 @@ describe('WindowList', () => {
wrapper = shallow(
<WindowList
+ containerId="mirador"
anchorEl={{}}
manifests={manifests}
windows={windows}
diff --git a/__tests__/src/components/WindowTopMenu.test.js b/__tests__/src/components/WindowTopMenu.test.js
index db9671e41..38d40e464 100644
--- a/__tests__/src/components/WindowTopMenu.test.js
+++ b/__tests__/src/components/WindowTopMenu.test.js
@@ -11,6 +11,7 @@ import { WindowTopMenu } from '../../../src/components/WindowTopMenu';
function createWrapper(props) {
return shallow(
<WindowTopMenu
+ containerId="mirador"
windowId="xyz"
handleClose={() => {}}
anchorEl={null}
diff --git a/__tests__/src/components/WorkspaceMenu.test.js b/__tests__/src/components/WorkspaceMenu.test.js
index 0dbfcd067..383c63cc2 100644
--- a/__tests__/src/components/WorkspaceMenu.test.js
+++ b/__tests__/src/components/WorkspaceMenu.test.js
@@ -14,6 +14,7 @@ describe('WorkspaceMenu', () => {
toggleZoomControls = jest.fn();
wrapper = shallow(
<WorkspaceMenu
+ containerId="mirador"
handleClose={handleClose}
showZoomControls={showZoomControls}
toggleZoomControls={toggleZoomControls}
diff --git a/src/components/WindowList.js b/src/components/WindowList.js
index 921b11c3a..b592d66dc 100644
--- a/src/components/WindowList.js
+++ b/src/components/WindowList.js
@@ -4,6 +4,7 @@ import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ListSubheader from '@material-ui/core/ListSubheader';
import PropTypes from 'prop-types';
+import ns from '../config/css-ns';
/**
*/
@@ -29,10 +30,16 @@ export class WindowList extends Component {
*/
render() {
const {
- handleClose, anchorEl, windows, focusWindow, t,
+ containerId, handleClose, anchorEl, windows, focusWindow, t,
} = this.props;
return (
- <Menu id="window-list-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+ <Menu
+ id="window-list-menu"
+ container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
<ListSubheader>
<Button color="inherit" aria-label={t('closeMenu')} onClick={handleClose} align="right" style={{ float: 'right' }}>×</Button>
{t('openWindows')}
@@ -55,6 +62,7 @@ export class WindowList extends Component {
}
WindowList.propTypes = {
+ containerId: PropTypes.string.isRequired,
focusWindow: PropTypes.func.isRequired,
handleClose: PropTypes.func.isRequired,
anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
diff --git a/src/components/WindowTopMenu.js b/src/components/WindowTopMenu.js
index d19e3c14c..b0465003e 100644
--- a/src/components/WindowTopMenu.js
+++ b/src/components/WindowTopMenu.js
@@ -5,6 +5,7 @@ import Divider from '@material-ui/core/Divider';
import PropTypes from 'prop-types';
import WindowThumbnailSettings from '../containers/WindowThumbnailSettings';
import WindowViewSettings from '../containers/WindowViewSettings';
+import ns from '../config/css-ns';
/**
*/
@@ -14,12 +15,20 @@ export class WindowTopMenu extends Component {
* @return
*/
render() {
- const { handleClose, anchorEl, windowId } = this.props;
+ const {
+ containerId, handleClose, anchorEl, windowId,
+ } = this.props;
// const {} = this.state;
return (
<>
- <Menu id={`window-menu_${windowId}`} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+ <Menu
+ id={`window-menu_${windowId}`}
+ container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
<ListItem>
<WindowViewSettings windowId={windowId} />
</ListItem>
@@ -35,6 +44,7 @@ export class WindowTopMenu extends Component {
}
WindowTopMenu.propTypes = {
+ containerId: PropTypes.string.isRequired,
windowId: PropTypes.string.isRequired,
handleClose: PropTypes.func.isRequired,
anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
diff --git a/src/components/WorkspaceMenu.js b/src/components/WorkspaceMenu.js
index 5019f94da..0d0a307fc 100644
--- a/src/components/WorkspaceMenu.js
+++ b/src/components/WorkspaceMenu.js
@@ -15,6 +15,7 @@ import { NestedMenu } from './NestedMenu';
import WindowList from '../containers/WindowList';
import WorkspaceSettings from '../containers/WorkspaceSettings';
import WorkspaceExport from '../containers/WorkspaceExport';
+import ns from '../config/css-ns';
/**
*/
@@ -72,7 +73,7 @@ export class WorkspaceMenu extends Component {
*/
render() {
const {
- handleClose, anchorEl, t, showZoomControls,
+ containerId, handleClose, anchorEl, t, showZoomControls,
} = this.props;
const {
@@ -84,7 +85,13 @@ export class WorkspaceMenu extends Component {
return (
<>
- <Menu id="workspace-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+ <Menu
+ id="workspace-menu"
+ container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
<MenuItem
aria-haspopup="true"
onClick={(e) => { this.handleMenuItemClick('windowList', e); handleClose(e); }}
@@ -158,6 +165,7 @@ export class WorkspaceMenu extends Component {
}
WorkspaceMenu.propTypes = {
+ containerId: PropTypes.string.isRequired,
handleClose: PropTypes.func.isRequired,
toggleZoomControls: PropTypes.func,
showZoomControls: PropTypes.bool,
diff --git a/src/containers/WindowList.js b/src/containers/WindowList.js
index ea83b10cb..3a77b6f8a 100644
--- a/src/containers/WindowList.js
+++ b/src/containers/WindowList.js
@@ -20,6 +20,7 @@ const mapDispatchToProps = {
*/
const mapStateToProps = state => (
{
+ containerId: state.config.id,
windows: state.windows,
manifests: state.manifests,
}
diff --git a/src/containers/WindowTopMenu.js b/src/containers/WindowTopMenu.js
index 5cfba2887..1dedc34c1 100644
--- a/src/containers/WindowTopMenu.js
+++ b/src/containers/WindowTopMenu.js
@@ -1,4 +1,20 @@
+import { compose } from 'redux';
+import { connect } from 'react-redux';
import miradorWithPlugins from '../lib/miradorWithPlugins';
import { WindowTopMenu } from '../components/WindowTopMenu';
-export default miradorWithPlugins(WindowTopMenu);
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof WindowTopMenu
+ * @private
+ */
+const mapStateToProps = state => ({
+ containerId: state.config.id,
+});
+
+const enhance = compose(
+ connect(mapStateToProps, null),
+ miradorWithPlugins,
+);
+
+export default enhance(WindowTopMenu);
diff --git a/src/containers/WorkspaceMenu.js b/src/containers/WorkspaceMenu.js
index 79392e276..7e4cd8e3f 100644
--- a/src/containers/WorkspaceMenu.js
+++ b/src/containers/WorkspaceMenu.js
@@ -17,9 +17,10 @@ const mapDispatchToProps = { toggleZoomControls: actions.toggleZoomControls };
* @memberof WindowViewer
* @private
*/
-const mapStateToProps = state => (
- { showZoomControls: state.workspace.showZoomControls }
-);
+const mapStateToProps = state => ({
+ containerId: state.config.id,
+ showZoomControls: state.workspace.showZoomControls,
+});
const enhance = compose(
withTranslation(),
--
GitLab