@electerm/electerm-react 1.60.18 → 1.60.29

package/client/components/tabs/tab.jsx

@@ -2,13 +2,18 @@
  * file section
  */
 
-import { Component } from 'react'
+import { Component, createRef } from 'react'
+import { refs } from '../common/ref'
 import {
   CloseOutlined,
   Loading3QuartersOutlined,
   BorderlessTableOutlined
 } from '@ant-design/icons'
-import { Tooltip, message } from 'antd'
+import {
+  Tooltip,
+  message,
+  Dropdown
+} from 'antd'
 import classnames from 'classnames'
 import { pick } from 'lodash-es'
 import Input from '../common/input-auto-focus'
@@ -16,6 +21,7 @@ import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
 import isDark from '../../common/is-color-dark'
 import { action } from 'manate'
+import iconsMap from '../sys-menu/icons-map.jsx'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
 const e = window.translate
@@ -23,8 +29,15 @@ const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
 class Tab extends Component {
+  state = {
+    terminalOnData: false
+  }
+
+  tabRef = createRef()
+
   componentDidMount () {
-    this.dom = document.getElementById('tab-' + this.props.tab.id)
+    this.id = 'tab-' + this.props.tab.id
+    refs.add(this.id, this)
     window.addEventListener('message', this.onEvent)
   }
 
@@ -38,7 +51,26 @@ class Tab extends Component {
   }
 
   componentWillUnmount () {
-    this.dom = null
+    refs.remove(this.id)
+    clearTimeout(this.timer)
+    this.timer = null
+  }
+
+  notifyOnData = () => {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    this.setState({
+      terminalOnData: true
+    })
+    this.timer = setTimeout(this.clearTerminalOnData, 4000)
+  }
+
+  clearTerminalOnData = () => {
+    this.setState({
+      terminalOnData: false
+    })
   }
 
   // shouldComponentUpdate (nextProps) {
@@ -74,12 +106,12 @@ class Tab extends Component {
   }
 
   onDrag = () => {
-    addClass(this.dom, onDragCls)
+    addClass(this.tabRef.current, onDragCls)
   }
 
   onDragEnter = () => {
     this.clearCls()
-    addClass(this.dom, onDragOverCls)
+    addClass(this.tabRef.current, onDragOverCls)
   }
 
   onDragExit = () => {
@@ -97,7 +129,7 @@ class Tab extends Component {
   onDragOver = e => {
     // debug('ondragover')
     // debug(e.target)
-    // removeClass(this.dom, 'sftp-dragover')
+    // removeClass(this.tabRef.current, 'sftp-dragover')
     e.preventDefault()
   }
 
@@ -168,7 +200,7 @@ class Tab extends Component {
   }
 
   onDragEnd = e => {
-    removeClass(this.dom, onDragCls)
+    removeClass(this.tabRef.current, onDragCls)
     this.clearCls()
     e && e.dataTransfer && e.dataTransfer.clearData()
   }
@@ -229,60 +261,64 @@ class Tab extends Component {
     const len = tabs.length
     const index = tabIndex
     const noRight = index >= len - 1
-    const res = []
     const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
     const closeShortcut = this.getShortcut('app_closeCurrentTab')
     const cloneToNextShortcut = this.getShortcut('app_cloneToNextLayout')
-    res.push({
-      func: 'handleClose',
-      icon: 'CloseOutlined',
-      text: e('close'),
-      subText: closeShortcut
-    })
-    res.push({
-      func: 'closeOther',
-      icon: 'CloseOutlined',
-      text: e('closeOtherTabs')
-    })
-    if (!noRight) {
-      res.push({
-        func: 'closeTabsRight',
-        icon: 'CloseOutlined',
-        text: e('closeTabRight')
-      })
-    }
-    res.push({
-      func: 'newTab',
-      icon: 'CodeOutlined',
-      text: e('newTab')
-    })
-    res.push({
-      func: 'handleDup',
-      icon: 'CopyOutlined',
-      text: e('duplicate')
-    })
-    res.push({
-      func: 'cloneToNextLayout',
-      icon: 'CopyOutlined',
-      text: e('cloneToNextLayout'),
-      subText: cloneToNextShortcut
-    })
-    res.push({
-      func: 'doRename',
-      icon: 'EditOutlined',
-      text: e('rename')
-    })
-    res.push({
-      func: 'handleReloadTab',
-      icon: 'Loading3QuartersOutlined',
-      text: e('reload'),
-      subText: reloadShortcut
-    })
-    return res
+
+    const x = [
+      {
+        key: 'handleClose',
+        icon: <iconsMap.CloseCircleOutlined />,
+        label: e('close'),
+        extra: closeShortcut
+      },
+      {
+        key: 'closeOther',
+        icon: <iconsMap.CloseCircleOutlined />,
+        label: e('closeOtherTabs')
+      },
+      !noRight && {
+        key: 'closeTabsRight',
+        icon: <iconsMap.CloseCircleOutlined />,
+        label: e('closeTabRight')
+      },
+      {
+        key: 'newTab',
+        icon: <iconsMap.CodeOutlined />,
+        label: e('newTab')
+      },
+      {
+        key: 'handleDup',
+        icon: <iconsMap.CopyOutlined />,
+        label: e('duplicate')
+      },
+      {
+        key: 'cloneToNextLayout',
+        icon: <iconsMap.CopyOutlined />,
+        label: e('cloneToNextLayout'),
+        extra: cloneToNextShortcut
+      },
+      {
+        key: 'doRename',
+        icon: <iconsMap.EditOutlined />,
+        label: e('rename')
+      },
+      {
+        key: 'handleReloadTab',
+        icon: <iconsMap.ReloadOutlined />,
+        label: e('reload'),
+        extra: reloadShortcut
+      }
+    ].filter(Boolean)
+    return x
+  }
+
+  onContextMenu = ({ key }) => {
+    this[key]()
   }
 
   handleContextMenu = () => {
-    const rect = this.dom.getBoundingClientRect()
+    const rect = this.tabRef.current.getBoundingClientRect()
     const items = this.renderContext()
     window.store.openContextMenu({
       items,
@@ -353,7 +389,7 @@ class Tab extends Component {
   }
 
   render () {
-    const { isLast, terminalOnData, tab, currentBatchTabId } = this.props
+    const { isLast, tab, currentBatchTabId } = this.props
     const {
       id,
       isEditting,
@@ -361,6 +397,9 @@ class Tab extends Component {
       isTransporting,
       sshTunnelResults
     } = tab
+    const {
+      terminalOnData
+    } = this.state
     const active = id === currentBatchTabId
     const cls = classnames(
       `tab-${id}`,
@@ -385,6 +424,13 @@ class Tab extends Component {
     if (isEditting) {
       return this.renderEditting(tab, cls)
     }
+    const dropdownProps = {
+      menu: {
+        items: this.renderContext(),
+        onClick: this.onContextMenu
+      },
+      trigger: ['contextMenu']
+    }
     const { tabCount, color = '#0088cc' } = tab
     const styleTag = color
       ? {
@@ -400,7 +446,7 @@ class Tab extends Component {
         <div
           className={cls}
           draggable
-          id={'tab-' + id}
+          ref={this.tabRef}
           data-id={id}
           {...pick(this, [
             'onDrag',
@@ -413,21 +459,23 @@ class Tab extends Component {
             'onDragEnd'
           ])}
         >
-          <div
-            className='tab-title elli pd1x'
-            onClick={this.handleClick}
-            onDoubleClick={this.handleDup}
-          >
-            <Loading3QuartersOutlined
-              className='pointer tab-reload mg1r'
-              onClick={this.handleReloadTab}
-              title={e('reload')}
-            />
-            <span className='tab-title'>
-              <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
-              <span className='mg1r'>{title}</span>
-            </span>
-          </div>
+          <Dropdown {...dropdownProps}>
+            <div
+              className='tab-title elli pd1x'
+              onClick={this.handleClick}
+              onDoubleClick={this.handleDup}
+            >
+              <Loading3QuartersOutlined
+                className='pointer tab-reload mg1r'
+                onClick={this.handleReloadTab}
+                title={e('reload')}
+              />
+              <span className='tab-title'>
+                <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                <span className='mg1r'>{title}</span>
+              </span>
+            </div>
+          </Dropdown>
           <div className={'tab-status ' + status} />
           <div className='tab-traffic' />
           <BorderlessTableOutlined className='tab-terminal-feed' />

package/client/components/tabs/tabs.styl

@@ -225,7 +225,7 @@
   bottom 0
   z-index 11
 .tab-count
-  border-radius 10px 2px 2px 2px
+  border-radius 10px 2px 2px 10px
   padding 0 4px
   height 20px
   line-height 21px
@@ -235,3 +235,6 @@
   bottom 80px
   left 0
   right 0
+  .sidebar-panel-history .pd2x
+    width 400px
+    margin 0 auto

package/client/components/terminal/term-search.jsx

@@ -8,19 +8,18 @@ import {
   ArrowRightOutlined,
   CloseCircleOutlined
 } from '@ant-design/icons'
-import { paneMap, terminalActions } from '../../common/constants'
-import postMessage from '../../common/post-msg'
+import { paneMap } from '../../common/constants'
 import { MatchCaseIcon } from '../icons/match-case'
 import { MatchWholWordIcon } from '../icons/match-whole-word'
 import { RegularExpIcon } from '../icons/regular-exp'
 import classNames from 'classnames'
 import copy from 'json-deep-copy'
-import { shortcutExtend } from '../shortcuts/shortcut-handler.js'
+import { refsStatic, refs } from '../common/ref'
 import './term-search.styl'
 
 const e = window.translate
 
-class TermSearch extends PureComponent {
+export default class TermSearch extends PureComponent {
   searchControls = [{
     id: 'matchCase',
     icon: MatchCaseIcon,
@@ -50,7 +49,7 @@ class TermSearch extends PureComponent {
   }]
 
   componentDidMount () {
-    window.addEventListener('keydown', this.handleKeyboardEvent.bind(this))
+    refsStatic.add('term-search', this)
   }
 
   toggleSearch = () => {
@@ -61,32 +60,25 @@ class TermSearch extends PureComponent {
     setTimeout(window.store.focus, 200)
   }
 
-  searchShortcut = (e) => {
-    e.stopPropagation()
-    this.toggleSearch()
-  }
-
   prev = () => {
     const {
       activeTabId,
       termSearch,
       termSearchOptions
     } = this.props
-    postMessage({
-      action: terminalActions.doSearchPrev,
-      keyword: termSearch,
-      activeTabId,
-      options: copy(termSearchOptions)
-    })
+    refs.get('term-' + activeTabId)
+      ?.searchPrev(
+        termSearch,
+        copy(termSearchOptions)
+      )
   }
 
   next = () => {
-    postMessage({
-      action: terminalActions.doSearchNext,
-      activeTabId: this.props.activeTabId,
-      keyword: this.props.termSearch,
-      options: copy(this.props.termSearchOptions)
-    })
+    refs.get('term-' + this.props.activeTabId)
+      ?.searchNext(
+        this.props.termSearch,
+        copy(this.props.termSearchOptions)
+      )
   }
 
   handleChange = e => {
@@ -95,10 +87,8 @@ class TermSearch extends PureComponent {
   }
 
   clearSearch = () => {
-    postMessage({
-      action: terminalActions.clearSearch,
-      activeTabId: this.props.activeTabId
-    })
+    refs.get('term-' + this.props.activeTabId)
+      ?.searchAddon.clearDecorations()
   }
 
   close = () => {
@@ -222,5 +212,3 @@ class TermSearch extends PureComponent {
     )
   }
 }
-
-export default shortcutExtend(TermSearch)

package/client/components/terminal/terminal-interactive.jsx

@@ -11,7 +11,6 @@ const e = window.translate
 const FormItem = Form.Item
 
 export default function TermInteractive () {
-  const [trigger] = useState(0)
   const [opts, setter] = useState(null)
   const [form] = Form.useForm()
   function updateTab (data) {
@@ -84,7 +83,6 @@ export default function TermInteractive () {
         <FormItem noStyle name={'item' + i}>
           <InputAutoFocus
             type={type}
-            autofocustrigger={trigger}
             placeholder={note}
           />
         </FormItem>