@electerm/electerm-react 1.40.20 → 1.50.31

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>
+  )
+})

package/client/components/sidebar/history.jsx

@@ -2,7 +2,7 @@
  * history select
  */
 
-import { Component } from '../common/react-subx'
+import { memo } from 'react'
 import ItemList from '../setting-panel/list'
 import { pick } from 'lodash-es'
 import { EditOutlined, PushpinOutlined } from '@ant-design/icons'
@@ -10,55 +10,58 @@ import { Tooltip } from 'antd'
 
 const e = window.translate
 
-export default class HistoryPanel extends Component {
-  render () {
-    const { props } = this
-    const { store } = props
-    const {
-      openedSideBar
-    } = store
-    if (openedSideBar !== 'history') {
-      return null
-    }
-    const prps = {
-      className: 'font16 mg1x mg2l pointer iblock control-icon'
-    }
-    const prps1 = {
-      className: prps.className + (store.pinned ? ' pinned' : '')
-    }
-    return (
-      <div
-        className='sidebar-panel history-panel animate-fast'
-        {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
-      >
-        <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>
+export default memo(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)
+  }
+  return (
+    <div
+      className='sidebar-panel history-panel animate-fast'
+      {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
+    >
+      <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 className='pd2x'>
-          <ItemList
-            type='history'
-            list={store.history || []}
-            onClickItem={item => store.onSelectHistory(item.id)}
-            activeItemId={store.activeItemId}
-          />
-        </div>
       </div>
-    )
-  }
-}
+      <div className='pd2x'>
+        <ItemList
+          type='history'
+          list={history || []}
+          onClickItem={handleClickItem}
+          activeItemId={activeItemId}
+        />
+      </div>
+    </div>
+  )
+})

package/client/components/sidebar/index.jsx

@@ -9,14 +9,12 @@ import {
   UpCircleOutlined,
   BarsOutlined
 } from '@ant-design/icons'
-
+import { useRef, memo } from 'react'
 import { Tooltip } from 'antd'
-import { Component } from '../common/react-subx'
 import BookMarksWrap from './bookmark'
 import HistoryWrap from './history'
 import TransferList from './transfer-list'
 import MenuBtn from '../context-menu/menu-btn'
-import InfoModal from './info-modal'
 import {
   sidebarWidth,
   settingMap,
@@ -28,212 +26,225 @@ import './sidebar.styl'
 
 const e = window.translate
 
-export default class Sidebar extends Component {
-  handler = null
+export default memo(function Sidebar (props) {
+  const handler = useRef(null)
+
+  const {
+    height,
+    upgradeInfo,
+    settingTab,
+    settingItem,
+    isSyncingSetting,
+    leftSidebarWidth,
+    pinned,
+    fileTransfers,
+    openedSideBar,
+    transferHistory,
+    transferTab,
+    showModal,
+    showInfoModal,
+    activeItemId
+  } = props
+
+  const { store } = window
 
-  handleMouseLeave = () => {
-    if (this.props.store.pinned) {
+  const handleMouseLeave = () => {
+    if (pinned) {
       return false
     }
-    const interval = 400
-    this.handler = setTimeout(
-      () => this.props.store.setOpenedSideBar(''),
-      interval
+    handler.current = setTimeout(
+      () => store.setOpenedSideBar(''),
+      400
     )
   }
 
-  handleMouseEnterBookmark = () => {
-    if (this.props.store.pinned) {
+  const handleMouseEnterBookmark = () => {
+    if (pinned) {
       return false
     }
-    clearTimeout(this.handler)
-    this.props.store.setOpenedSideBar('bookmarks')
+    clearTimeout(handler.current)
+    store.setOpenedSideBar('bookmarks')
   }
 
-  handleMouseEnterHistory = () => {
-    if (this.props.store.pinned) {
+  const handleMouseEnterHistory = () => {
+    if (pinned) {
       return false
     }
-    clearTimeout(this.handler)
-    this.props.store.setOpenedSideBar('history')
+    clearTimeout(handler.current)
+    store.setOpenedSideBar('history')
   }
 
-  handleShowUpgrade = () => {
-    this.props.store.storeAssign({
+  const handleShowUpgrade = () => {
+    store.storeAssign({
       _upgradeInfo: JSON.stringify({
-        ...this.props.store.upgradeInfo,
+        ...props.store.upgradeInfo,
         showUpgradeModal: true
       })
     })
   }
 
-  render () {
-    const { store } = this.props
-    const {
-      openedSideBar,
-      onNewSsh,
-      openSetting,
-      openAbout,
-      openSettingSync,
-      height,
-      openTerminalThemes,
-      upgradeInfo,
-      onClickBookmark,
-      onClickHistory,
-      toggleBatchOp,
-      settingTab,
-      showModal,
-      showInfoModal,
-      settingItem,
-      isSyncingSetting,
-      leftSidebarWidth,
-      setLeftSidePanelWidth
-    } = store
-    const {
-      showUpgradeModal,
-      upgradePercent,
-      checkingRemoteVersion,
-      shouldUpgrade
-    } = upgradeInfo
-    const showSetting = showModal === modals.setting
-    const showBatchOp = showModal === modals.batchOps
-    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
-      ? {
-          className: 'sidebar-list',
-          style: {
-            width: `${leftSidebarWidth}px`
-          }
+  const {
+    onNewSsh,
+    openSetting,
+    openAbout,
+    openSettingSync,
+    openTerminalThemes,
+    onClickBookmark,
+    onClickHistory,
+    toggleBatchOp,
+    setLeftSidePanelWidth
+  } = store
+  const {
+    showUpgradeModal,
+    upgradePercent,
+    checkingRemoteVersion,
+    shouldUpgrade
+  } = upgradeInfo
+  const showSetting = showModal === modals.setting
+  const showBatchOp = showModal === modals.batchOps
+  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
+    ? {
+        className: 'sidebar-list',
+        style: {
+          width: `${leftSidebarWidth}px`
         }
-      : {
-          className: 'sidebar-list'
-        }
-    const sidebarProps = {
-      className: `sidebar type-${openedSideBar}`,
-      style: {
-        width: sidebarWidth,
-        height
       }
+    : {
+        className: 'sidebar-list'
+      }
+  const sidebarProps = {
+    className: `sidebar type-${openedSideBar}`,
+    style: {
+      width: sidebarWidth,
+      height
     }
-    return (
-      <div {...sidebarProps}>
-        <div className='sidebar-bar btns'>
-          <div className='control-icon-wrap'>
-            <MenuBtn store={store} config={store.config} />
-          </div>
-          <SideIcon
-            title={e('newBookmark')}
-          >
-            <PlusCircleOutlined
-              className='font22 iblock control-icon'
-              onClick={onNewSsh}
-            />
-          </SideIcon>
-          <SideIcon
-            title={e(settingMap.bookmarks)}
-            active={bookmarksActive}
-          >
-            <BookOutlined
-              onMouseEnter={this.handleMouseEnterBookmark}
-              onMouseLeave={this.handleMouseLeave}
-              onClick={onClickBookmark}
-              className='font20 iblock control-icon'
-            />
-          </SideIcon>
-          <SideIcon
-            title={e(settingMap.history)}
-            active={historyActive}
-          >
-            <ClockCircleOutlined
-              onMouseEnter={this.handleMouseEnterHistory}
-              onMouseLeave={this.handleMouseLeave}
-              onClick={onClickHistory}
-              className='font20 iblock control-icon'
-            />
-          </SideIcon>
-          <TransferList store={store} />
-          <SideIcon
-            title={e(settingMap.terminalThemes)}
-            active={themeActive}
-          >
-            <PictureOutlined
-              className='font20 iblock pointer control-icon'
-              onClick={openTerminalThemes}
-            />
-          </SideIcon>
-          <SideIcon
-            title={e(settingMap.setting)}
-            active={settingActive}
-          >
-            <SettingOutlined className='iblock font20 control-icon' onClick={openSetting} />
-          </SideIcon>
-          <SideIcon
-            title={e('settingSync')}
-            active={syncActive}
-          >
-            <CloudSyncOutlined
-              className='iblock font20 control-icon'
-              onClick={openSettingSync}
-              spin={isSyncingSetting}
-            />
-          </SideIcon>
-          <SideIcon
-            title={e('batchOp')}
-            active={showBatchOp}
-          >
-            <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
-          </SideIcon>
-          <SideIcon
-            title={e('about')}
-            active={showInfoModal}
-          >
-            <InfoCircleOutlined
-              className='iblock font16 control-icon open-about-icon'
-              onClick={openAbout}
-            />
-          </SideIcon>
-          {
-            !checkingRemoteVersion && !showUpgradeModal && shouldUpgrade
-              ? (
-                <Tooltip
-                  title={`${e('upgrading')} ${upgradePercent || 0}%`}
-                  placement='right'
-                >
-                  <div
-                    className='control-icon-wrap'
-                  >
-                    <UpCircleOutlined
-                      className='iblock font18 control-icon hvr-bob upgrade-icon'
-                      onClick={this.handleShowUpgrade}
-                    />
-                  </div>
-                </Tooltip>
-                )
-              : null
-          }
+  }
+  const transferProps = {
+    fileTransfers,
+    transferTab,
+    transferHistory
+  }
+  return (
+    <div {...sidebarProps}>
+      <div className='sidebar-bar btns'>
+        <div className='control-icon-wrap'>
+          <MenuBtn store={store} config={store.config} />
         </div>
-        <InfoModal store={store} />
-        <SidePanel
-          sideProps={sideProps}
-          setLeftSidePanelWidth={setLeftSidePanelWidth}
-          leftSidebarWidth={leftSidebarWidth}
+        <SideIcon
+          title={e('newBookmark')}
+        >
+          <PlusCircleOutlined
+            className='font22 iblock control-icon'
+            onClick={onNewSsh}
+          />
+        </SideIcon>
+        <SideIcon
+          title={e(settingMap.bookmarks)}
+          active={bookmarksActive}
         >
-          <BookMarksWrap
-            store={store}
-            onMouseEnter={this.handleMouseEnterBookmark}
-            onMouseLeave={this.handleMouseLeave}
+          <BookOutlined
+            onMouseEnter={handleMouseEnterBookmark}
+            onMouseLeave={handleMouseLeave}
+            onClick={onClickBookmark}
+            className='font20 iblock control-icon'
           />
-          <HistoryWrap
-            store={store}
-            onMouseEnter={this.handleMouseEnterHistory}
-            onMouseLeave={this.handleMouseLeave}
+        </SideIcon>
+        <SideIcon
+          title={e(settingMap.history)}
+          active={historyActive}
+        >
+          <ClockCircleOutlined
+            onMouseEnter={handleMouseEnterHistory}
+            onMouseLeave={handleMouseLeave}
+            onClick={onClickHistory}
+            className='font20 iblock control-icon'
           />
-        </SidePanel>
+        </SideIcon>
+        <TransferList {...transferProps} />
+        <SideIcon
+          title={e(settingMap.terminalThemes)}
+          active={themeActive}
+        >
+          <PictureOutlined
+            className='font20 iblock pointer control-icon'
+            onClick={openTerminalThemes}
+          />
+        </SideIcon>
+        <SideIcon
+          title={e(settingMap.setting)}
+          active={settingActive}
+        >
+          <SettingOutlined className='iblock font20 control-icon' onClick={openSetting} />
+        </SideIcon>
+        <SideIcon
+          title={e('settingSync')}
+          active={syncActive}
+        >
+          <CloudSyncOutlined
+            className='iblock font20 control-icon'
+            onClick={openSettingSync}
+            spin={isSyncingSetting}
+          />
+        </SideIcon>
+        <SideIcon
+          title={e('batchOp')}
+          active={showBatchOp}
+        >
+          <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
+        </SideIcon>
+        <SideIcon
+          title={e('about')}
+          active={showInfoModal}
+        >
+          <InfoCircleOutlined
+            className='iblock font16 control-icon open-about-icon'
+            onClick={openAbout}
+          />
+        </SideIcon>
+        {
+          !checkingRemoteVersion && !showUpgradeModal && shouldUpgrade
+            ? (
+              <Tooltip
+                title={`${e('upgrading')} ${upgradePercent || 0}%`}
+                placement='right'
+              >
+                <div
+                  className='control-icon-wrap'
+                >
+                  <UpCircleOutlined
+                    className='iblock font18 control-icon hvr-bob upgrade-icon'
+                    onClick={handleShowUpgrade}
+                  />
+                </div>
+              </Tooltip>
+              )
+            : null
+        }
       </div>
-    )
-  }
-}
+      <SidePanel
+        sideProps={sideProps}
+        setLeftSidePanelWidth={setLeftSidePanelWidth}
+        leftSidebarWidth={leftSidebarWidth}
+      >
+        <BookMarksWrap
+          pinned={pinned}
+          onMouseEnter={handleMouseEnterBookmark}
+          onMouseLeave={handleMouseLeave}
+        />
+        <HistoryWrap
+          history={props.history}
+          openedSideBar={openedSideBar}
+          onMouseEnter={handleMouseEnterHistory}
+          onMouseLeave={handleMouseLeave}
+          activeItemId={activeItemId}
+          pinned={pinned}
+        />
+      </SidePanel>
+    </div>
+  )
+})