♻️ create useAsModal HOC

Author: ghalestrilo

client/components/OverlayManager.jsx

@@ -5,7 +5,7 @@ import { createPortal } from 'react-dom';
 import Dropdown from './Dropdown';
 
 import { PreferencesIcon } from '../common/icons';
-import { useHideOnBlur } from '../utils/custom-hooks';
+import { useModalBehavior } from '../utils/custom-hooks';
 
 
 const OverlayManager = ({ overlay, hideOverlay }) => {
@@ -23,13 +23,14 @@ const OverlayManager = ({ overlay, hideOverlay }) => {
     },
   ];
 
-  const setRef = useHideOnBlur(hideOverlay);
+  // const setRef = useModalBehavior(hideOverlay);
+  // const [visible, trigger, setRef] = useModalBehavior();
 
   const jsx = (
     <React.Fragment>
-      <div ref={setRef} >
-        {overlay === 'dropdown' && <Dropdown items={headerNavOptions} />}
-      </div>
+      {/* <div ref={setRef} >
+        {visible && <Dropdown items={headerNavOptions} />}
+      </div> */}
     </React.Fragment>
   );
 

client/modules/IDE/pages/MobileIDEView.jsx

@@ -29,8 +29,11 @@ import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
 import Console from '../components/Console';
 import { remSize } from '../../../theme';
-import OverlayManager from '../../../components/OverlayManager';
+// import OverlayManager from '../../../components/OverlayManager';
 import ActionStrip from '../../../components/mobile/ActionStrip';
+import { useAsModal } from '../../../utils/custom-hooks';
+import { PreferencesIcon } from '../../../common/icons';
+import Dropdown from '../../../components/Dropdown';
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
@@ -39,6 +42,20 @@ const Expander = styled.div`
   height: ${props => (props.expanded ? remSize(160) : remSize(27))};
 `;
 
+const headerNavOptions = [
+  {
+    icon: PreferencesIcon,
+    title: 'Preferences',
+    href: '/mobile/preferences',
+  },
+  { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
+  {
+    icon: PreferencesIcon,
+    title: 'Original Editor',
+    href: '/mobile/preferences',
+  },
+];
+
 
 const MobileIDEView = (props) => {
   const {
@@ -56,6 +73,8 @@ const MobileIDEView = (props) => {
   const hideOverlay = () => setOverlay(null);
   // const overlayRef = useRef({});
 
+  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown items={headerNavOptions} />);
+
   return (
     <Screen fullscreen>
       <Header
@@ -66,7 +85,7 @@ const MobileIDEView = (props) => {
         }
       >
         <IconButton
-          onClick={() => setOverlay('dropdown')}
+          onClick={triggerNavDropdown}
           icon={MoreIcon}
           aria-label="Options"
         />
@@ -114,12 +133,12 @@ const MobileIDEView = (props) => {
         {ide.consoleIsExpanded && <Expander expanded><Console /></Expander>}
         <ActionStrip />
       </Footer>
-
-      <OverlayManager
+      <NavDropDown />
+      {/* <OverlayManager
         // ref={overlayRef}
         overlay={overlayName}
         hideOverlay={hideOverlay}
-      />
+      /> */}
     </Screen>
   );
 };

client/utils/custom-hooks.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 
 export const noop = () => {};
 
@@ -14,13 +14,22 @@ export const useDidUpdate = (callback, deps) => {
   }, deps);
 };
 
-export const useHideOnBlur = (hideOverlay) => {
+// Usage: const ref = useModalBehavior(() => setSomeState(false))
+// place this ref on a component
+export const useModalBehavior = (hideOverlay) => {
   const ref = useRef({});
+
+  // Return values
   const setRef = (r) => { ref.current = r; };
+  const [visible, setVisible] = useState(true);
+  const trigger = () => setVisible(true);
+
+  const hide = () => setVisible(false);
+
 
   const handleClickOutside = ({ target }) => {
     if (ref && ref.current && !ref.current.contains(target)) {
-      hideOverlay();
+      hide();
     }
   };
 
@@ -29,5 +38,14 @@ export const useHideOnBlur = (hideOverlay) => {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [ref]);
 
-  return setRef;
+  return [visible, trigger, setRef];
+};
+
+// TODO: This is HOC, not a hook. Where do we put it?
+export const useAsModal = (component) => {
+  const [visible, trigger, setRef] = useModalBehavior();
+
+  const wrapper = () => (<div ref={setRef}> {visible && component} </div>); // eslint-disable-line
+
+  return [trigger, wrapper];
 };