@electerm/electerm-react 1.60.18 → 1.60.32

package/client/components/session/session.jsx

@@ -1,8 +1,8 @@
 /**
  * terminal/sftp wrapper
  */
-import { Component } from 'react'
-import Term from '../terminal'
+import { Component, createRef } from 'react'
+import Term from '../terminal/terminal.jsx'
 import Sftp from '../sftp/sftp-entry'
 import RdpSession from '../rdp/rdp-session'
 import VncSession from '../vnc/vnc-session'
@@ -23,14 +23,13 @@ import copy from 'json-deep-copy'
 import classnames from 'classnames'
 import {
   paneMap,
-  terminalActions,
   connectionMap,
   terminalRdpType,
   terminalVncType,
   terminalWebType
 } from '../../common/constants'
+import { refs } from '../common/ref'
 import safeName from '../../common/safe-name'
-import postMessage from '../../common/post-msg'
 import './session.styl'
 
 const e = window.translate
@@ -38,6 +37,8 @@ const e = window.translate
 export default class SessionWrapper extends Component {
   constructor (props) {
     super(props)
+    // Add ref
+    this.domRef = createRef()
     this.state = {
       enableSftp: false,
       cwd: '',
@@ -59,7 +60,7 @@ export default class SessionWrapper extends Component {
   }
 
   getDom = () => {
-    return document.getElementById(`is-${this.props.tab.id}`)
+    return this.domRef.current
   }
 
   handleClick = () => {
@@ -358,10 +359,7 @@ export default class SessionWrapper extends Component {
   }
 
   handleOpenSearch = () => {
-    postMessage({
-      action: terminalActions.openTerminalSearch,
-      activeTabId: this.props.tab.id
-    })
+    refs.get('term-' + this.props.tab.id)?.toggleSearch()
   }
 
   renderSearchIcon = () => {
@@ -507,7 +505,7 @@ export default class SessionWrapper extends Component {
   }
 
   render () {
-    const { pane, id } = this.props.tab
+    const { pane } = this.props.tab
     const cls = classnames(
       'term-sftp-box',
       pane,
@@ -520,7 +518,6 @@ export default class SessionWrapper extends Component {
     )
     const divProps = {
       className: cls,
-      id: `is-${id}`,
       onDragEnter: this.onDragEnter,
       onDragLeave: this.onDragLeave,
       onDrop: this.onDrop,
@@ -529,6 +526,7 @@ export default class SessionWrapper extends Component {
     }
     return (
       <div
+        ref={this.domRef}
         {...divProps}
       >
         {this.renderControl()}

package/client/components/setting-panel/on-tree-drop.js

@@ -7,8 +7,9 @@ import {
 } from '../../common/constants'
 import { isEqual, find, last, remove } from 'lodash-es'
 import copy from 'json-deep-copy'
+import { action } from 'manate'
 
-export default (info, props) => {
+export default action((info, props) => {
   const {
     dropToGap,
     dragNode,
@@ -23,10 +24,7 @@ export default (info, props) => {
   const toPosesLevel = toPoses.slice(0, toPoses.length - 1)
   const isSameLevel = fromPosesLevel.length === toPosesLevel.length
   const isSameCat = isEqual(fromPosesLevel, toPosesLevel) && dropToGap
-  const bookmarks = copy(props.bookmarks)
-  const bookmarkGroups = copy(
-    props.bookmarkGroups
-  )
+  const { bookmarks, bookmarkGroups } = window.store
   let from = find(
     bookmarks,
     d => d.id === fromId
@@ -163,7 +161,6 @@ export default (info, props) => {
   if (!fromLeaf) {
     from.level = toFirstLevel ? 1 : 2
   }
-  const updates = []
   if (toFirstLevel) {
     fromIndex = bookmarkGroups.findIndex(d => d.id === fromId)
     from = copy(from)
@@ -191,32 +188,4 @@ export default (info, props) => {
       remove(arr, d => d === 'tobedel')
     }
   }
-  if (fromGroup) {
-    const { id, ...rest } = fromGroup
-    updates.push({
-      id,
-      db: 'bookmarkGroups',
-      update: rest,
-      upsert: false
-    })
-  }
-  if (toGroup) {
-    const { id, ...rest } = toGroup
-    updates.push({
-      id,
-      db: 'bookmarkGroups',
-      update: rest,
-      upsert: false
-    })
-  } else if (from) {
-    const { id, ...rest } = from
-    updates.push({
-      id,
-      db: 'bookmarkGroups',
-      update: rest,
-      upsert: false
-    })
-  }
-  props.store.setBookmarkGroups(bookmarkGroups)
-  props.store.batchDbUpdate(updates)
-}
+})

package/client/components/setting-panel/setting-common.jsx

@@ -183,6 +183,9 @@ export default class SettingCommon extends Component {
     if (name === 'useSystemTitleBar') {
       message.info(e('useSystemTitleBarTip'), 5)
     }
+    if (name === 'disableConnectionHistory' && value) {
+      window.store.history = []
+    }
     this.saveConfig({
       [name]: value
     })
@@ -658,7 +661,7 @@ export default class SettingCommon extends Component {
             'showHiddenFilesOnSftpStart',
             'screenReaderMode',
             'initDefaultTabOnStart',
-            'disableSshHistory',
+            'disableConnectionHistory',
             'disableTransferHistory',
             'checkUpdateOnStart',
             'useSystemTitleBar',

package/client/components/setting-panel/setting-modal.jsx

@@ -15,6 +15,7 @@ import TabQuickCommands from './tab-quick-commands'
 import TabSettings from './tab-settings'
 import TabThemes from './tab-themes'
 import TabProfiles from './tab-profiles'
+import deepCopy from 'json-deep-copy'
 
 const e = window.translate
 
@@ -38,6 +39,8 @@ export default auto(function SettingModalWrap (props) {
       shouldConfirmDel: tabsShouldConfirmDel.includes(settingTab),
       list: settingSidebarList
     }
+    const bookmarks = deepCopy(store.bookmarks)
+    const bookmarkGroups = deepCopy(store.bookmarkGroups)
     const formProps = {
       store,
       formData: settingItem,
@@ -47,19 +50,18 @@ export default auto(function SettingModalWrap (props) {
         'currentBookmarkGroupId',
         'config'
       ]),
-      bookmarkGroups: store.bookmarkGroups,
-      bookmarks: store.bookmarks,
+      bookmarkGroups,
+      bookmarks,
       serials: store.serials,
       loaddingSerials: store.loaddingSerials
     }
     const treeProps = {
       ...props0,
       bookmarkSelectMode,
-      bookmarkGroups: store.bookmarkGroups,
-      bookmarks: store.bookmarks,
+      bookmarkGroups,
+      bookmarks,
       ...pick(store, [
         'currentBookmarkGroupId',
-        'autofocustrigger',
         'config',
         'checkedKeys',
         'expandedKeys',

package/client/components/setting-panel/tab-settings.jsx

@@ -30,7 +30,6 @@ export default auto(function TabSettings (props) {
   if (sid === settingSyncId) {
     const syncProps = pick(store, [
       'config',
-      'autofocustrigger',
       'isSyncingSetting',
       'isSyncDownload',
       'isSyncUpload',

package/client/components/setting-sync/setting-sync.jsx

@@ -26,7 +26,6 @@ export default function SyncSettingEntry (props) {
     const syncProps = {
       ...syncSetting,
       ...pick(props, [
-        'autofocustrigger',
         'isSyncingSetting',
         'isSyncDownload',
         'isSyncUpload',

package/client/components/sftp/address-bookmark-item.jsx

@@ -39,24 +39,10 @@ export default class AddrBookmarkItem extends Component {
     const { store } = window
     const [host, idDragged] = e.dataTransfer.getData('idDragged').split('#')
     const idDrop = e.target.getAttribute('data-id').split('#')[1]
-    const addressBookmarks = host
-      ? store.addressBookmarks
-      : store.addressBookmarksLocal
     const dataName = host
       ? 'addressBookmarks'
       : 'addressBookmarksLocal'
-    const idDraggedIndex = addressBookmarks.findIndex(
-      ({ id }) => id === idDragged
-    )
-    const targetIndex = addressBookmarks.findIndex(
-      ({ id }) => id === idDrop
-    )
-    if (idDraggedIndex < targetIndex) {
-      addressBookmarks.splice(targetIndex, 0, addressBookmarks.splice(idDraggedIndex, 1)[0])
-    } else {
-      addressBookmarks.splice(targetIndex + 1, 0, addressBookmarks.splice(idDraggedIndex, 1)[0])
-    }
-    store.setItems(dataName, addressBookmarks)
+    store.adjustOrder(dataName, idDragged, idDrop)
   }
 
   render () {

package/client/components/sftp/confirm-modal-store.jsx

@@ -12,7 +12,7 @@ import {
   fileActions
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
-import postMessage from '../../common/post-msg'
+import { refsStatic } from '../common/ref'
 
 const e = window.translate
 
@@ -34,7 +34,7 @@ export default function ConfirmModalStore (props) {
       id,
       transferGroupId
     } = transferToConfirm
-    postMessage({
+    refsStatic.get('transfer-conflict')?.onDecision({
       transferGroupId,
       fileId,
       id,

package/client/components/sftp/{file-mode-modal.jsx → file-info-modal.jsx}

@@ -8,47 +8,58 @@ import resolve from '../../common/resolve'
 import time from '../../common/time'
 import { update } from 'lodash-es'
 import { mode2permission, permission2mode } from '../../common/mode2permission'
-import { commonActions } from '../../common/constants'
 import renderPermission from './permission-render'
-import postMessage from '../../common/post-msg'
 import FileIcon from './file-icon'
+import fs from '../../common/fs'
+import { filesize } from 'filesize'
+import { runCmd } from '../terminal/terminal-apis'
+import {
+  isWin,
+  typeMap
+} from '../../common/constants'
+import { refsStatic, refs } from '../common/ref'
 
 const e = window.translate
 const formatTime = time
 
 export default class FileMode extends React.PureComponent {
   state = {
-    data: {},
-    file: {}
+    fileId: '',
+    loading: false,
+    tab: null,
+    pid: '',
+    sessionId: '',
+    size: 0,
+    file: {},
+    editPermission: false
   }
 
   componentDidMount () {
-    window.addEventListener('message', this.onEvent)
+    refsStatic.add('file-modal', this)
   }
 
   setStateProxy = (state, cb) => {
     if (state && typeof state.file !== 'undefined') {
-      postMessage({
-        action: commonActions.updateStore,
-        value: !!state.file.id,
-        prop: 'showFileModal'
-      })
+      window.store.showFileModal = !!state.file.id
     }
     return this.setState(state, cb)
   }
 
-  onEvent = (e) => {
-    const {
-      action,
-      data,
-      file
-    } = e.data || {}
-    if (action === commonActions.showFileModeModal) {
-      this.setStateProxy({
-        data,
-        file
-      })
-    }
+  showFileInfoModal (data) {
+    this.setStateProxy({
+      ...data,
+      size: 0,
+      editPermission: false
+    })
+  }
+
+  showFileModeModal = (data, file, fileId) => {
+    this.setStateProxy({
+      ...data,
+      file: this.addPermission(file),
+      fileId,
+      editPermission: true
+    })
   }
 
   addPermission = file => {
@@ -63,6 +74,9 @@ export default class FileMode extends React.PureComponent {
   }
 
   onChangePermission = (name, permName) => {
+    if (!this.state.editPermission) {
+      return
+    }
     const { file } = this.state
     const perms = mode2permission(file.mode)
     const i = perms.findIndex(p => p.name === name)
@@ -83,24 +97,65 @@ export default class FileMode extends React.PureComponent {
   }
 
   onClose = () => {
-    postMessage({
-      action: commonActions.submitFileModeClose
-    })
     this.setStateProxy({
       file: {},
-      data: {}
+      visible: false
     })
   }
 
-  handleSubmit = () => {
-    postMessage({
-      action: commonActions.submitFileModeEdit,
-      file: this.state.file
+  getSize = (str = '') => {
+    if (isWin) {
+      const s = (str.stdout || '').split('\n').find(s => s.trim().startsWith('Sum'))
+      return s ? filesize(parseInt((s.split(':')[1]).trim(), 10)) : 0
+    } else {
+      return str.split(/\s+/)[0]
+    }
+  }
+
+  calcLocal = async (folder) => {
+    const cmd = isWin
+      ? `Get-ChildItem -Recurse '${folder}' | Measure-Object -Property Length -Sum`
+      : `du -sh '${folder}'`
+    const func = isWin ? 'runWinCmd' : 'run'
+    const res = await fs[func](cmd).catch(window.store.onError)
+    return this.getSize(res)
+  }
+
+  calcRemote = async (folder) => {
+    const cmd = `du -sh '${folder}'`
+    const r = await runCmd(
+      this.state.pid,
+      this.state.sessionId,
+      cmd
+    ).catch(window.store.onError)
+    return r ? r.split(/\s+/)[0] : 0
+  }
+
+  handleCalc = async () => {
+    const { file } = this.state
+    const { type, path, name } = file
+    this.setStateProxy({
+      loading: true
     })
+    const fp = resolve(path, name)
+    const size = type === typeMap.local
+      ? await this.calcLocal(fp)
+      : await this.calcRemote(fp)
+    this.setState({
+      loading: false,
+      size
+    })
+  }
+
+  handleSubmit = () => {
+    refs.get(this.state.fileId)?.changeFileMode(this.state.file)
     this.onClose()
   }
 
   renderFooter () {
+    if (!this.state.editPermission) {
+      return null
+    }
     return (
       <Button
         type='primary'
@@ -111,20 +166,63 @@ export default class FileMode extends React.PureComponent {
     )
   }
 
+  getFileSize = () => {
+    const { isDirectory, size } = this.state.file
+    if (isDirectory) {
+      return this.state.size || 0
+    }
+    return size
+  }
+
+  renderSizeRow = () => {
+    const size = this.getFileSize()
+    if (this.state.editPermission) {
+      return (
+        <>
+          <p className='bold'>{e('size')}:</p>
+          <p className='pd1b'>{size}</p>
+        </>
+      )
+    }
+    return (
+      <>
+        <p className='bold'>{e('size')}:</p>
+        <p className='pd1b'>{this.getFileSize()}{this.renderCalc()}</p>
+      </>
+    )
+  }
+
+  renderCalc () {
+    const { isDirectory } = this.state.file
+    if (isDirectory) {
+      const { loading } = this.state
+      return (
+        <Button
+          onClick={this.handleCalc}
+          loading={loading}
+          disabled={loading}
+          className='mg1l'
+        >
+          {e('calculate')}
+        </Button>
+      )
+    }
+  }
+
   render () {
     const {
       visible,
       tab,
       uidTree,
-      gidTree
-    } = this.state.data
+      gidTree,
+      file,
+      editPermission
+    } = this.state
     if (!visible) {
       return null
     }
-    const { file } = this.state
     const {
       name,
-      size,
       accessTime,
       modifyTime,
       isDirectory,
@@ -141,10 +239,13 @@ export default class FileMode extends React.PureComponent {
       username
     } = tab
     const iconType = isDirectory ? 'folder' : 'file'
+    const title = editPermission
+      ? `${e('edit')} ` + e(iconType) + ` ${e('permission')}`
+      : e(iconType) + ` ${e('attributes')}`
     const ps = {
       open: visible,
       width: 500,
-      title: `${e('edit')} ` + e(iconType) + ` ${e('permission')}`,
+      title,
       footer: this.renderFooter(),
       onCancel: this.onClose
     }
@@ -193,8 +294,7 @@ export default class FileMode extends React.PureComponent {
             <p className='pd1b'>{uidTree['' + owner]}</p>
             <p className='bold'>{e('group')}</p>
             <p className='pd1b'>{gidTree['' + group]}</p>
-            <p className='bold'>{e('size')}:</p>
-            <p className='pd1b'>{size}</p>
+            {this.renderSizeRow()}
             <p className='bold'>{e('accessTime')}:</p>
             <p className='pd1b'>{formatTime(accessTime)}</p>
             <p className='bold'>{e('modifyTime')}:</p>