@electerm/electerm-react 1.51.3 → 1.51.18

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

@@ -1,4 +1,5 @@
-import React, { useRef, memo } from 'react'
+import React, { memo } from 'react'
+import DragHandle from '../common/drag-handle'
 import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
@@ -17,43 +18,12 @@ export default memo(function RightSidePanel (
     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
-    }
+  function onDragEnd (nw) {
     window.store.setRightSidePanelWidth(nw)
-    document.body.removeEventListener('mouseup', handleMouseup)
-    document.body.removeEventListener('mousemove', handleMousemove)
   }
 
-  function handleMousemove (e) {
-    const {
-      clientX: cx
-    } = e
+  function onDragMove (nw) {
     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'
   }
 
@@ -77,16 +47,19 @@ export default memo(function RightSidePanel (
     className: 'right-side-panel-pin right-side-panel-controls' + (rightPanelPinned ? ' pinned' : ''),
     onClick: togglePin
   }
-
+  const dragProps = {
+    min: 400,
+    max: 1000,
+    width: rightPanelWidth,
+    onDragEnd,
+    onDragMove,
+    left: false
+  }
   return (
     <div
       {...panelProps}
     >
-      <div
-        className='drag-handle'
-        onMouseDown={handleMousedown}
-        draggable={false}
-      />
+      <DragHandle {...dragProps} />
       <CloseCircleOutlined
         className='right-side-panel-close right-side-panel-controls'
         onClick={onClose}

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

@@ -1,5 +1,5 @@
 /**
- * history select
+ * bookmark select
  */
 
 import { auto } from 'manate/react'
@@ -29,9 +29,6 @@ export default auto(function BookmarkSelect (props) {
     listStyle,
     staticList: true
   }
-  if (!store.config.hideSshConfig) {
-    base.bookmarks.push(...store.sshConfigItems)
-  }
   const propsTree = {
     ...base,
     shouldConfirmDel: true,

package/client/components/sidebar/bookmark.jsx

@@ -1,77 +1,18 @@
 /**
- * history select
+ * bookmark select
  */
 
-import { memo } from 'react'
 import BookmarkSelect from './bookmark-select'
-import { pick } from 'lodash-es'
-import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
-import { Tooltip } from 'antd'
 
-const e = window.translate
-
-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' : '')
-  }
+export default function BookmarkPanel (props) {
   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'])}
+      className='sidebar-panel-bookmarks'
     >
-      <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>
       <div className='pd2l sidebar-inner'>
         <BookmarkSelect store={store} from='sidebar' />
       </div>
     </div>
   )
-})
+}

package/client/components/sidebar/history-item.jsx

@@ -0,0 +1,34 @@
+import createTitle, { createTitleWithTag } from '../../common/create-title'
+import { DeleteOutlined } from '@ant-design/icons'
+
+export default function HistoryItem (props) {
+  const { store } = window
+  const {
+    item,
+    index
+  } = props
+  function handleClick () {
+    store.onSelectHistory(item.tab)
+  }
+  function handleDelete (e) {
+    e.stopPropagation()
+    store.history.splice(index, 1)
+  }
+  const title = createTitleWithTag(item.tab)
+  const tt = createTitle(item.tab)
+  return (
+    <div
+      className='item-list-unit'
+      title={tt}
+      onClick={handleClick}
+    >
+      <div className='elli pd1y pd2x'>
+        {title}
+      </div>
+      <DeleteOutlined
+        className='list-item-edit'
+        onClick={handleDelete}
+      />
+    </div>
+  )
+}

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,21 +64,8 @@ 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({
-        ...props.store.upgradeInfo,
-        showUpgradeModal: true
-      })
-    })
+    window.store.upgradeInfo.showUpgradeModal = true
   }
 
   const {
@@ -90,7 +75,6 @@ export default memo(function Sidebar (props) {
     openSettingSync,
     openTerminalThemes,
     onClickBookmark,
-    onClickHistory,
     toggleBatchOp,
     setLeftSidePanelWidth
   } = store
@@ -105,7 +89,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 +137,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 +203,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/side-panel.jsx

@@ -1,62 +1,38 @@
-import { PureComponent } from 'react'
-export default class SidePanel extends PureComponent {
-  handleMousedown = (e) => {
-    e.stopPropagation()
-    this.dragStart = true
-    this.clientX = e.clientX
-    window.addEventListener('mouseup', this.handleMouseup)
-    window.addEventListener('mousemove', this.handleMousemove)
-  }
+import { useCallback } from 'react'
+import DragHandle from '../common/drag-handle'
 
-  handleMouseup = (e) => {
-    this.dragStart = false
-    const {
-      clientX
-    } = e
-    let nw = clientX - this.clientX + this.props.leftSidebarWidth
-    if (nw < 150) {
-      nw = 150
-    } else if (nw > 600) {
-      nw = 600
-    }
-    this.props.setLeftSidePanelWidth(nw)
+export default function SidePanel (props) {
+  const onDragEnd = useCallback((nw) => {
+    props.setLeftSidePanelWidth(nw)
     window.store.onResize()
-    window.removeEventListener('mouseup', this.handleMouseup)
-    window.removeEventListener('mousemove', this.handleMousemove)
-  }
+  }, [props])
 
-  handleMousemove = (e) => {
-    const {
-      clientX
-    } = e
+  const onDragMove = useCallback((nw) => {
     const el = document.getElementById('side-panel')
-    let nw = clientX - this.clientX + this.props.leftSidebarWidth
-    if (nw < 343) {
-      nw = 343
-    } else if (nw > 600) {
-      nw = 600
-    }
     el.style.width = nw + 'px'
     const el1 = document.querySelector('.sessions')
     if (el1) {
       el1.style.left = (nw + 43) + 'px'
     }
+  }, [props.leftSidebarWidth])
+  const dragProps = {
+    min: 343,
+    max: 600,
+    width: props.leftSidebarWidth,
+    onDragEnd,
+    onDragMove,
+    left: true
   }
-
-  render () {
-    return (
-      <div
-        {...this.props.sideProps}
-        id='side-panel'
-        draggable={false}
-      >
-        <div
-          className='drag-handle'
-          onMouseDown={this.handleMousedown}
-          draggable={false}
-        />
-        {this.props.children}
-      </div>
-    )
-  }
+  return (
+    <div
+      {...props.sideProps}
+      id='side-panel'
+      draggable={false}
+    >
+      <DragHandle
+        {...dragProps}
+      />
+      {props.children}
+    </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
@@ -79,15 +93,6 @@
     &:hover
       color text-light
 
-.drag-handle
-  position absolute
-  right 0
-  top 0
-  width 3px
-  bottom 0
-  cursor ew-resize
-  display none
-  z-index 201
 // Hover.css (http://ianlunn.github.io/Hover/)
 // Version: 2.3.2
 // Author: Ian Lunn @IanLunn

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)