@electerm/electerm-react 1.40.18 → 1.50.21

package/client/components/sftp/transport-action-store.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import { Component } from 'react'
 import copy from 'json-deep-copy'
 import { findIndex, isFunction } from 'lodash-es'
 import generate from '../../common/uid'
@@ -51,16 +51,23 @@ export default class TransportAction extends Component {
     }
   }
 
+  componentWillUnmount () {
+    this.transport && this.transport.destroy()
+    this.transport = null
+    clearTimeout(this.timer)
+    this.timer = null
+  }
+
   update = (up) => {
-    const { store, transfer } = this.props
+    const { fileTransfers, transfer } = this.props
     const {
-      fileTransfers
-    } = store
+      store
+    } = window
     const index = findIndex(fileTransfers, t => t.id === transfer.id)
     if (index < 0) {
       return store.setFileTransfers(fileTransfers)
     }
-    window.store.editTransfer(
+    store.editTransfer(
       fileTransfers[index].id,
       up
     )
@@ -69,13 +76,10 @@ export default class TransportAction extends Component {
   }
 
   insert = (insts) => {
-    const { store, transfer } = this.props
-    const {
-      fileTransfers
-    } = store
+    const { fileTransfers, transfer } = this.props
     const index = findIndex(fileTransfers, t => t.id === transfer.id)
     fileTransfers.splice(index, 1, ...insts)
-    store.setFileTransfers(fileTransfers)
+    window.store.setFileTransfers(fileTransfers)
   }
 
   remoteList = () => {
@@ -95,11 +99,12 @@ export default class TransportAction extends Component {
   }
 
   onEnd = (update = {}) => {
-    if (this.inst.onCancel) {
+    if (this.onCancel) {
       return
     }
     const {
-      transfer
+      transfer,
+      config
     } = this.props
     const {
       typeTo,
@@ -107,16 +112,16 @@ export default class TransportAction extends Component {
     } = transfer
     const cb = this[typeTo + 'List']
     const finishTime = Date.now()
-    if (!this.props.store.config.disableTransferHistory) {
+    if (!config.disableTransferHistory) {
       window.store.addTransferHistory(
         {
           ...transfer,
           ...update,
           finishTime,
-          startTime: this.inst.startTime,
+          startTime: this.startTime,
           size: transfer.fromFile.size,
           next: null,
-          speed: format(transfer.fromFile.size, this.inst.startTime)
+          speed: format(transfer.fromFile.size, this?.startTime)
         }
       )
     }
@@ -127,7 +132,7 @@ export default class TransportAction extends Component {
   }
 
   onData = (transferred) => {
-    if (this.inst.onCancel) {
+    if (this.onCancel) {
       return
     }
     const { transfer } = this.props
@@ -140,7 +145,7 @@ export default class TransportAction extends Component {
     up.percent = percent
     up.status = 'active'
     up.transferred = transferred
-    up.startTime = this.inst.startTime
+    up.startTime = this.startTime
     up.speed = format(transferred, up.startTime)
     Object.assign(
       up,
@@ -151,34 +156,36 @@ export default class TransportAction extends Component {
   }
 
   cancel = (callback) => {
-    if (this.inst.onCancel) {
+    if (this.onCancel) {
       return
     }
+    this.onCancel = true
     const {
-      transfer,
-      store
+      transfer
     } = this.props
-    this.inst.onCancel = true
-    const { id } = transfer
-    this.inst.transport && this.inst.transport.destroy()
     let {
       fileTransfers
-    } = store
+    } = this.props
+    const { id } = transfer
+    this.transport && this.transport.destroy()
+    this.transport = null
     fileTransfers = fileTransfers.filter(t => {
       return t.id !== id
     })
-    store.setFileTransfers(fileTransfers)
+    this.timer = setTimeout(() => {
+      window.store.setFileTransfers(fileTransfers)
+    }, 100)
     if (isFunction(callback)) {
       callback()
     }
   }
 
   pause = () => {
-    this.inst.transport && this.inst.transport.pause()
+    this.transport && this.transport.pause()
   }
 
   resume = () => {
-    this.inst.transport && this.inst.transport.resume()
+    this.transport && this.transport.resume()
   }
 
   mvOrCp = () => {
@@ -343,7 +350,7 @@ export default class TransportAction extends Component {
       : toPath
     const mode = toFile.mode || fromMode
     const sftp = window.sftps[this.sessionId]
-    this.inst.transport = await sftp[transferType]({
+    this.transport = await sftp[transferType]({
       remotePath,
       localPath,
       options: { mode },
@@ -358,7 +365,7 @@ export default class TransportAction extends Component {
   }
 
   initTransfer = async () => {
-    if (this.inst.started) {
+    if (this.started) {
       return
     }
     const { transfer } = this.props
@@ -378,8 +385,8 @@ export default class TransportAction extends Component {
     this.update({
       startTime: t
     })
-    this.inst.startTime = t
-    this.inst.started = true
+    this.startTime = t
+    this.started = true
     if (typeFrom === typeTo) {
       return this.mvOrCp()
     } else if (unzip && inited) {

package/client/components/sftp/transports-action-store.jsx

@@ -3,7 +3,7 @@
  * when list changes, do transfer and other op
  */
 
-import { Component } from '../common/react-subx'
+import { Component } from 'react'
 import Transports from './transports-ui-store'
 import { maxTransport } from '../../common/constants'
 
@@ -21,10 +21,10 @@ export default class TransportsActionStore extends Component {
   }
 
   control = async () => {
-    const { store } = this.props
+    const { store } = window
     let {
       fileTransfers
-    } = store
+    } = this.props
 
     fileTransfers = fileTransfers.map(t => {
       const {

package/client/components/sftp/transports-ui-store.jsx

@@ -1,30 +1,25 @@
 /**
  * transporter UI component
  */
-import { Component } from '../common/react-subx'
+
 import Transport from './transport-action-store'
 
-export default class TransportsUI extends Component {
-  render () {
-    const { store } = this.props
-    const {
-      fileTransfers
-    } = store
-    if (!fileTransfers.length) {
-      return null
-    }
-    return fileTransfers.map((t, i) => {
-      const { id } = t
-      return (
-        <Transport
-          {...this.props}
-          transfer={t}
-          inited={t.inited}
-          cancel={t.cancel}
-          pause={t.pausing}
-          key={id + ':tr:' + i}
-        />
-      )
-    })
+export default function TransportsUI (props) {
+  const { fileTransfers } = props
+  if (!fileTransfers.length) {
+    return null
   }
+  return fileTransfers.map((t, i) => {
+    const { id } = t
+    return (
+      <Transport
+        {...props}
+        transfer={t}
+        inited={t.inited}
+        cancel={t.cancel}
+        pause={t.pausing}
+        key={id + ':tr:' + i}
+      />
+    )
+  })
 }

package/client/components/shortcuts/shortcut-handler.js

@@ -108,6 +108,7 @@ export function shortcutExtend (Cls) {
         window.store.runQuickCommandItem(
           qmMatch.id
         )
+        return false
       }
     }
     for (let i = 0; i < len; i++) {

package/client/components/shortcuts/shortcuts.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import shortcutsDefaultsGen from './shortcuts-defaults'
 import ShortcutEdit from './shortcut-editor'
 import deepCopy from 'json-deep-copy'
@@ -13,24 +13,24 @@ import {
 const e = window.translate
 const shortcutsDefaults = shortcutsDefaultsGen()
 
-export default class Shortcuts extends Component {
+export default class Shortcuts extends PureComponent {
   handleResetAll = () => {
-    this.props.store.updateConfig({
+    window.store.updateConfig({
       shortcuts: {}
     })
   }
 
   updateConfig = (name, value) => {
-    const { store } = this.props
-    const shortcuts = deepCopy(store.config.shortcuts || {})
+    const { config } = this.props
+    const shortcuts = deepCopy(config.shortcuts || {})
     shortcuts[name] = value
-    this.props.store.updateConfig({
+    window.store.updateConfig({
       shortcuts
     })
   }
 
   getData () {
-    const { shortcuts = {} } = this.props.store.config
+    const { shortcuts = {} } = this.props.config
     return shortcutsDefaults
       .filter(g => !g.readonly)
       .map((c, i) => {
@@ -46,9 +46,8 @@ export default class Shortcuts extends Component {
   }
 
   getKeysTakenData = () => {
-    const { store } = this.props
-    const { shortcuts = {} } = store.config
-    const { quickCommands = [] } = store
+    const { config, quickCommands = [] } = this.props
+    const { shortcuts = {} } = config
 
     // Gather system shortcuts
     const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
@@ -84,7 +83,6 @@ export default class Shortcuts extends Component {
   }
 
   render () {
-    const { store } = this.props
     const columns = [
       {
         title: 'NO.',
@@ -127,7 +125,6 @@ export default class Shortcuts extends Component {
             <ShortcutEdit
               data={inst}
               keysTaken={this.getKeysTakenData()}
-              store={store}
               updateConfig={this.updateConfig}
             />
           )

package/client/components/side-panel-r/right-side-panel.styl

@@ -0,0 +1,40 @@
+@require '../../css/includes/theme-default'
+
+.right-side-panel
+  position absolute
+  right 0
+  top 0
+  bottom 0
+  z-index 200
+  background main
+  color text-light
+  border-left 1px solid darken(main, 30%)
+
+  .drag-handle
+    left 0
+    right auto
+    display block
+
+.right-side-panel-controls
+  position absolute
+  left 10px
+  top 10px
+  color text-dark
+  font-size 16px
+  &:hover
+    color text
+    cursor pointer
+  &.right-side-panel-pin
+    left 30px
+    &.pinned
+      color success
+.right-side-panel-content
+  padding 10px
+  overflow-y scroll
+  position absolute
+  left 0
+  top 30px
+  right 0
+  bottom 0
+.animate-fast
+  animation-duration .2s

package/client/components/side-panel-r/side-panel-r.jsx

@@ -0,0 +1,102 @@
+import React, { useRef, memo } from 'react'
+import './right-side-panel.styl'
+import {
+  CloseCircleOutlined,
+  PushpinOutlined
+} from '@ant-design/icons'
+
+export default memo(function RightSidePanel (
+  {
+    rightPanelVisible,
+    rightPanelPinned,
+    rightPanelWidth,
+    children
+  }
+) {
+  if (!rightPanelVisible) {
+    return null
+  }
+
+  const dragStart = useRef(false)
+  const clientX = useRef(0)
+
+  function handleMousedown (e) {
+    dragStart.current = true
+    clientX.current = e.clientX
+    document.body.addEventListener('mouseup', handleMouseup)
+    document.body.addEventListener('mousemove', handleMousemove)
+  }
+
+  function handleMouseup (e) {
+    dragStart.current = false
+    const {
+      clientX: cx
+    } = e
+    let nw = clientX.current - cx + rightPanelWidth
+    if (nw < 400) {
+      nw = 400
+    } else if (nw > 1000) {
+      nw = 1000
+    }
+    window.store.setRightSidePanelWidth(nw)
+    document.body.removeEventListener('mouseup', handleMouseup)
+    document.body.removeEventListener('mousemove', handleMousemove)
+  }
+
+  function handleMousemove (e) {
+    const {
+      clientX: cx
+    } = e
+    const el = document.getElementById('right-side-panel')
+    let nw = clientX.current - cx + rightPanelWidth
+    if (nw < 400) {
+      nw = 400
+    } else if (nw > 1000) {
+      nw = 1000
+    }
+    el.style.width = nw + 'px'
+  }
+
+  function onClose () {
+    window.store.rightPanelVisible = false
+  }
+
+  function togglePin () {
+    window.store.rightPanelPinned = !window.store.rightPanelPinned
+  }
+
+  const panelProps = {
+    className: 'right-side-panel animate-fast',
+    id: 'right-side-panel',
+    style: {
+      width: `${rightPanelWidth}px`
+    }
+  }
+
+  const pinProps = {
+    className: 'right-side-panel-pin right-side-panel-controls' + (rightPanelPinned ? ' pinned' : ''),
+    onClick: togglePin
+  }
+
+  return (
+    <div
+      {...panelProps}
+    >
+      <div
+        className='drag-handle'
+        onMouseDown={handleMousedown}
+        draggable={false}
+      />
+      <CloseCircleOutlined
+        className='right-side-panel-close right-side-panel-controls'
+        onClick={onClose}
+      />
+      <PushpinOutlined
+        {...pinProps}
+      />
+      <div className='right-side-panel-content'>
+        {children}
+      </div>
+    </div>
+  )
+})

package/client/components/sidebar/bookmark-select.jsx

@@ -2,47 +2,47 @@
  * history select
  */
 
-import { Component } from '../common/react-subx'
+import { auto } from 'manate/react'
 import TreeList from '../tree-list/tree-list'
 
-export default class BookmarkSelect extends Component {
-  render () {
-    const { store, from } = this.props
-    const {
-      listStyle,
-      openedSideBar,
-      expandedKeys
-    } = store
-    if (from === 'sidebar' && openedSideBar !== 'bookmarks') {
-      return null
-    }
-    const onClickItem = (item) => {
-      if (!store.pinned) {
-        store.setOpenedSideBar('')
-      }
-      store.onSelectBookmark(item.id)
-    }
-    const base = {
-      store,
-      bookmarks: store.bookmarks || [],
-      type: 'bookmarks',
-      onClickItem,
-      listStyle,
-      staticList: true
-    }
-    if (!store.config.hideSshConfig) {
-      base.bookmarks.push(...store.sshConfigItems)
-    }
-    const propsTree = {
-      ...base,
-      shouldConfirmDel: true,
-      bookmarkGroups: store.getBookmarkGroupsTotal(),
-      expandedKeys
+export default auto(function BookmarkSelect (props) {
+  const { store, from } = props
+  const {
+    listStyle,
+    openedSideBar,
+    leftSidebarWidth,
+    expandedKeys
+  } = store
+  if (from === 'sidebar' && openedSideBar !== 'bookmarks') {
+    return null
+  }
+  const onClickItem = (item) => {
+    if (!store.pinned) {
+      store.setOpenedSideBar('')
     }
-    return (
-      <TreeList
-        {...propsTree}
-      />
-    )
+    store.onSelectBookmark(item.id)
+  }
+  const base = {
+    bookmarks: store.bookmarks || [],
+    type: 'bookmarks',
+    onClickItem,
+    listStyle,
+    staticList: true
+  }
+  if (!store.config.hideSshConfig) {
+    base.bookmarks.push(...store.sshConfigItems)
+  }
+  const propsTree = {
+    ...base,
+    shouldConfirmDel: true,
+    bookmarkGroups: store.getBookmarkGroupsTotal(),
+    expandedKeys,
+    leftSidebarWidth,
+    bookmarkGroupTree: store.bookmarkGroupTree
   }
-}
+  return (
+    <TreeList
+      {...propsTree}
+    />
+  )
+})

package/client/components/sidebar/bookmark.jsx

@@ -2,7 +2,7 @@
  * history select
  */
 
-import { Component } from '../common/react-subx'
+import { memo } from 'react'
 import BookmarkSelect from './bookmark-select'
 import { pick } from 'lodash-es'
 import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
@@ -10,70 +10,68 @@ import { Tooltip } from 'antd'
 
 const e = window.translate
 
-export default class BookmarkPanel extends Component {
-  render () {
-    const { props } = this
-    const { store } = props
-    const prps = {
-      className: 'font16 mg1x mg2l pointer iblock control-icon'
-    }
-    const prps1 = {
-      className: prps.className + (store.pinned ? ' pinned' : '')
-    }
-    const pop1 = {
-      ...prps,
-      onClick: store.onNewSsh
-    }
-    const pop2 = {
-      ...prps,
-      onClick: store.expandBookmarks
-    }
-    const pop3 = {
-      ...prps,
-      onClick: store.collapseBookmarks
-    }
-    return (
-      <div
-        className='sidebar-panel bookmarks-panel animate-fast'
-        {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
-      >
-        <div className='pd1y pd2t pd2x'>
-          <div className='fix'>
-            <div className='fleft'>{e('bookmarks')}</div>
-            <div className='fright'>
-              <Tooltip title={e('newBookmark')}>
-                <PlusCircleOutlined
-                  {...pop1}
-                />
-              </Tooltip>
-              <Tooltip title={`${e('edit')} ${e('bookmarks')}`}>
-                <EditOutlined
-                  {...pop1}
-                />
-              </Tooltip>
-              <Tooltip title={e('expandAll')}>
-                <ArrowsAltOutlined
-                  {...pop2}
-                />
-              </Tooltip>
-              <Tooltip title={e('collapseAll')}>
-                <ShrinkOutlined
-                  {...pop3}
-                />
-              </Tooltip>
-              <Tooltip title={e('pin')}>
-                <PushpinOutlined
-                  {...prps1}
-                  onClick={store.handlePin}
-                />
-              </Tooltip>
-            </div>
+export default memo(function BookmarkPanel (props) {
+  const { pinned } = props
+  const prps = {
+    className: 'font16 mg1x mg2l pointer iblock control-icon'
+  }
+  const prps1 = {
+    className: prps.className + (pinned ? ' pinned' : '')
+  }
+  const { store } = window
+  const pop1 = {
+    ...prps,
+    onClick: store.onNewSsh
+  }
+  const pop2 = {
+    ...prps,
+    onClick: store.expandBookmarks
+  }
+  const pop3 = {
+    ...prps,
+    onClick: store.collapseBookmarks
+  }
+  return (
+    <div
+      className='sidebar-panel bookmarks-panel animate-fast'
+      {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
+    >
+      <div className='pd1y pd2t pd2x'>
+        <div className='fix'>
+          <div className='fleft'>{e('bookmarks')}</div>
+          <div className='fright'>
+            <Tooltip title={e('newBookmark')}>
+              <PlusCircleOutlined
+                {...pop1}
+              />
+            </Tooltip>
+            <Tooltip title={`${e('edit')} ${e('bookmarks')}`}>
+              <EditOutlined
+                {...pop1}
+              />
+            </Tooltip>
+            <Tooltip title={e('expandAll')}>
+              <ArrowsAltOutlined
+                {...pop2}
+              />
+            </Tooltip>
+            <Tooltip title={e('collapseAll')}>
+              <ShrinkOutlined
+                {...pop3}
+              />
+            </Tooltip>
+            <Tooltip title={e('pin')}>
+              <PushpinOutlined
+                {...prps1}
+                onClick={store.handlePin}
+              />
+            </Tooltip>
           </div>
         </div>
-        <div className='pd2l sidebar-inner'>
-          <BookmarkSelect store={store} from='sidebar' />
-        </div>
       </div>
-    )
-  }
-}
+      <div className='pd2l sidebar-inner'>
+        <BookmarkSelect store={store} from='sidebar' />
+      </div>
+    </div>
+  )
+})