@electerm/electerm-react 3.15.32 → 3.15.35

package/client/components/session/session.jsx

@@ -537,7 +537,7 @@ export default class SessionWrapper extends Component {
   }
 
   renderKeepaliveIcon = () => {
-    if (this.isSshDisabled() || !this.props.tab.authType) {
+    if (this.isSshDisabled()) {
       return null
     }
     const { keepaliveEnabled } = this.state

package/client/components/sftp/file-item.jsx

@@ -27,7 +27,6 @@ import {
   paneMap,
   isMac, maxEditFileSize, ctrlOrCmd
 } from '../../common/constants'
-import findParent from '../../common/find-parent'
 import sorter from '../../common/index-sorter'
 import { getFolderFromFilePath, getLocalFileInfo } from './file-read'
 import { readClipboard, copy as copyToClipboard, hasFileInClipboardText } from '../../common/clipboard'
@@ -192,33 +191,6 @@ export default class FileSection extends React.Component {
     this.props.addTransferList(res)
   }
 
-  onDrag = () => {}
-
-  onDragEnter = e => {
-    let { target } = e
-    target = findParent(target, '.' + fileItemCls)
-    if (!target) {
-      return e.preventDefault()
-    }
-    this.dropTarget = target
-    target.classList.add(onDragOverCls)
-  }
-
-  onDragExit = () => {}
-
-  onDragLeave = e => {
-    let { target } = e
-    target = findParent(target, '.' + fileItemCls)
-    if (!target) {
-      return e.preventDefault()
-    }
-    target.classList.remove(onDragOverCls)
-  }
-
-  onDragOver = e => {
-    e.preventDefault()
-  }
-
   onDragStart = e => {
     this.props.modifier({
       onDrag: true
@@ -248,6 +220,16 @@ export default class FileSection extends React.Component {
     return getDropFileList(data)
   }
 
+  onDragEnd = () => {
+    this.props.modifier({
+      onDrag: false
+    })
+    removeClass(this.domRef.current, onDragCls, onMultiDragCls)
+    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
+      removeClass(d, onDragOverCls)
+    })
+  }
+
   onDrop = async e => {
     e.preventDefault()
     const fromFileManager = !!e?.dataTransfer?.files?.length
@@ -279,17 +261,6 @@ export default class FileSection extends React.Component {
     this.onDropFile(fromFiles, toFile, fromFileManager)
   }
 
-  onDragEnd = e => {
-    this.props.modifier({
-      onDrag: false
-    })
-    removeClass(this.domRef.current, onDragCls, onMultiDragCls)
-    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
-      removeClass(d, onDragOverCls)
-    })
-    e && e.dataTransfer && e.dataTransfer.clearData()
-  }
-
   onDropFile = async (fromFiles, toFile, fromFileManager) => {
     const { type: fromType } = fromFiles[0]
     const {
@@ -1297,15 +1268,7 @@ export default class FileSection extends React.Component {
     const props = {
       className,
       draggable: draggable && !isParent,
-      ...pick(this, [
-        'onDrag',
-        'onDragEnter',
-        'onDragExit',
-        'onDragLeave',
-        'onDragOver',
-        'onDrop',
-        'onDragEnd'
-      ]),
+      onDrop: this.onDrop,
       onDragStart: onDragStart || this.onDragStart,
       'data-id': id,
       id: this.id,

package/client/components/sftp/list-table-ui.jsx

@@ -13,8 +13,14 @@ import {
 } from '@ant-design/icons'
 import IconHolder from '../sys-menu/icon-holder'
 import { filesRef } from '../common/ref'
+import findParent from '../../common/find-parent'
+import { removeClass } from '../../common/class'
 
 const e = window.translate
+const fileItemCls = 'sftp-item'
+const onDragCls = 'sftp-ondrag'
+const onDragOverCls = 'sftp-dragover'
+const onMultiDragCls = 'sftp-dragover-multi'
 
 export default class FileListTable extends Component {
   constructor (props) {
@@ -27,6 +33,67 @@ export default class FileListTable extends Component {
 
   containerRef = createRef()
 
+  onDragOver = e => {
+    e.preventDefault()
+  }
+
+  onDragEnter = e => {
+    let { target } = e
+    target = findParent(target, '.' + fileItemCls)
+    if (!target) {
+      return e.preventDefault()
+    }
+    if (this.dropTarget && this.dropTarget !== target) {
+      this.dropTarget.classList.remove(onDragOverCls)
+    }
+    this.dropTarget = target
+    target.classList.add(onDragOverCls)
+  }
+
+  onDragLeave = e => {
+    let { target } = e
+    target = findParent(target, '.' + fileItemCls)
+    if (!target) {
+      return e.preventDefault()
+    }
+    if (
+      this.containerRef.current &&
+      !this.containerRef.current.contains(e.relatedTarget)
+    ) {
+      target.classList.remove(onDragOverCls)
+    }
+  }
+
+  onDrop = e => {
+    e.preventDefault()
+    let { target } = e
+    if (!target) {
+      return
+    }
+    target = findParent(target, '.' + fileItemCls)
+    if (!target) {
+      return
+    }
+    const id = target.getAttribute('data-id')
+    const ref = filesRef.get('file-' + id)
+    if (ref) {
+      ref.onDrop(e)
+    }
+  }
+
+  onDragEnd = e => {
+    this.props.modifier({
+      onDrag: false
+    })
+    document.querySelectorAll('.' + onDragCls).forEach((d) => {
+      removeClass(d, onDragCls, onMultiDragCls)
+    })
+    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
+      removeClass(d, onDragOverCls)
+    })
+    e && e.dataTransfer && e.dataTransfer.clearData()
+  }
+
   componentDidUpdate (prevProps) {
     const prevList = prevProps.fileList
     const nextList = this.props.fileList
@@ -289,7 +356,12 @@ export default class FileListTable extends Component {
       draggable: false,
       onScroll: this.onScroll,
       onClick: this.handleClick,
-      onDoubleClick: this.handleDoubleClick
+      onDoubleClick: this.handleDoubleClick,
+      onDragOver: this.onDragOver,
+      onDragEnter: this.onDragEnter,
+      onDragLeave: this.onDragLeave,
+      onDrop: this.onDrop,
+      onDragEnd: this.onDragEnd
     }
     const cls = classnames('sftp-table relative')
     const ddProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.15.32",
+  "version": "3.15.35",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",