@electerm/electerm-react 2.13.6 → 2.15.8

package/client/components/bg/custom-css.jsx

@@ -2,16 +2,14 @@
  * ui theme
  */
 
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'custom-css'
 
 export default function CustomCss (props) {
   const { customCss } = props
-
-  const delta = useDelta(customCss)
+  const prevRef = useRef(null)
 
   async function applyTheme () {
     const style = document.getElementById(themeDomId)
@@ -21,8 +19,13 @@ export default function CustomCss (props) {
   useEffect(() => {
     applyTheme()
   }, [])
-  useConditionalEffect(() => {
-    applyTheme()
-  }, delta && !eq(delta.prev, delta.curr))
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, customCss)) {
+      applyTheme()
+    }
+    prevRef.current = customCss
+  }, [customCss])
+
   return null
 }

package/client/components/common/notification.jsx

@@ -59,7 +59,7 @@ export function NotificationContainer () {
       {nots.map(notif => (
         <NotificationItem
           key={notif.key}
-          message={notif.message}
+          message={notif.message || notif.type}
           description={notif.description}
           type={notif.type}
           duration={notif.duration}

package/client/components/common/opacity.jsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 
 const opacityDomId = 'opacity-style'
@@ -14,7 +13,7 @@ const opacityDomId = 'opacity-style'
 export default function Opacity ({ opacity }) {
   // Default to 1 if opacity is not provided
   const currentOpacity = opacity !== undefined ? opacity : 1
-  const delta = useDelta(currentOpacity)
+  const prevRef = useRef(null)
 
   function applyOpacity () {
     let styleElement = document.getElementById(opacityDomId)
@@ -58,9 +57,12 @@ export default function Opacity ({ opacity }) {
     }
   }, [])
 
-  useConditionalEffect(() => {
-    applyOpacity()
-  }, delta && !eq(delta.prev, delta.curr))
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, currentOpacity)) {
+      applyOpacity()
+    }
+    prevRef.current = currentOpacity
+  }, [currentOpacity])
 
   return null
 }

package/client/components/main/ui-theme.jsx

@@ -2,8 +2,7 @@
  * ui theme
  */
 
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 import isColorDark from '../../common/is-color-dark'
 
@@ -53,7 +52,7 @@ function buildTheme (themeConfig) {
 export default function UiTheme (props) {
   const { themeConfig } = props
 
-  const delta = useDelta(themeConfig)
+  const prevRef = useRef(null)
 
   async function applyTheme () {
     const style = document.getElementById(themeDomId)
@@ -64,8 +63,13 @@ export default function UiTheme (props) {
   useEffect(() => {
     applyTheme()
   }, [])
-  useConditionalEffect(() => {
-    applyTheme()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, themeConfig)) {
+      applyTheme()
+    }
+    prevRef.current = themeConfig
+  }, [themeConfig])
+
   return null
 }

package/client/components/profile/profile-list.jsx

@@ -28,7 +28,7 @@ export default class ProfileList extends List {
     const { activeItemId } = this.props
     const { name, id } = item
     const cls = classnames(
-      'item-list-unit theme-item',
+      'item-list-unit',
       {
         active: activeItemId === id
       }

package/client/components/quick-commands/quick-commands-list.jsx

@@ -63,7 +63,7 @@ export default class QuickCommandsList extends List {
     const { activeItemId } = this.props
     const { name, id } = item
     const cls = classnames(
-      'item-list-unit theme-item',
+      'item-list-unit',
       {
         active: activeItemId === id
       }

package/client/components/setting-panel/list.styl

@@ -36,6 +36,13 @@
     .list-item-remove
     .list-item-bookmark
       display block
+.theme-item:hover
+    .list-item-remove
+      right 24px
+.setting-tabs-setting
+  .item-list-unit
+    .list-item-remove
+      display none
 // .item-list
 //   .list-item-edit
 //   .list-item-apply

package/client/components/setting-sync/setting-sync-form.jsx

@@ -5,7 +5,7 @@
 /**
  * bookmark form
  */
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
 import { Button, Input, Form, Alert } from 'antd'
 import { notification } from '../common/notification'
@@ -27,10 +27,15 @@ function trim (str) {
 
 export default function SyncForm (props) {
   const [form] = Form.useForm()
-  const delta = useDelta(props.formData)
-  useConditionalEffect(() => {
-    form.resetFields()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  const prevRef = useRef(null)
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, props.formData)) {
+      form.resetFields()
+    }
+    prevRef.current = props.formData
+  }, [props.formData])
+
   const { syncType } = props
   function disabled () {
     if (syncType === syncTypes.cloud) {

package/client/components/ssh-config/load-ssh-configs-item.jsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import {
+  Input
+} from 'antd'
+import {
+  EditOutlined,
+  DeleteOutlined,
+  CheckOutlined,
+  CloseOutlined
+} from '@ant-design/icons'
+
+const { TextArea } = Input
+
+export default function LoadSshConfigsItem (props) {
+  const { item, index, onDelete, onUpdate } = props
+  const [isEditing, setIsEditing] = useState(false)
+  const [editValue, setEditValue] = useState(JSON.stringify(item, null, 2))
+
+  const handleToggleEdit = function () {
+    if (isEditing) {
+      try {
+        const parsed = JSON.parse(editValue)
+        onUpdate(index, parsed)
+      } catch (err) {
+        console.error('Invalid JSON:', err)
+        setEditValue(JSON.stringify(item, null, 2))
+      }
+    } else {
+      setEditValue(JSON.stringify(item, null, 2))
+    }
+    setIsEditing(!isEditing)
+  }
+
+  const handleDelete = function () {
+    onDelete(index)
+  }
+
+  const handleCancelEdit = function () {
+    setEditValue(JSON.stringify(item, null, 2))
+    setIsEditing(false)
+  }
+
+  function renderActions () {
+    if (isEditing) {
+      return [
+        <CheckOutlined
+          className='mg1r pointer icon-success'
+          onClick={handleToggleEdit}
+          key='confirm-ssh-config-item'
+        />,
+        <CloseOutlined
+          className='mg1r pointer icon-warning'
+          onClick={handleCancelEdit}
+          key='cancel-ssh-config-item'
+        />
+      ]
+    }
+    return [
+      <EditOutlined
+        className='mg1r pointer ssh-config-item-edit-icon'
+        onClick={handleToggleEdit}
+        key='edit-ssh-config-item'
+      />,
+      <DeleteOutlined
+        className='pointer icon-danger ssh-config-item-delete-icon'
+        onClick={handleDelete}
+        key='del-ssh-config-item'
+      />
+    ]
+  }
+
+  function renderContent () {
+    if (isEditing) {
+      return (
+        <TextArea
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          rows={10}
+          className='mg1t'
+        />
+      )
+    }
+    return (
+      <pre className='ssh-config-item-content'>
+        {JSON.stringify(item, null, 2)}
+      </pre>
+    )
+  }
+
+  return (
+    <div className='ssh-config-item pd1'>
+      <div className='pd1b ssh-config-item-header'>
+        <b className='mg1r'>[{index + 1}]</b>
+        {renderActions()}
+      </div>
+      {renderContent()}
+    </div>
+  )
+}

package/client/components/ssh-config/load-ssh-configs.jsx

@@ -5,18 +5,20 @@ import {
   Empty
 } from 'antd'
 import { useState, useEffect } from 'react'
-import SshConfigItem from './ssh-config-item'
 import * as ls from '../../common/safe-local-storage'
 import {
   sshConfigLoadKey
 } from '../../common/constants'
 import { ReloadOutlined } from '@ant-design/icons'
+import LoadSshConfigsItem from './load-ssh-configs-item'
+import './ssh-config.styl'
 
 const e = window.translate
 
 export default function LoadSshConfigs (props) {
   const [loading, setLoading] = useState(false)
   const { sshConfigs } = props
+  const [localConfigs, setLocalConfigs] = useState([])
 
   const {
     store
@@ -24,6 +26,11 @@ export default function LoadSshConfigs (props) {
   const {
     showSshConfigModal
   } = props
+
+  useEffect(() => {
+    setLocalConfigs(sshConfigs)
+  }, [sshConfigs])
+
   const handleCancel = function () {
     store.showSshConfigModal = false
   }
@@ -35,21 +42,43 @@ export default function LoadSshConfigs (props) {
 
   const handleLoadSshConfig = function () {
     store.showSshConfigModal = false
-    store.addSshConfigs(sshConfigs)
+    store.addSshConfigs(localConfigs)
     ls.setItem(sshConfigLoadKey, 'yes')
   }
 
+  const handleDeleteItem = function (index) {
+    const newConfigs = [...localConfigs]
+    newConfigs.splice(index, 1)
+    setLocalConfigs(newConfigs)
+  }
+
+  const handleUpdateItem = function (index, newItem) {
+    const newConfigs = [...localConfigs]
+    newConfigs[index] = newItem
+    setLocalConfigs(newConfigs)
+  }
+
   const renderList = function () {
-    if (!sshConfigs.length) {
+    if (!localConfigs.length) {
       return (
         <Empty />
       )
     }
-    return sshConfigs.map((d, i) => {
-      return (
-        <SshConfigItem item={d} key={d.title} />
-      )
-    })
+    return (
+      <div className='pd1b ssh-config-list'>
+        {
+          localConfigs.map((item, index) => (
+            <LoadSshConfigsItem
+              key={index}
+              item={item}
+              index={index}
+              onDelete={handleDeleteItem}
+              onUpdate={handleUpdateItem}
+            />
+          ))
+        }
+      </div>
+    )
   }
 
   useEffect(() => {
@@ -89,7 +118,7 @@ export default function LoadSshConfigs (props) {
             type='primary'
             className='mg1r mg1b'
             onClick={handleLoadSshConfig}
-            disabled={!sshConfigs.length || loading}
+            disabled={!localConfigs.length || loading}
           >
             {e('import')}
           </Button>

package/client/components/ssh-config/ssh-config.styl

@@ -0,0 +1,3 @@
+.ssh-config-list
+  max-height 60vh
+  overflow auto

package/client/components/terminal/transfer-client-base.js

@@ -107,6 +107,34 @@ export class TransferClientBase {
     this.writeToTerminal(`\x1b[32m\x1b[1m${this.getProtocolDisplayName()}::${type}::START\x1b[0m\r\n`)
   }
 
+  /**
+   * Write progress bar to terminal
+   * @param {Object} options - Progress options
+   * @param {string} options.name - File name
+   * @param {number} options.size - Total size in bytes
+   * @param {number} options.transferred - Transferred bytes
+   * @param {number} options.speed - Transfer speed in bytes/s
+   * @param {boolean} options.isComplete - Whether transfer is complete
+   * @param {Function} options.formatSize - Function to format size
+   * @returns {string} The progress string written to terminal
+   */
+  writeProgressBar ({ name, size, transferred, speed, isComplete = false, formatSize = (b) => b }) {
+    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
+    const barWidth = 30
+    const filledWidth = Math.floor(percent / 100 * barWidth)
+    const emptyWidth = barWidth - filledWidth
+
+    const bar = '\x1b[32m' + '\u2588'.repeat(filledWidth) + '\x1b[90m' + '\u2591'.repeat(emptyWidth) + '\x1b[0m'
+
+    const sizeStr = `${formatSize(transferred)}/${formatSize(size)}`
+    const speedStr = speed > 0 ? `, ${formatSize(speed)}/s` : ''
+    const doneStr = isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''
+
+    const str = `\r\x1b[2K\x1b[32m${name}\x1b[0m: ${percent}% ${bar} ${sizeStr}${speedStr}${doneStr}`
+    this.writeToTerminal(str + '\r')
+    return str
+  }
+
   /**
    * Get protocol display name
    * Should be overridden by subclass

package/client/components/terminal/trzsz-client.js

@@ -230,20 +230,18 @@ export class TrzszClient extends TransferClientBase {
     if (!this.currentTransfer || !this.terminal?.term) return
 
     const { name, size, transferred, path, serverSpeed } = this.currentTransfer
-    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
-
-    // Use server's speed if available, otherwise calculate locally
     const speed = serverSpeed || 0
-
-    // Use full path if available, otherwise just name
     const displayName = path || name
-
-    // filesize expects bytes and formats to human readable
     const formatSize = (bytes) => filesize(bytes)
 
-    // Clear line and write progress
-    const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
-    this.writeToTerminal(str + '\r')
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
   }
 
   /**

package/client/components/terminal/zmodem-client.js

@@ -212,20 +212,18 @@ export class ZmodemClient extends TransferClientBase {
     if (!this.currentTransfer || !this.terminal?.term) return
 
     const { name, size, transferred, path, serverSpeed } = this.currentTransfer
-    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
-
-    // Use server's speed if available, otherwise calculate locally
     const speed = serverSpeed || 0
-
-    // Use full path if available, otherwise just name
     const displayName = path || name
-
-    // filesize expects bytes and formats to human readable
     const formatSize = (bytes) => filesize(bytes)
 
-    // Clear line and write progress
-    const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
-    this.writeToTerminal(str + '\r')
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
   }
 }
 

package/client/components/text-editor/simple-editor.jsx

@@ -18,6 +18,11 @@ export default function SimpleEditor (props) {
 
   // When currentMatch changes, highlight the match in textarea
   useEffect(() => {
+    // Only process navigation when explicitly triggered (not when text changes)
+    if (!isNavigating) {
+      return
+    }
+
     if (currentMatch >= 0 && occurrences.length > 0) {
       const match = occurrences[currentMatch]
       if (editorRef.current) {
@@ -26,10 +31,8 @@ export default function SimpleEditor (props) {
         // Set selection range to select the matched text
         textarea.setSelectionRange(match.start, match.end)
 
-        // Only focus the textarea when explicitly navigating between matches
-        if (isNavigating) {
-          textarea.focus()
-        }
+        // Focus the textarea when explicitly navigating between matches
+        textarea.focus()
 
         // Scroll to the selection position
         // Use setTimeout to ensure the selection is rendered before scrolling
@@ -53,10 +56,17 @@ export default function SimpleEditor (props) {
     setIsNavigating(false)
   }, [currentMatch, occurrences])
 
-  // Auto-search when keyword changes
+  // Auto-search when keyword changes (but not when text is being edited)
   useEffect(() => {
+    // Set navigating to true so first match is highlighted when searching
+    setIsNavigating(true)
     findMatches()
-  }, [searchKeyword, props.value])
+  }, [searchKeyword])
+
+  // Update matches when text changes, but don't change currentMatch position
+  useEffect(() => {
+    updateMatchesOnly()
+  }, [props.value])
 
   // Copy the editor content to clipboard
   const copyEditorContent = () => {
@@ -87,6 +97,28 @@ export default function SimpleEditor (props) {
     setCurrentMatch(matches.length ? 0 : -1)
   }
 
+  // Update matches only (without changing currentMatch position)
+  const updateMatchesOnly = () => {
+    if (!searchKeyword) {
+      setOccurrences([])
+      return
+    }
+
+    const matches = []
+    const text = props.value || ''
+    const escapedKeyword = escapeRegExp(searchKeyword)
+    const regex = new RegExp(escapedKeyword, 'gi')
+    let match
+
+    while ((match = regex.exec(text)) !== null) {
+      matches.push({
+        start: match.index,
+        end: match.index + searchKeyword.length
+      })
+    }
+    setOccurrences(matches)
+  }
+
   // Handle search action when user presses enter or clicks the search button
   const handleSearch = (e) => {
     if (e && e.stopPropagation) {

package/client/store/bookmark.js

@@ -33,18 +33,10 @@ export default Store => {
       return {
         term: 'xterm-256color',
         id: uid(),
-        type: 'local',
-        title: 'ssh config: ' + t.title,
+        type: 'ssh',
         color: '#0088cc',
-        runScripts: [
-          {
-            script: `ssh ${t.title}`,
-            delay: 500
-          }
-        ]
+        ...t
       }
-    }).filter(d => {
-      return !store.bookmarks.find(t => t.title === d.title)
     })
     const ids = bookmarksToAdd.map(d => d.id)
     let sshConfigGroup = store.bookmarkGroups.find(d => d.id === 'sshConfig')
@@ -61,7 +53,7 @@ export default Store => {
           ...ids,
           ...(sshConfigGroup.bookmarkIds || [])
         ]
-      })
+      }, 'bookmarkGroups')
     }
     return store.addItems(bookmarksToAdd, 'bookmarks')
   }

package/client/store/sync.js

@@ -35,9 +35,8 @@ async function fetchData (type, func, args, token, proxy) {
 }
 
 function updateSyncServerStatusFromGist (store, gist, type) {
-  const status = parseJsonSafe(
-    get(gist, 'files["electerm-status.json"].content')
-  )
+  const statusContent = get(gist, 'files["electerm-status.json"].content')
+  const status = statusContent ? parseJsonSafe(statusContent) : undefined
   store.syncServerStatus[type] = status
 }
 

package/package.json

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

package/client/components/ssh-config/ssh-config-item.jsx

@@ -1,24 +0,0 @@
-import { Tooltip } from 'antd'
-
-export default function SshConfigItem (props) {
-  const { item } = props
-
-  const generateTooltipContent = (item) => {
-    return Object.entries(item)
-      .filter(([key]) => key !== 'id')
-      .map(([key, value]) => (
-        <div key={key}>
-          <b className='mg1r'>{key}:</b>
-          <span>{value}</span>
-        </div>
-      ))
-  }
-
-  return (
-    <Tooltip title={generateTooltipContent(item)}>
-      <div className='elli pd1y pd2x'>
-        ssh {item.title}
-      </div>
-    </Tooltip>
-  )
-}