@electerm/electerm-react 1.60.16 → 1.60.29

package/client/components/sftp/sftp-entry.jsx

@@ -1,34 +1,30 @@
 import { Component } from 'react'
+import { refs } from '../common/ref'
 import generate from '../../common/uid'
 import runIdle from '../../common/run-idle'
 import { Spin, Modal, notification } from 'antd'
-import { find, isString, isEqual, last, isNumber, some, isArray, pick, uniq, debounce } from 'lodash-es'
+import { isEqual, last, isNumber, some, isArray, pick, uniq, debounce } from 'lodash-es'
 import FileSection from './file-item'
 import resolve from '../../common/resolve'
 import wait from '../../common/wait'
 import isAbsPath from '../../common/is-absolute-path'
 import classnames from 'classnames'
 import sorterIndex from '../../common/index-sorter'
-import { getLocalFileInfo, getRemoteFileInfo } from './file-read'
+import { getLocalFileInfo, getRemoteFileInfo, getFolderFromFilePath } from './file-read'
 import {
   typeMap, maxSftpHistory, paneMap,
-  eventTypes,
   fileTypeMap,
   terminalSerialType,
   unexpectedPacketErrorDesc,
-  sftpRetryInterval,
-  commonActions
+  sftpRetryInterval
 } from '../../common/constants'
 import { hasFileInClipboardText } from '../../common/clipboard'
 import Client from '../../common/sftp'
 import fs from '../../common/fs'
-import keyControlPressed from '../../common/key-control-pressed'
-import keyPressed from '../../common/key-pressed'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
 import memoizeOne from 'memoize-one'
-import postMessage from '../../common/post-msg'
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
@@ -36,15 +32,6 @@ import './sftp.styl'
 
 const e = window.translate
 
-const buildTree = arr => {
-  return arr.reduce((prev, curr) => {
-    return {
-      ...prev,
-      [curr.id]: curr
-    }
-  }, {})
-}
-
 export default class Sftp extends Component {
   constructor (props) {
     super(props)
@@ -60,10 +47,12 @@ export default class Sftp extends Component {
     this.retryCount = 0
   }
 
-  // componentDidMount () {
-  //   // this.initData()
-  //   // this.initEvent()
-  // }
+  componentDidMount () {
+    this.id = 'sftp-' + this.props.sessionId
+    this.tid = 'sftp-' + this.props.tab.id
+    refs.add(this.id, this)
+    refs.add(this.tid, this)
+  }
 
   componentDidUpdate (prevProps, prevState) {
     if (
@@ -78,7 +67,6 @@ export default class Sftp extends Component {
         this.props.enableSftp !== false
       )
     ) {
-      this.initEvent()
       this.initData(true)
     }
     if (
@@ -114,7 +102,8 @@ export default class Sftp extends Component {
   }
 
   componentWillUnmount () {
-    this.destroyEvent()
+    refs.remove(this.id)
+    refs.remove(this.tid)
     this.sftp && this.sftp.destroy()
     this.sftp = null
     clearTimeout(this.timer4)
@@ -157,58 +146,41 @@ export default class Sftp extends Component {
     sortDirection,
     sortProp
   ) => {
-    const l0 = find(list, g => !g.id)
-    const l1 = list.filter(g => g.id && g.isDirectory)
-    const l2 = list.filter(g => g.id && !g.isDirectory)
-    const sorter = (a, b) => {
-      let va = a[sortProp]
-      let vb = b[sortProp]
-      if (isString(va)) {
-        va = va.toLowerCase()
-        vb = vb.toLowerCase()
-      }
-      if (sortDirection === 'desc') {
-        if (isString(va)) {
-          return va.localeCompare(vb, { sensitivity: 'base' })
-        }
-        return va > vb ? -1 : 1
-      } else {
-        if (isString(va)) {
-          return -va.localeCompare(vb, { sensitivity: 'base' })
-        }
-        return va > vb ? 1 : -1
-      }
+    if (!list || !list.length) {
+      return []
     }
-    return [
-      l0,
-      ...l1.sort(sorter),
-      ...l2.sort(sorter)
-    ].filter(d => d)
-  }, isEqual)
 
-  initEvent () {
-    window.addEventListener('message', this.handleMsg)
-    window.addEventListener('keydown', this.handleEvent)
-  }
+    const isDesc = sortDirection === 'desc'
 
-  destroyEvent () {
-    window.removeEventListener('keydown', this.handleEvent)
-    window.removeEventListener('message', this.handleMsg)
-  }
+    return list.slice().sort((a, b) => {
+      // Handle items with no id first
+      if (!a.id && b.id) return -1
+      if (a.id && !b.id) return 1
+      if (!a.id && !b.id) return 0
 
-  handleMsg = event => {
-    const {
-      action,
-      sessionId,
-      type
-    } = event?.data || {}
-    if (
-      action === commonActions.sftpList &&
-      sessionId === this.props.sessionId
-    ) {
-      this[type + 'ListDebounce']()
-    }
-  }
+      // Sort directories before files
+      if (a.isDirectory !== b.isDirectory) {
+        return a.isDirectory ? -1 : 1
+      }
+
+      // Sort by the specified property
+      let aValue = a[sortProp]
+      let bValue = b[sortProp]
+
+      if (typeof aValue === 'string') {
+        aValue = aValue.toLowerCase()
+        bValue = bValue.toLowerCase()
+        return isDesc
+          ? bValue.localeCompare(aValue, { sensitivity: 'base' })
+          : aValue.localeCompare(bValue, { sensitivity: 'base' })
+      }
+
+      // For non-string values, use simple comparison
+      if (aValue < bValue) return isDesc ? 1 : -1
+      if (aValue > bValue) return isDesc ? -1 : 1
+      return 0
+    })
+  }, isEqual)
 
   isActive () {
     return this.props.enableSftp && this.props.currentBatchTabId === this.props.tab.id &&
@@ -266,15 +238,6 @@ export default class Sftp extends Component {
     return this.getFileList(type).findIndex(f => f.id === file.id)
   }
 
-  onResizeDragEnd = () => {
-    postMessage({
-      type: eventTypes.resetFileListTable,
-      data: {
-        id: this.state.id
-      }
-    })
-  }
-
   selectAll = (type, e) => {
     e && e.preventDefault && e.preventDefault()
     this.setState({
@@ -344,8 +307,25 @@ export default class Sftp extends Component {
     await func(p).catch(window.store.onError)
   }
 
+  confirmDelete = (files) => {
+    return new Promise((resolve) => {
+      Modal.confirm({
+        title: this.renderDelConfirmTitle(files),
+        okText: e('ok'),
+        cancelText: e('cancel'),
+        onOk: () => resolve(true),
+        onCancel: () => resolve(false)
+      })
+    })
+  }
+
   delFiles = async (_type, files = this.state.selectedFiles) => {
+    this.onDelete = true
+    const confirm = await this.confirmDelete(files)
     this.onDelete = false
+    if (!confirm) {
+      return
+    }
     const type = files[0].type || _type
     const func = this[type + 'Del']
     for (const f of files) {
@@ -380,16 +360,6 @@ export default class Sftp extends Component {
     )
   }
 
-  onDel = (type, files) => {
-    this.onDelete = true
-    Modal.confirm({
-      cancelText: e('cancel'),
-      okText: e('ok'),
-      title: this.renderDelConfirmTitle(files),
-      onOk: () => this.delFiles(type, files)
-    })
-  }
-
   enter = (type, e) => {
     const { selectedFiles, onEditFile } = this.state
     if (onEditFile || selectedFiles.length !== 1) {
@@ -437,41 +407,6 @@ export default class Sftp extends Component {
     this[type + 'Dom'].onPaste()
   }
 
-  handleEvent = (e) => {
-    if (!this.isActive() || window.store.onOperation) {
-      return
-    }
-    const lastClickedFile = this.state.lastClickedFile || {
-      type: typeMap.local
-    }
-    const { type } = lastClickedFile
-    const { inputFocus, onDelete } = this
-    e.stopPropagation()
-    if (keyControlPressed(e) && keyPressed(e, 'keyA') && !inputFocus) {
-      this.selectAll(type, e)
-    } else if (keyPressed(e, 'arrowdown') && !inputFocus) {
-      this.selectNext(type)
-    } else if (keyPressed(e, 'arrowup') && !inputFocus) {
-      this.selectPrev(type)
-    } else if (
-      keyPressed(e, 'delete') &&
-      !inputFocus &&
-      !this.state.onEditFile
-    ) {
-      this.onDel(type)
-    } else if (keyPressed(e, 'enter') && !inputFocus && !onDelete) {
-      this.enter(type, e)
-    } else if (keyControlPressed(e) && keyPressed(e, 'keyC') && !inputFocus) {
-      this.doCopy(type, e)
-    } else if (keyControlPressed(e) && keyPressed(e, 'keyX') && !inputFocus) {
-      this.doCut(type, e)
-    } else if (keyControlPressed(e) && keyPressed(e, 'keyV') && !inputFocus) {
-      this.doPaste(type, e)
-    } else if (keyPressed(e, 'f5')) {
-      this.onGoto(type)
-    }
-  }
-
   initData = async () => {
     if (this.shouldRenderRemote()) {
       this.initRemoteAll()
@@ -537,6 +472,18 @@ export default class Sftp extends Component {
     })
   }
 
+  buildTree = (arr, type) => {
+    const parent = this.renderParentItem(type)
+    const treeMap = new Map(arr.map(d => [d.id, d]))
+
+    // Only add parent if it exists
+    if (parent) {
+      treeMap.set(parent.id, parent)
+    }
+
+    return treeMap
+  }
+
   remoteListOwner = async () => {
     const remoteUidTree = await owner.remoteListUsers(
       this.props.pid,
@@ -666,7 +613,7 @@ export default class Sftp extends Component {
       this.sftp = sftp
       const update = {
         remote,
-        remoteFileTree: buildTree(remote),
+        remoteFileTree: this.buildTree(remote, typeMap.remote),
         inited: true,
         remoteLoading: false
       }
@@ -748,7 +695,7 @@ export default class Sftp extends Component {
     }
     const update = {
       remote,
-      remoteFileTree: buildTree(remote)
+      remoteFileTree: this.buildTree(remote, typeMap.remote)
     }
     this.setState(update)
   }
@@ -781,7 +728,7 @@ export default class Sftp extends Component {
       const update = {
         local,
         inited: true,
-        localFileTree: buildTree(local),
+        localFileTree: this.buildTree(local, typeMap.local),
         localLoading: false
       }
       if (!noPathInit) {
@@ -953,6 +900,32 @@ export default class Sftp extends Component {
     )
   }
 
+  renderParentItem = (type) => {
+    const currentPath = this.state[`${type}Path`]
+    const parentPath = resolve(currentPath, '..')
+    // Don't render parent item if we're at the root
+    if (parentPath === currentPath) {
+      return null
+    }
+
+    const { id } = this.props.tab
+    const uniqueId = `parent-${parentPath}-${id}-${type}`
+
+    return {
+      type,
+      isDirectory: true,
+      ...getFolderFromFilePath(parentPath, type === typeMap.remote),
+      id: uniqueId,
+      size: 0,
+      modifyTime: 0,
+      accessTime: 0,
+      mode: 0,
+      owner: '',
+      group: '',
+      isParent: true
+    }
+  }
+
   renderHistory = (type) => {
     const currentPath = this.state[type + 'Path']
     const options = this.state[type + 'PathHistory']
@@ -999,6 +972,7 @@ export default class Sftp extends Component {
       store: window.store,
       id,
       type,
+      parentItem: this.renderParentItem(type),
       ...this.props,
       ...pick(
         this,

package/client/components/sftp/sftp.styl

@@ -78,9 +78,11 @@
   left 10px
   top 10px
   font-size 50px
+.file-props-div
+  display flex
+  width 100%
 .file-props
   margin-left 70px
-
 .opacity-loop
   opacity 0.3
   animation blinker 5s linear infinite
@@ -97,11 +99,9 @@
 
 //list table
 .sftp-file-prop
+  flex 0 0 auto
   height 32px
   line-height 30px
-  position absolute
-  left 0
-  width 100px
   padding 0 5px
   background main
   overflow hidden
@@ -109,11 +109,8 @@
   text-overflow ellipsis
   pointer-events none
   cursor default
-  z-index 4
   color text
-  &:last-child
-    right 0 !important
-    width auto !important
+
 .file-bg
   position absolute
   left 0
@@ -125,26 +122,13 @@
 .sftp-header-item
   height 28px
   line-height 25px
-  position absolute
-  left 0
-  width 100px
-  border 1px solid main
-  border-right none
   padding 0 5px
   background main
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
   color text
-  &:last-child
-    border-right 1px solid main
-    right 0 !important
-    width auto !important
-.sftp-header-handle
-  z-index 20
-  cursor ew-resize
-  border none
-  background none
+
 .sftp-file-table-header
   height 30px
 .sftp-table

package/client/components/sftp/transfer-conflict-store.jsx

@@ -12,6 +12,7 @@ import {
   getFileExt,
   checkFolderSize
 } from './file-read'
+import { refsStatic, refs } from '../common/ref'
 import generate from '../../common/uid'
 import resolve from '../../common/resolve'
 import deepCopy from 'json-deep-copy'
@@ -24,6 +25,8 @@ export default class TransferConflictStore extends PureComponent {
   }
 
   componentDidMount () {
+    this.id = 'transfer-conflict'
+    refsStatic.add(this.id, this)
     this.watchFile()
   }
 
@@ -40,7 +43,7 @@ export default class TransferConflictStore extends PureComponent {
   }
 
   remoteCheckExist = (path, sessionId) => {
-    const sftp = window.sftps[sessionId]
+    const sftp = refs.get('sftp-' + sessionId).sftp
     return getRemoteFileInfo(sftp, path)
       .then(r => r)
       .catch(() => false)
@@ -131,23 +134,17 @@ export default class TransferConflictStore extends PureComponent {
     window.store.transferToConfirm = tr
   }
 
-  onDecision = (event) => {
+  onDecision = (data) => {
     if (
-      event &&
-      event.data &&
-      event.data.id === this.currentId
+      data.id === this.currentId
     ) {
       this.currentId = ''
-      this.updateTransferAction(event.data)
+      this.updateTransferAction(data)
       this.onConfirm = false
       window.removeEventListener('message', this.onDecision)
     }
   }
 
-  waitForSignal = () => {
-    window.addEventListener('message', this.onDecision)
-  }
-
   updateData = () => {
     const {
       store
@@ -239,7 +236,7 @@ export default class TransferConflictStore extends PureComponent {
     }
     if (fromFile.isDirectory && typeFrom !== typeTo) {
       const props = {
-        sftp: window.sftps[sessionId]
+        sftp: refs.get('sftp-' + sessionId).sftp
       }
       const skip = await checkFolderSize(props, fromFile)
         .then(d => d && typeFrom !== typeTo)
@@ -260,7 +257,6 @@ export default class TransferConflictStore extends PureComponent {
         transfer: tr
       })
     } else if (toFile && !action && !skipConfirm) {
-      this.waitForSignal(id)
       if (!this.onConfirm) {
         this.onConfirm = true
         assign(tr, {

package/client/components/sftp/transport-action-store.jsx

@@ -2,7 +2,7 @@ import { Component } from 'react'
 import copy from 'json-deep-copy'
 import { isFunction } from 'lodash-es'
 import generate from '../../common/uid'
-import { typeMap, transferTypeMap, commonActions } from '../../common/constants'
+import { typeMap, transferTypeMap } from '../../common/constants'
 import fs from '../../common/fs'
 import format, { computeLeftTime, computePassedTime } from './transfer-speed-format'
 import {
@@ -10,7 +10,7 @@ import {
 } from './file-read'
 import resolve from '../../common/resolve'
 import delay from '../../common/wait'
-import postMsg from '../../common/post-msg'
+import { refs } from '../common/ref'
 import { zipCmd, unzipCmd, rmCmd, mvCmd, mkdirCmd } from './zip'
 import './transfer.styl'
 
@@ -71,19 +71,11 @@ export default class TransportAction extends Component {
   }
 
   remoteList = () => {
-    postMsg({
-      action: commonActions.sftpList,
-      sessionId: this.sessionId,
-      type: typeMap.remote
-    })
+    window.store.remoteList(this.sessionId)
   }
 
   localList = () => {
-    postMsg({
-      action: commonActions.sftpList,
-      sessionId: this.sessionId,
-      type: typeMap.local
-    })
+    window.store.localList(this.sessionId)
   }
 
   onEnd = (update = {}) => {
@@ -200,7 +192,7 @@ export default class TransportAction extends Component {
           this.onError(e)
         })
     }
-    const sftp = window.sftps[sessionId]
+    const sftp = refs.get('sftp-' + sessionId).sftp
     return sftp[operation](fromPath, toPath)
       .then(this.onEnd)
       .catch(e => {
@@ -342,7 +334,7 @@ export default class TransportAction extends Component {
       ? fromPath
       : toPath
     const mode = toFile.mode || fromMode
-    const sftp = window.sftps[this.sessionId]
+    const sftp = refs.get('sftp-' + this.sessionId).sftp
     this.transport = await sftp[transferType]({
       remotePath,
       localPath,
@@ -419,7 +411,7 @@ export default class TransportAction extends Component {
       return fs.mkdir(toPath)
         .catch(this.onError)
     }
-    const sftp = window.sftps[sessionId]
+    const sftp = refs.get('sftp-' + sessionId).sftp
     return sftp.mkdir(toPath)
       .catch(this.onError)
   }

package/client/components/shortcuts/shortcut-control.jsx

@@ -6,15 +6,84 @@
 import React from 'react'
 import { shortcutExtend } from './shortcut-handler.js'
 import { throttle } from 'lodash-es'
+import {
+  typeMap
+} from '../../common/constants'
+import { refs, refsStatic } from '../common/ref'
+import keyControlPressed from '../../common/key-control-pressed'
+import keyPressed from '../../common/key-pressed'
 
 class ShortcutControl extends React.PureComponent {
   componentDidMount () {
     const onEvent = this.handleKeyboardEvent.bind(this)
-    window.addEventListener('keydown', onEvent)
-    window.addEventListener('mousedown', onEvent)
-    window.addEventListener('mousewheel', onEvent)
+    document.addEventListener('keydown', this.onEvent, true)
+    document.addEventListener('mousedown', onEvent)
+    document.addEventListener('mousewheel', onEvent)
   }
 
+  onEvent = (e) => {
+    // First check SFTP shortcuts
+    this.handleSftpKeyboardEvent(e)
+    // Then handle extended shortcuts
+    this.handleKeyboardEvent(e)
+  }
+
+  getActiveSftp = () => {
+    const { activeTabId } = window.store
+    if (!activeTabId) return null
+    const ref = refs.get('sftp-' + activeTabId)
+    if (!ref || !ref.isActive()) return null
+    return ref
+  }
+
+  // SFTP shortcuts handler
+  handleSftpKeyboardEvent = (e) => {
+    const activeSftp = this.getActiveSftp()
+    if (!activeSftp || activeSftp.state.onDelete) {
+      return
+    }
+
+    const lastClickedFile = activeSftp.state.lastClickedFile || {
+      type: typeMap.local
+    }
+    const { type } = lastClickedFile
+    const { inputFocus } = activeSftp
+
+    if (keyControlPressed(e) && keyPressed(e, 'keyA') && !inputFocus) {
+      e.stopPropagation()
+      activeSftp.selectAll(type, e)
+    } else if (keyPressed(e, 'arrowdown') && !inputFocus) {
+      e.stopPropagation()
+      activeSftp.selectNext(type)
+    } else if (keyPressed(e, 'arrowup') && !inputFocus) {
+      e.stopPropagation()
+      activeSftp.selectPrev(type)
+    } else if (keyPressed(e, 'delete') && !inputFocus && !activeSftp.state.onEditFile) {
+      e.stopPropagation()
+      activeSftp.delFiles(type)
+    } else if (keyPressed(e, 'enter') && !inputFocus && !activeSftp.onDelete) {
+      e.stopPropagation()
+      activeSftp.enter(type, e)
+    } else if (keyControlPressed(e) && keyPressed(e, 'keyC') && !inputFocus) {
+      e.stopPropagation()
+      activeSftp.doCopy(type, e)
+    } else if (keyControlPressed(e) && keyPressed(e, 'keyX') && !inputFocus) {
+      e.stopPropagation()
+      activeSftp.doCut(type, e)
+    } else if (keyControlPressed(e) && keyPressed(e, 'keyV') && !inputFocus) {
+      e.stopPropagation()
+      activeSftp.doPaste(type, e)
+    } else if (keyPressed(e, 'f5')) {
+      e.stopPropagation()
+      activeSftp.onGoto(type)
+    }
+  }
+
+  searchShortcut = throttle((e) => {
+    e.stopPropagation()
+    refsStatic.get('term-search')?.toggleSearch()
+  }, 500)
+
   closeCurrentTabShortcut = throttle((e) => {
     e.stopPropagation()
     const { activeTabId } = window.store

package/client/components/shortcuts/shortcut-handler.js

@@ -68,7 +68,6 @@ export function shortcutExtend (Cls) {
       !altKey &&
       !ctrlKey
     ) {
-      console.log('handleKeyboardEvent: Handling Backspace key')
       this.props.onDelKeyPressed()
       const delKey = this.props.config.backspaceMode === '^?' ? 8 : 127
       const altDelDelKey = delKey === 8 ? 127 : 8

package/client/components/side-panel-r/side-panel-r.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React, { memo, useRef } from 'react'
 import DragHandle from '../common/drag-handle'
 import './right-side-panel.styl'
 import {
@@ -22,6 +22,8 @@ export default memo(function RightSidePanel (
     rightPanelTab
   }
 ) {
+  const panelRef = useRef(null)
+
   if (!rightPanelVisible) {
     return null
   }
@@ -34,8 +36,9 @@ export default memo(function RightSidePanel (
   }
 
   function onDragMove (nw) {
-    const el = document.getElementById('right-side-panel')
-    el.style.width = nw + 'px'
+    if (panelRef.current) {
+      panelRef.current.style.width = nw + 'px'
+    }
   }
 
   function onClose () {
@@ -48,7 +51,7 @@ export default memo(function RightSidePanel (
 
   const panelProps = {
     className: 'right-side-panel animate-fast' + (rightPanelPinned ? ' right-side-panel-pinned' : ''),
-    id: 'right-side-panel',
+    ref: panelRef,
     style: {
       width: `${rightPanelWidth}px`
     }