refactor: cleanup files page

src/files/FilesPage.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { findDOMNode } from 'react-dom'
 import { Helmet } from 'react-helmet'
 import { connect } from 'redux-bundler-react'
 import downloadFile from './download-file'
@@ -16,6 +17,7 @@ import CompanionInfo from './info-boxes/CompanionInfo'
 import WelcomeInfo from './info-boxes/WelcomeInfo'
 import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME } from './modals/Modals'
 // Icons
+import GlyphDots from '../icons/GlyphDots'
 import FolderIcon from '../icons/StrokeFolder'
 
 const defaultState = {
@@ -25,10 +27,21 @@ const defaultState = {
     show: null,
     files: null
   },
+  contextMenu: {
+    isOpen: false,
+    translateX: 0,
+    translateY: 0,
+    file: null
+  },
   isContextMenuOpen: false
 }
 
 class FilesPage extends React.Component {
+  constructor (props) {
+    super(props)
+    this.contextMenuRef = React.createRef()
+  }
+
   static propTypes = {
     ipfsProvider: PropTypes.string,
     files: PropTypes.object,
@@ -125,14 +138,41 @@ class FilesPage extends React.Component {
     this.setState({ modals: { } })
   }
 
-  handleContextMenuClick = (ev) => {
+  handleContextMenu = (ev, clickType, file, dotsPosition) => {
     // This is needed to disable the native OS right-click menu
     // and deal with the clicking on the ContextMenu options
     if (ev !== undefined && typeof ev !== 'string') {
       ev.preventDefault()
+      ev.persist()
     }
 
-    this.setState(state => ({ isContextMenuOpen: !state.isContextMenuOpen }))
+    const ctxMenu = findDOMNode(this.contextMenuRef.current)
+    const ctxMenuPosition = ctxMenu.getBoundingClientRect()
+
+    let translateX = 0
+    let translateY = 0
+
+    if (clickType === 'RIGHT') {
+      const rightPadding = window.innerWidth - ctxMenu.parentNode.getBoundingClientRect().right
+      translateX = (window.innerWidth - ev.clientX) - rightPadding - 15
+      translateY = (ctxMenuPosition.y + ctxMenuPosition.height / 2) - ev.clientY - 10
+    } else {
+      translateY = (ctxMenuPosition.y + ctxMenuPosition.height / 2) - (dotsPosition && dotsPosition.y) - 30
+    }
+
+    this.setState({
+      contextMenu: {
+        isOpen: !this.state.contextMenu.isOpen,
+        translateX,
+        translateY,
+        file
+      }
+    })
+  }
+
+  handleSingleClick = (ev) => {
+    const dotsPosition = this.dotsWrapper.getBoundingClientRect()
+    this.handleContextMenu(ev, 'LEFT', this.props.files, dotsPosition)
   }
 
   render () {
@@ -141,6 +181,8 @@ class FilesPage extends React.Component {
       doFilesMove, doFilesNavigateTo, doFilesUpdateSorting
     } = this.props
 
+    const { contextMenu } = this.state
+
     const isCompanion = ipfsProvider === 'window.ipfs'
     const filesExist = files && files.content && files.content.length
     const isRoot = files && files.path === '/'
@@ -151,6 +193,21 @@ class FilesPage extends React.Component {
           <title>{t('title')} - IPFS</title>
         </Helmet>
 
+        <ContextMenu
+          ref={this.contextMenuRef}
+          isOpen={contextMenu.isOpen}
+          translateX={contextMenu.translateX}
+          translateY={contextMenu.translateY}
+          handleClick={this.handleContextMenu}
+          isUpperDir={contextMenu.file && contextMenu.file.name === '..'}
+          showDots={false}
+          onShare={() => this.showShareModal([contextMenu.file])}
+          onDelete={() => this.showDeleteModal([contextMenu.file])}
+          onRename={() => this.showRenameModal([contextMenu.file])}
+          onInspect={() => this.inspect([contextMenu.file])}
+          onDownload={() => this.download([contextMenu.file])}
+          hash={contextMenu.file && contextMenu.file.hash} />
+
         { files &&
           <div>
             <div className='flex flex-wrap items-center mb3'>
@@ -173,16 +230,8 @@ class FilesPage extends React.Component {
                       addProgress={writeFilesProgress} />
                   </div>
                 ) : (
-                  <div className='ml-auto' style={{ width: '1.5rem' }}> {/* to render correctly in Firefox */}
-                    <ContextMenu
-                      handleClick={this.handleContextMenuClick}
-                      isOpen={this.state.isContextMenuOpen}
-                      onShare={() => this.showShareModal([files])}
-                      onDelete={() => this.showDeleteModal([files])}
-                      onRename={() => this.showRenameModal([files])}
-                      onInspect={() => this.inspect([files])}
-                      onDownload={() => this.download([files])}
-                      hash={files.hash} />
+                  <div ref={el => { this.dotsWrapper = el }} className='ml-auto' style={{ width: '1.5rem' }}> {/* to render correctly in Firefox */}
+                    <GlyphDots className='fill-gray-muted pointer hover-fill-gray transition-all' onClick={this.handleSingleClick} />
                   </div>
                 )}
             </div>
@@ -209,7 +258,8 @@ class FilesPage extends React.Component {
                 onRename={this.showRenameModal}
                 onDelete={this.showDeleteModal}
                 onNavigate={doFilesNavigateTo}
-                onMove={doFilesMove} />
+                onMove={doFilesMove}
+                handleContextMenuClick={this.handleContextMenu} />
               : <FilePreview {...files} gatewayUrl={this.props.gatewayUrl} /> }
           </div>
         }

src/files/context-menu/ContextMenu.js

@@ -61,7 +61,7 @@ class ContextMenu extends React.Component {
         <DropdownMenu
           top={-8}
           arrowMarginRight='11px'
-          left='calc(100% - 200px + 0.5rem)'
+          left='calc(100% - 200px)'
           translateX={-translateX}
           translateY={-translateY}
           open={this.props.isOpen}

src/files/files-list/FilesList.js

@@ -14,14 +14,12 @@ import { DropTarget } from 'react-dnd'
 // Components
 import Checkbox from '../../components/checkbox/Checkbox'
 import SelectedActions from '../selected-actions/SelectedActions'
-import ContextMenu from '../context-menu/ContextMenu'
 import File from '../file/File'
 import LoadingAnimation from '../../components/loading-animation/LoadingAnimation'
 
 export class FilesList extends React.Component {
   constructor (props) {
     super(props)
-    this.contextMenuRef = React.createRef()
     this.listRef = React.createRef()
   }
 
@@ -63,13 +61,7 @@ export class FilesList extends React.Component {
     selected: [],
     focused: null,
     firstVisibleRow: null,
-    isDragging: false,
-    contextMenu: {
-      isOpen: false,
-      translateX: 0,
-      translateY: 0,
-      currentFile: null
-    }
+    isDragging: false
   }
 
   filesRefs = {}
@@ -121,30 +113,6 @@ export class FilesList extends React.Component {
     )
   }
 
-  get contextMenu () {
-    const { contextMenu } = this.state
-    const isUpperDir = contextMenu.currentFile && contextMenu.currentFile.type === 'directory' && contextMenu.currentFile.name === '..'
-
-    return (
-      <div className='ph2 pv1 relative' style={{ width: '2.5rem' }}>
-        <ContextMenu
-          ref={this.contextMenuRef}
-          isOpen={contextMenu.isOpen}
-          translateX={contextMenu.translateX}
-          translateY={contextMenu.translateY}
-          handleClick={this.handleContextMenuClick}
-          isUpperDir={isUpperDir}
-          showDots={false}
-          onShare={() => this.props.onShare([contextMenu.currentFile])}
-          onDelete={() => this.props.onDelete([contextMenu.currentFile])}
-          onRename={() => this.props.onRename([contextMenu.currentFile])}
-          onInspect={() => this.props.onInspect([contextMenu.currentFile])}
-          onDownload={() => this.props.onDownload([contextMenu.currentFile])}
-          hash={contextMenu.currentFile && contextMenu.currentFile.hash} />
-      </div>
-    )
-  }
-
   componentDidMount () {
     document.addEventListener('keyup', this.keyHandler)
   }
@@ -322,7 +290,7 @@ export class FilesList extends React.Component {
           onAddFiles={onAddFiles}
           onMove={this.move}
           setIsDragging={this.isDragging}
-          handleContextMenuClick={this.handleContextMenuClick}
+          handleContextMenuClick={this.props.handleContextMenuClick}
           translucent={isDragging || (isOver && canDrop)}
           name='..'
           focused={focused === '..'}
@@ -354,7 +322,7 @@ export class FilesList extends React.Component {
               onAddFiles={onAddFiles}
               onMove={this.move}
               setIsDragging={this.isDragging}
-              handleContextMenuClick={this.handleContextMenuClick}
+              handleContextMenuClick={this.props.handleContextMenuClick}
               translucent={isDragging || (isOver && canDrop)}
               name='..'
               focused={focused === '..'}
@@ -381,50 +349,14 @@ export class FilesList extends React.Component {
           focused={focused === files[index].name}
           selected={selected.indexOf(files[index].name) !== -1}
           setIsDragging={this.isDragging}
-          handleContextMenuClick={this.handleContextMenuClick}
+          handleContextMenuClick={this.props.handleContextMenuClick}
           translucent={isDragging || (isOver && canDrop)} />
       </div>
     )
   }
 
   onRowsRendered = ({ startIndex }) => this.setState({ firstVisibleRow: startIndex })
 
-  handleContextMenuClick = (ev, clickType, file, dotsPosition) => {
-    // This is needed to disable the native OS right-click menu
-    // and deal with the clicking on the ContextMenu options
-    if (ev !== undefined && typeof ev !== 'string') {
-      ev.preventDefault()
-      ev.persist()
-    }
-
-    const ctxMenu = findDOMNode(this.contextMenuRef.current)
-    const ctxMenuPosition = ctxMenu.getBoundingClientRect()
-
-    if (clickType === 'RIGHT') {
-      this.setState(state => ({
-        ...state,
-        contextMenu: {
-          ...state.contextMenu,
-          isOpen: !state.contextMenu.isOpen,
-          translateX: (ctxMenuPosition.x + ctxMenuPosition.width / 2) - ev.clientX,
-          translateY: (ctxMenuPosition.y + ctxMenuPosition.height / 2) - ev.clientY - 10,
-          currentFile: file
-        }
-      }))
-    } else {
-      this.setState(state => ({
-        ...state,
-        contextMenu: {
-          ...state.contextMenu,
-          isOpen: !state.contextMenu.isOpen,
-          translateX: (ctxMenuPosition.x + ctxMenuPosition.width / 2) - (dotsPosition && dotsPosition.x) - 19,
-          translateY: (ctxMenuPosition.y + ctxMenuPosition.height / 2) - (dotsPosition && dotsPosition.y) - 30,
-          currentFile: file
-        }
-      }))
-    }
-  }
-
   render () {
     let { t, files, className, upperDir, showLoadingAnimation, connectDropTarget } = this.props
     const { selected } = this.state
@@ -482,7 +414,6 @@ export class FilesList extends React.Component {
                 </div>
               )}
             </WindowScroller>
-            {this.contextMenu}
             {this.selectedMenu}
           </Fragment> }
       </section>