From 07f23fcb47f0884de8e52798c45d39205c4b0f9f Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Wed, 8 Jan 2020 13:45:08 -0700
Subject: [PATCH] Adds a new add/wrap plugin area in the top bar for more
expansive choices
---
.../integration/mirador/plugins/add.html | 14 +++++++++++++-
__tests__/src/components/WindowTopBar.test.js | 2 ++
.../components/WindowTopBarPluginArea.test.js | 9 +++++++++
src/components/WindowTopBar.js | 2 ++
src/components/WindowTopBarPluginArea.js | 16 ++++++++++++++++
src/containers/WindowTopBarPluginArea.js | 19 +++++++++++++++++++
6 files changed, 61 insertions(+), 1 deletion(-)
create mode 100644 __tests__/src/components/WindowTopBarPluginArea.test.js
create mode 100644 src/components/WindowTopBarPluginArea.js
create mode 100644 src/containers/WindowTopBarPluginArea.js
diff --git a/__tests__/integration/mirador/plugins/add.html b/__tests__/integration/mirador/plugins/add.html
index cb5bda4e7..d50ca8046 100644
--- a/__tests__/integration/mirador/plugins/add.html
+++ b/__tests__/integration/mirador/plugins/add.html
@@ -49,6 +49,12 @@
)
}
+ const AddPluginComponentE = (props) => (
+ <div id="add-plugin-component-e">
+ <input value="hello world"/>
+ </div>
+ );
+
const addPluginA = {
target: 'WorkspaceControlPanelButtons',
mode: 'add',
@@ -73,7 +79,13 @@
component: WrapPluginComponent,
};
- const miradorInstance = Mirador.viewer(config, [addPluginA, addPluginB, addPluginC, wrapPluginD]);
+ const addPluginE = {
+ target: 'WindowTopBarPluginArea',
+ mode: 'add',
+ component: AddPluginComponentE,
+ };
+
+ const miradorInstance = Mirador.viewer(config, [addPluginA, addPluginB, addPluginC, wrapPluginD, addPluginE]);
</script>
</body>
diff --git a/__tests__/src/components/WindowTopBar.test.js b/__tests__/src/components/WindowTopBar.test.js
index 425f1a012..92c832beb 100644
--- a/__tests__/src/components/WindowTopBar.test.js
+++ b/__tests__/src/components/WindowTopBar.test.js
@@ -5,6 +5,7 @@ import Toolbar from '@material-ui/core/Toolbar';
import AppBar from '@material-ui/core/AppBar';
import WindowTopMenuButton from '../../../src/containers/WindowTopMenuButton';
+import WindowTopBarPluginArea from '../../../src/containers/WindowTopBarPluginArea';
import WindowTopBarPluginMenu from '../../../src/containers/WindowTopBarPluginMenu';
import WindowTopBarTitle from '../../../src/containers/WindowTopBarTitle';
import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
@@ -35,6 +36,7 @@ describe('WindowTopBar', () => {
expect(wrapper.find(Toolbar).length).toBe(1);
expect(wrapper.find(MiradorMenuButton).length).toBe(3);
expect(wrapper.find(WindowTopBarTitle).length).toBe(1);
+ expect(wrapper.find(WindowTopBarPluginArea).length).toBe(1);
expect(wrapper.find(WindowTopBarPluginMenu).length).toBe(1);
expect(wrapper.find(WindowTopMenuButton).length).toBe(1);
expect(wrapper.find(FullScreenButton).length).toBe(0);
diff --git a/__tests__/src/components/WindowTopBarPluginArea.test.js b/__tests__/src/components/WindowTopBarPluginArea.test.js
new file mode 100644
index 000000000..31e9e2d33
--- /dev/null
+++ b/__tests__/src/components/WindowTopBarPluginArea.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { WindowTopBarPluginArea } from '../../../src/components/WindowTopBarPluginArea';
+import { PluginHook } from '../../../src/components/PluginHook';
+
+it('renders the component', () => {
+ const wrapper = shallow(<WindowTopBarPluginArea />);
+ expect(wrapper.find(PluginHook).length).toBe(1);
+});
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 45aeaf3ff..940017674 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -6,6 +6,7 @@ import Toolbar from '@material-ui/core/Toolbar';
import AppBar from '@material-ui/core/AppBar';
import classNames from 'classnames';
import WindowTopMenuButton from '../containers/WindowTopMenuButton';
+import WindowTopBarPluginArea from '../containers/WindowTopBarPluginArea';
import WindowTopBarPluginMenu from '../containers/WindowTopBarPluginMenu';
import WindowTopBarTitle from '../containers/WindowTopBarTitle';
import MiradorMenuButton from '../containers/MiradorMenuButton';
@@ -58,6 +59,7 @@ export class WindowTopBar extends Component {
{allowTopMenuButton && (
<WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} />
)}
+ <WindowTopBarPluginArea windowId={windowId} />
<WindowTopBarPluginMenu windowId={windowId} />
{allowMaximize && (
<MiradorMenuButton
diff --git a/src/components/WindowTopBarPluginArea.js b/src/components/WindowTopBarPluginArea.js
new file mode 100644
index 000000000..ce5ec626f
--- /dev/null
+++ b/src/components/WindowTopBarPluginArea.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { PluginHook } from './PluginHook';
+
+/**
+ *
+ */
+export class WindowTopBarPluginArea extends Component {
+ /** */
+ render() {
+ return (
+ <>
+ <PluginHook {...this.props} />
+ </>
+ );
+ }
+}
diff --git a/src/containers/WindowTopBarPluginArea.js b/src/containers/WindowTopBarPluginArea.js
new file mode 100644
index 000000000..4bcdc88f5
--- /dev/null
+++ b/src/containers/WindowTopBarPluginArea.js
@@ -0,0 +1,19 @@
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
+import { withPlugins } from '../extend/withPlugins';
+import { WindowTopBarPluginArea } from '../components/WindowTopBarPluginArea';
+
+/**
+ */
+const styles = {};
+
+const enhance = compose(
+ withTranslation(),
+ withStyles(styles),
+ connect(null, null),
+ withPlugins('WindowTopBarPluginArea'),
+);
+
+export default enhance(WindowTopBarPluginArea);
--
GitLab