@electerm/electerm-react 1.39.109 → 1.39.119

package/client/components/bookmark-form/bookmark-select.jsx

@@ -0,0 +1,96 @@
+// bookmark select tree
+import createTitle from '../../common/create-title'
+import { TreeSelect } from 'antd'
+
+const e = window.translate
+
+function buildTreeData (bookmarkGroups, tree) {
+  const cats = bookmarkGroups
+  const btree = cats
+    .reduce((p, k) => {
+      return {
+        ...p,
+        [k.id]: k
+      }
+    }, {})
+  function buildSubCats (id) {
+    const x = btree[id]
+    if (!x) {
+      return ''
+    }
+    const y = {
+      key: x.id,
+      value: x.id,
+      title: x.title
+    }
+    y.children = [
+      ...(x.bookmarkGroupIds || []).map(buildSubCats),
+      ...(x.bookmarkIds || []).map(buildLeaf)
+    ].filter(d => d)
+    if (y.children && !y.children.length) {
+      delete y.children
+    }
+    return y
+  }
+  function buildLeaf (id) {
+    const x = tree[id]
+    if (!x) {
+      return ''
+    }
+    return {
+      value: x.id,
+      key: x.id,
+      title: createTitle(x)
+    }
+  }
+  const level1 = cats.filter(d => d.level !== 2)
+    .map(d => {
+      const r = {
+        title: d.title,
+        value: d.id,
+        key: d.id,
+        children: [
+          ...(d.bookmarkGroupIds || []).map(buildSubCats),
+          ...(d.bookmarkIds || []).map(buildLeaf)
+        ].filter(d => d)
+      }
+      if (!r.children.length) {
+        return ''
+      }
+      return r
+    }).filter(d => d)
+  return level1
+}
+
+export default function BookmarkSelect (props) {
+  const {
+    bookmarks,
+    bookmarkGroups
+  } = props
+  const tree = bookmarks
+    .reduce((p, k) => {
+      return {
+        ...p,
+        [k.id]: k
+      }
+    }, {})
+
+  function onSelect (id) {
+    const item = tree[id]
+    if (item) {
+      item.bookmarkId = item.id
+      props.onSelect(item)
+    }
+  }
+  const treeData = buildTreeData(bookmarkGroups, tree)
+  const treeProps = {
+    treeData,
+    onChange: onSelect,
+    placeholder: e('chooseFromBookmarks'),
+    showSearch: true,
+    value: undefined
+  }
+  return (
+    <TreeSelect {...treeProps} />
+  )
+}

package/client/components/bookmark-form/render-connection-hopping.jsx

@@ -17,6 +17,7 @@ import {
   authTypeMap
 } from '../../common/constants'
 import { useState } from 'react'
+import BookmarkSelect from './bookmark-select'
 
 const FormItem = Form.Item
 const RadioButton = Radio.Button
@@ -129,7 +130,13 @@ export default function renderConnectionHopping (props) {
       </FormItem>
     )
   }
-
+  const treeProps = {
+    bookmarks: store.bookmarks.filter(d => {
+      return d.host && d.port && d.username
+    }),
+    bookmarkGroups: store.bookmarkGroups,
+    onSelect: handleFinish
+  }
   return (
     <div>
       <FormItem
@@ -144,6 +151,13 @@ export default function renderConnectionHopping (props) {
         initialValues={initialValues}
       >
         {renderList()}
+        <FormItem
+          {...formItemLayout}
+          label={e('chooseFromBookmarks')}
+          className='mg60b'
+        >
+          <BookmarkSelect {...treeProps} />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label={e('host')}

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

@@ -0,0 +1,19 @@
+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)
+  }
+}

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

@@ -14,6 +14,7 @@ import {
   PushpinOutlined
 } from '@ant-design/icons'
 import classNames from 'classnames'
+import onDrop from './on-drop'
 import './qm.styl'
 
 const e = window.translate
@@ -90,23 +91,7 @@ export default class QuickCommandsFooterBox extends Component {
 
   // sort quick commands array when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id, then set window.store.quickCommands use window.store.setItems
   onDrop = e => {
-    e.preventDefault()
-    const { store } = window
-    const { quickCommands } = store
-    const idDragged = e.dataTransfer.getData('idDragged')
-    const idDrop = e.target.getAttribute('data-id')
-    const idDraggedIndex = quickCommands.findIndex(
-      ({ id }) => id === idDragged
-    )
-    const targetIndex = quickCommands.findIndex(
-      ({ id }) => id === idDrop
-    )
-    if (idDraggedIndex < targetIndex) {
-      quickCommands.splice(targetIndex, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    } else {
-      quickCommands.splice(targetIndex + 1, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    }
-    store.setItems('quickCommands', quickCommands)
+    onDrop(e, '.qm-item')
   }
 
   renderNoCmd = () => {

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

@@ -8,6 +8,7 @@ import { Select } from 'antd'
 import classnames from 'classnames'
 import highlight from '../common/highlight'
 import QmTransport from './quick-command-transport'
+import onDrop from './on-drop'
 
 const { Option } = Select
 const e = window.translate
@@ -22,7 +23,7 @@ export default class QuickCommandsList extends List {
     this.props.onClickItem(item)
   }
 
-  handleChange = v => {
+  handleChangeLabel = v => {
     this.setState({
       labels: v
     })
@@ -42,23 +43,7 @@ export default class QuickCommandsList extends List {
 
   // adjust window.store.quickCommands array order when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id
   handleDrop = e => {
-    e.preventDefault()
-    const { store } = window
-    const { quickCommands } = store
-    const idDragged = e.dataTransfer.getData('idDragged')
-    const idDrop = e.target.getAttribute('data-id')
-    const idDraggedIndex = quickCommands.findIndex(
-      ({ id }) => id === idDragged
-    )
-    const targetIndex = quickCommands.findIndex(
-      ({ id }) => id === idDrop
-    )
-    if (idDraggedIndex < targetIndex) {
-      quickCommands.splice(targetIndex, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    } else {
-      quickCommands.splice(targetIndex + 1, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    }
-    store.setItems('quickCommands', quickCommands)
+    onDrop(e)
   }
 
   renderItem = (item, i) => {
@@ -116,7 +101,7 @@ export default class QuickCommandsList extends List {
       placeholder: e('labels'),
       mode: 'multiple',
       value: this.state.labels,
-      onChange: this.handleChange,
+      onChange: this.handleChangeLabel,
       style: {
         width: '100%'
       }

package/client/components/setting-panel/keywords-form.jsx

@@ -10,6 +10,7 @@ import {
   MinusCircleOutlined,
   PlusOutlined
 } from '@ant-design/icons'
+import { useEffect } from 'react'
 
 const FormItem = Form.Item
 const FormList = Form.List
@@ -101,6 +102,10 @@ export default function KeywordForm (props) {
     )
   }
 
+  useEffect(() => {
+    formChild.resetFields()
+  }, [props.keywordFormReset])
+
   return (
     <div>
       <Form

package/client/components/setting-panel/keywords-transport.jsx

@@ -0,0 +1,32 @@
+import BookmarkTransport from '../tree-list/bookmark-transport'
+import download from '../../common/download'
+import time from '../../common/time'
+
+export default class KeywordsTransport extends BookmarkTransport {
+  name = 'keywords-highlight'
+  beforeUpload = async (file) => {
+    const { store } = this.props
+    const txt = await window.fs.readFile(file.path)
+    try {
+      store.setConfig({
+        keywords: JSON.parse(txt)
+      })
+    } catch (e) {
+      store.onError(e)
+    }
+    setTimeout(this.props.resetKeywordForm, 100)
+    return false
+  }
+
+  renderEdit () {
+    return null
+  }
+
+  handleDownload = () => {
+    const { store } = this.props
+    const arr = store.config.keywords || []
+    const txt = JSON.stringify(arr, null, 2)
+    const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
+    download('electerm-' + this.name + '-' + stamp + '.json', txt)
+  }
+}

package/client/components/setting-panel/setting-terminal.jsx

@@ -28,6 +28,7 @@ import mapper from '../../common/auto-complete-data-mapper'
 import KeywordForm from './keywords-form'
 import Link from '../common/external-link'
 import HelpIcon from '../common/help-icon'
+import KeywordsTransport from './keywords-transport'
 import './setting.styl'
 
 const { Option } = Select
@@ -35,7 +36,8 @@ const e = window.translate
 
 export default class SettingTerminal extends Component {
   state = {
-    ready: false
+    ready: false,
+    keywordFormReset: 1
   }
 
   componentDidMount () {
@@ -50,6 +52,12 @@ export default class SettingTerminal extends Component {
     clearTimeout(this.timer)
   }
 
+  resetKeywordForm = () => {
+    this.setState({
+      keywordFormReset: Date.now()
+    })
+  }
+
   handleResetAll = () => {
     this.saveConfig(
       deepCopy(defaultSettings)
@@ -411,6 +419,7 @@ export default class SettingTerminal extends Component {
       formData: {
         keywords
       },
+      keywordFormReset: this.state.keywordFormReset,
       submit: this.handleSubmitKeywords,
       themeConfig: getThemeConfig()
     }
@@ -469,6 +478,12 @@ export default class SettingTerminal extends Component {
             <HelpIcon
               title={tip}
             />
+            <span className='mg1l'>
+              <KeywordsTransport
+                store={this.props.store}
+                resetKeywordForm={this.resetKeywordForm}
+              />
+            </span>
           </div>
           <KeywordForm
             {...ps}

package/client/components/sftp/file-item.jsx

@@ -722,12 +722,12 @@ export default class FileSection extends React.Component {
         path,
         text,
         mode
-      )
+      ).catch(window.store.onError)
       : await fs.writeFile(
         path,
         text,
         mode
-      )
+      ).catch(window.store.onError)
     const data = {
       loading: false
     }

package/client/components/terminal/attach-addon-custom.js

@@ -54,6 +54,7 @@ export default class AttachAddonCustom extends AttachAddon {
   onRead = (ev) => {
     const data = ev.target.result
     const { term } = this
+    term?.parent?.notifyOnData()
     const str = this.decoder.decode(data)
     if (term?.parent?.props.sftpPathFollowSsh && term?.buffer.active.type !== 'alternate') {
       const {

package/client/components/terminal/index.jsx

@@ -4,7 +4,7 @@ import generate from '../../common/uid'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import postMessage from '../../common/post-msg'
 import clone from '../../common/to-simple-obj'
-import runIdle from '../../common/run-idle'
+// import runIdle from '../../common/run-idle'
 import {
   ReloadOutlined
 } from '@ant-design/icons'
@@ -783,7 +783,7 @@ class Term extends Component {
   onClear = () => {
     this.term.clear()
     this.term.focus()
-    this.notifyOnData('')
+    // this.notifyOnData('')
   }
 
   isRemote = () => {
@@ -921,7 +921,7 @@ class Term extends Component {
   }
 
   onData = (d) => {
-    runIdle(this.notifyOnData)
+    // runIdle(this.notifyOnData)
     if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {

package/client/store/sync.js

@@ -190,7 +190,10 @@ export default (Store) => {
         })
       }
       str = JSON.stringify(str)
-      if (n === settingMap.bookmarks && pass) {
+      if (
+        (n === settingMap.bookmarks || n === settingMap.profiles) &&
+        pass
+      ) {
         str = await window.pre.runGlobalAsync('encryptAsync', str, pass)
       }
       objs[`${n}.json`] = {

package/package.json

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