@electerm/electerm-react 1.40.20 → 1.50.31

package/client/components/tabs/index.jsx

@@ -1,10 +1,10 @@
 /**
  * session tabs component
- * @param {array} props.tabs {id, title}
  */
 
 import React from 'react'
-import { findIndex } from 'lodash-es'
+import runIdle from '../../common/run-idle'
+import { findIndex, debounce } from 'lodash-es'
 import TabTitle from './tab-title'
 import {
   CodeFilled,
@@ -14,8 +14,17 @@ import {
   RightOutlined,
   RightSquareFilled
 } from '@ant-design/icons'
-
-import { Dropdown, Menu, Popover } from 'antd'
+import {
+  SingleIcon,
+  TwoColumnsIcon,
+  ThreeColumnsIcon,
+  TwoRowsIcon,
+  ThreeRowsIcon,
+  Grid2x2Icon,
+  TwoRowsRightIcon,
+  TwoColumnsBottomIcon
+} from '../icons/split-icons'
+import { Dropdown, Popover } from 'antd'
 import Tab from './tab'
 import './tabs.styl'
 import {
@@ -23,7 +32,9 @@ import {
   tabMargin,
   extraTabWidth,
   windowControlWidth,
-  isMacJs
+  isMacJs,
+  splitMapDesc,
+  commonActions
 } from '../../common/constants'
 import findParentBySel from '../../common/find-parent'
 import WindowControl from './window-control'
@@ -32,22 +43,28 @@ import AppDrag from './app-drag'
 import classNames from 'classnames'
 
 const e = window.translate
-const MenuItem = Menu.Item
 
 export default class Tabs extends React.Component {
   constructor (props) {
     super(props)
     this.tabsRef = React.createRef()
     this.state = {
-      overflow: false
+      overflow: false,
+      receiveDataTabId: '',
+      onContextMenuTabId: '',
+      contextFuncTabId: '',
+      contextFunc: '',
+      contextArgs: []
     }
   }
 
   componentDidMount () {
-    this.dom = document.querySelector('.tabs-inner')
+    const { batch } = this.props
+    this.dom = document.querySelector(`.v${batch + 1} .tabs-inner`)
     const {
       tabsRef
     } = this
+    window.addEventListener('message', this.onEvent)
     tabsRef.current.addEventListener('mousedown', this.handleClickEvent)
     tabsRef.current.addEventListener('mousewheel', this.handleWheelEvent)
   }
@@ -56,15 +73,102 @@ export default class Tabs extends React.Component {
     if (
       prevProps.currentTabId !== this.props.currentTabId ||
       prevProps.width !== this.props.width ||
-      prevProps.tabs.length !== this.props.tabs.length
+      (prevProps.tabs || []).length !== (this.props.tabs || []).length
     ) {
       this.adjustScroll()
     }
   }
 
+  componentWillUnmount () {
+    window.removeEventListener('message', this.onEvent)
+    this.offTimer()
+  }
+
+  modifier = (...args) => {
+    runIdle(() => this.setState(...args))
+  }
+
+  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(
-      document.querySelectorAll('.tab')
+      document.querySelectorAll(`.v${batch + 1} .tab`)
     ).reduce((prev, c) => {
       return prev + c.clientWidth
     }, 0)
@@ -80,7 +184,9 @@ export default class Tabs extends React.Component {
   }
 
   getInnerWidth = () => {
-    const inner = document.querySelector('.tabs-inner')
+    const { batch } = this.props
+    const cls = `.v${batch + 1} .tabs-inner`
+    const inner = document.querySelector(cls)
     return inner ? inner.clientWidth : 0
   }
 
@@ -101,11 +207,15 @@ export default class Tabs extends React.Component {
     this.props.addTab()
   }
 
+  handleTabAdd = () => {
+    this.props.addTab()
+  }
+
   adjustScroll = () => {
-    const { tabs, currentTabId } = this.props
+    const { tabs, currentTabId, batch } = this.props
     const index = findIndex(tabs, t => t.id === currentTabId)
     const tabsDomWith = Array.from(
-      document.querySelectorAll('.tab')
+      document.querySelectorAll(`.v${batch + 1} .tab`)
     ).slice(0, index + 2).reduce((prev, c) => {
       return prev + c.clientWidth
     }, 0)
@@ -138,7 +248,7 @@ export default class Tabs extends React.Component {
     this.dom.scrollLeft = scrollLeft
   }
 
-  handleWheelEvent = (e) => {
+  handleWheelEvent = debounce((e) => {
     if (this.isOverflow()) {
       if (e.deltaY < 0) {
         this.handleScrollLeft()
@@ -146,34 +256,24 @@ export default class Tabs extends React.Component {
         this.handleScrollRight()
       }
     }
-  }
+  }, 100)
 
   handleClickMenu = ({ key }) => {
     const id = key.split('##')[1]
     this.props.onChangeTabId(id)
   }
 
-  renderList = () => {
-    const { tabs = [] } = this.props
-    return (
-      <Menu onClick={this.handleClickMenu}>
-        {
-          tabs.map((t, i) => {
-            return (
-              <MenuItem
-                key={i + '##' + t.id}
-              >
-                <TabTitle tab={t} />
-              </MenuItem>
-            )
-          })
-        }
-      </Menu>
-    )
+  handleChangeLayout = ({ key }) => {
+    window.store.setLayout(key)
+  }
+
+  handleOpenChange = (open) => {
+    if (open) {
+      window.openTabBatch = this.props.batch
+    }
   }
 
   renderMenus () {
-    const { addTab } = this.props
     const { onNewSsh } = window.store
     const cls = 'pd2x pd1y context-item pointer'
     return (
@@ -190,7 +290,7 @@ export default class Tabs extends React.Component {
         </div>
         <div
           className={cls}
-          onClick={() => addTab()}
+          onClick={this.handleTabAdd}
         >
           <RightSquareFilled /> {e('newTab')}
         </div>
@@ -205,23 +305,48 @@ export default class Tabs extends React.Component {
     const cls = classNames(
       'pointer tabs-add-btn font16',
       {
-        empty: !this.props.tabs.length
+        empty: !this.props.tabs?.length
       }
     )
     return (
       <Popover
         content={this.renderMenus()}
+        onOpenChange={this.handleOpenChange}
       >
         <PlusOutlined
           title={e('openNewTerm')}
           className={cls}
-          onClick={() => this.props.addTab()}
+          onClick={this.handleTabAdd}
         />
       </Popover>
     )
   }
 
+  renderNoExtra () {
+    return (
+      <div className='tabs-extra pd1x'>
+        {this.renderLayoutMenu()}
+      </div>
+    )
+  }
+
   renderExtra () {
+    const items = this.props.tabs.map((t, i) => {
+      return {
+        key: i + '##' + t.id,
+        label: (
+          <span><TabTitle tab={t} /></span>
+        ),
+        onClick: () => this.handleClickMenu({ key: i + '##' + t.id })
+      }
+    })
+    const dropProps = {
+      className: 'tabs-add-btn font16',
+      menu: {
+        items
+      },
+      placement: 'bottomRight'
+    }
     return (
       <div className='tabs-extra pd1x'>
         {this.renderAddBtn()}
@@ -234,12 +359,13 @@ export default class Tabs extends React.Component {
           onClick={this.handleScrollRight}
         />
         <Dropdown
-          className='iblock'
-          placement='bottomRight'
-          overlay={this.renderList()}
+          {...dropProps}
         >
           <DownOutlined className='tabs-dd-icon' />
         </Dropdown>
+        {
+          this.renderLayoutMenu()
+        }
       </div>
     )
   }
@@ -260,13 +386,13 @@ 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 } = this.state
+    const { overflow, receiveDataTabId, onContextMenuTabId } = this.state
     const left = overflow
       ? '100%'
       : tabsWidthAll
     const w1 = isMacJs && (config.useSystemTitleBar || window.et.isWebApp)
       ? 30
-      : windowControlWidth
+      : this.getExtraTabWidth()
     const style = {
       width: width - w1 - 166
     }
@@ -290,11 +416,20 @@ export default class Tabs extends React.Component {
           {
             tabs.map((tab, i) => {
               const isLast = i === len - 1
+              const tabProps = {
+                ...this.props,
+                tab,
+                isLast,
+                receiveData: receiveDataTabId === tab.id,
+                openContextMenu: onContextMenuTabId === tab.id
+              }
+              if (this.state.contextFuncTabId === tab.id) {
+                tabProps.contextFunc = this.state.contextFunc
+                tabProps.contextArgs = this.state.contextArgs
+              }
               return (
                 <Tab
-                  {...this.props}
-                  tab={tab}
-                  isLast={isLast}
+                  {...tabProps}
                   key={tab.id}
                 />
               )
@@ -310,18 +445,95 @@ export default class Tabs extends React.Component {
     )
   }
 
-  render () {
-    const { overflow } = this.state
+  getLayoutIcon = (layout) => {
+    const iconMaps = {
+      single: SingleIcon,
+      twoColumns: TwoColumnsIcon,
+      threeColumns: ThreeColumnsIcon,
+      twoRows: TwoRowsIcon,
+      threeRows: ThreeRowsIcon,
+      grid2x2: Grid2x2Icon,
+      twoRowsRight: TwoRowsRightIcon,
+      twoColumnsBottom: TwoColumnsBottomIcon
+    }
+    return iconMaps[layout]
+  }
+
+  renderLayoutMenu = () => {
+    if (!this.shouldRenderWindowControl()) {
+      return null
+    }
+    const items = Object.keys(splitMapDesc).map((t) => {
+      const v = splitMapDesc[t]
+      const Icon = this.getLayoutIcon(v)
+      return {
+        key: t,
+        label: (
+          <span>
+            <Icon /> {e(v)}
+          </span>
+        ),
+        onClick: () => this.handleChangeLayout({ key: t })
+      }
+    })
+    const v = splitMapDesc[this.props.layout]
+    const Icon = this.getLayoutIcon(v)
     return (
-      <div className='tabs' ref={this.tabsRef}>
-        {this.renderContent()}
+      <Dropdown
+        menu={{ items }}
+        placement='bottomRight'
+      >
+        <span className='tabs-dd-icon mg1l'>
+          <Icon /> <DownOutlined />
+        </span>
+      </Dropdown>
+    )
+  }
+
+  shouldRenderWindowControl = () => {
+    const { layout, batch } = this.props
+    const batchToRender = {
+      c1: 0,
+      c2: 1,
+      c3: 2,
+      r2: 0,
+      r3: 0,
+      c2x2: 1,
+      c1r2: 1,
+      r1c2: 0
+    }
+    return batch === batchToRender[layout]
+  }
+
+  getExtraTabWidth = () => {
+    return this.shouldRenderWindowControl()
+      ? windowControlWidth
+      : 0
+  }
+
+  renderWindowControl = () => {
+    if (this.shouldRenderWindowControl()) {
+      return (
         <WindowControl
           store={window.store}
         />
+      )
+    }
+    return null
+  }
+
+  render () {
+    const { overflow } = this.state
+    return (
+      <div className='tabs' ref={this.tabsRef} onContextMenu={this.handleContextMenu}>
+        {this.renderContent()}
+        {
+          this.renderWindowControl()
+        }
         {
           overflow
             ? this.renderExtra()
-            : null
+            : this.renderNoExtra()
         }
       </div>
     )

package/client/components/tabs/tab.jsx

@@ -9,7 +9,6 @@ import {
   Loading3QuartersOutlined,
   BorderlessTableOutlined
 } from '@ant-design/icons'
-import generate from '../../common/uid'
 import { Tooltip, message } from 'antd'
 import classnames from 'classnames'
 import copy from 'json-deep-copy'
@@ -18,8 +17,7 @@ import Input from '../common/input-auto-focus'
 import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
 import {
-  terminalSshConfigType,
-  commonActions
+  terminalSshConfigType
 } from '../../common/constants'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
@@ -31,13 +29,12 @@ class Tab extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      terminalOnData: false,
       tab: copy(props.tab)
     }
   }
 
   componentDidMount () {
-    this.dom = document.getElementById('id' + this.state.tab.id)
+    this.dom = document.getElementById('tab-' + this.state.tab.id)
     window.addEventListener('message', this.onEvent)
   }
 
@@ -47,12 +44,16 @@ class Tab extends Component {
         tab: copy(this.props.tab)
       })
     }
+    if (this.props.openContextMenu && !prevProps.openContextMenu) {
+      this.handleContextMenu()
+    }
+    if (this.props.contextFunc && !prevProps.contextFunc) {
+      this[this.props.contextFunc](...this.props.contextArgs)
+    }
   }
 
   componentWillUnmount () {
-    window.removeEventListener('message', this.onEvent)
-    window.removeEventListener('message', this.onContextAction)
-    clearTimeout(this.handler)
+    this.dom = null
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -70,10 +71,11 @@ class Tab extends Component {
       'height',
       'isLast',
       'isMaximized',
-      'activeTerminalId',
       'config',
       'tab',
-      'width'
+      'width',
+      'openContextMenu',
+      'contextFunc'
     ]
 
     // compare only the relevant props
@@ -84,28 +86,6 @@ class Tab extends Component {
     runIdle(() => this.setState(...args))
   }
 
-  onEvent = (e) => {
-    if (
-      e.data &&
-      e.data.action === 'terminal-receive-data' &&
-      e.data.tabId === this.state.tab.id
-    ) {
-      this.modifier({
-        terminalOnData: true
-      })
-      if (this.handler) {
-        clearTimeout(this.handler)
-      }
-      this.handler = setTimeout(this.offTerminalOnData, 4000)
-    }
-  }
-
-  offTerminalOnData = () => {
-    this.modifier({
-      terminalOnData: false
-    })
-  }
-
   clearCls = () => {
     document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
       removeClass(d, onDragOverCls)
@@ -173,12 +153,24 @@ class Tab extends Component {
     }
     const { id } = fromTab
     const tabs = copy(this.props.tabs)
-    const indexFrom = findIndex(tabs, t => t.id === id)
     let indexDrop = findIndex(tabs, t => t.id === dropId)
-    if (indexDrop > indexFrom) {
-      indexDrop = indexDrop - 1
+    const dropTab = tabs[indexDrop]
+    const indexFrom = findIndex(tabs, t => t.id === id)
+    if (indexFrom === -1) {
+      const fromBatch = fromTab.batch
+      setTimeout(() => {
+        const closeBtn = document.querySelector(`.v${fromBatch + 1} .tab-${id} .tab-close .anticon`)
+        if (closeBtn) {
+          closeBtn.click()
+        }
+      }, 10)
+      fromTab.batch = dropTab.batch
+    } else {
+      if (indexDrop > indexFrom) {
+        indexDrop = indexDrop - 1
+      }
+      tabs.splice(indexFrom, 1)
     }
-    tabs.splice(indexFrom, 1)
     tabs.splice(indexDrop, 0, fromTab)
     this.props.setTabs(
       tabs
@@ -206,6 +198,10 @@ class Tab extends Component {
     )
   }
 
+  cloneToNextLayout = () => {
+    window.store.cloneToNextLayout()
+  }
+
   newTab = () => {
     this.props.addTab()
   }
@@ -276,10 +272,13 @@ class Tab extends Component {
     const isSshConfig = tab.type === terminalSshConfigType
     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')
+      text: e('close'),
+      subText: closeShortcut
     })
     res.push({
       func: 'closeOther',
@@ -303,6 +302,12 @@ class Tab extends Component {
       icon: 'CopyOutlined',
       text: e('duplicate')
     })
+    res.push({
+      func: 'cloneToNextLayout',
+      icon: 'CopyOutlined',
+      text: e('cloneToNextLayout'),
+      subText: cloneToNextShortcut
+    })
     res.push({
       disabled: isSshConfig,
       func: 'doRename',
@@ -318,39 +323,17 @@ class Tab extends Component {
     return res
   }
 
-  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)
-  }
-
-  handleContextMenu = e => {
-    e.preventDefault()
-    const { target } = e
-    const rect = target.getBoundingClientRect()
+  handleContextMenu = () => {
+    const rect = this.dom.getBoundingClientRect()
     const items = this.renderContext()
-    this.uid = generate()
     window.store.openContextMenu({
       items,
       pos: {
         left: rect.left,
         top: rect.top + 20
       },
-      id: this.uid
+      id: this.state.tab.id
     })
-    window.addEventListener('message', this.onContextAction)
   }
 
   renderEditting (tab, cls) {
@@ -416,8 +399,8 @@ class Tab extends Component {
     const {
       currentTabId
     } = this.props
-    const { isLast } = this.props
-    const { tab, terminalOnData } = this.state
+    const { isLast, terminalOnData } = this.props
+    const { tab } = this.state
     const {
       id,
       isEditting,
@@ -461,7 +444,7 @@ class Tab extends Component {
         <div
           className={cls}
           draggable
-          id={'id' + id}
+          id={'tab-' + id}
           data-id={id}
           {...pick(this, [
             'onDrag',
@@ -479,7 +462,6 @@ class Tab extends Component {
             onClick={this.handleClick}
             onDoubleClick={this.handleDup}
             style={styleTag}
-            onContextMenu={this.handleContextMenu}
           >
             <Loading3QuartersOutlined
               className='pointer tab-reload mg1r'