@electerm/electerm-react 1.72.48 → 1.80.2

package/client/components/bookmark-form/use-ui.jsx

@@ -26,76 +26,72 @@ export default function useBookmarkFormUI (props) {
     fontFamily: defaultFontFamily,
     fontSize: defaultFontSize
   } = defaultSettings
-  return [
-    <FormItem
-      {...formItemLayout}
-      label='ENV:LANG'
-      key='envLang'
-      rules={[{
-        max: 130, message: '130 chars max'
-      }]}
-      name='envLang'
-    >
-      <Input placeholder={defaultEnvLang} />
-    </FormItem>,
-    <FormItem
-      {...formItemLayout}
-      key='terminalType'
-      label={e('terminalType')}
-      rules={[{
-        required: true, message: 'terminal type required'
-      }]}
-      normalize={props.trim}
-      name='term'
-    >
-      <AutoComplete
-        options={terminalTypes.map(mapper)}
-      />
-    </FormItem>,
-    <FormItem
-      {...formItemLayout}
-      label={e('displayRaw')}
-      name='displayRaw'
-      key='displayRaw'
-      valuePropName='checked'
-    >
-      <Switch />
-    </FormItem>,
-    <FormItem
-      {...formItemLayout}
-      label={e('fontFamily')}
-      key='fontFamily'
-      name='fontFamily'
-      rules={[{
-        max: 130, message: '130 chars max'
-      }]}
-    >
-      <Input placeholder={defaultFontFamily + ''} />
-    </FormItem>,
-    <FormItem
-      key='fontSize'
-      {...formItemLayout}
-      label={e('fontSize')}
-      name='fontSize'
-    >
-      <InputNumber
-        min={9}
-        max={65535}
-        step={1}
-        placeholder={defaultFontSize}
-      />
-    </FormItem>,
-    <FormItem
-      key='keepaliveInterval'
-      {...formItemLayout}
-      label={e('keepaliveIntervalDesc')}
-      name='keepaliveInterval'
-    >
-      <InputNumber
-        min={0}
-        max={20000000}
-        step={1000}
-      />
-    </FormItem>
-  ]
+  return (
+    <>
+      <FormItem
+        {...formItemLayout}
+        label='ENV:LANG'
+        rules={[{
+          max: 130, message: '130 chars max'
+        }]}
+        name='envLang'
+      >
+        <Input placeholder={defaultEnvLang} />
+      </FormItem>,
+      <FormItem
+        {...formItemLayout}
+        label={e('terminalType')}
+        rules={[{
+          required: true, message: 'terminal type required'
+        }]}
+        normalize={props.trim}
+        name='term'
+      >
+        <AutoComplete
+          options={terminalTypes.map(mapper)}
+        />
+      </FormItem>,
+      <FormItem
+        {...formItemLayout}
+        label={e('displayRaw')}
+        name='displayRaw'
+        valuePropName='checked'
+      >
+        <Switch />
+      </FormItem>,
+      <FormItem
+        {...formItemLayout}
+        label={e('fontFamily')}
+        name='fontFamily'
+        rules={[{
+          max: 130, message: '130 chars max'
+        }]}
+      >
+        <Input placeholder={defaultFontFamily + ''} />
+      </FormItem>,
+      <FormItem
+        {...formItemLayout}
+        label={e('fontSize')}
+        name='fontSize'
+      >
+        <InputNumber
+          min={9}
+          max={65535}
+          step={1}
+          placeholder={defaultFontSize}
+        />
+      </FormItem>,
+      <FormItem
+        {...formItemLayout}
+        label={e('keepaliveIntervalDesc')}
+        name='keepaliveInterval'
+      >
+        <InputNumber
+          min={0}
+          max={20000000}
+          step={1000}
+        />
+      </FormItem>
+    </>
+  )
 }

package/client/components/common/ref.js

@@ -1,6 +1,7 @@
 // components instance reference holder
 window.refs = new Map()
 window.refsStatic = new Map()
+window.refsTransfers = new Map()
 
 class Ref {
   constructor (key) {
@@ -21,4 +22,5 @@ class Ref {
 }
 
 export const refs = new Ref('refs')
+export const refsTransfers = new Ref('refsTransfers')
 export const refsStatic = new Ref('refsStatic')

package/client/components/{sftp/confirm-modal-store.jsx → file-transfer/conflict-resolve.jsx}

@@ -3,6 +3,7 @@
  *
  */
 
+import { Component } from 'react'
 import { Modal, Button } from 'antd'
 import { isString } from 'lodash-es'
 import AnimateText from '../common/animate-text'
@@ -11,8 +12,7 @@ import { FolderOutlined, FileOutlined } from '@ant-design/icons'
 import {
   fileActions
 } from '../../common/constants'
-import deepCopy from 'json-deep-copy'
-import { refsStatic } from '../common/ref'
+import { refsStatic, refsTransfers } from '../common/ref'
 
 const e = window.translate
 
@@ -23,30 +23,66 @@ function formatTimeAuto (strOrDigit) {
   return formatTime(strOrDigit * 1000)
 }
 
-export default function ConfirmModalStore (props) {
-  function act (action) {
-    const { transferToConfirm } = props
-    window.store.transferToConfirm = {}
-    const {
-      fromFile: {
-        id: fileId
-      },
-      id,
-      transferGroupId
-    } = transferToConfirm
-    refsStatic.get('transfer-conflict')?.onDecision({
-      transferGroupId,
-      fileId,
-      id,
-      transfer: deepCopy(transferToConfirm),
-      action
+export default class ConfirmModalStore extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      transferToConfirm: null
+    }
+    this.queue = []
+    this.id = 'transfer-conflict'
+    refsStatic.add(this.id, this)
+  }
+
+  addConflict = (transfer) => {
+    this.queue.push(transfer)
+    if (!this.state.transferToConfirm) {
+      this.showNext()
+    }
+  }
+
+  showNext = () => {
+    const next = this.queue.shift()
+    this.setState({
+      transferToConfirm: next
     })
   }
 
-  function renderContent () {
+  act = (action) => {
+    const { id, transferBatch } = this.state.transferToConfirm
+    const toAll = action.includes('All')
+    const policy = toAll ? action.replace('All', '') : action
+    const trid = `tr-${transferBatch}-${id}`
+    const doFilter = toAll && transferBatch
+
+    // For "All" actions, update all existing transfers in the same batch
+    if (doFilter) {
+      // Update all existing transfers with same batch ID in DOM
+      const prefix = `tr-${transferBatch}-`
+      for (const [key, r] of window.refsTransfers.entries()) {
+        if (key.startsWith(prefix)) {
+          if (key !== trid) {
+            r.resolvePolicy = policy
+            r.onDecision(policy)
+          }
+        }
+      }
+      this.queue = this.queue.filter(d => d.transferBatch !== transferBatch)
+    }
+
+    // Resolve current conflict
+    refsTransfers.get(trid)?.onDecision(policy)
+
+    // Move to the next item
+    this.setState({
+      transferToConfirm: null
+    }, this.showNext)
+  }
+
+  renderContent () {
     const {
       transferToConfirm
-    } = props
+    } = this.state
     const {
       fromPath,
       toPath,
@@ -100,10 +136,10 @@ export default function ConfirmModalStore (props) {
     )
   }
 
-  function renderFooter () {
+  renderFooter () {
     const {
       transferToConfirm
-    } = props
+    } = this.state
     if (!transferToConfirm) {
       return null
     }
@@ -117,14 +153,14 @@ export default function ConfirmModalStore (props) {
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => act(fileActions.cancel)}
+          onClick={() => this.act(fileActions.cancel)}
         >
           {e('cancel')}
         </Button>
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => act(fileActions.skip)}
+          onClick={() => this.act(fileActions.skip)}
         >
           {e('skip')}
         </Button>
@@ -132,7 +168,7 @@ export default function ConfirmModalStore (props) {
           danger
           className='mg1l'
           onClick={
-            () => act(fileActions.mergeOrOverwrite)
+            () => this.act(fileActions.mergeOrOverwrite)
           }
         >
           {isDirectory ? e('merge') : e('overwrite')}
@@ -141,7 +177,7 @@ export default function ConfirmModalStore (props) {
           type='primary'
           className='mg1l'
           onClick={
-            () => act(fileActions.rename)
+            () => this.act(fileActions.rename)
           }
         >
           {e('rename')}
@@ -157,7 +193,7 @@ export default function ConfirmModalStore (props) {
                 : e('overwriteDesc')
             }
             onClick={
-              () => act(fileActions.mergeOrOverwriteAll)
+              () => this.act(fileActions.mergeOrOverwriteAll)
             }
           >
             {isDirectory ? e('mergeAll') : e('overwriteAll')}
@@ -167,7 +203,7 @@ export default function ConfirmModalStore (props) {
             className='mg1l'
             title={e('renameDesc')}
             onClick={
-              () => act(fileActions.renameAll)
+              () => this.act(fileActions.renameAll)
             }
           >
             {e('renameAll')}
@@ -177,24 +213,26 @@ export default function ConfirmModalStore (props) {
     )
   }
 
-  const {
-    transferToConfirm
-  } = props
-  if (!transferToConfirm.id) {
-    return null
-  }
-  const modalProps = {
-    open: true,
-    width: 500,
-    title: e('fileConflict'),
-    footer: renderFooter(),
-    onCancel: () => act(fileActions.cancel)
+  render () {
+    const {
+      transferToConfirm
+    } = this.state
+    if (!transferToConfirm?.id) {
+      return null
+    }
+    const modalProps = {
+      open: true,
+      width: 500,
+      title: e('fileConflict'),
+      footer: this.renderFooter(),
+      onCancel: () => this.act(fileActions.cancel)
+    }
+    return (
+      <Modal
+        {...modalProps}
+      >
+        {this.renderContent()}
+      </Modal>
+    )
   }
-  return (
-    <Modal
-      {...modalProps}
-    >
-      {renderContent()}
-    </Modal>
-  )
 }

package/client/components/file-transfer/transfer-queue.jsx

@@ -0,0 +1,151 @@
+import { Component } from 'react'
+import { autoRun, action } from 'manate'
+import { refsStatic } from '../common/ref'
+
+export default class Queue extends Component {
+  constructor (props) {
+    super(props)
+    this.queue = []
+    this.currentRun = null
+    this.id = 'transfer-queue'
+    refsStatic.add(this.id, this)
+  }
+
+  componentWillUnmount () {
+    if (this.currentRun) {
+      this.currentRun.stop()
+    }
+  }
+
+  addToQueue = (operation, ...args) => {
+    this.queue.push({ operation, args })
+    this.processQueue()
+  }
+
+  processQueue = async () => {
+    if (this.queue.length === 0 || this.processing === true) {
+      return
+    }
+    this.processing = true
+    const { operation, args } = this.queue.shift()
+
+    await this.executeOperation(operation, ...args)
+      .catch((error) => {
+        console.error('Error processing operation:', error)
+      })
+    this.processing = false
+    this.processQueue()
+  }
+
+  executeOperation = (operation, ...args) => {
+    return new Promise((resolve, reject) => {
+      const { fileTransfers } = window.store
+      const [id, updateObj] = args
+      const end = () => {
+        this.currentRun && this.currentRun.stop()
+        resolve()
+      }
+
+      // Determine if this is a simple operation (same-side cp) vs a file transfer
+      const isTransferInit = updateObj && updateObj.inited === true
+
+      // For file transfers, set up autoRun before modifying data
+      if (isTransferInit) {
+        this.currentRun = autoRun(() => {
+          checkCompletion()
+        })
+        this.currentRun.start()
+
+        // Use setTimeout for transfer operations to give autoRun time to initialize
+        setTimeout(() => {
+          applyChanges()
+        }, 1)
+      } else {
+        // For same-side operations, just apply changes immediately
+        applyChanges()
+
+        // Still set up autoRun as a safety net, but we won't need it usually
+        this.currentRun = autoRun(() => {
+          checkCompletion()
+        })
+        this.currentRun.start()
+      }
+
+      function applyChanges () {
+        if (operation === 'update') {
+          const index = fileTransfers.findIndex(t => t.id === id)
+          if (index < 0) {
+            return end()
+          }
+          Object.assign(fileTransfers[index], updateObj)
+        } else if (operation === 'delete') {
+          const index = fileTransfers.findIndex(t => t.id === id)
+          if (index < 0) {
+            return end()
+          }
+          fileTransfers.splice(index, 1)
+        } else if (operation === 'insert') {
+          fileTransfers.push(id)
+        } else if (operation === 'moveTop') {
+          // New moveTop operation - wrapped with action
+          action(() => {
+            const index = fileTransfers.findIndex(t => t.id === id)
+            if (index < 0 || index === 0) {
+              return end() // Already at top or doesn't exist
+            }
+            const transfer = fileTransfers[index]
+            fileTransfers.splice(index, 1) // Remove from current position
+            fileTransfers.unshift(transfer) // Add to the beginning
+          })()
+        }
+
+        // For non-transfer operations, check immediately
+        // if (!isTransferInit) {
+        //   checkCompletion()
+        // }
+      }
+
+      function checkCompletion () {
+        if (operation === 'update') {
+          const index = window.store.fileTransfers.findIndex(t => t.id === id)
+          const updatedTransfer = index >= 0 ? window.store.fileTransfers[index] : null
+
+          if (updatedTransfer && updateObj) {
+            const allUpdated = Object.keys(updateObj).every(key => {
+              const updatedValue = updatedTransfer[key]
+              const expectedValue = updateObj[key]
+
+              if (expectedValue && typeof expectedValue === 'object') {
+                return updatedValue !== undefined
+              }
+              return updatedValue === expectedValue
+            })
+
+            if (allUpdated) {
+              end()
+            }
+          }
+        } else if (operation === 'delete') {
+          const stillExists = window.store.fileTransfers.some(t => t.id === id)
+          if (!stillExists) {
+            end()
+          }
+        } else if (operation === 'insert') {
+          const exists = window.store.fileTransfers.some(t => t.id === id)
+          if (exists) {
+            end()
+          }
+        } else if (operation === 'moveTop') {
+          const index = window.store.fileTransfers.findIndex(t => t.id === id)
+          if (index === 0) {
+            end()
+          }
+        }
+      }
+    })
+  }
+
+  render () {
+    return null // This component doesn't render anything
+  }
+}