@electerm/electerm-react 1.72.18 → 1.72.26

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

@@ -4,14 +4,22 @@ import {
 } from 'antd'
 
 export default function InputAutoFocus (props) {
-  const { type, ...rest } = props
+  const { type, selectall = false, ...rest } = props
   const inputRef = useRef(null)
+  const isFirstRender = useRef(true)
 
   useEffect(() => {
     if (inputRef.current) {
-      inputRef.current.focus()
+      const { value } = props
+      if (value && selectall && isFirstRender.current) {
+        inputRef.current.focus()
+        inputRef.current.setSelectionRange(0, value.length)
+        isFirstRender.current = false
+      } else {
+        inputRef.current.focus()
+      }
     }
-  }, [props.value])
+  }, [props.value, props.selectall])
 
   let InputComponent
   switch (type) {

package/client/components/session/session.jsx

@@ -30,8 +30,7 @@ import {
   terminalRdpType,
   terminalVncType,
   terminalWebType,
-  terminalTelnetType,
-  splitMap
+  terminalTelnetType
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
@@ -521,7 +520,6 @@ export default class SessionWrapper extends Component {
 
   renderBroadcastIcon = () => {
     if (
-      this.props.layout === splitMap.c1 ||
       this.isSshDisabled()
     ) {
       return null

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

@@ -60,15 +60,14 @@ export default class TermSearch extends PureComponent {
     setTimeout(window.store.focus, 200)
   }
 
-  prev = () => {
+  prev = (v = this.props.termSearch) => {
     const {
       activeTabId,
-      termSearch,
       termSearchOptions
     } = this.props
     refs.get('term-' + activeTabId)
       ?.searchPrev(
-        termSearch,
+        v,
         copy(termSearchOptions)
       )
   }
@@ -82,13 +81,18 @@ export default class TermSearch extends PureComponent {
   }
 
   handleChange = e => {
-    window.store.termSearch = e.target.value
-    this.prev()
+    const v = e.target.value
+    window.store.termSearch = v
+    this.prev(v)
   }
 
   clearSearch = () => {
-    refs.get('term-' + this.props.activeTabId)
-      ?.searchAddon.clearDecorations()
+    const term = refs.get('term-' + this.props.activeTabId)
+    term?.searchAddon.clearDecorations()
+    term.setState({
+      searchResults: [],
+      matchIndex: -1
+    })
   }
 
   close = () => {
@@ -201,7 +205,8 @@ export default class TermSearch extends PureComponent {
       onChange: this.handleChange,
       suffix: this.renderSuffix(),
       onPressEnter: this.next,
-      addonAfter: this.renderAfter()
+      addonAfter: this.renderAfter(),
+      selectall: true
     }
     return (
       <div className='term-search-wrap'>

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

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from 'react'
+
+export default function SearchResultBar ({
+  matches,
+  totalLines,
+  matchIndex,
+  height
+}) {
+  const canvasRef = useRef(null)
+  const drawSearchResults = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const container = canvas.parentElement
+    const containerHeight = container.clientHeight
+    const dpr = window.devicePixelRatio || 1
+
+    // Set both canvas dimensions and style
+    canvas.height = containerHeight * dpr
+    canvas.width = 16 * dpr
+
+    const ctx = canvas.getContext('2d')
+    // Scale the context to account for the pixel ratio
+    ctx.scale(dpr, dpr)
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    matches.forEach((match, index) => {
+      const y = (match / totalLines) * containerHeight
+      ctx.fillStyle = index === matchIndex ? 'rgba(243, 67, 9, 0.5)' : 'rgba(243, 196, 9, 0.5)'
+      ctx.fillRect(0, y, 16, 2)
+    })
+  }
+
+  useEffect(() => {
+    drawSearchResults()
+  }, [matches, totalLines, matchIndex])
+
+  if (!matches.length) {
+    return null
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className='term-search-bar'
+    />
+  )
+}

package/client/components/terminal/terminal.jsx

@@ -52,6 +52,7 @@ import * as fs from './fs.js'
 import iconsMap from '../sys-menu/icons-map.jsx'
 import { refs, refsStatic } from '../common/ref.js'
 import createDefaultLogPath from '../../common/default-log-path.js'
+import SearchResultBar from './terminal-search-bar'
 
 const e = window.translate
 
@@ -64,7 +65,10 @@ class Term extends Component {
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
       passType: 'password',
-      lines: []
+      lines: [],
+      searchResults: [],
+      matchIndex: -1,
+      totalLines: 0
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -703,6 +707,20 @@ clear\r`
       termSearchMatchCount: resultCount,
       termSearchMatchIndex: resultIndex
     })
+
+    this.updateSearchResults(resultIndex)
+  }
+
+  updateSearchResults = (resultIndex) => {
+    const matches = this.searchAddon._highlightDecorations.map((highlight, i) => {
+      return highlight.match.row
+    })
+
+    this.setState({
+      searchResults: matches,
+      matchIndex: resultIndex,
+      totalLines: this.term.buffer.active.length
+    })
   }
 
   searchPrev = (searchInput, options) => {
@@ -1161,10 +1179,7 @@ clear\r`
   }
 
   canReceiveBroadcast = (termRef) => {
-    const tabId = termRef.props?.tab?.id
-    const isActiveInBatch = termRef.props.currentBatchTabId === tabId
     return (
-      isActiveInBatch &&
       termRef.socket &&
       termRef.props?.tab.pane === paneMap.terminal
     )
@@ -1349,6 +1364,12 @@ clear\r`
       },
       trigger: this.props.config.pasteWhenContextMenu ? [] : ['contextMenu']
     }
+    const barProps = {
+      matchIndex: this.state.matchIndex,
+      matches: this.state.searchResults,
+      totalLines: this.state.totalLines,
+      height
+    }
     return (
       <Dropdown {...dropdownProps}>
         <div
@@ -1361,6 +1382,7 @@ clear\r`
             lines={this.state.lines}
             close={this.closeNormalBuffer}
           />
+          <SearchResultBar {...barProps} />
           <Spin className='loading-wrapper' spinning={loading} />
         </div>
       </Dropdown>

package/client/components/terminal/terminal.styl

@@ -135,3 +135,11 @@
 .suggestion-delete
   margin-left 5px
   visibility hidden
+
+.term-search-bar
+  position absolute
+  right 0
+  top 0
+  bottom 0
+  background transparent
+  width 16px

package/package.json

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