Replace @researchgate/react-intersection-observer with react-intersection-observer

Author: cbeer

__tests__/src/components/GalleryViewThumbnail.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
 import Chip from '@material-ui/core/Chip';
-import IntersectionObserver from '@researchgate/react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import manifestJson from '../../fixtures/version-2/019.json';
 import { GalleryViewThumbnail } from '../../../src/components/GalleryViewThumbnail';
 import IIIFThumbnail from '../../../src/containers/IIIFThumbnail';
@@ -78,7 +78,7 @@ describe('GalleryView', () => {
       };
       wrapper = createWrapper({ annotationsCount: 0, canvas, requestCanvasAnnotations });
 
-      wrapper.find(IntersectionObserver).simulate('change', { isIntersecting: true });
+      wrapper.find(InView).simulate('change', { isIntersecting: true });
       expect(requestCanvasAnnotations).toHaveBeenCalled();
     });
     it('does nothing if there is no intersection', () => {
@@ -89,7 +89,7 @@ describe('GalleryView', () => {
       };
       wrapper = createWrapper({ canvas, requestCanvasAnnotations });
 
-      wrapper.find(IntersectionObserver).simulate('change', { isIntersecting: false });
+      wrapper.find(InView).simulate('change', { isIntersecting: false });
       expect(requestCanvasAnnotations).not.toHaveBeenCalled();
     });
     it('does nothing if there are already some annotations', () => {
@@ -100,7 +100,7 @@ describe('GalleryView', () => {
       };
       wrapper = createWrapper({ annotationsCount: 5, canvas, requestCanvasAnnotations });
 
-      wrapper.find(IntersectionObserver).simulate('change', { isIntersecting: true });
+      wrapper.find(InView).simulate('change', { isIntersecting: true });
       expect(requestCanvasAnnotations).not.toHaveBeenCalled();
     });
   });

__tests__/src/components/IIIFThumbnail.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import IntersectionObserver from '@researchgate/react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import Typography from '@material-ui/core/Typography';
 import { IIIFThumbnail } from '../../../src/components/IIIFThumbnail';
 
@@ -26,9 +26,9 @@ describe('IIIFThumbnail', () => {
   it('renders properly', () => {
     expect(wrapper.matchesElement(
       <div>
-        <IntersectionObserver onChange={wrapper.instance().handleIntersection}>
+        <InView onChange={wrapper.instance().handleIntersection}>
           <img alt="" />
-        </IntersectionObserver>
+        </InView>
       </div>,
     )).toBe(true);
   });
@@ -37,9 +37,9 @@ describe('IIIFThumbnail', () => {
     wrapper = createWrapper({});
     expect(wrapper.matchesElement(
       <div>
-        <IntersectionObserver onChange={wrapper.instance().handleIntersection}>
+        <InView onChange={wrapper.instance().handleIntersection}>
           <img alt="" />
-        </IntersectionObserver>
+        </InView>
       </div>,
     )).toBe(true);
     expect(wrapper.find('img').props().src).toMatch(/data:image\/png;base64/);

package.json

@@ -36,7 +36,6 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
-    "@researchgate/react-intersection-observer": "^1.0.0",
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "deepmerge": "^4.2.2",
@@ -62,6 +61,7 @@
     "react-full-screen": "^0.2.4",
     "react-i18next": "^11.7.0",
     "react-image": "^4.0.1",
+    "react-intersection-observer": "^9.0.0",
     "react-mosaic-component": "^4.0.1",
     "react-redux": "^7.1.0",
     "react-resize-observer": "^1.1.1",

src/components/GalleryViewThumbnail.js

@@ -5,7 +5,7 @@ import Chip from '@material-ui/core/Chip';
 import AnnotationIcon from '@material-ui/icons/CommentSharp';
 import SearchIcon from '@material-ui/icons/SearchSharp';
 import classNames from 'classnames';
-import IntersectionObserver from '@researchgate/react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import MiradorCanvas from '../lib/MiradorCanvas';
 import IIIFThumbnail from '../containers/IIIFThumbnail';
 
@@ -108,7 +108,7 @@ export class GalleryViewThumbnail extends Component {
     const miradorCanvas = new MiradorCanvas(canvas);
 
     return (
-      <IntersectionObserver onChange={this.handleIntersection}>
+      <InView onChange={this.handleIntersection}>
         <div
           key={canvas.index}
           className={
@@ -167,7 +167,7 @@ export class GalleryViewThumbnail extends Component {
             </div>
           </IIIFThumbnail>
         </div>
-      </IntersectionObserver>
+      </InView>
     );
   }
 }

src/components/IIIFThumbnail.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import IntersectionObserver from '@researchgate/react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import classNames from 'classnames';
 import getThumbnail from '../lib/ThumbnailFactory';
 
@@ -47,10 +47,10 @@ export class IIIFThumbnail extends Component {
    * Handles the intersection (visibility) of a given thumbnail, by requesting
    * the image and then updating the state.
    */
-  handleIntersection(event) {
+  handleIntersection(inView, _entry) {
     const { loaded } = this.state;
 
-    if (loaded || !event.isIntersecting) return;
+    if (loaded || !inView) return;
 
     this.setState(state => ({ ...state, loaded: true }));
   }
@@ -151,15 +151,15 @@ export class IIIFThumbnail extends Component {
 
     return (
       <div className={classNames(classes.root, { [classes[`${variant}Root`]]: variant })}>
-        <IntersectionObserver onChange={this.handleIntersection}>
+        <InView as="span" onChange={this.handleIntersection}>
           <img
             alt=""
             role="presentation"
             src={src}
             style={this.imageStyles()}
             className={classes.image}
           />
-        </IntersectionObserver>
+        </InView>
         { labelled && (
           <div className={classNames(classes.label, { [classes[`${variant}Label`]]: variant })}>
             <Typography variant="caption" classes={{ root: classNames(classes.caption, { [classes[`${variant}Caption`]]: variant }) }}>