@electerm/electerm-react 1.40.20 → 1.50.31

package/client/common/constants.js

@@ -35,7 +35,7 @@ export const filePropMinWidth = 1
 export const contextMenuHeight = 28
 export const contextMenuWidth = 280
 export const contextMenuPaddingTop = 10
-export const sftpControlHeight = 28 + 42 + 33 + 36
+export const sftpControlHeight = 42 + 30
 export const sidebarWidth = 43
 export const maxHistory = 50
 export const maxTransport = 1
@@ -130,11 +130,6 @@ export const fileOperationsMap = buildConst([
   'mv'
 ])
 
-export const terminalSplitDirectionMap = buildConst([
-  'horizontal',
-  'vertical'
-])
-
 export const terminalSshConfigType = 'ssh-config'
 export const terminalWebType = 'web'
 export const terminalRdpType = 'rdp'
@@ -283,10 +278,12 @@ export const commonActions = {
   loadTextEditorText: 'load-text-editor-text',
   openTextEditor: 'open-text-editor',
   submitFileModeEdit: 'submit-file-mode-edit',
+  submitFileModeClose: 'submit-file-mode-close',
   showFileModeModal: 'show-file-mode-modal',
   showFileInfoModal: 'show-file-info-modal',
   appUpdateCheck: 'check-app-update',
   closeContextMenu: 'close-context-menu',
+  closeContextMenuAfter: 'close-context-menu-after',
   clickContextMenu: 'click-context-menu',
   openContextMenu: 'open-context-menu',
   addTransfer: 'add-transfer',
@@ -299,7 +296,6 @@ export const srcsSkipUpgradeCheck = [
   'skip-upgrade-check'
 ]
 export const termLSPrefix = 'term:sess:'
-export const termInitId = 'electerm-init-term'
 export const batchInputLsKey = 'batch-inputs'
 export const copyBookmarkItemPrefix = 'bookmark:'
 export const copyBookmarkGroupItemPrefix = 'bookmarkGroup:'
@@ -353,6 +349,60 @@ export const instSftpKeys = [
 ]
 export const cwdId = '=__+__'
 export const zmodemTransferPackSize = 1024 * 1024 * 2
+export const splitMap = {
+  c1: 'c1',
+  c2: 'c2',
+  c3: 'c3',
+  r2: 'r2',
+  r3: 'r3',
+  c2x2: 'c2x2',
+  c1r2: 'c1r2',
+  r1c2: 'r1c2'
+}
+export const splitMapDesc = {
+  c1: 'single',
+  c2: 'twoColumns',
+  c3: 'threeColumns',
+  r2: 'twoRows',
+  r3: 'threeRows',
+  c2x2: 'grid2x2',
+  c1r2: 'twoRowsRight',
+  r1c2: 'twoColumnsBottom'
+}
+export const splitConfig = {
+  c1: {
+    children: 1,
+    handle: 0
+  },
+  c2: {
+    children: 2,
+    handle: 1
+  },
+  c3: {
+    children: 3,
+    handle: 2
+  },
+  r2: {
+    children: 2,
+    handle: 1
+  },
+  r3: {
+    children: 3,
+    handle: 2
+  },
+  c2x2: {
+    children: 4,
+    handle: 3
+  },
+  c1r2: {
+    children: 3,
+    handle: 2
+  },
+  r1c2: {
+    children: 3,
+    handle: 2
+  }
+}
 export const syncDataMaps = {
   settings: ['config'],
   bookmarks: ['bookmarks', 'bookmarkGroups'],

package/client/common/new-terminal.js

@@ -2,7 +2,7 @@
  * output default new terminal data obj
  */
 
-import generate from './uid'
+import uid from './id-with-stamp'
 import {
   paneMap
 } from './constants'
@@ -17,7 +17,7 @@ export function updateCount (tab) {
 
 export default (removeTitle, noUpdateCount) => {
   const res = {
-    id: generate(),
+    id: uid(),
     status: 'processing',
     pane: paneMap.terminal,
     title: e('newTerminal')

package/client/components/auth/login.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import React, { useState, useEffect } from 'react'
 import LogoElem from '../common/logo-elem.jsx'
 import store from '../../store'
 import {
@@ -18,18 +18,17 @@ const e = window.translate
 
 window.store = store
 
-export default class Login extends Component {
-  state = {
-    pass: '',
-    logined: !window.pre.requireAuth,
-    loading: false
-  }
+export default function Login () {
+  const [pass, setPass] = useState('')
+  const [logined, setLogined] = useState(!window.pre.requireAuth)
+  const [loading, setLoading] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
 
-  componentDidMount () {
-    this.init()
-  }
+  useEffect(() => {
+    init()
+  }, [])
 
-  init = async () => {
+  const init = async () => {
     if (!window.pre.requireAuth) {
       return
     }
@@ -37,59 +36,42 @@ export default class Login extends Component {
     window.et.globs = globs
   }
 
-  handlePassChange = e => {
-    this.setState({
-      pass: e.target.value
-    })
+  const handlePassChange = e => {
+    setPass(e.target.value)
   }
 
-  handleSubmit = () => {
-    const {
-      pass
-    } = this.state
+  const handleSubmit = () => {
     if (!pass) {
       return message.warning('password required')
-    } else if (
-      this.submitting
-    ) {
+    } else if (submitting) {
       return
     }
-    this.login(
-      this.state.pass
-    )
+    login(pass)
   }
 
-  login = async (pass) => {
-    this.submitting = true
+  const login = async (pass) => {
+    setSubmitting(true)
     const r = await window.pre.runGlobalAsync('checkPassword', pass)
     if (r) {
-      this.setState({
-        logined: true,
-        loading: false
-      })
+      setLogined(true)
+      setLoading(false)
     } else {
       message.error('Login failed')
-      this.setState({
-        loading: false
-      })
+      setLoading(false)
     }
-    this.submitting = false
+    setSubmitting(false)
   }
 
-  renderAfter = () => {
+  const renderAfter = () => {
     return (
       <ArrowRightOutlined
         className='mg1x pointer'
-        onClick={this.handleSubmit}
+        onClick={handleSubmit}
       />
     )
   }
 
-  renderLogin () {
-    const {
-      pass,
-      loading
-    } = this.state
+  const renderLogin = () => {
     return (
       <div className='login-wrap'>
         <AppDrag />
@@ -102,10 +84,10 @@ export default class Login extends Component {
             <Input.Password
               value={pass}
               readOnly={loading}
-              onChange={this.handlePassChange}
+              onChange={handlePassChange}
               placeholder={e('password')}
-              addonAfter={this.renderAfter()}
-              onPressEnter={this.handleSubmit}
+              addonAfter={renderAfter()}
+              onPressEnter={handleSubmit}
             />
           </div>
           <div className='aligncenter'>
@@ -118,17 +100,12 @@ export default class Login extends Component {
     )
   }
 
-  render () {
-    const {
-      logined
-    } = this.state
-    if (!logined) {
-      return this.renderLogin()
-    }
-    return (
-      <Main
-        store={store}
-      />
-    )
+  if (!logined) {
+    return renderLogin()
   }
+  return (
+    <Main
+      store={store}
+    />
+  )
 }

package/client/components/batch-op/batch-op.jsx

@@ -2,7 +2,7 @@
  * settings page
  */
 
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import {
   CloseCircleOutlined
 } from '@ant-design/icons'
@@ -34,7 +34,7 @@ import resolveFilePath from '../../common/resolve'
 
 const e = window.translate
 
-export default class BatchOp extends Component {
+export default class BatchOp extends PureComponent {
   state = {
     text: '',
     loading: false,
@@ -120,7 +120,7 @@ export default class BatchOp extends Component {
   }
 
   handleCancel = () => {
-    this.props.store.toggleBatchOp()
+    window.store.toggleBatchOp()
   }
 
   handleChangeTab = tab => {
@@ -177,20 +177,20 @@ export default class BatchOp extends Component {
       .catch(err => {
         return 'Error: ' + err.message
       })
-    if (!tab || !tab.pid) {
+    if (!tab) {
       return this.updateState(tab, index)
     }
 
     this.updateState('tab created', index)
     if (conf.cmd) {
       this.updateState('running cmd', index)
-      await runCmd(tab.pid, tab.sessionId, conf.cmd)
+      await runCmd(tab.id, tab.sessionId, conf.cmd)
       this.updateState('running cmd done', index)
     }
     if (conf.remotePath) {
       this.updateState('creating sftp', index)
       tab = await this.createSftp(tab)
-      if (!tab || !tab.pid) {
+      if (!tab) {
         return this.updateState('Error: ' + tab, index)
       }
       this.updateState('sftp created', index)
@@ -202,7 +202,7 @@ export default class BatchOp extends Component {
       this.updateState('run cmd2', index)
       document.querySelector('.session-current .type-tab.ssh').click()
       await wait(200)
-      await runCmd(tab.pid, tab.sessionId, conf.cmdAfterTransfer)
+      await runCmd(tab.id, tab.sessionId, conf.cmdAfterTransfer)
       this.updateState('run cmd2 done', index)
     }
     this.updateState(e('finished'), index)
@@ -230,8 +230,9 @@ export default class BatchOp extends Component {
         zip: true,
         skipConfirm: true
       }
-      window.store.addTransferList([obj])
       const { store } = window
+      store.addTransferList([obj])
+
       this.tm = setTimeout(() => {
         reject(new Error('timeout'))
       }, 1000 * 60 * 60)
@@ -299,7 +300,8 @@ export default class BatchOp extends Component {
         pane: 'terminal',
         status: 'processing',
         term: 'xterm-256color',
-        x11: false
+        x11: false,
+        batch: window.store.batch
       }
       const { store } = window
       store.addTab(tab)
@@ -309,7 +311,6 @@ export default class BatchOp extends Component {
         const last = tabs[len - 1]
         if (
           last &&
-          last.pid &&
           last.id === tab.id &&
           last.status === statusMap.success
         ) {
@@ -676,7 +677,7 @@ export default class BatchOp extends Component {
     const {
       showModal,
       innerWidth
-    } = this.props.store
+    } = this.props
     const showBatchOp = showModal === modals.batchOps
     const pops = {
       open: showBatchOp,

package/client/components/bookmark-form/index.jsx

@@ -1,7 +1,7 @@
 /**
  * bookmark form
  */
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import {
   Radio
 } from 'antd'
@@ -31,7 +31,7 @@ import {
 
 const e = window.translate
 
-export default class BookmarkIndex extends Component {
+export default class BookmarkIndex extends PureComponent {
   constructor (props) {
     super(props)
     let initType = props.formData.type

package/client/components/bookmark-form/ssh-form.jsx

@@ -299,10 +299,13 @@ export default class BookmarkForm extends PureComponent {
       this.submit(evt, obj)
     }
     if (evt !== 'save' && evt !== 'saveAndCreateNew') {
+      window.store.currentLayoutBatch = window.openTabBatch || 0
       this.props.store.addTab({
         ...copy(obj),
-        ...newTerm(true, true)
+        ...newTerm(true, true),
+        batch: window.openTabBatch ?? window.store.currentLayoutBatch
       })
+      delete window.openTabBatch
       this.props.hide()
     }
   }

package/client/components/bookmark-form/tree-delete.jsx

@@ -28,7 +28,7 @@ export default class BookmarkTreeDelete extends StartSessionSelect {
       checkedKeys,
       bookmarks,
       bookmarkGroups
-    } = store
+    } = this.props
     store.setBookmarks(
       bookmarks.filter(f => {
         return !checkedKeys.includes(f.id)
@@ -52,17 +52,17 @@ export default class BookmarkTreeDelete extends StartSessionSelect {
   }
 
   render () {
-    const { store } = this.props
+    const { expandedKeys, checkedKeys } = this.props
     const rProps = {
       checkable: true,
       autoExpandParent: true,
       onCheck: this.onCheck,
-      expandedKeys: store.expandedKeys,
-      checkedKeys: store.checkedKeys,
+      expandedKeys,
+      checkedKeys,
       onExpand: this.onExpand,
       treeData: this.buildData()
     }
-    const len = store.checkedKeys.length
+    const len = checkedKeys.length
     return (
       <div>
         <div className='pd1'>

package/client/components/context-menu/boomarks.jsx

@@ -1,15 +1,11 @@
-import { Component } from '../common/react-subx'
 import BookmarksList from '../sidebar/bookmark-select'
 
-export default class BookmarkSubMenu extends Component {
-  render () {
-    const { store } = this.props
-    return (
-      <div className='sub-context-menu bookmarks-sub-context-menu'>
-        <BookmarksList
-          store={store}
-        />
-      </div>
-    )
-  }
+export default function BookmarkSubMenu () {
+  return (
+    <div className='sub-context-menu bookmarks-sub-context-menu'>
+      <BookmarksList
+        store={window.store}
+      />
+    </div>
+  )
 }

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

@@ -1,7 +1,7 @@
 /**
  * context menu
  */
-import React from 'react'
+import { PureComponent } from 'react'
 import './context-menu.styl'
 import classnames from 'classnames'
 import {
@@ -46,7 +46,7 @@ import {
 
 const e = window.translate
 
-export default class ContextMenu extends React.PureComponent {
+export default class ContextMenu extends PureComponent {
   state = {
     items: [],
     id: '',
@@ -134,6 +134,9 @@ export default class ContextMenu extends React.PureComponent {
       id: '',
       items: []
     })
+    postMessage({
+      action: commonActions.closeContextMenuAfter
+    })
   }
 
   computePos = () => {
@@ -152,16 +155,13 @@ export default class ContextMenu extends React.PureComponent {
       left,
       top
     } = pos
-    const {
-      topMenuHeight
-    } = this.props.store
     const height = count * contextMenuHeight + contextMenuPaddingTop * 2 + countHr * 1
     const maxHeight = Math.max(
-      window.innerHeight - topMenuHeight - top,
-      top - topMenuHeight
+      window.innerHeight - top,
+      top
     )
     const shouldScroll = maxHeight < height
-    const startTop = top > (window.innerHeight - topMenuHeight) / 2
+    const startTop = top > window.innerHeight / 2
     const realHeight = Math.min(maxHeight, height)
     if (startTop) {
       top = top - realHeight
@@ -213,7 +213,7 @@ export default class ContextMenu extends React.PureComponent {
     }
     const Mod = this.modules[submenu]
     return (
-      <Mod store={this.props.store} />
+      <Mod {...this.props} />
     )
   }
 
@@ -239,7 +239,7 @@ export default class ContextMenu extends React.PureComponent {
       const Mod = this.modules[module]
       return (
         <div className={baseCls}>
-          <Mod store={this.props.store} />
+          <Mod {...this.props} />
         </div>
       )
     }

package/client/components/context-menu/history.jsx

@@ -1,27 +1,24 @@
-import { Component } from '../common/react-subx'
 import { createTitleWithTag } from '../../common/create-title'
 
-export default class HistorySubMenu extends Component {
-  render () {
-    const { store } = this.props
-    return (
-      <div className='sub-context-menu'>
-        {
-          store.history.map(item => {
-            const title = createTitleWithTag(item)
-            return (
-              <div
-                className='sub-context-menu-item'
-                title={title}
-                key={item.id}
-                onClick={() => store.onSelectHistory(item.id)}
-              >
-                {title}
-              </div>
-            )
-          })
-        }
-      </div>
-    )
-  }
+export default function HistorySubMenu (props) {
+  const { store } = window
+  return (
+    <div className='sub-context-menu'>
+      {
+        props.history.map(item => {
+          const title = createTitleWithTag(item)
+          return (
+            <div
+              className='sub-context-menu-item'
+              title={title}
+              key={item.id}
+              onClick={() => store.onSelectHistory(item.id)}
+            >
+              {title}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
 }

package/client/components/context-menu/menu-btn.jsx

@@ -2,7 +2,7 @@
  * btns
  */
 
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import logoRef from '@electerm/electerm-resource/res/imgs/electerm.svg'
 import { commonActions } from '../../common/constants'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
@@ -11,7 +11,7 @@ import generate from '../../common/uid'
 const e = window.translate
 const logo = logoRef.replace(/^\//, '')
 
-class MenuBtn extends Component {
+class MenuBtn extends PureComponent {
   state = {
     opened: false
   }
@@ -37,7 +37,7 @@ class MenuBtn extends Component {
   openMenu = () => {
     const items = this.renderContext()
     this.uid = generate()
-    this.props.store.openContextMenu({
+    window.store.openContextMenu({
       items,
       pos: {
         left: 40,
@@ -52,23 +52,23 @@ class MenuBtn extends Component {
   }
 
   onNewSsh = () => {
-    this.props.store.onNewSsh()
+    window.store.onNewSsh()
   }
 
   addTab = () => {
-    this.props.store.addTab()
+    window.store.addTab()
   }
 
   onNewWindow = () => {
-    this.props.store.onNewWindow()
+    window.store.onNewWindow()
   }
 
   openAbout = () => {
-    this.props.store.openAbout()
+    window.store.openAbout()
   }
 
   openSetting = () => {
-    this.props.store.openSetting()
+    window.store.openSetting()
   }
 
   openDevTools = () => {
@@ -88,15 +88,15 @@ class MenuBtn extends Component {
   }
 
   onCheckUpdate = () => {
-    this.props.store.onCheckUpdate()
+    window.store.onCheckUpdate()
   }
 
   restart = () => {
-    this.props.store.restart()
+    window.store.restart()
   }
 
   close = () => {
-    this.props.store.exit()
+    window.store.exit()
   }
 
   renderContext = () => {

package/client/components/context-menu/tabs.jsx

@@ -1,22 +1,18 @@
-import { Component } from '../common/react-subx'
 import TabsSubMenuChild from './sub-tab-menu'
 
-export default class TabsSubMenu extends Component {
-  render () {
-    const { store } = this.props
-    return (
-      <div className='sub-context-menu'>
-        {
-          store.getTabs().map(item => {
-            return (
-              <TabsSubMenuChild
-                key={item.id}
-                item={item}
-              />
-            )
-          })
-        }
-      </div>
-    )
-  }
+export default function TabsSubMenu (props) {
+  return (
+    <div className='sub-context-menu'>
+      {
+        props.tabs.map(item => {
+          return (
+            <TabsSubMenuChild
+              key={item.id}
+              item={item}
+            />
+          )
+        })
+      }
+    </div>
+  )
 }