♻️ create useHideOnBlur hook

Author: ghalestrilo

client/components/OverlayManager.jsx

@@ -5,22 +5,10 @@ import { createPortal } from 'react-dom';
 import Dropdown from './Dropdown';
 
 import { PreferencesIcon } from '../common/icons';
+import { useHideOnBlur } from '../utils/custom-hooks';
 
-const OverlayManager = ({ overlay, hideOverlay }) => {
-  const ref = useRef({});
-
-  const handleClickOutside = ({ target }) => {
-    if (ref && ref.current && !ref.current.contains(target)) {
-      hideOverlay();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [ref]);
 
+const OverlayManager = ({ overlay, hideOverlay }) => {
   const headerNavOptions = [
     {
       icon: PreferencesIcon,
@@ -35,9 +23,11 @@ const OverlayManager = ({ overlay, hideOverlay }) => {
     },
   ];
 
+  const setRef = useHideOnBlur(hideOverlay);
+
   const jsx = (
     <React.Fragment>
-      <div ref={(r) => { ref.current = r; }} >
+      <div ref={setRef} >
         {overlay === 'dropdown' && <Dropdown items={headerNavOptions} />}
       </div>
     </React.Fragment>

client/modules/Mobile/MobileSketchView.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
-import { connect, useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
@@ -25,7 +24,7 @@ const Content = styled.div`
   margin-top: ${remSize(68)};
 `;
 
-const MobileSketchView = (props) => {
+const MobileSketchView = () => {
   const { files, ide, preferences } = useSelector(state => state);
 
   const htmlFile = useSelector(state => getHTMLFile(state.files));

client/utils/custom-hooks.js

@@ -13,3 +13,21 @@ export const useDidUpdate = (callback, deps) => {
     }
   }, deps);
 };
+
+export const useHideOnBlur = (hideOverlay) => {
+  const ref = useRef({});
+  const setRef = (r) => { ref.current = r; };
+
+  const handleClickOutside = ({ target }) => {
+    if (ref && ref.current && !ref.current.contains(target)) {
+      hideOverlay();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [ref]);
+
+  return setRef;
+};