✨ make sidebar close via hook toggle

Author: ghalestrilo

client/components/mobile/Explorer.jsx

@@ -5,18 +5,20 @@ import Sidebar from './Sidebar';
 import ConnectedFileNode from '../../modules/IDE/components/FileNode';
 
 
-const Explorer = ({ id, canEdit }) => (
-  <Sidebar title="Files">
-    <ConnectedFileNode id={id} canEdit={canEdit} />
+const Explorer = ({ id, canEdit, onPressClose }) => (
+  <Sidebar title="Files" onPressClose={onPressClose}>
+    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={onPressClose} />
   </Sidebar>
 );
 
 Explorer.propTypes = {
   id: PropTypes.number.isRequired,
+  onPressClose: PropTypes.func,
   canEdit: PropTypes.bool
 };
 Explorer.defaultProps = {
-  canEdit: false
+  canEdit: false,
+  onPressClose: () => {}
 };
 
 export default Explorer;

client/components/mobile/Sidebar.jsx

@@ -20,11 +20,13 @@ const SidebarWrapper = styled.div`
   box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
 `;
 
+// onClick={() => alert('haha')}
+
 const Sidebar = ({ title, onPressClose, children }) => (
   <SidebarWrapper>
     {title &&
     <Header slim title={title} fixed={false}>
-      <IconButton onPress={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
+      <IconButton onClick={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
     </Header>}
     {children}
   </SidebarWrapper>

client/components/useAsModal.jsx

@@ -20,7 +20,11 @@ export default (Element, hasOverlay = false) => {
   const wrapper = () => (visible &&
     <div>
       {hasOverlay && <BackgroundOverlay />}
-      <div ref={setRef}> {Element} </div>
+      <div ref={setRef}>
+        { (typeof (Element) === 'function')
+          ? Element(toggle)
+          : Element}
+      </div>
     </div>);
 
   return [toggle, wrapper];

client/modules/IDE/pages/MobileIDEView.jsx

@@ -116,8 +116,12 @@ const MobileIDEView = (props) => {
     align="right"
   />);
 
-
-  const [toggleExplorer, Explorer] = useAsModal(<MobileExplorer id={getRootFileID(files)} canEdit={false} />, true);
+  const [toggleExplorer, Explorer] = useAsModal(toggle =>
+    (<MobileExplorer
+      id={getRootFileID(files)}
+      canEdit={false}
+      onPressClose={toggle}
+    />), true);
 
   // toggle sidebar starting opened
   // useEffect(toggleExplorer, []);