@electerm/electerm-react 3.2.0 → 3.3.8

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

@@ -2,6 +2,7 @@
  * tree list for bookmarks
  */
 
+import React from 'react'
 import { Component } from 'manate/react/class-components'
 import {
   CheckOutlined,
@@ -44,6 +45,7 @@ export default class ItemListTree extends Component {
       categoryColor: '',
       categoryId: ''
     }
+    this.treeRef = React.createRef()
   }
 
   onSubmit = false
@@ -102,9 +104,55 @@ export default class ItemListTree extends Component {
   }
 
   handleChange = keyword => {
-    this.setState({
-      keyword
+    this.setState({ keyword })
+  }
+
+  handleKeyDown = (e) => {
+    const { keyword } = this.state
+    if (!keyword) return
+
+    const treeContainer = this.treeRef.current
+    if (!treeContainer) return
+
+    const allItems = treeContainer.querySelectorAll('.tree-item')
+    const matchedItems = Array.from(allItems).filter(item => {
+      const isGroup = item.getAttribute('data-is-group') === 'true'
+      if (isGroup) return false
+      const title = item.querySelector('.tree-item-title')
+      if (!title) return false
+      const text = title.textContent || ''
+      return text.toLowerCase().includes(keyword.toLowerCase())
     })
+
+    if (matchedItems.length === 0) return
+
+    const currentSelected = treeContainer.querySelector('.tree-item.search-selected')
+    let currentIndex = -1
+    if (currentSelected) {
+      currentSelected.classList.remove('search-selected')
+      currentIndex = matchedItems.indexOf(currentSelected)
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const nextIndex = (currentIndex + 1) % matchedItems.length
+      matchedItems[nextIndex].classList.add('search-selected')
+      matchedItems[nextIndex].scrollIntoView({ block: 'nearest' })
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const nextIndex = currentIndex <= 0 ? matchedItems.length - 1 : currentIndex - 1
+      matchedItems[nextIndex].classList.add('search-selected')
+      matchedItems[nextIndex].scrollIntoView({ block: 'nearest' })
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const target = currentIndex >= 0 ? matchedItems[currentIndex] : matchedItems[0]
+      if (target) {
+        const titleEl = target.querySelector('.tree-item-title')
+        if (titleEl) {
+          titleEl.click()
+        }
+      }
+    }
   }
 
   handleCancelNew = () => {
@@ -298,8 +346,8 @@ export default class ItemListTree extends Component {
   onSelect = (
     e
   ) => {
-    const id = e.target.getAttribute('data-item-id')
-    const isGroup = e.target.getAttribute('data-is-group') === 'true'
+    const id = e.currentTarget.getAttribute('data-item-id')
+    const isGroup = e.currentTarget.getAttribute('data-is-group') === 'true'
     const { store } = window
     if (isGroup) {
       store.storeAssign({
@@ -329,6 +377,8 @@ export default class ItemListTree extends Component {
         <TreeSearch
           onSearch={this.handleChange}
           keyword={this.state.keyword}
+          autoFocus={this.props.autoFocus}
+          onKeyDown={this.handleKeyDown}
         />
       </div>
     )
@@ -717,6 +767,35 @@ export default class ItemListTree extends Component {
   renderGroup = (group, index, parentId) => {
     const pids = typeof parentId === 'string' ? parentId : ''
     const pid = pids + '#' + group.id
+    const { bookmarkIds = [], bookmarkGroupIds = [] } = group
+
+    const hasMatchedItems = (ids) => {
+      const tree = this.props.bookmarksMap
+      const { keyword } = this.state
+      return ids.some(id => {
+        const item = tree.get(id)
+        return item && createName(item).toLowerCase().includes(keyword.toLowerCase())
+      })
+    }
+
+    const hasMatchedSubGroup = (bg) => {
+      const bgIds = bg.bookmarkIds || []
+      const bgSubIds = bg.bookmarkGroupIds || []
+      if (hasMatchedItems(bgIds)) return true
+      return bgSubIds.some(sgid => {
+        const subBg = window.store.bookmarkGroupTree[sgid]
+        return subBg && hasMatchedSubGroup(subBg)
+      })
+    }
+
+    if (this.state.keyword) {
+      if (!hasMatchedItems(bookmarkIds) && !bookmarkGroupIds.some(id => {
+        const sg = window.store.bookmarkGroupTree[id]
+        return sg && hasMatchedSubGroup(sg)
+      })) {
+        return null
+      }
+    }
     return (
       <div key={group.id} className='group-container'>
         {
@@ -803,9 +882,14 @@ export default class ItemListTree extends Component {
     if (!shouldRender) {
       return null
     }
+    const subGroups = this.renderSubGroup(bookmarkGroupIds, parentId)
+    const childs = this.renderChilds(bookmarkIds, parentId)
+    if (this.state.keyword && subGroups.length === 0 && childs.length === 0) {
+      return null
+    }
     return [
-      ...this.renderSubGroup(bookmarkGroupIds, parentId),
-      ...this.renderChilds(bookmarkIds, parentId)
+      ...subGroups,
+      ...childs
     ]
   }
 
@@ -851,12 +935,33 @@ export default class ItemListTree extends Component {
       listStyle = {}
     } = this.props
     const level1Bookgroups = ready
-      ? bookmarkGroups.filter(
-        d => !d.level || d.level < 2
-      )
+      ? bookmarkGroups.filter(d => {
+        if (!d.level || d.level < 2) {
+          if (this.state.keyword) {
+            const hasMatchedItemsRecursive = (bg) => {
+              const ids = bg.bookmarkIds || []
+              const subIds = bg.bookmarkGroupIds || []
+              const tree = this.props.bookmarksMap
+              const { keyword } = this.state
+              const hasMatch = ids.some(id => {
+                const item = tree.get(id)
+                return item && createName(item).toLowerCase().includes(keyword.toLowerCase())
+              })
+              if (hasMatch) return true
+              return subIds.some(sgid => {
+                const subBg = window.store.bookmarkGroupTree[sgid]
+                return subBg && hasMatchedItemsRecursive(subBg)
+              })
+            }
+            return hasMatchedItemsRecursive(d)
+          }
+          return true
+        }
+        return false
+      })
       : []
     return (
-      <div className={`tree-list item-type-${type}`}>
+      <div className={`tree-list item-type-${type}`} ref={this.treeRef}>
         <div className='tree-list-header'>
           {
             staticList

package/client/components/tree-list/tree-list.styl

@@ -18,6 +18,9 @@
     .tree-item-title
       font-weight bold
       font-size 14px
+
+  &.search-selected
+    outline 1px dashed var(--primary)
   &.selected
   &.item-dragover
   &:hover

package/client/components/tree-list/tree-search.jsx

@@ -3,7 +3,7 @@ import { debounce } from 'lodash-es'
 import Search from '../common/search'
 import runIdle from '../../common/run-idle'
 
-export default memo(function TreeSearchComponent ({ onSearch, keyword }) {
+export default memo(function TreeSearchComponent ({ onSearch, keyword, autoFocus, onKeyDown }) {
   const [searchTerm, setSearchTerm] = useState(keyword)
 
   const performSearch = debounce((term) => {
@@ -18,11 +18,19 @@ export default memo(function TreeSearchComponent ({ onSearch, keyword }) {
     performSearch(term)
   }
 
+  const handleKeyDown = (e) => {
+    if (onKeyDown) {
+      onKeyDown(e)
+    }
+  }
+
   return (
     <Search
       onChange={handleChange}
+      onKeyDown={handleKeyDown}
       value={searchTerm}
       allowClear
+      autoFocus={autoFocus}
     />
   )
 })

package/client/components/widgets/widget-form.jsx

@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react'
 import { Form, Input, InputNumber, Switch, Select, Button, Tooltip, Alert } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'
+import BatchOpEditor from '../batch-op/batch-op-editor'
 
 export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInstance }) {
   const [form] = Form.useForm()
@@ -33,6 +34,7 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
   const { info } = widget
   const { configs, type, singleInstance } = info
   const isInstanceWidget = type === 'instance'
+  const isFrontendWidget = type === 'frontend'
   const txt = isInstanceWidget ? 'Start widget' : 'Run widget'
   const isDisabled = loading || (singleInstance && hasRunningInstance)
 
@@ -112,6 +114,10 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
     return acc
   }, {})
 
+  if (isFrontendWidget && info.name === 'Batch Operation') {
+    return <BatchOpEditor widget={widget} />
+  }
+
   return (
     <div className='widget-form'>
       <div className='pd1b alignright'>

package/client/store/common.js

@@ -6,7 +6,6 @@ import handleError from '../common/error-handler'
 import Modal from '../components/common/modal'
 import { debounce, some, get, pickBy } from 'lodash-es'
 import {
-  modals,
   leftSidebarWidthKey,
   rightSidebarWidthKey,
   addPanelWidthLsKey,
@@ -95,33 +94,6 @@ export default Store => {
     window.store['_' + name] = JSON.stringify(value)
   }
 
-  Store.prototype.toggleBatchOp = function () {
-    window.store.showModal = window.store.showModal === modals.batchOps ? modals.hide : modals.batchOps
-  }
-
-  Store.prototype.runBatchOp = function (path) {
-    window.store.showModal = modals.batchOps
-    async function updateText () {
-      const text = await window.fs.readFile(path)
-      refsStatic.get('batch-op')?.setState({
-        text
-      })
-    }
-    function queue () {
-      refsStatic.get('batch-op')?.handleClick()
-    }
-    function run () {
-      refsStatic.get('batch-op')?.handleExec()
-    }
-    try {
-      setTimeout(updateText, 2000)
-      setTimeout(queue, 3000)
-      setTimeout(run, 4000)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
   Store.prototype.setSettingItem = function (v) {
     window.store.settingItem = v
   }

package/client/store/load-data.js

@@ -7,12 +7,12 @@ import parseInt10 from '../common/parse-int10'
 import { infoTabs, statusMap, defaultEnvLang } from '../common/constants'
 import fs from '../common/fs'
 import generate from '../common/id-with-stamp'
+import { refsStatic } from '../components/common/ref'
 import defaultSettings from '../common/default-setting'
 import encodes from '../components/bookmark-form/common/encodes'
 import { initWsCommon } from '../common/fetch-from-server'
 import safeParse from '../common/parse-json-safe'
 import initWatch from './watch'
-import { refsStatic } from '../components/common/ref'
 import { parseQuickConnect } from '../common/parse-quick-connect'
 
 function getHost (argv, opts) {
@@ -108,8 +108,8 @@ export async function addTabFromCommandLine (store, opts) {
   ) {
     window.initFolder = options.initFolder
   }
-  if (options && options.batchOp) {
-    window.store.runBatchOp(options.batchOp)
+  if (options.batchOp) {
+    refsStatic.get('batch-op-runner')?.runBatchOpFromFile(options.batchOp)
   }
 }
 

package/client/store/mcp-handler.js

@@ -625,7 +625,7 @@ export default Store => {
       throw new Error('remotePath is required')
     }
 
-    window._transferConflictPolicy = args.conflictPolicy || 'overwrite'
+    window._transferConflictPolicy = args.conflictPolicy || 'mergeOrOverwriteAll'
 
     const fromFile = await getLocalFileInfo(localPath)
     const transferItem = {
@@ -670,7 +670,7 @@ export default Store => {
       throw new Error('localPath is required')
     }
 
-    window._transferConflictPolicy = args.conflictPolicy || 'overwrite'
+    window._transferConflictPolicy = args.conflictPolicy || 'mergeOrOverwriteAll'
 
     const fromFile = await getRemoteFileInfo(sftp, remotePath)
     const transferItem = {

package/client/store/sync.js

@@ -176,6 +176,30 @@ export default (Store) => {
     window.onSyncAll = false
   }
 
+  Store.prototype.downloadSettingAll = async function () {
+    const { store, onSyncAll } = window
+    if (store.autoSyncReady === false) {
+      return
+    }
+    if (onSyncAll) {
+      return
+    }
+    window.onSyncAll = true
+    const types = Object.keys(syncTypes)
+    for (const type of types) {
+      const gistId = store.getSyncGistId(type)
+      if (type === syncTypes.webdav) {
+        const serverUrl = get(window.store.config, 'syncSetting.webdavServerUrl')
+        if (serverUrl) {
+          await store.downloadSetting(type)
+        }
+      } else if (gistId) {
+        await store.downloadSetting(type)
+      }
+    }
+    window.onSyncAll = false
+  }
+
   Store.prototype.uploadSetting = async function (type) {
     if (window[type + 'IsSyncing']) {
       return false
@@ -561,7 +585,7 @@ export default (Store) => {
 
   Store.prototype.handleAutoSync = function (v) {
     const { store } = window
-    store.setConfig({
+    store.updateSyncSetting({
       autoSync: v
     })
   }

package/client/store/tab.js

@@ -509,7 +509,7 @@ export default Store => {
       'autoReConnect'
     ]
     const { history } = store
-    const index = history.findIndex(d => {
+    const index = history.filter(d => d.id && d.tab).findIndex(d => {
       for (const key in tab) {
         if (tabPropertiesExcludes.includes(key)) {
           continue

package/client/store/watch.js

@@ -20,22 +20,6 @@ import { refsStatic } from '../components/common/ref'
 import dataCompare from '../common/data-compare'
 
 export default store => {
-  // autoRun(() => {
-  //   store.focus()
-  //   // store.termSearchOpen = false
-  //   store.termSearchMatchCount = 0
-  //   return store.activeTabId
-  // }).start()
-
-  // autoRun(() => {
-  //   if (store.menuOpened) {
-  //     store.initMenuEvent()
-  //   } else {
-  //     store.onCloseMenu()
-  //   }
-  //   return store.menuOpened
-  // })
-
   for (const name of dbNamesForWatch) {
     window[`watch${name}`] = autoRun(async () => {
       if (window.migrating) {
@@ -68,8 +52,16 @@ export default store => {
         )
       }
       await store.updateLastDataUpdateTime()
-      if (store.config.autoSync && dbNamesForSync.includes(name)) {
-        await store.uploadSettingAll()
+      if (dbNamesForSync.includes(name)) {
+        const syncSetting = store.config.syncSetting || {}
+        const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
+        if (autoSync && autoSyncInterval === 0) {
+          if (autoSyncDirection === 'download') {
+            await store.downloadSettingAll()
+          } else {
+            await store.uploadSettingAll()
+          }
+        }
       }
       return store[name]
     })

package/client/views/index.pug

@@ -33,8 +33,7 @@ html
       }
 
     - if (!isDev)
-      link(rel='stylesheet', href='css/' + version + '-basic.css')
-      link(rel='stylesheet', href='css/' + version + '-electerm.css')
+      link(rel='stylesheet', href='css/style-' + version + '.css')
       style(id='theme-css').
       style(id='custom-css').
   body

package/package.json

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