@electerm/electerm-react 1.51.3 → 1.51.8

package/client/components/sidebar/history.jsx

@@ -2,65 +2,30 @@
  * history select
  */
 
-import { memo } from 'react'
-import ItemList from '../setting-panel/list'
-import { pick } from 'lodash-es'
-import { EditOutlined, PushpinOutlined } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import { auto } from 'manate/react'
+import HistoryItem from './history-item'
 
-const e = window.translate
-
-export default memo(function HistoryPanel (props) {
+export default auto(function HistoryPanel (props) {
   const { store } = window
   const {
-    openedSideBar,
-    pinned,
-    history,
-    activeItemId
-  } = props
-  if (openedSideBar !== 'history') {
-    return null
-  }
-  const prps = {
-    className: 'font16 mg1x mg2l pointer iblock control-icon'
-  }
-  const prps1 = {
-    className: prps.className + (pinned ? ' pinned' : '')
-  }
-  function handleClickItem (item) {
-    store.onSelectHistory(item.id)
-  }
+    history
+  } = store
   return (
     <div
-      className='sidebar-panel history-panel animate-fast'
-      {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
+      className='sidebar-panel-history'
     >
-      <div className='pd1y pd2t pd2x'>
-        <div className='fix'>
-          <div className='fleft'>{e('history')}</div>
-          <div className='fleft'>
-            <Tooltip title={`${e('edit')} ${e('history')}`}>
-              <EditOutlined
-                className='font16 mg1x mg2l pointer iblock control-icon icon-do-edit'
-                onClick={store.handleEditHistory}
-              />
-            </Tooltip>
-            <Tooltip title={e('pin')}>
-              <PushpinOutlined
-                {...prps1}
-                onClick={store.handlePin}
-              />
-            </Tooltip>
-          </div>
-        </div>
-      </div>
       <div className='pd2x'>
-        <ItemList
-          type='history'
-          list={history || []}
-          onClickItem={handleClickItem}
-          activeItemId={activeItemId}
-        />
+        {
+          history.map((item, i) => {
+            return (
+              <HistoryItem
+                key={item.id}
+                index={i}
+                item={item}
+              />
+            )
+          })
+        }
       </div>
     </div>
   )

package/client/components/sidebar/index.jsx

@@ -1,6 +1,5 @@
 import {
   BookOutlined,
-  ClockCircleOutlined,
   CloudSyncOutlined,
   InfoCircleOutlined,
   PictureOutlined,
@@ -11,8 +10,7 @@ import {
 } from '@ant-design/icons'
 import { useRef, memo } from 'react'
 import { Tooltip } from 'antd'
-import BookMarksWrap from './bookmark'
-import HistoryWrap from './history'
+import SideBarPanel from './sidebar-panel'
 import TransferList from './transfer-list'
 import MenuBtn from '../context-menu/menu-btn'
 import {
@@ -43,7 +41,7 @@ export default memo(function Sidebar (props) {
     transferTab,
     showModal,
     showInfoModal,
-    activeItemId
+    sidebarPanelTab
   } = props
 
   const { store } = window
@@ -66,14 +64,6 @@ export default memo(function Sidebar (props) {
     store.setOpenedSideBar('bookmarks')
   }
 
-  const handleMouseEnterHistory = () => {
-    if (pinned) {
-      return false
-    }
-    clearTimeout(handler.current)
-    store.setOpenedSideBar('history')
-  }
-
   const handleShowUpgrade = () => {
     store.storeAssign({
       _upgradeInfo: JSON.stringify({
@@ -90,7 +80,6 @@ export default memo(function Sidebar (props) {
     openSettingSync,
     openTerminalThemes,
     onClickBookmark,
-    onClickHistory,
     toggleBatchOp,
     setLeftSidePanelWidth
   } = store
@@ -105,7 +94,6 @@ export default memo(function Sidebar (props) {
   const settingActive = showSetting && settingTab === settingMap.setting && settingItem.id === 'setting-common'
   const syncActive = showSetting && settingTab === settingMap.setting && settingItem.id === 'setting-sync'
   const themeActive = showSetting && settingTab === settingMap.terminalThemes
-  const historyActive = showSetting && settingTab === settingMap.history
   const bookmarksActive = showSetting && settingTab === settingMap.bookmarks
   const sideProps = openedSideBar
     ? {
@@ -154,17 +142,6 @@ export default memo(function Sidebar (props) {
             className='font20 iblock control-icon'
           />
         </SideIcon>
-        <SideIcon
-          title={e(settingMap.history)}
-          active={historyActive}
-        >
-          <ClockCircleOutlined
-            onMouseEnter={handleMouseEnterHistory}
-            onMouseLeave={handleMouseLeave}
-            onClick={onClickHistory}
-            className='font20 iblock control-icon'
-          />
-        </SideIcon>
         <TransferList {...transferProps} />
         <SideIcon
           title={e(settingMap.terminalThemes)}
@@ -231,19 +208,12 @@ export default memo(function Sidebar (props) {
         setLeftSidePanelWidth={setLeftSidePanelWidth}
         leftSidebarWidth={leftSidebarWidth}
       >
-        <BookMarksWrap
+        <SideBarPanel
           pinned={pinned}
+          sidebarPanelTab={sidebarPanelTab}
           onMouseEnter={handleMouseEnterBookmark}
           onMouseLeave={handleMouseLeave}
         />
-        <HistoryWrap
-          history={props.history}
-          openedSideBar={openedSideBar}
-          onMouseEnter={handleMouseEnterHistory}
-          onMouseLeave={handleMouseLeave}
-          activeItemId={activeItemId}
-          pinned={pinned}
-        />
       </SidePanel>
     </div>
   )

package/client/components/sidebar/sidebar-panel.jsx

@@ -0,0 +1,107 @@
+/**
+ * bookmark select
+ */
+
+import { memo } from 'react'
+import BookmarkWrap from './bookmark'
+import History from './history'
+import { pick } from 'lodash-es'
+import { Tabs, Tooltip } from 'antd'
+import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default memo(function SidebarPanel (props) {
+  const { sidebarPanelTab, pinned } = props
+  const { store } = window
+  const prps = {
+    className: 'font16 mg1x mg2l pointer iblock control-icon'
+  }
+  const prps1 = {
+    className: prps.className + (pinned ? ' pinned' : '')
+  }
+  const tabsProps = {
+    activeKey: sidebarPanelTab,
+    onChange: store.handleSidebarPanelTab,
+    items: [
+      {
+        key: 'bookmarks',
+        label: e('bookmarks'),
+        children: null
+      },
+      {
+        key: 'history',
+        label: e('history'),
+        children: null
+      }
+    ]
+  }
+  const pop1 = {
+    ...prps,
+    onClick: store.onNewSsh
+  }
+  const pop2 = {
+    ...prps,
+    onClick: store.expandBookmarks
+  }
+  const pop3 = {
+    ...prps,
+    onClick: store.collapseBookmarks
+  }
+
+  function renderExpandIcons () {
+    if (sidebarPanelTab !== 'bookmarks') {
+      return null
+    }
+    return [
+      <Tooltip title={e('expandAll')} key='expand'>
+        <ArrowsAltOutlined
+          {...pop2}
+        />
+      </Tooltip>,
+      <Tooltip title={e('collapseAll')} key='collapse'>
+        <ShrinkOutlined
+          {...pop3}
+        />
+      </Tooltip>
+    ]
+  }
+  return (
+    <div
+      className='sidebar-panel bookmarks-panel animate-fast'
+      {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
+    >
+      <div className='sidebar-pin-top'>
+        <div className='pd1y pd2t pd2x sidebar-panel-control'>
+          <Tooltip title={e('newBookmark')}>
+            <PlusCircleOutlined
+              {...pop1}
+            />
+          </Tooltip>
+          <Tooltip title={`${e('edit')} ${e('bookmarks')}`}>
+            <EditOutlined
+              {...pop1}
+            />
+          </Tooltip>
+          {
+            renderExpandIcons()
+          }
+          <Tooltip title={e('pin')}>
+            <PushpinOutlined
+              {...prps1}
+              onClick={store.handlePin}
+            />
+          </Tooltip>
+        </div>
+        <div className='pd1y pd2x'>
+          <Tabs {...tabsProps} />
+        </div>
+      </div>
+      {
+        sidebarPanelTab === 'bookmarks'
+          ? <BookmarkWrap {...props} />
+          : <History store={store} />
+      }
+    </div>
+  )
+})

package/client/components/sidebar/sidebar.styl

@@ -26,6 +26,20 @@
   box-shadow 0px 0px 3px 3px alpha(main, .1)
   .item-list
     padding-right 0
+.sidebar-pin-top
+  position absolute
+  left 0
+  right 0
+  top 36px
+  height 112px
+.sidebar-panel-bookmarks
+.sidebar-panel-history
+  position absolute
+  left 0
+  right 0
+  top 148px
+  bottom 0
+  overflow-y scroll
 .not-system-ui.is-mac
   .sidebar-bar
     margin-top 20px

package/client/components/sidebar/transfer-list-control.jsx

@@ -117,6 +117,7 @@ export default class TransferModalUI extends Component {
             return (
               <Transport
                 transfer={t}
+                index={i}
                 key={id + ':tr:' + i}
               />
             )

package/client/components/sidebar/transfer.styl

@@ -4,4 +4,4 @@
   .ant-badge-multiple-words
     padding 0 3px
 .transfer-list-card
-  max-width calc(100% - 38px)
+  width calc(100% - 48px)

package/client/components/sidebar/transport-ui.jsx

@@ -1,18 +1,23 @@
 /**
  * transporter UI component
  */
-import React from 'react'
+import { useRef } from 'react'
 import Tag from '../sftp/transfer-tag'
+import { Flex } from 'antd'
 import {
   CloseCircleOutlined,
   PlayCircleOutlined,
-  PauseCircleOutlined
+  PauseCircleOutlined,
+  VerticalAlignTopOutlined
 } from '@ant-design/icons'
+import { action } from 'manate'
+import { addClass, removeClass } from '../../common/class'
 import './transfer.styl'
 
 const e = window.translate
 
 export default function Transporter (props) {
+  const dom = useRef()
   const {
     fromPath,
     toPath,
@@ -29,12 +34,109 @@ export default function Transporter (props) {
     inited,
     id
   } = props.transfer
+  const { index } = props
+  const onDragCls = 'ondrag-tr'
+  const onDragOverCls = 'dragover-tr'
+  function moveToTop () {
+    action(function () {
+      const arr = window.store.fileTransfers
+      if (index > 0) {
+        const [item] = arr.splice(index, 1)
+        arr.unshift(item)
+      }
+    })()
+  }
   function cancel () {
     window.store.cancelTransfer(id)
   }
   function handlePauseOrResume () {
     window.store.toggleTransfer(id)
   }
+
+  function clearCls () {
+    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
+      removeClass(d, onDragOverCls)
+    })
+  }
+
+  function onDrag () {
+    addClass(dom.current, onDragCls)
+  }
+
+  function onDragEnter () {
+    clearCls()
+    addClass(dom.current, onDragOverCls)
+  }
+
+  function onDragExit () {
+    // debug('ondragexit')
+    // let {target} = e
+    // removeClass(target, 'sftp-dragover')
+  }
+
+  function onDragLeave (e) {
+    // debug('ondragleave')
+    const { target } = e
+    removeClass(target, onDragOverCls)
+  }
+
+  function onDragOver (e) {
+    // debug('ondragover')
+    // debug(e.target)
+    // removeClass(dom.current, 'sftp-dragover')
+    e.preventDefault()
+  }
+
+  function onDragStart (e) {
+    // debug('ondragstart')
+    // debug(e.target)
+    e.dataTransfer.setData('id', JSON.stringify(dom.current.getAttribute('data-id')))
+    // e.effectAllowed = 'copyMove'
+  }
+
+  function onDrop (e) {
+    e.preventDefault()
+    const { target } = e
+    if (!target) {
+      return
+    }
+    let onDropTab = target
+    while (onDropTab) {
+      if (onDropTab.classList && onDropTab.classList.contains('sftp-transport')) {
+        break
+      }
+      onDropTab = onDropTab.parentElement
+    }
+    const fromId = JSON.parse(e.dataTransfer.getData('id'))
+    if (!onDropTab || !fromId) {
+      return
+    }
+
+    const dropId = onDropTab.getAttribute('data-id')
+    if (!dropId || dropId === fromId) {
+      return
+    }
+
+    const arr = window.store.fileTransfers
+    const indexFrom = arr.findIndex(t => t.id === fromId)
+    let indexDrop = arr.findIndex(t => t.id === dropId)
+    if (indexFrom >= 0 && indexDrop >= 0) {
+      // Reorder tabs and update batch
+      action(function () {
+        const [tr] = arr.splice(indexFrom, 1)
+        if (indexFrom < indexDrop) {
+          indexDrop = indexDrop - 1
+        }
+        arr.splice(indexDrop, 0, tr)
+      })()
+    }
+  }
+
+  function onDragEnd (e) {
+    removeClass(dom.current, onDragCls)
+    clearCls()
+    e && e.dataTransfer && e.dataTransfer.clearData()
+  }
   const isTransfer = typeTo !== typeFrom
   const Icon = !pausing ? PauseCircleOutlined : PlayCircleOutlined
   const pauseTitle = pausing ? e('resume') : e('pause')
@@ -49,6 +151,14 @@ export default function Transporter (props) {
       title={e('cancel')}
     />
   )
+  const toTopIcon = index === 0
+    ? null
+    : (
+      <VerticalAlignTopOutlined
+        className='transfer-control-icon pointer hover-black font14'
+        onClick={moveToTop}
+      />
+      )
   const controlIcon = isTransfer
     ? (
       <Icon
@@ -58,41 +168,73 @@ export default function Transporter (props) {
       />
       )
     : null
+  const flexProps = {
+    className: cls,
+    gap: 3,
+    title,
+    ref: dom,
+    id: `transfer-unit-${id}`,
+    draggable: true,
+    'data-id': id,
+    onDrag,
+    onDragEnter,
+    onDragExit,
+    onDragLeave,
+    onDragOver,
+    onDragStart,
+    onDrop,
+    onDragEnd
+  }
   return (
-    <div className={cls} title={title} id={`transfer-unit-${id}`}>
-      <Tag
-        transfer={{
-          typeTo,
-          typeFrom,
-          error,
-          inited
-        }}
-      />
-      <span
-        className='flex-child sftp-file sftp-local-file elli'
-        title={fromPath}
-      >{fromPathReal || fromPath}
-      </span>
-      <span className='flex-child sftp-transfer-arrow'>
-        →
-      </span>
-      <span
-        className='flex-child sftp-file sftp-remote-file elli'
-      >{toPathReal || toPath}
-      </span>
-      <span
-        className='flex-child sftp-file-percent'
-      >
-        {percent || 0}%
-        {speed ? `(${speed})` : null}
-      </span>
-      <span
-        className='flex-child sftp-file-percent'
-      >
-        {passedTime || '-'}|{leftTime || '-'}
-      </span>
-      {controlIcon}
-      {cancelIcon}
-    </div>
+    <Flex
+      {...flexProps}
+    >
+      <Flex>
+        <Tag
+          transfer={{
+            typeTo,
+            typeFrom,
+            error,
+            inited
+          }}
+        />
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file sftp-local-file elli'
+          title={fromPath}
+        >{fromPathReal || fromPath}
+        </span>
+      </Flex>
+      <Flex>
+        <span className='sftp-transfer-arrow'>
+          →
+        </span>
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file sftp-remote-file elli'
+        >{toPathReal || toPath}
+        </span>
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file-percent'
+        >
+          {percent || 0}%
+          {speed ? `(${speed})` : null}
+        </span>
+      </Flex>
+      <Flex>
+        <span
+          className='sftp-file-percent'
+        >
+          {passedTime || '-'}|{leftTime || '-'}
+        </span>
+      </Flex>
+      <Flex>{controlIcon}</Flex>
+      <Flex>{cancelIcon}</Flex>
+      <Flex>{toTopIcon}</Flex>
+    </Flex>
   )
 }

package/client/components/tabs/index.jsx

@@ -4,7 +4,7 @@
 
 import React from 'react'
 import runIdle from '../../common/run-idle'
-import { findIndex, debounce } from 'lodash-es'
+import { debounce } from 'lodash-es'
 import TabTitle from './tab-title'
 import {
   CodeFilled,
@@ -227,13 +227,13 @@ export default class Tabs extends React.Component {
 
   adjustScroll = () => {
     const { tabs, currentBatchTabId, batch } = this.props
-    const index = findIndex(tabs, t => t.id === currentBatchTabId)
+    const index = tabs.findIndex(t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll(`.v${batch + 1} .tab`)
-    ).slice(0, index + 2).reduce((prev, c) => {
+    ).slice(0, index + 1).reduce((prev, c) => {
       return prev + c.clientWidth
     }, 0)
-    const w = (index + 1) * tabMargin + 5 + tabsDomWith
+    const w = (index + 1) * tabMargin + tabsDomWith
     const tabsInnerWidth = this.getInnerWidth()
     const scrollLeft = w > tabsInnerWidth
       ? w - tabsInnerWidth

package/client/components/tabs/tab.jsx

@@ -10,13 +10,14 @@ import {
 } from '@ant-design/icons'
 import { Tooltip, message } from 'antd'
 import classnames from 'classnames'
-import { findIndex, pick } from 'lodash-es'
+import { pick } from 'lodash-es'
 import Input from '../common/input-auto-focus'
 import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
 import {
   terminalSshConfigType
 } from '../../common/constants'
+import { action } from 'manate'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
 const e = window.translate
@@ -117,7 +118,13 @@ class Tab extends Component {
     }
 
     const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
-    const onDropTab = document.querySelector('.' + onDragOverCls)
+    let onDropTab = target
+    while (onDropTab) {
+      if (onDropTab.classList && onDropTab.classList.contains('tab')) {
+        break
+      }
+      onDropTab = onDropTab.parentElement
+    }
     if (!onDropTab || !fromTab) {
       return
     }
@@ -129,8 +136,8 @@ class Tab extends Component {
 
     const { id } = fromTab
     const storeTabs = window.store.tabs
-    const indexFrom = findIndex(storeTabs, t => t.id === id)
-    let indexDrop = findIndex(storeTabs, t => t.id === dropId)
+    const indexFrom = storeTabs.findIndex(t => t.id === id)
+    let indexDrop = storeTabs.findIndex(t => t.id === dropId)
 
     if (indexFrom >= 0 && indexDrop >= 0) {
       const targetTab = storeTabs[indexDrop]
@@ -146,12 +153,14 @@ class Tab extends Component {
       }
 
       // Reorder tabs and update batch
-      const [tab] = storeTabs.splice(indexFrom, 1)
-      tab.batch = targetTab.batch // Update the batch to match target tab's batch
-      if (indexFrom < indexDrop) {
-        indexDrop = indexDrop - 1
-      }
-      storeTabs.splice(indexDrop, 0, tab)
+      action(function () {
+        const [tab] = storeTabs.splice(indexFrom, 1)
+        tab.batch = targetTab.batch // Update the batch to match target tab's batch
+        if (indexFrom < indexDrop) {
+          indexDrop = indexDrop - 1
+        }
+        storeTabs.splice(indexDrop, 0, tab)
+      })()
       window.store.focus()
     }
   }