@electerm/electerm-react 1.60.18 → 1.60.32

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

@@ -4,6 +4,7 @@
 
 import { auto } from 'manate/react'
 import TreeList from '../tree-list/tree-list'
+import deepCopy from 'json-deep-copy'
 
 export default auto(function BookmarkSelect (props) {
   const { store, from } = props
@@ -11,7 +12,8 @@ export default auto(function BookmarkSelect (props) {
     listStyle,
     openedSideBar,
     leftSidebarWidth,
-    expandedKeys
+    expandedKeys,
+    bookmarks
   } = store
   if (from === 'sidebar' && openedSideBar !== 'bookmarks') {
     return null
@@ -23,7 +25,7 @@ export default auto(function BookmarkSelect (props) {
     store.onSelectBookmark(item.id)
   }
   const base = {
-    bookmarks: store.bookmarks || [],
+    bookmarks: deepCopy(bookmarks || []),
     type: 'bookmarks',
     onClickItem,
     listStyle,
@@ -32,7 +34,7 @@ export default auto(function BookmarkSelect (props) {
   const propsTree = {
     ...base,
     shouldConfirmDel: true,
-    bookmarkGroups: store.getBookmarkGroupsTotal(),
+    bookmarkGroups: deepCopy(store.getBookmarkGroupsTotal()),
     expandedKeys,
     leftSidebarWidth,
     bookmarkGroupTree: store.bookmarkGroupTree

package/client/components/sidebar/history.jsx

@@ -7,6 +7,9 @@ import HistoryItem from './history-item'
 
 export default auto(function HistoryPanel (props) {
   const { store } = window
+  if (store.config.disableConnectionHistory) {
+    return null
+  }
   const {
     history
   } = store

package/client/components/sidebar/index.jsx

@@ -12,7 +12,7 @@ import { useRef, memo } from 'react'
 import { Tooltip } from 'antd'
 import SideBarPanel from './sidebar-panel'
 import TransferList from './transfer-list'
-import MenuBtn from '../context-menu/menu-btn'
+import MenuBtn from '../sys-menu/menu-btn'
 import {
   sidebarWidth,
   settingMap,

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

@@ -177,6 +177,9 @@ export default memo(function InfoModal (props) {
               {sponsorLink}
             </Link>
           </p>
+          <p className='mg1b'>
+            <InfoCircleOutlined /> <b className='mg1r'>{window.store.installSrc}</b>
+          </p>
           <p className='mg1b'>
             <JavaScriptOutlined /> <b className='mg1r'>Powered by</b>
             <Link to='https://github.com/tylerlong/manate'>

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

@@ -1,15 +1,18 @@
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import DragHandle from '../common/drag-handle'
 
 export default function SidePanel (props) {
+  const panelRef = useRef(null)
+
   const onDragEnd = useCallback((nw) => {
     props.setLeftSidePanelWidth(nw)
     window.store.onResize()
   }, [props])
 
   const onDragMove = useCallback((nw) => {
-    const el = document.getElementById('side-panel')
-    el.style.width = nw + 'px'
+    if (panelRef.current) {
+      panelRef.current.style.width = nw + 'px'
+    }
     const el1 = document.querySelector('.sessions')
     if (el1) {
       el1.style.left = (nw + 43) + 'px'
@@ -26,7 +29,7 @@ export default function SidePanel (props) {
   return (
     <div
       {...props.sideProps}
-      id='side-panel'
+      ref={panelRef}
       draggable={false}
     >
       <DragHandle

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

@@ -72,7 +72,7 @@ export default memo(function SidebarPanel (props) {
       {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
     >
       <div className='sidebar-pin-top'>
-        <div className='pd1y pd2t pd2x sidebar-panel-control'>
+        <div className='pd1y pd2t pd2x sidebar-panel-control alignright'>
           <Tooltip title={e('newBookmark')}>
             <PlusCircleOutlined
               {...pop1}

package/client/components/sidebar/sidebar.styl

@@ -30,14 +30,14 @@
   position absolute
   left 0
   right 0
-  top 36px
+  top 0
   height 112px
 .sidebar-panel-bookmarks
 .sidebar-panel-history
   position absolute
   left 0
   right 0
-  top 148px
+  top 112px
   bottom 0
   overflow-y scroll
 .not-system-ui.is-mac
@@ -67,7 +67,7 @@
 .sidebar-list
   position absolute
   left 43px
-  top 36px
+  top 0
   bottom 0
   z-index 200
   width 0

package/client/components/sys-menu/icons-map.jsx

@@ -0,0 +1,52 @@
+/**
+ * context menu icons
+ */
+import {
+  CodeOutlined,
+  BorderHorizontalOutlined,
+  SearchOutlined,
+  SelectOutlined,
+  SwitcherOutlined,
+  CheckOutlined,
+  CloudDownloadOutlined,
+  CloudUploadOutlined,
+  ArrowRightOutlined,
+  CheckSquareOutlined,
+  CloseCircleOutlined,
+  ContainerOutlined,
+  CopyOutlined,
+  EditOutlined,
+  EnterOutlined,
+  FileAddOutlined,
+  FileExcelOutlined,
+  FolderAddOutlined,
+  InfoCircleOutlined,
+  LockOutlined,
+  ReloadOutlined
+} from '@ant-design/icons'
+import IconHolder from './icon-holder'
+
+export default {
+  CodeOutlined,
+  BorderHorizontalOutlined,
+  SearchOutlined,
+  SelectOutlined,
+  SwitcherOutlined,
+  IconHolder,
+  CheckOutlined,
+  CloudDownloadOutlined,
+  CloudUploadOutlined,
+  ArrowRightOutlined,
+  CheckSquareOutlined,
+  CloseCircleOutlined,
+  ContainerOutlined,
+  CopyOutlined,
+  EditOutlined,
+  EnterOutlined,
+  FileAddOutlined,
+  FileExcelOutlined,
+  FolderAddOutlined,
+  InfoCircleOutlined,
+  LockOutlined,
+  ReloadOutlined
+}

package/client/components/{context-menu → sys-menu}/menu-btn.jsx

@@ -3,52 +3,20 @@
  */
 
 import { PureComponent } from 'react'
+import {
+  Popover
+} from 'antd'
 import logoRef from '@electerm/electerm-resource/res/imgs/electerm.svg'
-import { commonActions } from '../../common/constants'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
-import generate from '../../common/uid'
+import MenuRender from './sys-menu.jsx'
+import { refsStatic } from '../common/ref.js'
 
 const e = window.translate
 const logo = logoRef.replace(/^\//, '')
 
 class MenuBtn extends PureComponent {
-  state = {
-    opened: false
-  }
-
-  onContextAction = e => {
-    const {
-      action,
-      id,
-      args = [],
-      func
-    } = e.data || {}
-    if (
-      action !== commonActions.clickContextMenu ||
-      id !== this.uid ||
-      !this[func]
-    ) {
-      return false
-    }
-    window.removeEventListener('message', this.onContextAction)
-    this[func](...args)
-  }
-
-  openMenu = () => {
-    const items = this.renderContext()
-    this.uid = generate()
-    window.store.openContextMenu({
-      items,
-      pos: {
-        left: 40,
-        top: 10
-      },
-      id: this.uid
-    })
-    window.addEventListener('message', this.onContextAction)
-    this.setState({
-      opened: true
-    })
+  componentDidMount () {
+    refsStatic.add('menu-btn', this)
   }
 
   onNewSsh = () => {
@@ -201,6 +169,19 @@ class MenuBtn extends PureComponent {
     ]
   }
 
+  renderMenu () {
+    const { store } = window
+    const rprops = {
+      items: this.renderContext(),
+      tabs: store.getTabs(),
+      config: store.config,
+      history: store.history
+    }
+    return (
+      <MenuRender {...rprops} />
+    )
+  }
+
   render () {
     const pops = {
       className: 'menu-control',
@@ -208,13 +189,20 @@ class MenuBtn extends PureComponent {
       onClick: this.openMenu,
       title: e('menu')
     }
+    const popProps = {
+      content: this.renderMenu(),
+      // open: this.state.opened,
+      placement: 'right',
+      trigger: ['click']
+    }
     return (
-      <div
-        key='menu-control'
-        {...pops}
-      >
-        <img src={logo} width={28} height={28} />
-      </div>
+      <Popover {...popProps}>
+        <div
+          {...pops}
+        >
+          <img src={logo} width={28} height={28} />
+        </div>
+      </Popover>
     )
   }
 }

package/client/components/sys-menu/sys-menu.jsx

@@ -0,0 +1,163 @@
+/**
+ * context menu
+ */
+import { PureComponent } from 'react'
+import './sys-menu.styl'
+import classnames from 'classnames'
+import {
+  Popconfirm
+} from 'antd'
+import { noop } from 'lodash-es'
+import History from './history'
+import Bookmark from './boomarks'
+import Tabs from './tabs'
+import Zoom from './zoom'
+import icons from './icons-map'
+import { refsStatic } from '../common/ref'
+
+const e = window.translate
+
+export default class ContextMenu extends PureComponent {
+  modules = {
+    History,
+    Bookmark,
+    Tabs,
+    Zoom
+  }
+
+  onClick = (e, item) => {
+    const {
+      disabled,
+      func
+    } = item
+    if (disabled) {
+      return
+    }
+    const menu = refsStatic.get('menu-btn')
+    if (!menu) {
+      return
+    }
+    if (func) {
+      menu[func]()
+    }
+  }
+
+  renderSubText = (subText) => {
+    return subText
+      ? (<span className='context-sub-text'>{subText}</span>)
+      : null
+  }
+
+  renderSubMenu = (submenu) => {
+    if (!submenu) {
+      return
+    }
+    const Mod = this.modules[submenu]
+    return (
+      <Mod {...this.props} />
+    )
+  }
+
+  renderItem = (item, i) => {
+    const {
+      disabled,
+      icon,
+      text,
+      noAutoClose,
+      requireConfirm,
+      confirmTitle,
+      subText,
+      className,
+      type,
+      module,
+      submenu
+    } = item
+    if (type === 'hr') {
+      return <hr />
+    }
+    const baseCls = 'context-item'
+    if (module && this.modules[module]) {
+      const Mod = this.modules[module]
+      return (
+        <div className={baseCls}>
+          <Mod {...this.props} />
+        </div>
+      )
+    }
+    let iconElem = null
+    if (icon && icons[icon]) {
+      const Icon = icons[icon]
+      iconElem = <Icon />
+    }
+    const cls = classnames(
+      baseCls,
+      {
+        disabled
+      },
+      {
+        'no-auto-close-context': noAutoClose
+      },
+      className,
+      {
+        'with-sub-menu': submenu
+      }
+    )
+    const act = requireConfirm || submenu
+      ? noop
+      : (e) => this.onClick(e, item)
+    const unit = (
+      <div
+        key={`context-item-${i}-${text}`}
+        className={cls}
+        onClick={act}
+      >
+        {iconElem}{iconElem ? ' ' : ''}{text}
+        {
+          this.renderSubText(subText)
+        }
+        {
+          this.renderSubMenu(submenu)
+        }
+      </div>
+    )
+    if (!requireConfirm) {
+      return unit
+    }
+    const title = (
+      <div className='wordbreak'>{confirmTitle}</div>
+    )
+    return (
+      <Popconfirm
+        cancelText={e('cancel')}
+        key={`context-item-${i}-${text}`}
+        okText={e('ok')}
+        title={title}
+        onConfirm={(e) => this.onClick(e, item)}
+      >
+        {unit}
+      </Popconfirm>
+    )
+  }
+
+  renderItems = () => {
+    return this.props.items.map(this.renderItem)
+  }
+
+  render () {
+    const cls = 'context-menu'
+    const innerProps = {
+      className: 'context-menu-inner'
+    }
+    return (
+      <div
+        className={cls}
+      >
+        <div
+          {...innerProps}
+        >
+          {this.renderItems()}
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/{context-menu/context-menu.styl → sys-menu/sys-menu.styl}

@@ -1,17 +1,8 @@
 @require '../../css/includes/theme-default'
 .context-menu
-  position: absolute
+  position: relative
   width 280px
-  background main
-  box-shadow 0px 0px 3px 3px alpha(main-dark, .35)
-  padding 10px 0
-  z-index 999
-  -webkit-app-region no-drag
-  color text
-  &.scroll
-    .context-menu-inner
-      overflow-x hidden
-      overflow-y scroll
+
 .context-item
   -webkit-app-region no-drag
   position relative

package/client/components/tabs/index.jsx

@@ -33,10 +33,8 @@ import {
   extraTabWidth,
   windowControlWidth,
   isMacJs,
-  splitMapDesc,
-  commonActions
+  splitMapDesc
 } from '../../common/constants'
-import findParentBySel from '../../common/find-parent'
 import WindowControl from './window-control'
 import BookmarksList from '../sidebar/bookmark-select'
 import AppDrag from './app-drag'
@@ -51,12 +49,7 @@ export default class Tabs extends React.Component {
     this.tabsRef = React.createRef()
     this.domRef = React.createRef()
     this.state = {
-      overflow: false,
-      receiveDataTabId: '',
-      onContextMenuTabId: '',
-      contextFuncTabId: '',
-      contextFunc: '',
-      contextArgs: []
+      overflow: false
     }
   }
 
@@ -64,7 +57,6 @@ export default class Tabs extends React.Component {
     const {
       tabsRef
     } = this
-    window.addEventListener('message', this.onEvent)
     tabsRef.current.addEventListener('wheel', this.handleWheelEvent, {
       passive: false
     })
@@ -81,8 +73,6 @@ export default class Tabs extends React.Component {
   }
 
   componentWillUnmount () {
-    window.removeEventListener('message', this.onEvent)
-    this.offTimer()
   }
 
   modifier = (...args) => {
@@ -97,83 +87,6 @@ export default class Tabs extends React.Component {
     window.store.onNewSsh()
   }
 
-  onEvent = (e) => {
-    const {
-      action,
-      tabId
-    } = e.data || {}
-    if (
-      action === commonActions.closeContextMenuAfter
-    ) {
-      this.offContextMenu()
-    } else if (
-      action === 'terminal-receive-data' &&
-      tabId
-    ) {
-      this.modifier({
-        receiveDataTabId: tabId
-      })
-      this.timer = setTimeout(this.clearReceiveData, 4000)
-    }
-  }
-
-  clearReceiveData = () => {
-    this.modifier({
-      receiveDataTabId: ''
-    })
-  }
-
-  offTimer = () => {
-    clearTimeout(this.timer)
-    this.timer = null
-  }
-
-  offContextMenu = () => {
-    window.removeEventListener('message', this.onContextAction)
-    this.setState({
-      onContextMenuTabId: ''
-    })
-  }
-
-  handleContextMenu = e => {
-    e.preventDefault()
-    const { target } = e
-    const tabElem = findParentBySel(target, '.tab')
-    if (!tabElem) {
-      return
-    }
-    this.setState({
-      contextFuncTabId: '',
-      onContextMenuTabId: tabElem.dataset.id
-    })
-    window.addEventListener('message', this.onContextAction)
-  }
-
-  onContextAction = e => {
-    const {
-      action,
-      id,
-      args = [],
-      func
-    } = e.data || {}
-    if (
-      action !== commonActions.clickContextMenu ||
-      id !== this.state.onContextMenuTabId
-    ) {
-      return false
-    }
-    this.offContextMenu()
-    this.setContextFunc(id, func, args)
-  }
-
-  setContextFunc = (id, func, args) => {
-    this.setState({
-      contextFuncTabId: id,
-      contextFunc: func,
-      contextArgs: args
-    })
-  }
-
   tabsWidth = () => {
     const { batch } = this.props
     return Array.from(
@@ -392,7 +305,7 @@ export default class Tabs extends React.Component {
     const { tabs = [], width, config } = this.props
     const len = tabs.length
     const tabsWidthAll = tabMargin * len + 10 + this.tabsWidth()
-    const { overflow, receiveDataTabId, onContextMenuTabId } = this.state
+    const { overflow } = this.state
     const left = overflow
       ? '100%'
       : tabsWidthAll
@@ -427,14 +340,9 @@ export default class Tabs extends React.Component {
                 ...this.props,
                 tab,
                 isLast,
-                receiveData: receiveDataTabId === tab.id,
-                openContextMenu: onContextMenuTabId === tab.id,
+                addTab: this.handleTabAdd,
                 tabIndex: i
               }
-              if (this.state.contextFuncTabId === tab.id) {
-                tabProps.contextFunc = this.state.contextFunc
-                tabProps.contextArgs = this.state.contextArgs
-              }
               return (
                 <Tab
                   {...tabProps}
@@ -533,7 +441,7 @@ export default class Tabs extends React.Component {
   renderTabs () {
     const { overflow } = this.state
     return (
-      <div className='tabs' ref={this.tabsRef} onContextMenu={this.handleContextMenu}>
+      <div className='tabs' ref={this.tabsRef}>
         {this.renderContent()}
         {
           this.renderWindowControl()