chore: open ContextMenu on right-click (#929)

- ContextMenu now opens when right-clicking on a file in the files list
- Decoupled the ContextMenu logic to the parent component
- Tidy up File component

package.json

@@ -24,7 +24,7 @@
     "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
-    "@tableflip/react-dropdown": "^1.1.1",
+    "@tableflip/react-dropdown": "^1.2.0",
     "@tableflip/react-inspector": "^2.3.0",
     "brace": "^0.11.1",
     "chart.js": "^2.7.2",

src/files/context-menu/ContextMenu.js

@@ -14,6 +14,11 @@ import StrokeDownload from '../../icons/StrokeDownload'
 
 class ContextMenu extends React.Component {
   static propTypes = {
+    isOpen: PropTypes.bool,
+    handleClick: PropTypes.func,
+    translateX: PropTypes.number,
+    translateY: PropTypes.number,
+    left: PropTypes.number,
     onDelete: PropTypes.func,
     onRename: PropTypes.func,
     onDownload: PropTypes.func,
@@ -25,6 +30,7 @@ class ContextMenu extends React.Component {
   }
 
   static defaultProps = {
+    isOpen: false,
     top: 0,
     left: 0,
     right: 'auto',
@@ -35,27 +41,25 @@ class ContextMenu extends React.Component {
     dropdown: false
   }
 
-  toggleDropdown = () => {
-    this.setState(s => ({ dropdown: !s.dropdown }))
-  }
-
   wrap = (name) => () => {
-    this.toggleDropdown()
+    this.props.handleClick()
     this.props[name]()
   }
 
   render () {
-    const { t, onRename, onDelete, onDownload, onInspect, onShare } = this.props
+    const { t, onRename, onDelete, onDownload, onInspect, onShare, translateX, translateY } = this.props
 
     return (
       <Dropdown>
-        <GlyphDots width='1.5rem' className='fill-gray-muted pointer hover-fill-gray transition-all' onClick={this.toggleDropdown} />
+        <GlyphDots width='1.5rem' className='fill-gray-muted pointer hover-fill-gray transition-all' onClick={this.props.handleClick} />
         <DropdownMenu
           top={-8}
           arrowMarginRight='11px'
           left='calc(100% - 200px + 0.5rem)'
-          open={this.state.dropdown}
-          onDismiss={this.toggleDropdown} >
+          translateX={-translateX}
+          translateY={-translateY}
+          open={this.props.isOpen}
+          onDismiss={this.props.handleClick}>
           { onDelete &&
             <Option onClick={this.wrap('onDelete')}>
               <StrokeTrash className='w2 mr2 fill-aqua' />
@@ -80,7 +84,7 @@ class ContextMenu extends React.Component {
               {t('actions.inspect')}
             </Option>
           }
-          <CopyToClipboard text={this.props.hash} onCopy={this.toggleDropdown}>
+          <CopyToClipboard text={this.props.hash} onCopy={this.props.handleClick}>
             <Option>
               <StrokeCopy className='w2 mr2 fill-aqua' />
               {t('actions.copyHash')}

src/files/context-menu/ContextMenu.stories.js

@@ -2,15 +2,18 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { checkA11y } from '@storybook/addon-a11y'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
 import i18n from '../../i18n-decorator'
 import ContextMenu from './ContextMenu'
 
 storiesOf('Files', module)
   .addDecorator(checkA11y)
+  .addDecorator(withKnobs)
   .addDecorator(i18n)
   .add('Context Menu', () => (
     <div className='ma3'>
       <ContextMenu
+        isOpen={boolean('isOpen', false)}
         top={10}
         left={10}
         hash={'QmQK3p7MmycDutWkWAzJ4hNN1YBKK9bLTDz9jTtkWf16wC'}

src/files/dropdown/Dropdown.js

@@ -7,15 +7,17 @@ export const Option = ({ children, onClick, className = '', ...props }) => (
   </a>
 )
 
-export const DropdownMenu = ({ children, arrowMarginRight, width = 200, ...props }) => (
+export const DropdownMenu = ({ children, arrowMarginRight, width = 200, translateX = 0, translateY = 0, ...props }) => (
   <Menu
     className='sans-serif br2 charcoal'
     boxShadow='rgba(105, 196, 205, 0.5) 0px 1px 10px 0px'
     width={width}
     arrowAlign='right'
     arrowMarginRight={arrowMarginRight || '13px'}
     left={`calc(100% - ${width}px)`}
-    {...props} >
+    translateX={translateX}
+    translateY={translateY}
+    {...props}>
     <nav className='flex flex-column'>
       {children}
     </nav>