Merge branch 'master' of github.com:box/box-ui-elements into replace-form-legacy-context

Author: jfox-box

src/components/hotkeys/HotkeyContext.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const HotkeyContext = React.createContext(null);
+
+HotkeyContext.displayName = 'HotkeyContext';
+
+export const HotkeyContextPropTypes = {
+    hotkeyLayer: PropTypes.object,
+};

src/components/hotkeys/HotkeyHelpModal.js

@@ -2,14 +2,15 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
-import commonMessages from '../../common/messages';
 import { ModalActions } from '../modal';
 import Button from '../button';
 import PlainButton from '../plain-button';
 import DropdownMenu, { MenuToggle } from '../dropdown-menu';
 import { Menu, MenuItem } from '../menu';
-
+import { HotkeyContext } from './HotkeyContext';
 import HotkeyFriendlyModal from './HotkeyFriendlyModal'; // eslint-disable-line import/no-cycle
+
+import commonMessages from '../../common/messages';
 import messages from './messages';
 
 import './HotkeyHelpModal.scss';
@@ -35,31 +36,39 @@ class HotkeyHelpModal extends Component {
         onRequestClose: PropTypes.func.isRequired,
     };
 
-    static contextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
-
-    constructor(props, context) {
+    constructor(props) {
         super(props);
 
-        this.hotkeys = context.hotkeyLayer.getActiveHotkeys();
-        this.types = context.hotkeyLayer.getActiveTypes();
+        this.hotkeys = {};
+        this.types = [];
         this.state = {
-            currentType: this.types.length ? this.types[0] : null,
+            currentType: null,
         };
     }
 
+    componentDidMount() {
+        const hotkeyLayer = this.context;
+        if (hotkeyLayer) {
+            this.hotkeys = hotkeyLayer.getActiveHotkeys();
+            this.types = hotkeyLayer.getActiveTypes();
+            this.setState({
+                currentType: this.types.length ? this.types[0] : null,
+            });
+        }
+    }
+
     componentDidUpdate({ isOpen: prevIsOpen }, { currentType: prevType }) {
         const { isOpen } = this.props;
+        const hotkeyLayer = this.context;
 
-        if (!isOpen) {
+        if (!isOpen || !hotkeyLayer) {
             return;
         }
 
         // modal is being opened; refresh hotkeys
         if (!prevIsOpen && isOpen) {
-            this.hotkeys = this.context.hotkeyLayer.getActiveHotkeys();
-            this.types = this.context.hotkeyLayer.getActiveTypes();
+            this.hotkeys = hotkeyLayer.getActiveHotkeys();
+            this.types = hotkeyLayer.getActiveTypes();
         }
 
         if (!prevType) {
@@ -189,4 +198,6 @@ class HotkeyHelpModal extends Component {
     }
 }
 
+HotkeyHelpModal.contextType = HotkeyContext;
+
 export default HotkeyHelpModal;

src/components/hotkeys/HotkeyLayer.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import HotkeyRecord, { HotkeyPropType } from './HotkeyRecord';
 import HotkeyService from './HotkeyService';
+import { HotkeyContext } from './HotkeyContext';
 
 import Hotkeys from './Hotkeys';
 import HotkeyHelpModal from './HotkeyHelpModal'; // eslint-disable-line import/no-cycle
@@ -25,14 +26,6 @@ class HotkeyLayer extends Component {
         enableHelpModal: false,
     };
 
-    static contextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
-
-    static childContextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
-
     constructor(props) {
         super(props);
 
@@ -43,12 +36,6 @@ class HotkeyLayer extends Component {
         isHelpModalOpen: false,
     };
 
-    getChildContext() {
-        return {
-            hotkeyLayer: this.hotkeyService,
-        };
-    }
-
     componentWillUnmount() {
         this.hotkeyService.destroyLayer();
     }
@@ -85,16 +72,18 @@ class HotkeyLayer extends Component {
         const { children, className = '', enableHelpModal } = this.props;
 
         return (
-            <Hotkeys configs={this.getHotkeyConfigs()}>
-                {enableHelpModal ? (
-                    <span className={`hotkey-layer ${className}`}>
-                        <HotkeyHelpModal isOpen={this.state.isHelpModalOpen} onRequestClose={this.closeHelpModal} />
-                        {children}
-                    </span>
-                ) : (
-                    children
-                )}
-            </Hotkeys>
+            <HotkeyContext.Provider value={this.hotkeyService}>
+                <Hotkeys configs={this.getHotkeyConfigs()}>
+                    {enableHelpModal ? (
+                        <span className={`hotkey-layer ${className}`}>
+                            <HotkeyHelpModal isOpen={this.state.isHelpModalOpen} onRequestClose={this.closeHelpModal} />
+                            {children}
+                        </span>
+                    ) : (
+                        children
+                    )}
+                </Hotkeys>
+            </HotkeyContext.Provider>
         );
     }
 }

src/components/hotkeys/Hotkeys.js

@@ -2,6 +2,7 @@ import { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { HotkeyPropType } from './HotkeyRecord';
+import { HotkeyContext } from './HotkeyContext';
 
 class Hotkeys extends Component {
     /* eslint-disable no-underscore-dangle */
@@ -12,14 +13,11 @@ class Hotkeys extends Component {
         configs: PropTypes.arrayOf(HotkeyPropType).isRequired,
     };
 
-    static contextTypes = {
-        hotkeyLayer: PropTypes.object,
-    };
-
     componentDidMount() {
         const { configs } = this.props;
+        const hotkeyLayer = this.context;
 
-        if (!this.context.hotkeyLayer) {
+        if (!hotkeyLayer) {
             throw new Error('You must instantiate a HotkeyLayer before using Hotkeys');
         }
 
@@ -44,11 +42,13 @@ class Hotkeys extends Component {
     }
 
     _addHotkeys(hotkeyConfigs) {
-        hotkeyConfigs.forEach(hotkeyConfig => this.context.hotkeyLayer.registerHotkey(hotkeyConfig));
+        hotkeyConfigs.forEach(hotkeyConfig => this.context.registerHotkey(hotkeyConfig));
     }
 
     _removeHotkeys(hotkeyConfigs) {
-        hotkeyConfigs.forEach(hotkeyConfig => this.context.hotkeyLayer.deregisterHotkey(hotkeyConfig));
+        if (this.context) {
+            hotkeyConfigs.forEach(hotkeyConfig => this.context.deregisterHotkey(hotkeyConfig));
+        }
     }
 
     render() {
@@ -59,4 +59,6 @@ class Hotkeys extends Component {
     }
 }
 
+Hotkeys.contextType = HotkeyContext;
+
 export default Hotkeys;