Merge pull request #3005 from ProjectMirador/custom-panel

Add some API enhancements to facilitate annotation creation

__tests__/src/components/CompanionWindowFactory.test.js

@@ -7,6 +7,7 @@ import ThumbnailNavigation from '../../../src/containers/ThumbnailNavigation';
 import AttributionPanel from '../../../src/containers/AttributionPanel';
 import SearchPanel from '../../../src/containers/SearchPanel';
 import LayersPanel from '../../../src/containers/LayersPanel';
+import CustomPanel from '../../../src/containers/CustomPanel';
 import { CompanionWindowFactory } from '../../../src/components/CompanionWindowFactory';
 
 /** create wrapper */
@@ -93,4 +94,14 @@ describe('CompanionWindowFactory', () => {
       expect(wrapper.find(LayersPanel).length).toBe(1);
     });
   });
+
+  describe('for a custom panel', () => {
+    it('renders the appropriate arg component', () => {
+      wrapper = createWrapper({
+        content: 'custom',
+      });
+
+      expect(wrapper.find(CustomPanel).length).toBe(1);
+    });
+  });
 });

src/components/CanvasAnnotations.js

@@ -58,6 +58,7 @@ export class CanvasAnnotations extends Component {
   render() {
     const {
       annotations, classes, index, label, selectedAnnotationIds, t, totalSize,
+      listContainerComponent,
     } = this.props;
     if (annotations.length === 0) return <></>;
 
@@ -71,9 +72,10 @@ export class CanvasAnnotations extends Component {
             annotations.map(annotation => (
               <ListItem
                 button
-                component="li"
+                component={listContainerComponent}
                 className={classes.annotationListItem}
                 key={annotation.id}
+                annotationid={annotation.id}
                 selected={selectedAnnotationIds.includes(annotation.id)}
                 onClick={e => this.handleClick(e, annotation)}
                 onFocus={() => this.handleAnnotationHighlight(annotation)}
@@ -106,6 +108,7 @@ CanvasAnnotations.propTypes = {
   highlightAnnotation: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired,
   label: PropTypes.string.isRequired,
+  listContainerComponent: PropTypes.elementType,
   selectAnnotation: PropTypes.func.isRequired,
   selectedAnnotationIds: PropTypes.arrayOf(PropTypes.string),
   t: PropTypes.func.isRequired,
@@ -115,5 +118,6 @@ CanvasAnnotations.propTypes = {
 CanvasAnnotations.defaultProps = {
   annotations: [],
   classes: {},
+  listContainerComponent: 'li',
   selectedAnnotationIds: [],
 };

src/components/CompanionWindowFactory.js

@@ -7,6 +7,7 @@ import WindowSideBarCanvasPanel from '../containers/WindowSideBarCanvasPanel';
 import AttributionPanel from '../containers/AttributionPanel';
 import SearchPanel from '../containers/SearchPanel';
 import LayersPanel from '../containers/LayersPanel';
+import CustomPanel from '../containers/CustomPanel';
 
 /**
  * Render a companion window using the appropriate component for the content
@@ -31,6 +32,8 @@ export class CompanionWindowFactory extends Component {
         return <SearchPanel id={id} windowId={windowId} />;
       case 'layers':
         return <LayersPanel id={id} windowId={windowId} />;
+      case 'custom':
+        return <CustomPanel id={id} windowId={windowId} />;
       default:
         return (<></>);
     }

src/components/CustomPanel.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import CompanionWindow from '../containers/CompanionWindow';
+
+/**
+ * a custom panel that can be used for anything
+ */
+export class CustomPanel extends Component {
+  /**
+   * render
+   */
+  render() {
+    const {
+      id,
+      children,
+      t,
+      title,
+      windowId,
+    } = this.props;
+
+    return (
+      <CompanionWindow
+        title={t(title)}
+        id={id}
+        windowId={windowId}
+      >
+        {children}
+      </CompanionWindow>
+    );
+  }
+}
+
+CustomPanel.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};
+
+CustomPanel.defaultProps = {
+  children: null,
+};

src/containers/CanvasAnnotations.js

@@ -2,6 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
+import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
   getAnnotationResourcesByMotivationForCanvas,
@@ -69,6 +70,7 @@ const enhance = compose(
   withTranslation(),
   withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
+  withPlugins('CanvasAnnotations'),
 );
 
 export default enhance(CanvasAnnotations);

src/containers/CustomPanel.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+import { withStyles } from '@material-ui/core/styles';
+import { withPlugins } from '../extend/withPlugins';
+import { CustomPanel } from '../components/CustomPanel';
+import {
+} from '../state/selectors';
+
+/**
+ * mapStateToProps - to hook up connect
+ */
+const mapStateToProps = (state, { id, windowId }) => ({
+});
+
+/**
+ *
+ * @param theme
+ * @returns {label: {paddingLeft: number}}}
+ */
+const styles = theme => ({
+});
+
+const enhance = compose(
+  withTranslation(),
+  withStyles(styles),
+  connect(mapStateToProps),
+  withPlugins('CustomPanel'),
+);
+
+export default enhance(CustomPanel);