@electerm/electerm-react 3.7.16 → 3.8.6

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/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

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

@@ -0,0 +1,111 @@
+import TreeExpander from './tree-expander'
+import TreeListItem from './tree-list-item'
+import TreeItemOp from './tree-item-op'
+import { treeLevelIndent } from './tree-list-layout'
+
+export default function TreeListRow (props) {
+  const {
+    row,
+    keyword,
+    expandedKeys,
+    activeItemId,
+    searchSelectedRowKey,
+    staticList,
+    leftSidebarWidth,
+    handleExpand,
+    handleUnExpand,
+    del,
+    openAll,
+    openMoveModal,
+    editItem,
+    addSubCat,
+    onSelect,
+    duplicateItem,
+    onDragStart,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    isHidden
+  } = props
+  const { item, isGroup, parentId, depth } = row
+  const groupHasChildren = Boolean(
+    item?.bookmarkIds?.length ||
+    item?.bookmarkGroupIds?.length
+  )
+  const isGroupExpanded = Boolean(keyword) || expandedKeys.includes(item.id)
+  const itemProps = {
+    item,
+    isGroup,
+    parentId,
+    leftSidebarWidth,
+    staticList,
+    selectedItemId: activeItemId,
+    searchSelected: searchSelectedRowKey === row.key,
+    del,
+    openAll,
+    openMoveModal,
+    editItem,
+    addSubCat,
+    onSelect,
+    duplicateItem,
+    onDragStart,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    keyword
+  }
+
+  if (!isGroup) {
+    return (
+      <div
+        className={`tree-list-row${isHidden ? ' is-hidden' : ''}`}
+        style={{ paddingLeft: depth * treeLevelIndent }}
+      >
+        <TreeListItem {...itemProps} />
+        <TreeItemOp
+          item={item}
+          isGroup={isGroup}
+          staticList={staticList}
+          del={del}
+          openAll={openAll}
+          openMoveModal={openMoveModal}
+          editItem={editItem}
+          addSubCat={addSubCat}
+          duplicateItem={duplicateItem}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`tree-list-row${isHidden ? ' is-hidden' : ''}`}
+      style={{ paddingLeft: Math.max(0, (depth - 1) * treeLevelIndent) }}
+    >
+      <div className='tree-list-row-group'>
+        <TreeExpander
+          level={parentId}
+          group={item}
+          hasChildren={groupHasChildren}
+          shouldOpen={isGroupExpanded}
+          onExpand={handleExpand}
+          onUnExpand={handleUnExpand}
+        />
+        <TreeListItem {...itemProps} />
+        <TreeItemOp
+          item={item}
+          isGroup={isGroup}
+          staticList={staticList}
+          del={del}
+          openAll={openAll}
+          openMoveModal={openMoveModal}
+          editItem={editItem}
+          addSubCat={addSubCat}
+          duplicateItem={duplicateItem}
+        />
+      </div>
+    </div>
+  )
+}