@electerm/electerm-react 3.7.18 → 3.8.8

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

@@ -155,7 +155,7 @@ export default class TransportAction extends Component {
     const finishTime = Date.now()
     if (!config.disableTransferHistory) {
       const fromFile = transfer.fromFile || this.fromFile
-      const size = update.size || fromFile.size
+      const size = update.size ?? update.transferred ?? fromFile.size
       const r = copy(transfer)
       assign(r, {
         finishTime,
@@ -182,20 +182,27 @@ export default class TransportAction extends Component {
       return
     }
     const { transfer } = this.props
+    const fromFile = transfer.fromFile || this.fromFile || {}
+    const transferredValue = typeof transferred === 'object' && transferred !== null
+      ? transferred.transferred
+      : transferred
+    const total = typeof transferred === 'object' && transferred !== null
+      ? (transferred.total || fromFile.size || 0)
+      : (fromFile.size || 0)
     const up = {}
-    const total = transfer.fromFile.size
     let percent = total === 0
       ? 100
-      : Math.floor(100 * transferred / total)
+      : Math.floor(100 * transferredValue / total)
     percent = percent >= 100 ? 100 : percent
+    this.total = total
     up.percent = percent
     up.status = 'active'
-    up.transferred = transferred
+    up.transferred = transferredValue
     up.startTime = this.startTime
-    up.speed = format(transferred, up.startTime)
+    up.speed = format(transferredValue, up.startTime)
     assign(
       up,
-      computeLeftTime(transferred, total, up.startTime)
+      computeLeftTime(transferredValue, total, up.startTime)
     )
     up.passedTime = computePassedTime(up.startTime)
     this.update(up)
@@ -290,6 +297,7 @@ export default class TransportAction extends Component {
     this.transport = await sftp[transferType]({
       remotePath,
       localPath,
+      isDirectory: !!fromFile.isDirectory,
       options: { mode },
       onData: this.onData,
       onError: this.onError,
@@ -528,6 +536,9 @@ export default class TransportAction extends Component {
     }
     if (zip) {
       return this.zipTransferFolder()
+    }
+    if (!this.isFtp) {
+      return this.transferFile()
     } else {
       await this.transferFolderRecursive()
     }

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

@@ -63,6 +63,7 @@ export default auto(function SettingModalWrap (props) {
       ...props0,
       bookmarkSelectMode,
       bookmarkGroups,
+      bookmarkGroupTree: store.bookmarkGroupTree,
       bookmarksMap: store.bookmarksMap,
       bookmarks,
       ...pick(store, [

package/client/components/sftp/file-info-modal.jsx

@@ -46,6 +46,11 @@ export default class FileMode extends React.PureComponent {
   }
 
   showFileInfoModal (data) {
+    if (data.pid !== this.remoteExecPid) {
+      this.remoteExecPid = data.pid
+      this.remoteExecPlatform = null
+      this.remoteExecPlatformPromise = null
+    }
     this.setStateProxy({
       ...data,
       size: 0,
@@ -115,6 +120,47 @@ export default class FileMode extends React.PureComponent {
     }
   }
 
+  escapePowerShellPath = (value) => {
+    return String(value).replace(/'/g, "''")
+  }
+
+  normalizeRemoteWindowsPath = (value) => {
+    return String(value).replace(/^\/([a-zA-Z]:)/, '$1')
+  }
+
+  getRemoteExecPlatform = async () => {
+    if (this.remoteExecPid === this.state.pid && this.remoteExecPlatform) {
+      return this.remoteExecPlatform
+    }
+    if (this.remoteExecPid !== this.state.pid) {
+      this.remoteExecPid = this.state.pid
+      this.remoteExecPlatform = null
+      this.remoteExecPlatformPromise = null
+    }
+    if (!this.remoteExecPlatformPromise) {
+      this.remoteExecPlatformPromise = runCmd(this.state.pid, 'cmd.exe /d /s /c ver')
+        .then(output => {
+          return String(output).toLowerCase().includes('windows')
+            ? 'windows'
+            : 'posix'
+        })
+        .catch(() => 'posix')
+        .then(platform => {
+          this.remoteExecPlatform = platform
+          return platform
+        })
+    }
+    return this.remoteExecPlatformPromise
+  }
+
+  calcRemoteWin = async (folder) => {
+    const winFolder = this.normalizeRemoteWindowsPath(folder)
+    const escapedFolder = this.escapePowerShellPath(winFolder)
+    const cmd = `powershell.exe -NoLogo -NonInteractive -NoProfile -Command "$result = Get-ChildItem -LiteralPath '${escapedFolder}' -Recurse -File | Measure-Object -Property Length -Sum; if ($null -eq $result.Sum) { 0 } else { [int64]$result.Sum }"`
+    const result = await runCmd(this.state.pid, cmd).catch(window.store.onError)
+    return filesize(parseInt(String(result || '').trim(), 10) || 0)
+  }
+
   calcLocal = async (folder) => {
     const cmd = isWin
       ? `Get-ChildItem -Recurse '${folder}' | Measure-Object -Property Length -Sum`
@@ -125,6 +171,10 @@ export default class FileMode extends React.PureComponent {
   }
 
   calcRemote = async (folder) => {
+    const platform = await this.getRemoteExecPlatform()
+    if (platform === 'windows') {
+      return this.calcRemoteWin(folder)
+    }
     const cmd = `du -sh '${folder}'`
     const r = await runCmd(
       this.state.pid,

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

@@ -1037,13 +1037,13 @@ export default class FileSection extends React.Component {
         icon: iconType,
         text: transferText
       })
-      if (isDirectory && !this.props.isFtp) {
-        res.push({
-          func: 'zipAndTransfer',
-          icon: 'FileZipOutlined',
-          text: e('compressAndTransfer')
-        })
-      }
+      // if (isDirectory && !this.props.isFtp) {
+      //   res.push({
+      //     func: 'zipAndTransfer',
+      //     icon: 'FileZipOutlined',
+      //     text: e('compressAndTransfer')
+      //   })
+      // }
     }
     if (!isDirectory && isRealFile && isLocal) {
       res.push({

package/client/components/tree-list/tree-expander.jsx

@@ -5,41 +5,30 @@ import {
   CaretRightOutlined
 } from '@ant-design/icons'
 
-function hasChildren (group) {
-  return Boolean(
-    group?.bookmarkIds?.length ||
-    group?.bookmarkGroupIds?.length
-  )
-}
-
-function isOpen (props) {
-  return Boolean(props.keyword) || props.expandedKeys.includes(props.group.id)
-}
-
 function areEqual (prevProps, nextProps) {
   return prevProps.group?.id === nextProps.group?.id &&
-    hasChildren(prevProps.group) === hasChildren(nextProps.group) &&
-    Boolean(prevProps.keyword) === Boolean(nextProps.keyword) &&
-    isOpen(prevProps) === isOpen(nextProps)
+    prevProps.hasChildren === nextProps.hasChildren &&
+    prevProps.shouldOpen === nextProps.shouldOpen
 }
 
 function TreeExpander (props) {
+  const { group } = props
+
   function onExpand (e) {
     e.stopPropagation()
     props.onExpand(group)
   }
+
   function onUnExpand (e) {
     e.stopPropagation()
     props.onUnExpand(group)
   }
-  const { group } = props
-  if (
-    !group?.bookmarkIds?.length &&
-    !group?.bookmarkGroupIds?.length
-  ) {
+
+  if (!props.hasChildren) {
     return null
   }
-  const shouldOpen = props.keyword || props.expandedKeys.includes(group.id)
+
+  const shouldOpen = props.shouldOpen
   const Icon = shouldOpen
     ? CaretDownOutlined
     : CaretRightOutlined

package/client/components/tree-list/tree-item-op.jsx

@@ -0,0 +1,156 @@
+import {
+  CloseOutlined,
+  CopyOutlined,
+  EditOutlined,
+  FolderAddOutlined,
+  FolderOpenOutlined,
+  RightSquareOutlined
+} from '@ant-design/icons'
+import {
+  Popconfirm,
+  Tooltip
+} from 'antd'
+import { useState } from 'react'
+import {
+  defaultBookmarkGroupId
+} from '../../common/constants'
+
+const e = window.translate
+
+export default function TreeItemOp (props) {
+  const [pendingDeleteItem, setPendingDeleteItem] = useState(null)
+  const {
+    item,
+    isGroup,
+    staticList,
+    del,
+    openAll,
+    openMoveModal,
+    editItem,
+    addSubCat,
+    duplicateItem
+  } = props
+
+  if (!item) {
+    return null
+  }
+
+  const isDefaultGroup = item.id === defaultBookmarkGroupId
+  const canShowSharedOps = !staticList && !isDefaultGroup
+
+  const handleDel = (event) => {
+    del(pendingDeleteItem || item, event)
+    setPendingDeleteItem(null)
+  }
+
+  const handleDeleteOpenChange = (open) => {
+    setPendingDeleteItem(open ? item : null)
+  }
+
+  const handleOpenMoveModal = (event) => {
+    openMoveModal(event, item, isGroup)
+  }
+
+  const handleEditItem = (event) => {
+    editItem(event, item, isGroup)
+  }
+
+  const handleAddSubCat = (event) => {
+    addSubCat(event, item)
+  }
+
+  const handleDuplicateItem = (event) => {
+    duplicateItem(event, item)
+  }
+
+  const handleOpenAll = () => {
+    openAll(item)
+  }
+
+  const buttons = []
+
+  if (isGroup && !staticList) {
+    buttons.push(
+      <FolderAddOutlined
+        key='new-tree'
+        title={`${e('new')} ${e('bookmarkCategory')}`}
+        onClick={handleAddSubCat}
+        className='pointer tree-control-btn'
+      />
+    )
+  }
+
+  if (isGroup && staticList) {
+    buttons.push(
+      <Tooltip title={e('openAll')} key='open-all-tooltip'>
+        <FolderOpenOutlined
+          key='open-all-tree'
+          onClick={handleOpenAll}
+          className='pointer open-all-icon tree-control-btn'
+        />
+      </Tooltip>
+    )
+  }
+
+  if (!isGroup && !staticList && item.id) {
+    buttons.push(
+      <CopyOutlined
+        key='duplicate-tree'
+        title={e('duplicate')}
+        className='pointer tree-control-btn'
+        onClick={handleDuplicateItem}
+      />
+    )
+  }
+
+  if (canShowSharedOps) {
+    buttons.push(
+      <RightSquareOutlined
+        key='move-tree'
+        className='pointer tree-control-btn'
+        onClick={handleOpenMoveModal}
+      />
+    )
+  }
+
+  if (!isDefaultGroup && !staticList) {
+    buttons.push(
+      <Popconfirm
+        key='delete-tree'
+        title={e('del') + '?'}
+        onConfirm={handleDel}
+        onCancel={() => setPendingDeleteItem(null)}
+        onOpenChange={handleDeleteOpenChange}
+        okText={e('del')}
+        cancelText={e('cancel')}
+        placement='top'
+      >
+        <CloseOutlined title={e('del')} className='pointer tree-control-btn' />
+      </Popconfirm>
+    )
+  }
+
+  const shouldShowEdit = !((staticList && isGroup) || (!staticList && !isGroup))
+  if (shouldShowEdit) {
+    buttons.push(
+      <EditOutlined
+        title={e('edit')}
+        key='edit-tree'
+        onClick={handleEditItem}
+        className='pointer edit-icon tree-control-btn'
+      />
+    )
+  }
+
+  if (!buttons.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={`tree-item-op-wrap${pendingDeleteItem ? ' is-active' : ''}`}
+    >
+      {buttons}
+    </div>
+  )
+}

package/client/components/tree-list/tree-list-editor-overlay.jsx

@@ -0,0 +1,47 @@
+import {
+  CheckOutlined,
+  CloseOutlined
+} from '@ant-design/icons'
+import InputAutoFocus from '../common/input-auto-focus'
+import { CategoryColorPicker } from './category-color-picker.jsx'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { treeEditorRowHeight } from './tree-list-layout'
+
+export default function TreeListEditorOverlay ({ editor }) {
+  if (!editor) {
+    return null
+  }
+
+  const confirm = (
+    <span>
+      <CheckOutlined className='pointer' onClick={editor.handleSubmit} />
+      <CloseOutlined className='mg1l pointer' onClick={editor.handleCancel} />
+    </span>
+  )
+  const colorPicker = (
+    <CategoryColorPicker
+      value={editor.color || getRandomDefaultColor()}
+      onChange={editor.handleColorChange}
+    />
+  )
+
+  return (
+    <div
+      className='tree-list-editor-overlay'
+      style={{
+        top: editor.top,
+        left: editor.left,
+        height: treeEditorRowHeight
+      }}
+    >
+      <InputAutoFocus
+        value={editor.title}
+        onChange={editor.handleTitleChange}
+        onPressEnter={editor.handleSubmit}
+        prefix={colorPicker}
+        suffix={confirm}
+        selectall={editor.selectall}
+      />
+    </div>
+  )
+}

package/client/components/tree-list/tree-list-item.jsx

@@ -2,30 +2,12 @@
  * tree list for bookmarks
  */
 
-import { memo, useState } from 'react'
-
-import {
-  CloseOutlined,
-  CopyOutlined,
-  EditOutlined,
-  FolderAddOutlined,
-  FolderOpenOutlined,
-  RightSquareOutlined
-} from '@ant-design/icons'
-import {
-  Popconfirm,
-  Tooltip
-} from 'antd'
+import { memo } from 'react'
 import createName, { createTitleTag } from '../../common/create-title'
 import classnames from 'classnames'
-import {
-  defaultBookmarkGroupId
-} from '../../common/constants'
 import highlight from '../common/highlight'
 import uid from '../../common/uid'
 
-const e = window.translate
-
 function getItemLabel (item, isGroup) {
   return isGroup
     ? item?.title || ''
@@ -35,12 +17,15 @@ function getItemLabel (item, isGroup) {
 function areEqual (prevProps, nextProps) {
   const prevSelected = prevProps.selectedItemId === prevProps.item.id
   const nextSelected = nextProps.selectedItemId === nextProps.item.id
+  const prevSearchSelected = Boolean(prevProps.searchSelected)
+  const nextSearchSelected = Boolean(nextProps.searchSelected)
 
   return prevProps.isGroup === nextProps.isGroup &&
     prevProps.parentId === nextProps.parentId &&
     prevProps.staticList === nextProps.staticList &&
     prevProps.keyword === nextProps.keyword &&
     prevSelected === nextSelected &&
+    prevSearchSelected === nextSearchSelected &&
     prevProps.item.id === nextProps.item.id &&
     prevProps.item.level === nextProps.item.level &&
     prevProps.item.color === nextProps.item.color &&
@@ -49,145 +34,10 @@ function areEqual (prevProps, nextProps) {
 }
 
 function TreeListItem (props) {
-  const [hovered, setHovered] = useState(false)
-
-  const handleDel = (e) => {
-    props.del(props.item, e)
-  }
-
-  const renderDelBtn = (item) => {
-    if (props.item.id === defaultBookmarkGroupId || props.staticList) {
-      return null
-    }
-    return (
-      <Popconfirm
-        title={e('del') + '?'}
-        onConfirm={handleDel}
-        okText={e('del')}
-        cancelText={e('cancel')}
-        placement='top'
-      >
-        <CloseOutlined title={e('del')} className='pointer tree-control-btn' />
-      </Popconfirm>
-    )
-  }
-
-  const renderOperationBtn = (item, isGroup) => {
-    if (props.staticList || props.item.id === defaultBookmarkGroupId) {
-      return null
-    }
-    return (
-      <RightSquareOutlined
-        className='pointer tree-control-btn'
-        onClick={openMoveModal}
-      />
-    )
-  }
-
-  const handleOpenAll = () => {
-    props.openAll(props.item)
-  }
-
-  const openMoveModal = (e) => {
-    props.openMoveModal(e, props.item, props.isGroup)
-  }
-
-  const handleEditItem = (e) => {
-    props.editItem(e, props.item, props.isGroup)
-  }
-
-  const handleAddSubCat = (e) => {
-    props.addSubCat(e, props.item)
-  }
-
-  const renderAddNewSubGroupBtn = () => {
-    if (props.staticList) {
-      return null
-    }
-    return (
-      <FolderAddOutlined
-        key='new-tree'
-        title={`${e('new')} ${e('bookmarkCategory')}`}
-        onClick={handleAddSubCat}
-        className='pointer tree-control-btn'
-      />
-    )
-  }
-
-  const renderEditBtn = () => {
-    const {
-      isGroup, staticList
-    } = props
-    if (
-      (staticList && isGroup) ||
-      (!staticList && !isGroup)
-    ) {
-      return null
-    }
-    return (
-      <EditOutlined
-        title={e('edit')}
-        key='edit-tree'
-        onClick={handleEditItem}
-        className='pointer edit-icon tree-control-btn'
-      />
-    )
-  }
-
   const onSelect = (e) => {
     props.onSelect(e)
   }
 
-  const renderOpenAll = () => {
-    const {
-      staticList,
-      isGroup
-    } = props
-    if (
-      (staticList && !isGroup) ||
-      !staticList
-    ) {
-      return null
-    }
-    return (
-      <Tooltip title={e('openAll')}>
-        <FolderOpenOutlined
-          key='open-all-tree'
-          onClick={handleOpenAll}
-          className='pointer open-all-icon tree-control-btn'
-        />
-      </Tooltip>
-    )
-  }
-
-  const handleDuplicateItem = (e) => {
-    props.duplicateItem(e, props.item)
-  }
-
-  const renderDuplicateBtn = () => {
-    const {
-      item,
-      staticList
-    } = props
-    if (!item.id || staticList) {
-      return null
-    }
-    return (
-      <CopyOutlined
-        title={e('duplicate')}
-        className='pointer tree-control-btn'
-        onClick={handleDuplicateItem}
-      />
-    )
-  }
-
-  const renderGroupBtns = () => {
-    return [
-      renderAddNewSubGroupBtn(),
-      renderOpenAll()
-    ]
-  }
-
   const onDragOver = e => {
     props.onDragOver(e)
   }
@@ -215,7 +65,8 @@ function TreeListItem (props) {
   } = props
   const cls = classnames(
     {
-      selected: selectedItemId === item.id
+      selected: selectedItemId === item.id,
+      'search-selected': props.searchSelected
     },
     'tree-item',
     {
@@ -251,8 +102,6 @@ function TreeListItem (props) {
     'data-item-id': item.id,
     'data-parent-id': props.parentId,
     'data-is-group': isGroup ? 'true' : 'false',
-    onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false),
     onDragOver,
     onDragStart,
     onDragEnter,
@@ -277,19 +126,6 @@ function TreeListItem (props) {
       >
         {colorTag}{tag}{titleHighlight}
       </div>
-      {
-        hovered && isGroup
-          ? renderGroupBtns()
-          : null
-      }
-      {
-        hovered && !isGroup
-          ? renderDuplicateBtn()
-          : null
-      }
-      {hovered ? renderOperationBtn() : null}
-      {hovered ? renderDelBtn() : null}
-      {hovered ? renderEditBtn() : null}
     </div>
   )
 }

package/client/components/tree-list/tree-list-layout.js

@@ -0,0 +1,3 @@
+export const treeLevelIndent = 12
+export const treeRowHeight = 26
+export const treeEditorRowHeight = 32