@electerm/electerm-react 1.60.18 → 1.60.32

package/client/components/common/drag-handle.jsx

@@ -1,10 +1,13 @@
-import { useCallback, useRef, useState, memo } from 'react'
+import {
+  Splitter
+} from 'antd'
 import './drag-handle.styl'
 
-export default memo(function DragHandle (props) {
-  const [isDragging, setIsDragging] = useState(false)
-  const dragStartRef = useRef(false)
-  const clientXRef = useRef(0)
+const {
+  Panel
+} = Splitter
+
+export default function DragHandle (props) {
   const {
     max,
     min,
@@ -12,49 +15,60 @@ export default memo(function DragHandle (props) {
     left = true
   } = props
 
-  const calc = useCallback((clientX) => {
-    let nw = left
-      ? clientX - clientXRef.current + width
-      : clientXRef.current - clientX + width
-    if (nw < min) {
-      nw = min
-    } else if (nw > max) {
-      nw = max
-    }
-    return nw
-  }, [props.max, props.min, props.left])
-
-  const handleMousedown = useCallback((e) => {
-    e.stopPropagation()
-    setIsDragging(true)
-    dragStartRef.current = true
-    clientXRef.current = e.clientX
-    window.addEventListener('mouseup', handleMouseup)
-    window.addEventListener('mousemove', handleMousemove)
-  }, [])
-
-  const handleMouseup = useCallback((e) => {
-    setIsDragging(false)
-    dragStartRef.current = false
-    const nw = calc(e.clientX)
-    props.onDragEnd(nw)
-    window.store.onResize()
-    window.removeEventListener('mouseup', handleMouseup)
-    window.removeEventListener('mousemove', handleMousemove)
-  }, [])
-
-  const handleMousemove = useCallback((e) => {
-    const nw = calc(e.clientX)
-    props.onDragMove(nw)
-  }, [width])
   const divProps = {
-    className: 'drag-handle' + (isDragging ? ' dragging' : ''),
-    onMouseDown: handleMousedown,
-    draggable: false
+    className: 'drag-handle'
+  }
+  const w = max * 2
+  function newSize (sizes) {
+    return left ? sizes[0] : sizes[1]
+  }
+  function onResizeEnd (sizes) {
+    props.onDragEnd(newSize(sizes))
+  }
+  function onResize (sizes) {
+    props.onDragEnd(newSize(sizes))
+  }
+
+  const l = left ? -width : -(w - width)
+  const r = left ? w - width : width
+  const splitProps = {
+    // lazy: true,
+    onResizeEnd,
+    onResize,
+    style: {
+      width: w + 'px',
+      position: 'absolute',
+      left: l + 'px',
+      right: r + 'px',
+      top: 0,
+      bottom: 0
+    }
+  }
+  const panelPropsL = {
+    min,
+    max,
+    size: width
+  }
+  const panelPropsR = {
+    min: max,
+    max: w - min,
+    size: w - width
   }
+  const panelPropsLeft = left
+    ? panelPropsL
+    : panelPropsR
   return (
     <div
       {...divProps}
-    />
+    >
+      <Splitter
+        {...splitProps}
+      >
+        <Panel
+          {...panelPropsLeft}
+        />
+        <Panel />
+      </Splitter>
+    </div>
   )
-})
+}

package/client/components/common/drag-handle.styl

@@ -5,8 +5,9 @@
   top 0
   width 3px
   bottom 0
-  cursor ew-resize
+  // cursor ew-resize
   display none
   z-index 201
+  overflow hidden
   &.dragging
     background #08c

package/client/components/common/input-auto-focus.jsx

@@ -1,69 +1,35 @@
-/**
- * input with auto focus
- */
-
-import { Input } from 'antd'
-import InputNative from './native-input'
-import React from 'react'
-import { findLastIndex } from 'lodash-es'
-import uid from '../../common/uid'
-
-export default class InputAutoFocus extends React.PureComponent {
-  constructor (props) {
-    super(props)
-    this.uid = 'InputAutoFocus-' + uid()
-  }
-
-  componentDidMount () {
-    this.timer = setTimeout(this.doFocus, 50)
-  }
-
-  componentDidUpdate (prevProps) {
-    if (!prevProps.selectall) {
-      return
-    }
-    if (prevProps.autofocustrigger !== this.props.autofocustrigger) {
-      this.timer = setTimeout(this.doFocus, 50)
-    }
-  }
-
-  componentWillUnmount () {
-    clearTimeout(this.timer)
-  }
-
-  doFocus = () => {
-    const dom = this.getDom()
-    if (dom && dom.focus) {
-      const { value, selectall = false } = this.props
-      const index = findLastIndex(value, v => v === '.')
-      const hasExt = index > 0
-      if (value && !selectall && hasExt) {
-        dom.focus()
-        dom.setSelectionRange(0, index)
+import { useEffect, useRef } from 'react'
+import {
+  Input
+} from 'antd'
+
+export default function InputAutoFocus (props) {
+  const { type, selectall = false, ...rest } = props
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      const { value } = props
+      if (value && selectall) {
+        inputRef.current.setSelectionRange(0, value.length)
       } else {
-        dom.select()
+        inputRef.current.focus()
       }
     }
+  }, [props.value, props.selectall]) // Focus when these props change
+  let InputComponent
+  switch (type) {
+    case 'password':
+      InputComponent = Input.Password
+      break
+    default:
+      InputComponent = Input
   }
+  return (
+    <InputComponent
+      ref={inputRef}
+      {...rest}
+    />
 
-  getDom () {
-    const root = document.querySelector(`[data-id="${this.uid}"]`)
-    const dom = root.tagName === 'INPUT'
-      ? root
-      : root.querySelector('input')
-    return dom
-  }
-
-  render () {
-    const { type, ...rest } = this.props
-    const Dom = type === 'password'
-      ? Input.Password
-      : type === 'native' ? InputNative : Input
-    return (
-      <Dom
-        {...rest}
-        data-id={this.uid}
-      />
-    )
-  }
+  )
 }

package/client/components/common/ref.js

@@ -0,0 +1,24 @@
+// components instance reference holder
+window.refs = new Map()
+window.refsStatic = new Map()
+
+class Ref {
+  constructor (key) {
+    this.key = key
+  }
+
+  add (key, inst) {
+    window[this.key].set(key, inst)
+  }
+
+  get (key) {
+    return window[this.key].get(key)
+  }
+
+  remove (key) {
+    window[this.key].delete(key)
+  }
+}
+
+export const refs = new Ref('refs')
+export const refsStatic = new Ref('refsStatic')

package/client/components/footer/batch-input.jsx

@@ -9,13 +9,11 @@ import {
 } from 'antd'
 import {
   batchInputLsKey,
-  commonActions,
   terminalWebType,
   terminalRdpType,
   terminalVncType
 } from '../../common/constants'
 import TabSelect from './tab-select'
-import postMsg from '../../common/post-msg'
 import classNames from 'classnames'
 import deepCopy from 'json-deep-copy'
 
@@ -53,10 +51,7 @@ export default class BatchInput extends Component {
   handleChange = (v = '') => {
     let vv = v.replace(/^\d+:/, '').replace(/\n$/, '')
     if (vv === batchInputLsKey) {
-      postMsg({
-        action: commonActions.updateStore,
-        func: 'clearBatchInput'
-      })
+      window.store.clearBatchInput()
       vv = ''
     }
     this.setState({

package/client/components/footer/footer-entry.jsx

@@ -4,11 +4,12 @@ import {
 } from 'antd'
 import { InfoCircleOutlined } from '@ant-design/icons'
 import './footer.styl'
-import { paneMap, terminalActions, statusMap } from '../../common/constants'
-import postMessage from '../../common/post-msg'
+import { paneMap, statusMap } from '../../common/constants'
 import BatchInput from './batch-input'
 import encodes from '../bookmark-form/encodes'
+import { refs } from '../common/ref'
 import Qm from '../quick-commands/quick-commands-select'
+import AIIcon from '../icons/ai-icon'
 
 const {
   Option
@@ -22,19 +23,18 @@ export default auto(function FooterEntry (props) {
   }
 
   function batchInput (cmd, selectedTabIds) {
-    postMessage({
-      action: terminalActions.batchInput,
-      selectedTabIds,
-      cmd
+    selectedTabIds.map(id => {
+      return refs.get('term-' + id)
+    }).forEach(term => {
+      term?.batchInput(cmd)
     })
   }
 
   function handleSwitchEncoding (encode) {
-    postMessage({
-      encode,
-      action: terminalActions.changeEncode,
-      activeTabId: props.store.activeTabId
-    })
+    const term = refs.get('term-' + props.store.activeTabId)
+    if (term) {
+      term.switchEncoding(encode)
+    }
   }
 
   function isLoading () {
@@ -77,12 +77,9 @@ export default auto(function FooterEntry (props) {
   function renderAIIcon () {
     return (
       <div className='terminal-footer-unit terminal-footer-ai'>
-        <span
-          className='ai-icon'
+        <AIIcon
           onClick={window.store.handleOpenAIPanel}
-        >
-          AI
-        </span>
+        />
       </div>
     )
   }

package/client/components/footer/footer.styl

@@ -14,11 +14,6 @@
   .qm-wrap-tooltip
     left 343px
 
-.ai-icon
-  display inline-block
-  padding 0 6px
-  cursor pointer
-
 .terminal-footer-flex
   display flex
   .terminal-footer-unit .ant-select-selector .ant-select-selection-placeholder

package/client/components/icons/ai-icon.jsx

@@ -0,0 +1,17 @@
+import './ai-icon.styl'
+
+export default function AIIcon (props) {
+  const {
+    className,
+    ...rest
+  } = props
+  const cls = 'ai-icon' + (props.className ? ' ' + props.className : '')
+  return (
+    <span
+      className={cls}
+      {...rest}
+    >
+      AI
+    </span>
+  )
+}

package/client/components/icons/ai-icon.styl

@@ -0,0 +1,3 @@
+.ai-icon
+  display inline-block
+  cursor pointer

package/client/components/layout/layout-item.jsx

@@ -34,7 +34,21 @@ export default function LayoutItem (props) {
     if (!t) {
       return
     }
+
+    // Handle source batch's activeTabId
+    const fromBatch = fromTab.batch
+    if (store[`activeTabId${fromBatch}`] === fromTab.id) {
+      // Find next tab in the source batch
+      const nextTab = tabs.find(tab =>
+        tab.id !== fromTab.id && tab.batch === fromBatch
+      )
+      store[`activeTabId${fromBatch}`] = nextTab ? nextTab.id : ''
+    }
+
+    // Update tab's batch
     t.batch = batch
+
+    store[`activeTabId${batch}`] = t.id
     clearCls()
   }
 

package/client/components/main/main.jsx

@@ -1,9 +1,7 @@
 import { auto } from 'manate/react'
 import { useEffect } from 'react'
 import Layout from '../layout/layout'
-import ContextMenu from '../context-menu/context-menu'
-import FileInfoModal from '../sftp/file-props-modal'
-import FileModeModal from '../sftp/file-mode-modal'
+import FileInfoModal from '../sftp/file-info-modal'
 import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor'
@@ -52,7 +50,6 @@ export default auto(function Index (props) {
     const { store } = props
     window.addEventListener('resize', store.onResize)
     setTimeout(store.triggerResize, 200)
-    store.initStoreEvents()
     const { ipcOnEvent } = window.pre
     ipcOnEvent('checkupdate', store.onCheckUpdate)
     ipcOnEvent('open-about', store.openAbout)
@@ -183,13 +180,7 @@ export default auto(function Index (props) {
     resolutions: deepCopy(store.resolutions),
     openResolutionEdit
   }
-  const contextMenuProps = {
-    ...pick(store, [
-      'history'
-    ]),
-    tabs: store.getTabs(),
-    config
-  }
+
   const rightPanelProps = {
     rightPanelVisible: store.rightPanelVisible,
     rightPanelPinned: store.rightPanelPinned,
@@ -198,6 +189,7 @@ export default auto(function Index (props) {
     rightPanelTab
   }
   const terminalInfoProps = {
+    rightPanelTab,
     ...deepCopy(store.terminalInfoProps),
     ...pick(
       config,
@@ -224,11 +216,9 @@ export default auto(function Index (props) {
     selectedTabIds: store.batchInputSelectedTabIds,
     tabs: store.getTabs(),
     activeTabId: store.activeTabId,
-    showAIConfig: store.showAIConfig
+    showAIConfig: store.showAIConfig,
+    rightPanelTab
   }
-  const rightPanelContent = rightPanelTab === 'ai'
-    ? <AIChat {...aiChatProps} />
-    : <TerminalInfo {...terminalInfoProps} />
   return (
     <ConfigProvider
       theme={uiThemeConfig}
@@ -251,14 +241,13 @@ export default auto(function Index (props) {
           buildTheme={store.buildTheme}
         />
         <CustomCss customCss={config.customCss} />
-        <TextEditor customCss={cpConf.customCss} />
+        <TextEditor />
         <UpdateCheck
           skipVersion={cpConf.skipVersion}
           upgradeInfo={upgradeInfo}
           installSrc={installSrc}
         />
         <FileInfoModal />
-        <FileModeModal />
         <SettingModal store={store} />
         <BatchOp {...batchOpProps} />
         <div
@@ -270,7 +259,6 @@ export default auto(function Index (props) {
             store={store}
           />
         </div>
-        <ContextMenu {...contextMenuProps} />
         <ConfirmModalStore
           transferToConfirm={transferToConfirm}
         />
@@ -285,7 +273,8 @@ export default auto(function Index (props) {
         <Resolutions {...resProps} />
         <InfoModal {...infoModalProps} />
         <RightSidePanel {...rightPanelProps}>
-          {rightPanelContent}
+          <AIChat {...aiChatProps} />
+          <TerminalInfo {...terminalInfoProps} />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs

package/client/components/main/upgrade.jsx

@@ -9,14 +9,15 @@ import {
   isMac,
   isWin,
   packInfo,
-  commonActions,
   srcsSkipUpgradeCheck,
   downloadUpgradeTimeout,
   mirrors
 } from '../../common/constants'
+import { debounce } from 'lodash-es'
 import newTerm from '../../common/new-terminal'
 import Markdown from '../common/markdown'
 import downloadMirrors from '../../common/download-mirrors'
+import { refsStatic } from '../common/ref'
 import './upgrade.styl'
 
 const e = window.translate
@@ -36,30 +37,17 @@ export default class Upgrade extends PureComponent {
     setTimeout(() => {
       getLatestReleaseVersion(1)
     }, 5000)
-    this.watch()
+    this.id = 'upgrade'
+    refsStatic.add(this.id, this)
   }
 
-  componentWillUnmount () {
-    this.unwatch()
-  }
-
-  watch = () => {
-    window.addEventListener('message', this.onEvent)
-  }
-
-  unwatch = () => {
-    window.removeEventListener('message', this.onEvent)
-  }
-
-  onEvent = (e) => {
-    if (e && e.data && e.data.action === commonActions.appUpdateCheck) {
-      this.setState(old => {
-        return {
-          showCount: old.showCount + 1
-        }
-      })
-      this.getLatestRelease(e.data.noSkip)
-    }
+  appUpdateCheck = (noSkip) => {
+    this.setState(old => {
+      return {
+        showCount: old.showCount + 1
+      }
+    })
+    this.getLatestRelease(noSkip)
   }
 
   changeProps = (update) => {
@@ -122,7 +110,7 @@ export default class Upgrade extends PureComponent {
     this.handleClose()
   }
 
-  doUpgrade = async () => {
+  doUpgrade = debounce(async () => {
     const { installSrc } = this.props
     if (!isMac && !isWin && installSrc === 'npm') {
       return window.store.addTab(
@@ -144,7 +132,7 @@ export default class Upgrade extends PureComponent {
       onError: this.onError
     })
     this.downloadTimer = setTimeout(this.timeout, downloadUpgradeTimeout)
-  }
+  }, 100)
 
   handleSkipVersion = () => {
     window.store.setConfig({

package/client/components/profile/profile-form-elem.jsx

@@ -18,7 +18,7 @@ const e = window.translate
 export default function ProfileFormElem (props) {
   const [form] = Form.useForm()
   const [activeTab, setActiveTab] = useState('ssh')
-  const { autofocustrigger, profiles } = props.store
+  const { profiles } = props.store
   function genId () {
     let count = profiles.length ? profiles.length : ''
     let id = 'PROFILE' + count
@@ -73,7 +73,6 @@ export default function ProfileFormElem (props) {
       >
         <InputAutoFocus
           selectall='yes'
-          autofocustrigger={autofocustrigger}
         />
       </FormItem>
       <ProfileTabs {...tabsProps} />

package/client/components/quick-commands/on-drop.js

@@ -1,19 +1,8 @@
 export default function onDrop (e, cls) {
   e.preventDefault()
   const { store } = window
-  const { quickCommands } = store
   const idDragged = e.dataTransfer.getData('idDragged')
   const tar = cls ? e.target.closest(cls) : e.target
   const idDrop = tar.getAttribute('data-id')
-  const idDraggedIndex = quickCommands.findIndex(
-    ({ id }) => id === idDragged
-  )
-  const targetIndex = quickCommands.findIndex(
-    ({ id }) => id === idDrop
-  )
-  if (idDraggedIndex !== targetIndex) {
-    const [removed] = quickCommands.splice(idDraggedIndex, 1)
-    quickCommands.splice(targetIndex, 0, removed)
-    store.setItems('quickCommands', quickCommands)
-  }
+  store.adjustOrder('quickCommands', idDragged, idDrop)
 }

package/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -10,29 +10,19 @@ export default class QmTransport extends BookmarkTransport {
     const txt = await window.fs.readFile(file.path)
     try {
       const arr = JSON.parse(txt)
-      const arrOld = copy(store[this.name])
+      const state = store[this.name]
+      const arrOld = copy(state)
       const bmTreeOld = arrOld.reduce((p, v) => {
         return {
           ...p,
           [v.id]: v
         }
       }, {})
-      const add = []
-      const dbAdd = []
       arr.forEach(bg => {
         if (!bmTreeOld[bg.id]) {
-          arrOld.push(bg)
-          add.push(bg)
-          dbAdd.push({
-            db: this.name,
-            obj: bg
-          })
+          state.push(bg)
         }
       })
-      store.setState(
-        this.name, arrOld
-      )
-      store.batchDbAdd(dbAdd)
     } catch (e) {
       store.onError(e)
     }

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -25,7 +25,7 @@ const shortcutsDefaults = shortcutsDefaultsGen()
 export default function QuickCommandForm (props) {
   const [form] = Form.useForm()
   const { store, formData } = props
-  const { autofocustrigger, quickCommandTags = [] } = store
+  const { quickCommandTags = [] } = store
   const [shortcut, setShortcut] = useState(formData.shortcut || '')
   const uid = formData.id || generate()
   const updateConfig = (name, value) => {
@@ -150,7 +150,6 @@ export default function QuickCommandForm (props) {
       >
         <InputAutoFocus
           selectall='yes'
-          autofocustrigger={autofocustrigger}
         />
       </FormItem>
       {renderQm()}

package/client/components/rdp/rdp-session.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react'
+import { PureComponent, createRef } from 'react'
 import { createTerm } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
 import clone from '../../common/to-simple-obj'
@@ -27,6 +27,7 @@ export default class RdpSession extends PureComponent {
     const id = `rdp-reso-${props.tab.host}`
     const resObj = ls.getItemJSON(id, resolutions[0])
     super(props)
+    this.canvasRef = createRef()
     this.state = {
       loading: false,
       bitmapProps: {},
@@ -230,8 +231,7 @@ export default class RdpSession extends PureComponent {
         loading: false
       })
     }
-    const id = 'canvas_' + this.props.tab.id
-    const canvas = document.getElementById(id)
+    const canvas = this.canvasRef.current
     const ctx = canvas.getContext('2d')
     const {
       width,
@@ -418,7 +418,7 @@ export default class RdpSession extends PureComponent {
           {this.renderControl()}
           <canvas
             {...canvasProps}
-            id={'canvas_' + this.props.tab.id}
+            ref={this.canvasRef}
           />
         </div>
       </Spin>