@electerm/electerm-react 1.40.20 → 1.50.21

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

@@ -32,7 +32,7 @@ export default class TransferModalUI extends Component {
   }
 
   getGroups = () => {
-    const fileTransfers = this.props.store.fileTransfers
+    const { fileTransfers } = this.props
     const tree = fileTransfers.reduce((p, k) => {
       const {
         id,
@@ -69,7 +69,7 @@ export default class TransferModalUI extends Component {
     const {
       filter
     } = this.state
-    const fileTransfers = this.props.store.fileTransfers
+    const fileTransfers = this.props.fileTransfers
     return filter === 'all'
       ? fileTransfers
       : fileTransfers.filter(d => d.sessionId === filter)

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

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import { memo } from 'react'
 import {
   SwapOutlined
 } from '@ant-design/icons'
@@ -11,46 +11,49 @@ import './transfer.styl'
 
 const e = window.translate
 
-export default class TransferList extends Component {
-  render () {
-    const { store } = this.props
-    const {
-      fileTransfers,
-      transferHistory
-    } = store
-    const len = fileTransfers.length
-    if (!len && !transferHistory.length) {
-      return null
-    }
-    const color = fileTransfers.some(item => item.error) ? 'red' : 'green'
-    const bdProps = {
-      className: len ? 'hvr-bob hvr-bob-fast' : '',
-      count: len,
-      size: 'small',
-      offset: [-10, -5],
-      color,
-      overflowCount: 99
-    }
-    return (
-      <div
-        className='control-icon-wrap'
-        title={e('fileTransfers')}
+export default memo(function TransferList (props) {
+  const {
+    fileTransfers,
+    transferTab,
+    transferHistory
+  } = props
+  const len = fileTransfers.length
+  if (!len && !transferHistory.length) {
+    return null
+  }
+  const color = fileTransfers.some(item => item.error) ? 'red' : 'green'
+  const bdProps = {
+    className: len ? 'hvr-bob hvr-bob-fast' : '',
+    count: len,
+    size: 'small',
+    offset: [-10, -5],
+    color,
+    overflowCount: 99
+  }
+  const transferModalProps = {
+    fileTransfers,
+    transferHistory,
+    transferTab
+  }
+  return (
+    <div
+      className='control-icon-wrap'
+      title={e('fileTransfers')}
+    >
+      <Popover
+        placement='right'
+        destroyTooltipOnHide
+        overlayClassName='transfer-list-card'
+        content={<TransferModal {...transferModalProps} />}
       >
-        <Popover
-          placement='right'
-          destroyTooltipOnHide
-          overlayClassName='transfer-list-card'
-          content={<TransferModal store={store} />}
+        <Badge
+          {...bdProps}
         >
-          <Badge
-            {...bdProps}
-          >
-            <SwapOutlined
-              className='iblock font20 control-icon'
-            />
-          </Badge>
-        </Popover>
-      </div>
-    )
-  }
-}
+          <SwapOutlined
+            className='iblock font20 control-icon'
+          />
+        </Badge>
+      </Popover>
+    </div>
+  )
+})

package/client/components/sidebar/transfer-modal.jsx

@@ -1,74 +1,71 @@
-import { Component } from '../common/react-subx'
 import {
   Tabs
 } from 'antd'
 import Transports from './transfer-list-control'
 import TransportHistory from './transfer-history-modal'
+import { memo } from 'react'
 
 const e = window.translate
 
-export default class TransferModal extends Component {
-  renderTransfer = () => {
+export default memo(function TransferModal (props) {
+  const renderTransfer = () => {
     return (
       <Transports
-        store={this.props.store}
+        fileTransfers={props.fileTransfers}
       />
     )
   }
 
-  renderHistory = () => {
+  const renderHistory = () => {
     return (
       <TransportHistory
-        store={this.props.store}
+        transferHistory={props.transferHistory}
       />
     )
   }
 
-  render () {
-    const {
-      fileTransfers,
-      transferHistory,
-      transferTab,
-      handleTransferTab
-    } = this.props.store
-    if (!fileTransfers.length && !transferHistory.length) {
-      return null
-    }
-    const tabs = []
-    if (fileTransfers.length) {
-      tabs.push({
-        title: e('fileTransfers'),
-        id: 'transfer',
-        render: this.renderTransfer
-      })
-    }
-    if (transferHistory.length) {
-      tabs.push({
-        title: e('transferHistory'),
-        id: 'history',
-        render: this.renderHistory
-      })
-    }
-    const activeTab = tabs.map(d => d.id).includes(transferTab)
-      ? transferTab
-      : tabs[0].id
-    const items = tabs.map(tab => {
-      return {
-        key: tab.id,
-        label: tab.title,
-        children: tab.render()
-      }
+  const {
+    fileTransfers,
+    transferHistory,
+    transferTab
+  } = props
+  if (!fileTransfers.length && !transferHistory.length) {
+    return null
+  }
+  const tabs = []
+  if (fileTransfers.length) {
+    tabs.push({
+      title: e('fileTransfers'),
+      id: 'transfer',
+      render: renderTransfer
+    })
+  }
+  if (transferHistory.length) {
+    tabs.push({
+      title: e('transferHistory'),
+      id: 'history',
+      render: renderHistory
     })
-    return (
-      <div
-        className='pd1'
-      >
-        <Tabs
-          activeKey={activeTab}
-          onChange={handleTransferTab}
-          items={items}
-        />
-      </div>
-    )
   }
-}
+  const activeTab = tabs.map(d => d.id).includes(transferTab)
+    ? transferTab
+    : tabs[0].id
+  const items = tabs.map(tab => {
+    return {
+      key: tab.id,
+      label: tab.title,
+      children: tab.render()
+    }
+  })
+  return (
+    <div
+      className='pd1'
+    >
+      <Tabs
+        activeKey={activeTab}
+        onChange={window.store.handleTransferTab}
+        items={items}
+      />
+    </div>
+  )
+})

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

@@ -44,7 +44,7 @@ export default function Transporter (props) {
   const title = `${typeFromTitle}→${typeToTitle}: ${fromPath} -> ${toPath} ${speed || ''} ${percent || 0}%`
   const cancelIcon = (
     <CloseCircleOutlined
-      className='transfer-control-icon pointer hover-black font14'
+      className='transfer-control-icon transfer-control-cancel pointer hover-black font14'
       onClick={cancel}
       title={e('cancel')}
     />