✨ make sidebar close on file click

Author: ghalestrilo

client/components/mobile/Explorer.jsx

@@ -7,7 +7,7 @@ import ConnectedFileNode from '../../modules/IDE/components/FileNode';
 
 const Explorer = ({ id, canEdit, onPressClose }) => (
   <Sidebar title="Files" onPressClose={onPressClose}>
-    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={onPressClose} />
+    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
   </Sidebar>
 );
 

client/components/mobile/Sidebar.jsx

@@ -20,8 +20,6 @@ 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 &&

client/components/useAsModal.jsx

@@ -15,8 +15,6 @@ const BackgroundOverlay = styled.div`
 export default (Element, hasOverlay = false) => {
   const [visible, toggle, setRef] = useModalBehavior();
 
-  // const Comp = styled(() => Element).attrs({ onPressClose: toggle });
-
   const wrapper = () => (visible &&
     <div>
       {hasOverlay && <BackgroundOverlay />}

client/modules/IDE/components/FileNode.jsx

@@ -108,10 +108,15 @@ export class FileNode extends React.Component {
   handleFileClick = (event) => {
     event.stopPropagation();
     const { isDeleting } = this.state;
-    const { id, setSelectedFile, name } = this.props;
+    const {
+      id, setSelectedFile, name, onClickFile
+    } = this.props;
     if (name !== 'root' && !isDeleting) {
       setSelectedFile(id);
     }
+
+    // debugger; // eslint-disable-line
+    if (onClickFile) { onClickFile(); }
   }
 
   handleFileNameChange = (event) => {
@@ -214,7 +219,7 @@ export class FileNode extends React.Component {
 
   renderChild = childId => (
     <li key={childId}>
-      <ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} />
+      <ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} onClickFile={this.props.onClickFile} />
     </li>
   )
 
@@ -233,7 +238,7 @@ export class FileNode extends React.Component {
     const isRoot = this.props.name === 'root';
 
     return (
-      <div className={itemClass}>
+      <div className={itemClass} >
         { !isRoot &&
           <div className="file-item__content" onContextMenu={this.toggleFileOptions}>
             <span className="file-item__spacer"></span>
@@ -382,10 +387,12 @@ FileNode.propTypes = {
   hideFolderChildren: PropTypes.func.isRequired,
   canEdit: PropTypes.bool.isRequired,
   openUploadFileModal: PropTypes.func.isRequired,
-  authenticated: PropTypes.bool.isRequired
+  authenticated: PropTypes.bool.isRequired,
+  onClickFile: PropTypes.func
 };
 
 FileNode.defaultProps = {
+  onClickFile: null,
   parentId: '0',
   isSelectedFile: false,
   isFolderClosed: false,