fix #94 support drag file from file manager (#205)

src/client/components/sftp/file-read.js

@@ -0,0 +1,32 @@
+/**
+ * file info related functions
+ */
+
+import {generate} from 'shortid'
+
+const {getGlobal, _require} = window
+const fs = getGlobal('fs')
+
+export const getFolderFromFilePath = filePath => {
+  let {sep} = _require('path')
+  let arr = filePath.split(sep)
+  let len = arr.length
+  return {
+    path: arr.slice(0, len - 1).join(sep),
+    name: arr[len - 1]
+  }
+}
+
+export const getLocalFileInfo = async (filePath) => {
+  let stat = await fs.statAsync(filePath)
+  return {
+    size: stat.size,
+    accessTime: stat.atime,
+    modifyTime: stat.mtime,
+    mode: stat.mode,
+    type: 'local',
+    ...getFolderFromFilePath(filePath),
+    id: generate(),
+    isDirectory: stat.isDirectory()
+  }
+}

src/client/components/sftp/file.jsx

@@ -15,10 +15,15 @@ import {addClass, removeClass, hasClass} from '../../common/class'
 import wait from '../../common/wait'
 import {contextMenuHeight, contextMenuPaddingTop} from '../../common/constants'
 import sorter from '../../common/index-sorter'
+import {getLocalFileInfo, getFolderFromFilePath} from './file-read'
 
 const {getGlobal} = window
 let fs = getGlobal('fs')
 let platform = getGlobal('os').platform()
+const isWin = platform.startsWith('win')
+let fileReg = isWin
+  ? /^\w:\\.+/
+  : /^\/.+/
 const computePos = (e, isBg, height) => {
   let {target} = e
   let rect = target.getBoundingClientRect()
@@ -59,14 +64,22 @@ export default class FileSection extends React.Component {
     }
   }
 
+  getClipboardText = () => {
+    return window._require('electron').clipboard.readText()
+  }
+
+  hasFileInClipboardText = (text) => {
+    let arr = text.split('\n')
+    return arr.reduce((prev, t) => {
+      return prev && fileReg.test(t)
+    }, true)
+  }
+
   onDrag = () => {
-    //debug('on drag')
-    //debug(e.target)
     addClass(this.dom, onDragCls)
   }
 
   onDragEnter = e => {
-    //debug('ondrag enter')
     let {target} = e
     if (
       !hasClass(target, fileItemCls)
@@ -78,38 +91,52 @@ export default class FileSection extends React.Component {
   }
 
   onDragExit = () => {
-    //debug('ondragexit')
-    //let {target} = e
-    //removeClass(target, 'sftp-dragover')
+
   }
 
   onDragLeave = e => {
-    //debug('ondragleave')
     let {target} = e
     removeClass(target, onDragOverCls)
   }
 
   onDragOver = e => {
-    //debug('ondragover')
-    //debug(e.target)
-    //removeClass(this.dom, 'sftp-dragover')
     e.preventDefault()
   }
 
   onDragStart = e => {
-    //debug('ondragstart')
-    //debug(e.target)
     e.dataTransfer.setData('fromFile', JSON.stringify(this.props.file))
-    //e.effectAllowed = 'copyMove'
   }
 
-  onDrop = e => {
+  getDropFileList = async data => {
+    let fromFile = data.getData('fromFile')
+    if (fromFile) {
+      return JSON.parse(fromFile)
+    }
+    let {files} = data
+    let res = []
+    for (let i = 0, len = files.length; i < len; i++) {
+      let item = files[i]
+      if (!item) {
+        continue
+      }
+      //let file = item.getAsFile()
+      let fileObj = await getLocalFileInfo(item.path)
+      res.push(fileObj)
+    }
+    return new Promise((resolve) => {
+      this.props.modifier({
+        selectedFiles: res
+      }, () => resolve(res[0]))
+    })
+  }
+
+  onDrop = async e => {
     e.preventDefault()
     let {target} = e
     if (!target) {
       return
     }
-    let fromFile = JSON.parse(e.dataTransfer.getData('fromFile'))
+    let fromFile = await this.getDropFileList(e.dataTransfer)
     while (!target.className.includes(fileItemCls)) {
       target = target.parentNode
     }
@@ -120,6 +147,7 @@ export default class FileSection extends React.Component {
     }
     let toFile = this.props[type + 'FileTree'][id] || {
       type,
+      ...getFolderFromFilePath(this.props[type + 'Path']),
       isDirectory: false
     }
     this.onDropFile(fromFile, toFile)
@@ -130,7 +158,16 @@ export default class FileSection extends React.Component {
     document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
       removeClass(d, onDragOverCls)
     })
-    e && e.dataTransfer && e.dataTransfer.clearData()
+    if (e && e.dataTransfer) {
+      let dt = e.dataTransfer
+      if (dt.items) {
+        // Use DataTransferItemList interface to remove the drag data
+        for (var i = 0, len = dt.items.length; i < len;i++ ) {
+          dt.items.remove(i)
+        }
+      }
+      dt.clearData()
+    }
   }
 
   onDropFile = (fromFile, toFile) => {
@@ -546,7 +583,7 @@ export default class FileSection extends React.Component {
     if (type === 'remote') {
       return true
     }
-    return !platform.startsWith('win')
+    return !isWin
   }
 
   renderContext() {
@@ -570,6 +607,7 @@ export default class FileSection extends React.Component {
       && _.some(selectedFiles, d => d.id === id)
     let cls = 'pd2x pd1y context-item pointer'
     let delTxt = shouldShowSelectedMenu ? `delete all(${len})` : 'delete'
+    //let clipboardText = this.getClipboardText()
     return (
       <div>
         {
@@ -624,6 +662,19 @@ export default class FileSection extends React.Component {
             )
             : null
         }
+        {
+          /*this.hasFileInClipboardText(clipboardText)
+            ? (
+              <div
+                className={cls}
+                onClick={this.onPaste}
+              >
+                <Icon type="copy" /> paste
+              </div>
+            )
+            : null
+            */
+        }
         {
           id
             ? (

src/client/components/sftp/index.jsx

@@ -11,6 +11,7 @@ import resolve from '../../common/resolve'
 import wait from '../../common/wait'
 import sorterIndex from '../../common/index-sorter'
 import DragSelect from './drag-select'
+import {getLocalFileInfo} from './file-read'
 import './sftp.styl'
 
 const {getGlobal} = window
@@ -177,7 +178,7 @@ export default class Sftp extends React.Component {
     let hasDirectory = _.some(files, f => f.isDirectory)
     let names = hasDirectory ? 'files/folders' : 'files'
     return (
-      <div className="width400 wordbreak">
+      <div className="wordbreak">
         are you sure? this will delete these
         <b className="mg1x">{files.length}</b>{names}
         {
@@ -332,7 +333,6 @@ export default class Sftp extends React.Component {
     }
     try {
       if (!this.sftp) {
-        debug(tab, 'tab')
         await sftp.connect({
           ...tab,
           readyTimeout: config.readyTimeout
@@ -383,18 +383,9 @@ export default class Sftp extends React.Component {
       let locals = await fs.readdirAsync(localPath)
       let local = []
       for(let name of locals) {
-        let stat = await fs.statAsync(resolve(localPath, name))
-        local.push({
-          name,
-          size: stat.size,
-          accessTime: stat.atime,
-          modifyTime: stat.mtime,
-          mode: stat.mode,
-          type: 'local',
-          path: localPath,
-          id: generate(),
-          isDirectory: stat.isDirectory()
-        })
+        let p = resolve(localPath, name)
+        let fileObj = await getLocalFileInfo(p)
+        local.push(fileObj)
       }
       local.sort(sorter)
       let update = {

src/client/components/sftp/transport.jsx

@@ -147,7 +147,9 @@ export default class Tranporter extends React.Component {
     let {id} = this.props.transport
     let oldTrans = copy(this.props.transports)
     if (oldTrans.length === 1) {
-      await this.transport.pause()
+      if (this.transport) {
+        await this.transport.pause()
+      }
       await wait(150)
     }
     let transports = oldTrans.filter(t => {