@electerm/electerm-react 1.51.1 → 1.51.3

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

@@ -26,19 +26,19 @@ export default class BatchInput extends Component {
     super(props)
     this.state = {
       cmd: '',
-      selectedTabIds: [props.currentTabId],
+      selectedTabIds: [props.activeTabId],
       open: false,
       enter: false
     }
   }
 
   componentDidUpdate (prevProps) {
-    if (prevProps.currentTabId !== this.props.currentTabId) {
+    if (prevProps.activeTabId !== this.props.activeTabId) {
       this.setState(prevState => {
         const newSelectedTabIds = prevState.selectedTabIds.filter(
-          id => id !== this.props.currentTabId
+          id => id !== this.props.activeTabId
         )
-        newSelectedTabIds.unshift(this.props.currentTabId)
+        newSelectedTabIds.unshift(this.props.activeTabId)
         return {
           selectedTabIds: newSelectedTabIds
         }
@@ -72,7 +72,7 @@ export default class BatchInput extends Component {
 
   onSelectNone = () => {
     this.setState({
-      selectedTabIds: [this.props.currentTabId]
+      selectedTabIds: [this.props.activeTabId]
     })
   }
 
@@ -91,7 +91,7 @@ export default class BatchInput extends Component {
       // Ensure at least the current tab is selected
       if (selectedTabIds.length === 0) {
         return {
-          selectedTabIds: [this.props.currentTabId]
+          selectedTabIds: [this.props.activeTabId]
         }
       }
 
@@ -178,15 +178,15 @@ export default class BatchInput extends Component {
   }
 
   getTabs = () => {
-    const { currentTabId } = this.props
+    const { activeTabId } = this.props
     return deepCopy(this.props.tabs.filter(tab => {
       return tab.type !== terminalWebType &&
         tab.type !== terminalRdpType &&
         tab.type !== terminalVncType
     })).sort((a, b) => {
       // Current tab goes first
-      if (a.id === currentTabId) return -1
-      if (b.id === currentTabId) return 1
+      if (a.id === activeTabId) return -1
+      if (b.id === activeTabId) return 1
       return 0
     })
   }
@@ -215,7 +215,7 @@ export default class BatchInput extends Component {
       className: 'batch-input-holder'
     }
     const tabSelectProps = {
-      currentTabId: this.props.currentTabId,
+      activeTabId: this.props.activeTabId,
       tabs: this.getTabs(),
       selectedTabIds,
       onSelectAll: this.onSelectAll,

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

@@ -22,7 +22,7 @@ export default auto(function FooterEntry (props) {
     store.rightPanelVisible = !store.rightPanelVisible
     postMessage({
       action: terminalActions.showInfoPanel,
-      currentTabId: store.currentTabId
+      activeTabId: store.activeTabId
     })
   }
 
@@ -38,7 +38,7 @@ export default auto(function FooterEntry (props) {
     postMessage({
       encode,
       action: terminalActions.changeEncode,
-      currentTabId: props.store.currentTabId
+      activeTabId: props.store.activeTabId
     })
   }
 
@@ -58,7 +58,7 @@ export default auto(function FooterEntry (props) {
       input: batchInput,
       batchInputs: props.store.batchInputs,
       tabs: props.store.tabs,
-      currentTabId: props.store.currentTabId
+      activeTabId: props.store.activeTabId
     }
     return (
       <div className='terminal-footer-unit terminal-footer-center'>

package/client/components/footer/tab-select.jsx

@@ -7,7 +7,7 @@ import {
 } from '@ant-design/icons'
 
 export default function TabSelect (props) {
-  const { selectedTabIds, tabs, currentTabId } = props
+  const { selectedTabIds, tabs, activeTabId } = props
   function renderTabs () {
     return tabs.map(tab => {
       const selected = selectedTabIds.includes(tab.id)
@@ -16,7 +16,7 @@ export default function TabSelect (props) {
         selected,
         onSelect: props.onSelect,
         id: tab.id,
-        isCurrent: tab.id === currentTabId
+        isCurrent: tab.id === activeTabId
       }
       return (
         <TabItem

package/client/components/layout/layout.jsx

@@ -102,7 +102,7 @@ export default auto(function Layout (props) {
       const sessProps = {
         batch: i,
         layout,
-        currentBatchTabId: store[`currentTabId${i}`],
+        currentBatchTabId: store[`activeTabId${i}`],
         ...v,
         tabs: tabsBatch[i] || [],
         ...pick(store, [
@@ -132,7 +132,7 @@ export default auto(function Layout (props) {
     currentTab,
     config,
     ...pick(store, [
-      'currentTabId',
+      'activeTabId',
       'termSearchOpen',
       'termSearch',
       'termSearchOptions',
@@ -161,11 +161,11 @@ export default auto(function Layout (props) {
     height,
     layoutStyle: pixedLayoutStyle,
     ...pick(store, [
-      'currentTabId',
-      'currentTabId0',
-      'currentTabId1',
-      'currentTabId2',
-      'currentTabId3',
+      'activeTabId',
+      'activeTabId0',
+      'activeTabId1',
+      'activeTabId2',
+      'activeTabId3',
       'batch',
       'resolutions',
       'hideDelKeyTip',

package/client/components/session/session.jsx

@@ -61,6 +61,10 @@ export default class SessionWrapper extends Component {
     return document.getElementById(`is-${this.props.tab.id}`)
   }
 
+  handleClick = () => {
+    window.store.activeTabId = this.props.tab.id
+  }
+
   onDrop = (e) => {
     e.preventDefault()
     const { target } = e
@@ -337,7 +341,7 @@ export default class SessionWrapper extends Component {
   handleOpenSearch = () => {
     postMessage({
       action: terminalActions.openTerminalSearch,
-      currentTabId: this.props.tab.id
+      activeTabId: this.props.tab.id
     })
   }
 
@@ -501,7 +505,8 @@ export default class SessionWrapper extends Component {
       onDragEnter: this.onDragEnter,
       onDragLeave: this.onDragLeave,
       onDrop: this.onDrop,
-      onDragEnd: this.onDragEnd
+      onDragEnd: this.onDragEnd,
+      onClick: this.handleClick
     }
     return (
       <div

package/client/components/session/sessions.jsx

@@ -42,17 +42,17 @@ export default class Sessions extends Component {
     const {
       config,
       tabs,
-      currentTabId,
+      activeTabId,
       sizes
     } = this.props
     return tabs.map((tab) => {
       const { id, batch } = tab
       const { height, width } = sizes[batch]
-      const currentBatchTabId = this.props['currentTabId' + batch]
+      const currentBatchTabId = this.props['activeTabId' + batch]
       const cls = classNames(
         `session-wrap session-${id}`,
         {
-          'session-current': id === currentTabId,
+          'session-current': id === activeTabId,
           'session-batch-active': id === currentBatchTabId
         }
       )
@@ -61,7 +61,7 @@ export default class Sessions extends Component {
         className: cls
       }
       const sessProps = {
-        currentTabId,
+        activeTabId,
         tab,
         width,
         height,

package/client/components/shortcuts/shortcut-control.jsx

@@ -15,9 +15,9 @@ class ShortcutControl extends React.PureComponent {
 
   closeCurrentTabShortcut = throttle((e) => {
     e.stopPropagation()
-    const { currentTabId } = window.store
-    if (currentTabId) {
-      window.store.delTab(currentTabId)
+    const { activeTabId } = window.store
+    if (activeTabId) {
+      window.store.delTab(activeTabId)
     }
   }, 500)
 

package/client/components/tabs/index.jsx

@@ -60,8 +60,7 @@ export default class Tabs extends React.Component {
   }
 
   componentDidMount () {
-    const { batch } = this.props
-    this.dom = document.querySelector(`.v${batch + 1} .tabs-inner`)
+    this.domRef = React.createRef()
     const {
       tabsRef
     } = this
@@ -239,28 +238,28 @@ export default class Tabs extends React.Component {
     const scrollLeft = w > tabsInnerWidth
       ? w - tabsInnerWidth
       : 0
-    this.dom.scrollLeft = scrollLeft
+    this.domRef.current.scrollTo({ left: scrollLeft, behavior: 'smooth' })
     this.setState({
       overflow: this.isOverflow()
     })
   }
 
   handleScrollLeft = () => {
-    let { scrollLeft } = this.dom
+    let { scrollLeft } = this.domRef.current
     scrollLeft = scrollLeft - tabMargin - tabWidth
     if (scrollLeft < 0) {
       scrollLeft = 0
     }
-    this.dom.scrollLeft = scrollLeft
+    this.domRef.current.scrollTo({ left: scrollLeft, behavior: 'smooth' })
   }
 
   handleScrollRight = () => {
-    let { scrollLeft } = this.dom
+    let { scrollLeft } = this.domRef.current
     scrollLeft = scrollLeft + tabMargin + tabWidth
     if (scrollLeft < 0) {
       scrollLeft = 0
     }
-    this.dom.scrollLeft = scrollLeft
+    this.domRef.current.scrollTo({ left: scrollLeft, behavior: 'smooth' })
   }
 
   handleWheelEvent = debounce((e) => {
@@ -275,7 +274,7 @@ export default class Tabs extends React.Component {
 
   handleClickMenu = ({ key }) => {
     const id = key.split('##')[1]
-    window.store['currentTabId' + this.props.batch] = id
+    window.store['activeTabId' + this.props.batch] = id
   }
 
   handleChangeLayout = ({ key }) => {
@@ -415,6 +414,7 @@ export default class Tabs extends React.Component {
     return (
       <div
         className='tabs-inner'
+        ref={this.domRef}
         style={style}
       >
         <div

package/client/components/tabs/tab.jsx

@@ -47,9 +47,9 @@ class Tab extends Component {
   // }
 
   // shouldUpdate = (prevProps, nextProps) => {
-  //   // todo currentTabId still need improve
+  //   // todo activeTabId still need improve
   //   const pickKeys = [
-  //     'currentTabId',
+  //     'activeTabId',
   //     'height',
   //     'isLast',
   //     'isMaximized',
@@ -137,12 +137,12 @@ class Tab extends Component {
       const fromBatch = fromTab.batch
 
       // Handle currentTab change if needed
-      if (window.store[`currentTabId${fromBatch}`] === id && fromBatch !== targetTab.batch) {
+      if (window.store[`activeTabId${fromBatch}`] === id && fromBatch !== targetTab.batch) {
         // Find next tab in the same batch
         const nextTab = storeTabs.find((t, i) =>
           i !== indexFrom && t.batch === fromBatch
         )
-        window.store[`currentTabId${fromBatch}`] = nextTab ? nextTab.id : ''
+        window.store[`activeTabId${fromBatch}`] = nextTab ? nextTab.id : ''
       }
 
       // Reorder tabs and update batch

package/client/components/terminal/index.jsx

@@ -271,7 +271,7 @@ clear\r`
   }
 
   isActiveTerminal = () => {
-    return this.props.tab.id === this.props.currentTabId &&
+    return this.props.tab.id === this.props.activeTabId &&
     this.props.pane === paneMap.terminal
   }
 
@@ -333,14 +333,14 @@ clear\r`
       type,
       cmd,
       selectedTabIds = [],
-      currentTabId,
+      activeTabId,
       pid,
       inputOnly,
       zoomValue
     } = e?.data || {}
 
-    const { id: currentTabIdProp } = this.props.tab
-    const tabIdMatch = selectedTabIds.includes(currentTabIdProp) || currentTabId === currentTabIdProp
+    const { id: activeTabIdProp } = this.props.tab
+    const tabIdMatch = selectedTabIds.includes(activeTabIdProp) || activeTabId === activeTabIdProp
     if (
       action === terminalActions.zoom &&
       tabIdMatch
@@ -357,9 +357,7 @@ clear\r`
       this.batchInput(cmd)
     } else if (
       action === terminalActions.showInfoPanel &&
-      (
-        tabIdMatch
-      )
+      tabIdMatch
     ) {
       this.handleShowInfo()
     } else if (
@@ -404,7 +402,7 @@ clear\r`
       this.searchAddon.clearDecorations()
     } else if (
       action === commonActions.getTermLogState &&
-      pid === currentTabIdProp
+      pid === activeTabIdProp
     ) {
       postMessage({
         action: commonActions.returnTermLogState,
@@ -412,11 +410,11 @@ clear\r`
           saveTerminalLogToFile: this.state.saveTerminalLogToFile,
           addTimeStampToTermLog: this.state.addTimeStampToTermLog
         },
-        pid: currentTabIdProp
+        pid: activeTabIdProp
       })
     } else if (
       action === commonActions.setTermLogState &&
-      pid === currentTabIdProp
+      pid === activeTabIdProp
     ) {
       this.setState({
         addTimeStampToTermLog,
@@ -1046,10 +1044,10 @@ clear\r`
   }
 
   setActive = () => {
-    const name = `currentTabId${this.props.batch}`
+    const name = `activeTabId${this.props.batch}`
     const tabId = this.props.tab.id
     window.store.storeAssign({
-      currentTabId: tabId,
+      activeTabId: tabId,
       [name]: tabId
     })
   }
@@ -1319,12 +1317,11 @@ clear\r`
   }
 
   handleShowInfo = () => {
-    const { id, sessionId, logName } = this.props
-    const { pid } = this.state
+    const { id, sessionId, logName, tab } = this.props
     const infoProps = {
       logName,
       id,
-      pid,
+      pid: tab.id,
       sessionId,
       isRemote: this.isRemote(),
       isActive: this.isActiveTerminal()

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

@@ -68,14 +68,14 @@ class TermSearch extends PureComponent {
 
   prev = () => {
     const {
-      currentTabId,
+      activeTabId,
       termSearch,
       termSearchOptions
     } = this.props
     postMessage({
       action: terminalActions.doSearchPrev,
       keyword: termSearch,
-      currentTabId,
+      activeTabId,
       options: copy(termSearchOptions)
     })
   }
@@ -83,7 +83,7 @@ class TermSearch extends PureComponent {
   next = () => {
     postMessage({
       action: terminalActions.doSearchNext,
-      currentTabId: this.props.currentTabId,
+      activeTabId: this.props.activeTabId,
       keyword: this.props.termSearch,
       options: copy(this.props.termSearchOptions)
     })
@@ -97,7 +97,7 @@ class TermSearch extends PureComponent {
   clearSearch = () => {
     postMessage({
       action: terminalActions.clearSearch,
-      currentTabId: this.props.currentTabId
+      activeTabId: this.props.activeTabId
     })
   }
 

package/client/store/event.js

@@ -57,7 +57,7 @@ export default Store => {
     document.activeElement.select()
     postMessage({
       event: 'selectall',
-      id: window.store.currentTabId
+      id: window.store.activeTabId
     })
   }
 

package/client/store/index.js

@@ -88,10 +88,10 @@ class Store {
 
   get currentTab () {
     const {
-      currentTabId
+      activeTabId
     } = this
     const { tabs } = window.store
-    const tab = tabs.find(t => t.id === currentTabId)
+    const tab = tabs.find(t => t.id === activeTabId)
     if (!tab) {
       return false
     }

package/client/store/init-state.js

@@ -47,7 +47,7 @@ export default () => {
     loadTime: 0,
     lastDataUpdateTime: 0,
     tabs: [],
-    currentTabId: '',
+    activeTabId: '',
     _history: '[]',
     _bookmarks: '[]',
     _profiles: '[]',
@@ -95,10 +95,10 @@ export default () => {
     prevLayout: layout,
     resizeTrigger: 0,
     currentLayoutBatch: 0,
-    currentTabId0: '',
-    currentTabId1: '',
-    currentTabId2: '',
-    currentTabId3: '',
+    activeTabId0: '',
+    activeTabId1: '',
+    activeTabId2: '',
+    activeTabId3: '',
     _terminalInfoProps: '{}',
     rightPanelVisible: false,
     rightPanelPinned: false,

package/client/store/quick-command.js

@@ -38,7 +38,7 @@ export default Store => {
       action: terminalActions.quickCommand,
       cmd,
       inputOnly,
-      currentTabId: window.store.currentTabId
+      activeTabId: window.store.activeTabId
     })
   }
 

package/client/store/session.js

@@ -11,7 +11,7 @@ export default Store => {
     postMsg({
       action: terminalActions.zoom,
       zoomValue: delta > 0 ? 1 : -1,
-      currentTabId: window.store.currentTabId
+      activeTabId: window.store.activeTabId
     })
   }, 500)
 }

package/client/store/tab.js

@@ -60,10 +60,10 @@ export default Store => {
       const closingTab = tabs[i]
       if (closingTab.batch === targetBatch) {
         // Handle current tab closure
-        if (closingTab.id === store.currentTabId) {
-          store.currentTabId = id
-        } else if (closingTab.id === store[`currentTabId${targetBatch}`]) {
-          store[`currentTabId${targetBatch}`] = id
+        if (closingTab.id === store.activeTabId) {
+          store.activeTabId = id
+        } else if (closingTab.id === store[`activeTabId${targetBatch}`]) {
+          store[`activeTabId${targetBatch}`] = id
         }
 
         tabs.splice(i, 1)
@@ -71,7 +71,7 @@ export default Store => {
     }
   }
 
-  Store.prototype.reloadTab = function (tabId = window.store.currentTabId) {
+  Store.prototype.reloadTab = function (tabId = window.store.activeTabId) {
     const { store } = window
     const { tabs } = store
     const index = tabs.findIndex(t => t.id === tabId)
@@ -97,12 +97,12 @@ export default Store => {
     tabs.splice(index, 1)
 
     // Update current tab ID if needed
-    if (store.currentTabId === tabId) {
-      store.currentTabId = newTab.id
+    if (store.activeTabId === tabId) {
+      store.activeTabId = newTab.id
     }
 
     // Update batch current tab ID if needed
-    const batchProp = `currentTabId${oldTab.batch}`
+    const batchProp = `activeTabId${oldTab.batch}`
     if (store[batchProp] === tabId) {
       store[batchProp] = newTab.id
     }
@@ -130,8 +130,8 @@ export default Store => {
     tabs.splice(targetIndex + 1, 0, duplicatedTab)
 
     // Set the duplicated tab as current
-    store.currentTabId = duplicatedTab.id
-    store[`currentTabId${sourceTab.batch}`] = duplicatedTab.id
+    store.activeTabId = duplicatedTab.id
+    store[`activeTabId${sourceTab.batch}`] = duplicatedTab.id
   }
 
   Store.prototype.closeOtherTabs = function (id) {
@@ -146,11 +146,11 @@ export default Store => {
     for (let i = tabs.length - 1; i >= 0; i--) {
       const tab = tabs[i]
       if (tab.batch === currentBatch && tab.id !== id) {
-        if (tab.id === store.currentTabId) {
-          store.currentTabId = id
+        if (tab.id === store.activeTabId) {
+          store.activeTabId = id
         }
-        if (tab.id === store[`currentTabId${currentBatch}`]) {
-          store[`currentTabId${currentBatch}`] = id
+        if (tab.id === store[`activeTabId${currentBatch}`]) {
+          store[`activeTabId${currentBatch}`] = id
         }
         tabs.splice(i, 1)
       }
@@ -208,7 +208,7 @@ export default Store => {
     const store = window.store
     const removedSet = new Set(removedIds)
     const batchFirstTabs = {}
-    const currentIdNeedFix = removedSet.has(store.currentTabId)
+    const currentIdNeedFix = removedSet.has(store.activeTabId)
 
     // Get first valid tab for each batch
     for (const tab of remainingTabs) {
@@ -220,23 +220,23 @@ export default Store => {
     // If current tab was removed, we need to set a new one
     if (currentIdNeedFix) {
       // Try to find current batch's first tab
-      const currentTab = remainingTabs.find(t => t.id === store.currentTabId)
+      const currentTab = remainingTabs.find(t => t.id === store.activeTabId)
       const currentBatch = currentTab ? currentTab.batch : store.currentLayoutBatch
       const newCurrentId = batchFirstTabs[currentBatch] || batchFirstTabs[0] || ''
 
       if (newCurrentId) {
-        store.currentTabId = newCurrentId
+        store.activeTabId = newCurrentId
         // Also update the batch-specific current tab id
-        store[`currentTabId${currentBatch}`] = newCurrentId
+        store[`activeTabId${currentBatch}`] = newCurrentId
       } else {
         // No tabs left in any batch
-        store.currentTabId = ''
+        store.activeTabId = ''
       }
     }
 
     // Fix batch-specific current tab IDs
     for (const batch in batchFirstTabs) {
-      const batchTabId = `currentTabId${batch}`
+      const batchTabId = `activeTabId${batch}`
       const currentBatchId = store[batchTabId]
 
       // If the batch's current tab was removed or doesn't exist
@@ -284,10 +284,10 @@ export default Store => {
     store.currentLayoutBatch = batch
 
     // Update current tab id
-    store.currentTabId = id
+    store.activeTabId = id
 
     // Update batch-specific current tab id
-    store[`currentTabId${batch}`] = id
+    store[`activeTabId${batch}`] = id
   }
 
   Store.prototype.addTab = function (
@@ -304,8 +304,8 @@ export default Store => {
       tabs.push(newTab)
     }
     const batchNum = newTab.batch
-    store[`currentTabId${batchNum}`] = newTab.id
-    store.currentTabId = newTab.id
+    store[`activeTabId${batchNum}`] = newTab.id
+    store.activeTabId = newTab.id
     store.currentLayoutBatch = batchNum
   }
 
@@ -319,10 +319,10 @@ export default Store => {
 
   Store.prototype.clickBioTab = function (diff) {
     const { store } = window
-    const { tabs, currentTabId } = store
+    const { tabs, activeTabId } = store
 
     // Find the current tab index and its batch
-    const currentIndex = tabs.findIndex(t => t.id === currentTabId)
+    const currentIndex = tabs.findIndex(t => t.id === activeTabId)
     if (currentIndex === -1) return // Current tab not found, do nothing
 
     const currentBatch = tabs[currentIndex].batch
@@ -342,9 +342,9 @@ export default Store => {
     // Find the next tab index
     const nextIndex = findNextTabIndex(currentIndex, diff)
 
-    // If a valid next tab is found, update the currentTabId
+    // If a valid next tab is found, update the activeTabId
     if (nextIndex !== -1 && nextIndex !== currentIndex) {
-      store.currentTabId = tabs[nextIndex].id
+      store.activeTabId = tabs[nextIndex].id
     }
   }
 
@@ -376,7 +376,7 @@ export default Store => {
   Store.prototype.setLayout = function (layout) {
     const { store } = window
     const prevLayout = store.layout
-    const { currentTabId } = store
+    const { activeTabId } = store
 
     // If layout hasn't changed, do nothing
     if (prevLayout === layout) {
@@ -400,8 +400,8 @@ export default Store => {
         const tab = store.tabs[i]
         if (tab.batch >= newBatchCount) {
           store.tabs[i].batch = nb
-          if (tab.id === currentTabId) {
-            store[`currentTabId${nb}`] = currentTabId
+          if (tab.id === activeTabId) {
+            store[`activeTabId${nb}`] = activeTabId
           }
         }
       }

package/client/store/watch.js

@@ -20,7 +20,7 @@ export default store => {
   //   store.focus()
   //   // store.termSearchOpen = false
   //   store.termSearchMatchCount = 0
-  //   return store.currentTabId
+  //   return store.activeTabId
   // }).start()
 
   // autoRun(() => {
@@ -99,13 +99,13 @@ export default store => {
 
   autoRun(() => {
     const tabs = store.getTabs()
-    const { currentTabId } = store
-    const tab = tabs.find(t => t.id === currentTabId)
+    const { activeTabId } = store
+    const tab = tabs.find(t => t.id === activeTabId)
     if (tab) {
       const title = createTitle(tab)
       window.pre.runGlobalAsync('setTitle', title)
       window.store.currentLayoutBatch = tab.batch
     }
-    return store.currentTabId
+    return store.activeTabId
   }).start()
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.51.1",
+  "version": "1.51.3",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",