Merge pull request #2752 from ProjectMirador/2741-scrollto

Add ScrollTo for search hits

__tests__/src/components/SearchHit.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import { SearchHit } from '../../../src/components/SearchHit';
+import { ScrollTo } from '../../../src/components/ScrollTo';
 
 
 /**
@@ -42,6 +43,12 @@ describe('SearchHit', () => {
     expect(wrapper.find('WithStyles(ForwardRef(ListItemText))').render().text()).toEqual('1xyz');
   });
 
+  it('renders a ScrollTo', () => {
+    const wrapper = createWrapper({ containerRef: 'ref' });
+    expect(wrapper.find(ScrollTo).prop('containerRef')).toEqual('ref');
+    expect(wrapper.find(ScrollTo).prop('scrollTo')).toEqual(true);
+  });
+
   describe('Annotation Labels', () => {
     it('renders the annotationLabel if present', () => {
       const wrapper = createWrapper({ annotationLabel: 'The Anno Label' });

__tests__/src/components/SearchPanel.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import CompanionWindow from '../../../src/containers/CompanionWindow';
+import SearchResults from '../../../src/containers/SearchResults';
 import { SearchPanel } from '../../../src/components/SearchPanel';
 
 
@@ -49,11 +50,11 @@ describe('SearchPanel', () => {
   });
 
   it('has the SearchPanelControls component', () => {
-    const titleControls = createWrapper().prop('titleControls');
+    const titleControls = createWrapper().find(CompanionWindow).prop('titleControls');
     expect(titleControls.type.displayName).toEqual('Connect(WithStyles(WithPlugins(SearchPanelControls)))');
   });
   it('has the SearchResults', () => {
     const wrapper = createWrapper();
-    expect(wrapper.find('Connect(WithStyles(WithPlugins(SearchResults)))').length).toEqual(1);
+    expect(wrapper.find(SearchResults).length).toEqual(1);
   });
 });

src/components/SearchHit.js

@@ -8,6 +8,7 @@ import Typography from '@material-ui/core/Typography';
 import Chip from '@material-ui/core/Chip';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import TruncatedHit from '../lib/TruncatedHit';
+import { ScrollTo } from './ScrollTo';
 
 /** */
 export class SearchHit extends Component {
@@ -35,6 +36,7 @@ export class SearchHit extends Component {
       annotationLabel,
       canvasLabel,
       classes,
+      containerRef,
       hit,
       focused,
       index,
@@ -49,6 +51,11 @@ export class SearchHit extends Component {
     const truncated = hit && truncatedHit.before !== hit.before && truncatedHit.after !== hit.after;
 
     return (
+      <ScrollTo
+        containerRef={containerRef}
+        offsetTop={96} // offset for the height of the form above
+        scrollTo={selected}
+      >
         <ListItem
           className={clsx(
             classes.listItem,
@@ -91,6 +98,7 @@ export class SearchHit extends Component {
             {!hit && annotation && <SanitizedHtml ruleSet="iiif" htmlString={annotation.chars} />}
           </ListItemText>
         </ListItem>
+      </ScrollTo>
     );
   }
 }
@@ -104,6 +112,10 @@ SearchHit.propTypes = {
   annotationLabel: PropTypes.string,
   canvasLabel: PropTypes.string,
   classes: PropTypes.objectOf(PropTypes.string),
+  containerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   focused: PropTypes.bool,
   hit: PropTypes.shape({
     after: PropTypes.string,
@@ -125,6 +137,7 @@ SearchHit.defaultProps = {
   annotationLabel: undefined,
   canvasLabel: undefined,
   classes: {},
+  containerRef: undefined,
   focused: false,
   hit: undefined,
   index: undefined,

src/components/SearchPanel.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Chip from '@material-ui/core/Chip';
+import RootRef from '@material-ui/core/RootRef';
 import CompanionWindow from '../containers/CompanionWindow';
 import SearchPanelControls from '../containers/SearchPanelControls';
 import SearchResults from '../containers/SearchResults';
 
 /** */
 export class SearchPanel extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+
+    this.containerRef = React.createRef();
+  }
+
   /** */
   render() {
     const {
@@ -19,6 +27,7 @@ export class SearchPanel extends Component {
     } = this.props;
 
     return (
+      <RootRef rootRef={this.containerRef}>
         <CompanionWindow
           title={(
             <>
@@ -43,10 +52,12 @@ export class SearchPanel extends Component {
           titleControls={<SearchPanelControls companionWindowId={id} windowId={windowId} />}
         >
           <SearchResults
+            containerRef={this.containerRef}
             companionWindowId={id}
             windowId={windowId}
           />
         </CompanionWindow>
+      </RootRef>
     );
   }
 }

src/components/SearchResults.js

@@ -31,6 +31,7 @@ export class SearchResults extends Component {
     const {
       classes,
       companionWindowId,
+      containerRef,
       isFetching,
       fetchSearch,
       nextSearch,
@@ -66,6 +67,7 @@ export class SearchResults extends Component {
           {
             searchHits.map((hit, index) => (
               <SearchHit
+                containerRef={containerRef}
                 companionWindowId={companionWindowId}
                 key={hit.annotations[0]}
                 focused={focused}
@@ -82,6 +84,7 @@ export class SearchResults extends Component {
               <SearchHit
                 annotationId={anno.id}
                 companionWindowId={companionWindowId}
+                containerRef={containerRef}
                 key={anno.id}
                 focused={focused}
                 index={index}
@@ -103,6 +106,10 @@ export class SearchResults extends Component {
 SearchResults.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string),
   companionWindowId: PropTypes.string.isRequired,
+  containerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   fetchSearch: PropTypes.func.isRequired,
   isFetching: PropTypes.bool,
   nextSearch: PropTypes.string,
@@ -115,6 +122,7 @@ SearchResults.propTypes = {
 
 SearchResults.defaultProps = {
   classes: {},
+  containerRef: undefined,
   isFetching: false,
   nextSearch: undefined,
   query: undefined,