Merge pull request #3605 from ProjectMirador/react-full-screen

Update react-full-screen

Author: jcoyne

__tests__/src/actions/workspace.test.js

@@ -13,24 +13,6 @@ describe('workspace actions', () => {
       expect(actions.updateWorkspace(options)).toEqual(expectedAction);
     });
   });
-  describe('setWorkspaceFullscreen', () => {
-    it('should return correct action type if set to true', () => {
-      const receivedAction = actions.setWorkspaceFullscreen(true);
-      const expectedAction = {
-        isFullscreenEnabled: true,
-        type: ActionTypes.SET_WORKSPACE_FULLSCREEN,
-      };
-      expect(receivedAction).toEqual(expectedAction);
-    });
-    it('should return correct action type if set to false', () => {
-      const receivedAction = actions.setWorkspaceFullscreen(false);
-      const expectedAction = {
-        isFullscreenEnabled: false,
-        type: ActionTypes.SET_WORKSPACE_FULLSCREEN,
-      };
-      expect(receivedAction).toEqual(expectedAction);
-    });
-  });
   describe('updateWorkspaceMosaicLayout', () => {
     it('should updates mosaic layout', () => {
       const options = { foo: 'bar' };

__tests__/src/components/AppProviders.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { ThemeProvider, StylesProvider } from '@material-ui/core/styles';
-import Fullscreen from 'react-full-screen';
 import { DndContext, DndProvider } from 'react-dnd';
 import { AppProviders } from '../../../src/components/AppProviders';
 import settings from '../../../src/config/settings';
@@ -14,7 +13,6 @@ function createWrapper(props) {
     <AppProviders
       language="en"
       isFullscreenEnabled={false}
-      setWorkspaceFullscreen={() => {}}
       theme={settings.theme}
       translations={{}}
       t={k => k}
@@ -28,7 +26,6 @@ describe('AppProviders', () => {
     const wrapper = createWrapper();
     expect(wrapper.find(ThemeProvider).length).toBe(1);
     expect(wrapper.find(StylesProvider).length).toBe(1);
-    expect(wrapper.find(Fullscreen).length).toBe(1);
   });
 
   it('sets up a theme based on the config passed in merged w/ MaterialUI', () => {
@@ -44,23 +41,6 @@ describe('AppProviders', () => {
     expect(wrapper.instance().i18n.t('off')).toEqual('on');
   });
 
-  it('should pass setWorkspaceFullscreen to Fullscreen.onChange', () => {
-    const mockFn = jest.fn();
-    const wrapper = createWrapper({ setWorkspaceFullscreen: mockFn });
-    expect(wrapper.find(Fullscreen).first().prop('onChange'))
-      .toBe(mockFn);
-  });
-
-  it('should pass isFullscreenEnabled to Fullscreen.enabled', () => {
-    let wrapper = createWrapper({ isFullscreenEnabled: false });
-    expect(wrapper.find(Fullscreen).first().prop('enabled'))
-      .toEqual(false);
-
-    wrapper = createWrapper({ isFullscreenEnabled: true });
-    expect(wrapper.find(Fullscreen).first().prop('enabled'))
-      .toEqual(true);
-  });
-
   describe('componentDidUpdate()', () => {
     it('changes the i18n language if the language prop has been updated', () => {
       const wrapper = createWrapper();

__tests__/src/components/FullScreenButton.test.js

@@ -4,18 +4,21 @@ import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
 import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { FullScreenButton } from '../../../src/components/FullScreenButton';
+import FullScreenContext from '../../../src/contexts/FullScreenContext';
 
 /** */
-function createWrapper(props) {
+function createWrapper(props, contextProps = { active: false }) {
   return shallow(
     <FullScreenButton
       classes={{}}
       className="xyz"
-      setWorkspaceFullscreen={() => {}}
-      isFullscreenEnabled={false}
       {...props}
     />,
-  );
+    {
+      wrappingComponent: FullScreenContext.Provider,
+      wrappingComponentProps: { value: { enter: () => { }, exit: () => { }, ...contextProps } },
+    },
+  ).dive();
 }
 
 describe('FullScreenButton', () => {
@@ -30,10 +33,10 @@ describe('FullScreenButton', () => {
   });
 
   describe('when not in fullscreen', () => {
-    let setWorkspaceFullscreen;
+    let enter;
     beforeAll(() => {
-      setWorkspaceFullscreen = jest.fn();
-      wrapper = createWrapper({ setWorkspaceFullscreen });
+      enter = jest.fn();
+      wrapper = createWrapper({}, { enter });
       menuButton = wrapper.find(MiradorMenuButton);
     });
 
@@ -45,17 +48,17 @@ describe('FullScreenButton', () => {
       expect(menuButton.props()['aria-label']).toEqual('workspaceFullScreen');
     });
 
-    it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
+    it('triggers the handle enter with the appropriate boolean', () => {
       menuButton.props().onClick(); // Trigger the onClick prop
-      expect(setWorkspaceFullscreen).toHaveBeenCalledWith(true);
+      expect(enter).toHaveBeenCalled();
     });
   });
 
   describe('when in fullscreen', () => {
-    let setWorkspaceFullscreen;
+    let exit;
     beforeAll(() => {
-      setWorkspaceFullscreen = jest.fn();
-      wrapper = createWrapper({ isFullscreenEnabled: true, setWorkspaceFullscreen });
+      exit = jest.fn();
+      wrapper = createWrapper({}, { active: true, exit });
       menuButton = wrapper.find(MiradorMenuButton);
     });
 
@@ -67,9 +70,9 @@ describe('FullScreenButton', () => {
       expect(menuButton.props()['aria-label']).toEqual('exitFullScreen');
     });
 
-    it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
+    it('triggers the handle exit with the appropriate boolean', () => {
       menuButton.props().onClick(); // Trigger the onClick prop
-      expect(setWorkspaceFullscreen).toHaveBeenCalledWith(false);
+      expect(exit).toHaveBeenCalled();
     });
   });
 });

package.json

@@ -60,7 +60,7 @@
     "react-dnd-html5-backend": "^10.0.2",
     "react-dnd-multi-backend": "^5.0.0",
     "react-dnd-touch-backend": "^10.0.2",
-    "react-full-screen": "^0.2.4",
+    "react-full-screen": "^1.1.1",
     "react-i18next": "^11.7.0",
     "react-image": "^4.0.1",
     "react-mosaic-component": "^4.0.1",

src/components/AppProviders.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Fullscreen from 'react-full-screen';
+import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
 import { LiveAnnouncer } from 'react-aria-live';
 import {
@@ -12,6 +12,7 @@ import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
 import createI18nInstance from '../i18n';
+import FullScreenContext from '../contexts/FullScreenContext';
 
 /**
  * Allow applications to opt-out of (or provide their own) drag and drop context
@@ -46,6 +47,25 @@ MaybeDndProvider.propTypes = {
   ]).isRequired,
 };
 
+/**
+ * Shim to inject the full screen handle into a context
+ */
+const FullScreenShim = ({ children }) => {
+  const handle = useFullScreenHandle();
+
+  return (
+    <FullScreen handle={handle}>
+      <FullScreenContext.Provider value={handle}>
+        {children}
+      </FullScreenContext.Provider>
+    </FullScreen>
+  );
+};
+
+FullScreenShim.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 /**
  * This component adds viewer-specific providers.
  * @prop {Object} manifests
@@ -81,8 +101,8 @@ export class AppProviders extends Component {
   /** */
   render() {
     const {
-      children, createGenerateClassNameOptions, isFullscreenEnabled,
-      setWorkspaceFullscreen, theme, translations,
+      children, createGenerateClassNameOptions,
+      theme, translations,
       dndManager,
     } = this.props;
 
@@ -93,10 +113,7 @@ export class AppProviders extends Component {
     });
 
     return (
-      <Fullscreen
-        enabled={isFullscreenEnabled}
-        onChange={setWorkspaceFullscreen}
-      >
+      <FullScreenShim>
         <I18nextProvider i18n={this.i18n}>
           <LiveAnnouncer>
             <ThemeProvider
@@ -113,7 +130,7 @@ export class AppProviders extends Component {
             </ThemeProvider>
           </LiveAnnouncer>
         </I18nextProvider>
-      </Fullscreen>
+      </FullScreenShim>
     );
   }
 }
@@ -122,9 +139,7 @@ AppProviders.propTypes = {
   children: PropTypes.node,
   createGenerateClassNameOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   dndManager: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  isFullscreenEnabled: PropTypes.bool,
   language: PropTypes.string.isRequired,
-  setWorkspaceFullscreen: PropTypes.func.isRequired,
   theme: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   translations: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
@@ -133,5 +148,4 @@ AppProviders.defaultProps = {
   children: null,
   createGenerateClassNameOptions: {},
   dndManager: undefined,
-  isFullscreenEnabled: false,
 };

src/components/FullScreenButton.js

@@ -3,6 +3,8 @@ import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
 import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
 import PropTypes from 'prop-types';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
+import FullScreenContext from '../contexts/FullScreenContext';
+
 /**
  */
 export class FullScreenButton extends Component {
@@ -12,29 +14,30 @@ export class FullScreenButton extends Component {
    */
   render() {
     const {
-      className, isFullscreenEnabled, setWorkspaceFullscreen, t,
+      className, t,
     } = this.props;
     return (
-      <MiradorMenuButton
-        className={className}
-        aria-label={isFullscreenEnabled ? t('exitFullScreen') : t('workspaceFullScreen')}
-        onClick={() => setWorkspaceFullscreen(!isFullscreenEnabled)}
-      >
-        {isFullscreenEnabled ? <FullscreenExitIcon /> : <FullscreenIcon />}
-      </MiradorMenuButton>
+      <FullScreenContext.Consumer>
+        { handle => (
+          <MiradorMenuButton
+            className={className}
+            aria-label={handle.active ? t('exitFullScreen') : t('workspaceFullScreen')}
+            onClick={handle.active ? handle.exit : handle.enter}
+          >
+            {handle.active ? <FullscreenExitIcon /> : <FullscreenIcon />}
+          </MiradorMenuButton>
+        )}
+      </FullScreenContext.Consumer>
     );
   }
 }
 
 FullScreenButton.propTypes = {
   className: PropTypes.string,
-  isFullscreenEnabled: PropTypes.bool,
-  setWorkspaceFullscreen: PropTypes.func.isRequired,
   t: PropTypes.func,
 };
 
 FullScreenButton.defaultProps = {
   className: undefined,
-  isFullscreenEnabled: false,
   t: key => key,
 };

src/containers/AppProviders.js

@@ -1,8 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withPlugins } from '../extend/withPlugins';
-import * as actions from '../state/actions';
-import { getConfig, getTheme, getFullScreenEnabled } from '../state/selectors';
+import { getConfig, getTheme } from '../state/selectors';
 import { AppProviders } from '../components/AppProviders';
 
 /**
@@ -13,24 +12,14 @@ import { AppProviders } from '../components/AppProviders';
 const mapStateToProps = state => (
   {
     createGenerateClassNameOptions: getConfig(state).createGenerateClassNameOptions,
-    isFullscreenEnabled: getFullScreenEnabled(state),
     language: getConfig(state).language,
     theme: getTheme(state),
     translations: getConfig(state).translations,
   }
 );
 
-/**
- * mapDispatchToProps - used to hook up connect to action creators
- * @memberof App
- * @private
- */
-const mapDispatchToProps = {
-  setWorkspaceFullscreen: actions.setWorkspaceFullscreen,
-};
-
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps),
   withPlugins('AppProviders'),
 );
 

src/containers/FullScreenButton.js

@@ -2,25 +2,21 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
-import * as actions from '../state/actions';
-import { getFullScreenEnabled } from '../state/selectors';
 import { FullScreenButton } from '../components/FullScreenButton';
 
 /**
  * mapStateToProps - to hook up connect
  * @memberof FullScreenButton
  * @private
  */
-const mapStateToProps = state => ({
-  isFullscreenEnabled: getFullScreenEnabled(state),
-});
+const mapStateToProps = _state => ({});
 
 /**
  * mapDispatchToProps - used to hook up connect to action creators
  * @memberof ManifestListItem
  * @private
  */
-const mapDispatchToProps = { setWorkspaceFullscreen: actions.setWorkspaceFullscreen };
+const mapDispatchToProps = {};
 
 const enhance = compose(
   withTranslation(),

src/contexts/FullScreenContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const FullScreenContext = createContext();
+
+export default FullScreenContext;

src/state/actions/workspace.js

@@ -9,16 +9,6 @@ export function updateWorkspace(config) {
   return { config, type: ActionTypes.UPDATE_WORKSPACE };
 }
 
-/**
- * setWorkspaceFullscreen - action creator
- *
- * @param  {Boolean} isFullscreenEnabled
- * @memberof ActionCreators
- */
-export function setWorkspaceFullscreen(isFullscreenEnabled) {
-  return { isFullscreenEnabled, type: ActionTypes.SET_WORKSPACE_FULLSCREEN };
-}
-
 /**
  * toggleZoomControls - action creator
  * @param {Boolean} showZoomControls