added handledr to extended actions + it wont open the app anymore + moved component ExtendedAction

src/component/BtnExtandedAction/ExtandedAction.jsx

@@ -1,70 +0,0 @@
-import React, { Component } from 'react'
-
-class ExtandedAction extends Component {
-  render () {
-    return (
-      <div className='extandedaction dropdown'>
-        <button
-          className='extandedaction__button btn btn-outline-primary dropdown-toggle'
-          onClick={this.props.onClickStopEvent}
-          type='button'
-          id='dropdownMenuButton'
-          data-toggle='dropdown'
-          aria-haspopup='true'
-          aria-expanded='false'
-        >
-          <i className='fa fa-fw fa-ellipsis-h' />
-        </button>
-        <div className='extandedaction__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
-          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
-            <div className='subdropdown__item__icon mr-3'>
-              <i className='fa fa-fw fa-pencil' />
-            </div>
-            <div className='subdropdown__item__text'>
-              Modifier
-            </div>
-          </div>
-
-          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
-            <div className='subdropdown__item__icon mr-3'>
-              <i className='fa fa-fw fa-arrows-alt' />
-            </div>
-            <div className='subdropdown__item__text'>
-              Déplacer
-            </div>
-          </div>
-
-          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
-            <div className='subdropdown__item__icon mr-3'>
-              <i className='fa fa-fw fa-download' />
-            </div>
-            <div className='subdropdown__item__text'>
-              Télécharger
-            </div>
-          </div>
-
-          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
-            <div className='subdropdown__item__icon mr-3'>
-              <i className='fa fa-fw fa-archive' />
-            </div>
-            <div className='subdropdown__item__text'>
-              Archiver
-            </div>
-          </div>
-
-          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
-            <div className='subdropdown__item__icon mr-3'>
-              <i className='fa fa-fw fa-trash-o' />
-            </div>
-            <div className='subdropdown__item__text'>
-              Supprimer
-            </div>
-          </div>
-
-        </div>
-      </div>
-    )
-  }
-}
-
-export default ExtandedAction

src/component/Workspace/BtnExtandedAction.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ExtandedAction = props => {
+  return (
+    <div className='extandedaction dropdown'>
+      <button
+        className='extandedaction__button btn btn-outline-primary dropdown-toggle'
+        type='button'
+        id='dropdownMenuButton'
+        data-toggle='dropdown'
+        aria-haspopup='true'
+        aria-expanded='false'
+        onClick={e => e.stopPropagation()}
+      >
+        <i className='fa fa-fw fa-ellipsis-h' />
+      </button>
+      <div className='extandedaction__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
+        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.edit}>
+          <div className='subdropdown__item__icon mr-3'>
+            <i className='fa fa-fw fa-pencil' />
+          </div>
+          <div className='subdropdown__item__text'>
+            Modifier
+          </div>
+        </div>
+
+        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.move}>
+          <div className='subdropdown__item__icon mr-3'>
+            <i className='fa fa-fw fa-arrows-alt' />
+          </div>
+          <div className='subdropdown__item__text'>
+            Déplacer
+          </div>
+        </div>
+
+        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.download}>
+          <div className='subdropdown__item__icon mr-3'>
+            <i className='fa fa-fw fa-download' />
+          </div>
+          <div className='subdropdown__item__text'>
+            Télécharger
+          </div>
+        </div>
+
+        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.archive}>
+          <div className='subdropdown__item__icon mr-3'>
+            <i className='fa fa-fw fa-archive' />
+          </div>
+          <div className='subdropdown__item__text'>
+            Archiver
+          </div>
+        </div>
+
+        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.delete}>
+          <div className='subdropdown__item__icon mr-3'>
+            <i className='fa fa-fw fa-trash-o' />
+          </div>
+          <div className='subdropdown__item__text'>
+            Supprimer
+          </div>
+        </div>
+
+      </div>
+    </div>
+  )
+}
+
+export default ExtandedAction
+
+ExtandedAction.propTypes = {
+  onClickExtendedAction: PropTypes.object.isRequired
+}
+
+ExtandedAction.defaultProps = {}

src/component/Workspace/FileItem.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import BtnExtandedAction from '../BtnExtandedAction/ExtandedAction.jsx'
+import BtnExtandedAction from './BtnExtandedAction.jsx'
 
 const FileItem = props => {
   const iconStatus = (() => {
@@ -58,7 +58,7 @@ const FileItem = props => {
           </div>
 
           <div className='d-none d-md-flex'>
-            <BtnExtandedAction />
+            <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
           </div>
 
           {/*

src/component/Workspace/Folder.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import FileItem from './FileItem.jsx'
 // import PopupExtandedAction from '../../container/PopupExtandedAction.jsx'
-import BtnExtandedAction from '../BtnExtandedAction/ExtandedAction.jsx'
+import BtnExtandedAction from './BtnExtandedAction.jsx'
 
 class Folder extends React.Component {
   constructor (props) {
@@ -24,16 +24,12 @@ class Folder extends React.Component {
     console.log('new file') // @TODO
   }
 
-  handleClickStopEvent = e => {
-    e.stopPropagation()
-    console.log('stop')
-  }
-
   render () {
     const {
       app,
       folderData,
       onClickItem,
+      onClickExtendedAction,
       onClickFolder,
       isLast,
       t
@@ -144,7 +140,13 @@ class Folder extends React.Component {
                 </div>
 
                 <div className='d-none d-md-flex'>
-                  <BtnExtandedAction onClickStopEvent={this.handleClickStopEvent} />
+                  <BtnExtandedAction onClickExtendedAction={{
+                    edit: e => onClickExtendedAction.edit(e, folderData),
+                    move: e => onClickExtendedAction.move(e, folderData),
+                    download: e => onClickExtendedAction.download(e, folderData),
+                    archive: e => onClickExtendedAction.archive(e, folderData),
+                    delete: e => onClickExtendedAction.delete(e, folderData)
+                  }} />
                 </div>
 
               </div>
@@ -155,25 +157,13 @@ class Folder extends React.Component {
 
         </div>
 
-        {/*
-          <div className='col-5 col-sm-5 col-md-5 col-lg-4 col-xl-3 d-none'>
-            <div className='folder__header__contenttype d-none d-sm-flex'>
-              <div className='folder__header__contenttype__text d-none d-lg-flex'>
-                {t('Folder.content_type')} :
-              </div>
-              <div className='folder__header__contenttype__icon'>
-                { folderData.allowed_app.map(a => <i className={(app[a] || {icon: ''}).icon} key={`${folderData.id}_${a}`} />)}
-              </div>
-            </div>
-          </div>
-        */}
-
         <div className='folder__content'>
           { folderData.content.map((c, i) => c.type === 'folder'
             ? <Folder
               app={app}
               folderData={c}
               onClickItem={onClickItem}
+              onClickExtendedAction={onClickExtendedAction}
               onClickFolder={onClickFolder}
               isLast={isLast}
               t={t}
@@ -185,6 +175,14 @@ class Folder extends React.Component {
               type={c.type}
               status={c.status}
               onClickItem={() => onClickItem(c)}
+              onClickExtendedAction={{
+                // we have to use the event here because it is the only place where we also have the content (c)
+                edit: e => onClickExtendedAction.edit(e, c),
+                move: e => onClickExtendedAction.move(e, c),
+                download: e => onClickExtendedAction.download(e, c),
+                archive: e => onClickExtendedAction.archive(e, c),
+                delete: e => onClickExtendedAction.delete(e, c)
+              }}
               isLast={isLast && i === folderData.content.length - 1}
               key={c.id}
             />

src/container/WorkspaceContent.jsx

@@ -43,6 +43,31 @@ class WorkspaceContent extends React.Component {
     // dispatch(setActiveFileContentActive(content))
   }
 
+  handleClickEditContentItem = (e, content) => {
+    e.stopPropagation()
+    console.log('edit nyi', content)
+  }
+
+  handleClickMoveContentItem = (e, content) => {
+    e.stopPropagation()
+    console.log('move nyi', content)
+  }
+
+  handleClickDownloadContentItem = (e, content) => {
+    e.stopPropagation()
+    console.log('download nyi', content)
+  }
+
+  handleClickArchiveContentItem = (e, content) => {
+    e.stopPropagation()
+    console.log('archive nyi', content)
+  }
+
+  handleClickDeleteContentItem = (e, content) => {
+    e.stopPropagation()
+    console.log('delete nyi', content)
+  }
+
   handleClickFolder = folderId => {
     this.props.dispatch(getFolderContent(this.props.workspace.id, folderId))
   }
@@ -81,6 +106,13 @@ class WorkspaceContent extends React.Component {
                     app={app}
                     folderData={c}
                     onClickItem={this.handleClickContentItem}
+                    onClickExtendedAction={{
+                      edit: this.handleClickEditContentItem,
+                      move: this.handleClickMoveContentItem,
+                      download: this.handleClickDownloadContentItem,
+                      archive: this.handleClickArchiveContentItem,
+                      delete: this.handleClickDeleteContentItem
+                    }}
                     onClickFolder={this.handleClickFolder}
                     isLast={i === filteredWorkspaceContent.length - 1}
                     key={c.id}
@@ -93,6 +125,13 @@ class WorkspaceContent extends React.Component {
                     icon={(app[c.type] || {icon: ''}).icon}
                     status={c.status}
                     onClickItem={() => this.handleClickContentItem(c)}
+                    onClickExtendedAction={{
+                      edit: e => this.handleClickEditContentItem(e, c),
+                      move: e => this.handleClickMoveContentItem(e, c),
+                      download: e => this.handleClickDownloadContentItem(e, c),
+                      archive: e => this.handleClickArchiveContentItem(e, c),
+                      delete: e => this.handleClickDeleteContentItem(e, c)
+                    }}
                     isLast={i === filteredWorkspaceContent.length - 1}
                     key={c.id}
                   />