@electerm/electerm-react 1.60.18 → 1.60.29

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

@@ -6,8 +6,7 @@ import { PureComponent } from 'react'
 import TextEditorForm from './text-editor-form'
 import { Spin, Modal } from 'antd'
 import resolve from '../../common/resolve'
-import { commonActions } from '../../common/constants'
-import postMsg from '../../common/post-msg'
+import { refsStatic, refs } from '../common/ref'
 
 const e = window.translate
 
@@ -21,44 +20,32 @@ export default class TextEditor extends PureComponent {
   }
 
   componentDidMount () {
-    window.addEventListener('message', this.onEvent)
+    refsStatic.add('text-editor', this)
   }
 
   setStateProxy = (state, cb) => {
     if (state && typeof state.file !== 'undefined') {
-      postMsg({
-        action: commonActions.updateStore,
-        value: !!state.file,
-        prop: 'showEditor'
-      })
+      window.store.showEditor = !!state.file
     }
     return this.setState(state, cb)
   }
 
-  onEvent = (e) => {
-    const {
-      action,
-      data
-    } = e.data || {}
-    if (
-      action === commonActions.openTextEditor && data
-    ) {
-      this.setStateProxy(data)
-      if (data.id && data.file) {
-        this.fetchText(data)
-      } else if (data.id === '') {
-        this.cancel()
-      }
-    } else if (action === commonActions.loadTextEditorText) {
-      this.setStateProxy(data)
-    } else if (action === commonActions.editWithSystemEditorDone) {
-      let cb = this.doSubmit
-      if (data.text === this.state.text) {
-        delete data.text
-        cb = undefined
-      }
-      this.setStateProxy(data, cb)
+  openEditor = (data) => {
+    this.setStateProxy(data)
+    if (data.id && data.file) {
+      this.fetchText(data)
+    } else if (data.id === '') {
+      this.cancel()
+    }
+  }
+
+  editWithSystemEditorDone = (data) => {
+    let cb = this.doSubmit
+    if (data.text === this.state.text) {
+      delete data.text
+      cb = undefined
     }
+    this.setStateProxy(data, cb)
   }
 
   fetchText = async ({
@@ -76,11 +63,14 @@ export default class TextEditor extends PureComponent {
     this.setStateProxy({
       path: p
     })
-    postMsg({
-      action: commonActions.fetchTextEditorText,
-      id,
-      path: p,
-      type
+    const fileRef = refs.get(id)
+    if (!fileRef) {
+      return
+    }
+    const text = await fileRef.fetchEditorText(p, type)
+    this.setStateProxy({
+      text,
+      loading: false
     })
   }
 
@@ -106,15 +96,11 @@ export default class TextEditor extends PureComponent {
       type,
       mode
     } = file
-    postMsg({
-      id,
-      path,
-      action: commonActions.submitTextEditorText,
-      text: res.text,
-      mode,
-      type,
-      noClose: force
-    })
+    const fileRef = refs.get(id)
+    if (!fileRef) {
+      return
+    }
+    await fileRef.onSubmitEditFile(mode, type, path, res.text, force)
   }
 
   editWith = () => {
@@ -124,11 +110,11 @@ export default class TextEditor extends PureComponent {
     const {
       id, text
     } = this.state
-    postMsg({
-      action: commonActions.editWithSystemEditor,
-      id,
-      text
-    })
+    const fileRef = refs.get(id)
+    if (!fileRef) {
+      return
+    }
+    fileRef.editWithSystemEditor(text)
   }
 
   cancel = () => {
@@ -136,9 +122,8 @@ export default class TextEditor extends PureComponent {
       id: '',
       file: null
     })
-    postMsg({
-      action: commonActions.onCloseTextEditor
-    })
+    const fileRef = refs.get(this.state.id)
+    fileRef?.removeFileEditEvent()
   }
 
   render () {

package/client/components/theme/theme-form.jsx

@@ -227,7 +227,6 @@ export default function ThemeForm (props) {
     themeName,
     themeText: convertThemeToText(props.formData)
   }
-  const { autofocustrigger } = props.store
   const isDefaultTheme = id === defaultTheme.id || id === defaultThemeLight.id
   const disabled = readonly || isDefaultTheme
   const switchTxt = editor === 'theme-editor-txt' ? e('editWithColorPicker') : e('editWithTextEditor')
@@ -259,7 +258,6 @@ export default function ThemeForm (props) {
         <InputAutoFocus
           selectall='yes'
           disabled={disabled}
-          autofocustrigger={autofocustrigger}
         />
       </FormItem>
       <FormItem

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

@@ -10,9 +10,10 @@ import {
 import { Button, Space, Dropdown, Upload } from 'antd'
 import copy from 'json-deep-copy'
 import time from '../../common/time'
-import { find, uniq, isEqual } from 'lodash-es'
+import { find, uniq } from 'lodash-es'
 import { fixBookmarks } from '../../common/db-fix'
 import download from '../../common/download'
+import { action } from 'manate'
 
 const e = window.translate
 
@@ -26,7 +27,7 @@ export default function BookmarkToolbar (props) {
     bookmarkGroups,
     bookmarks
   } = props
-  const beforeUpload = async (file) => {
+  const beforeUpload = action(async (file) => {
     const { store } = window
     const txt = await window.fs.readFile(file.path)
     try {
@@ -37,70 +38,45 @@ export default function BookmarkToolbar (props) {
       } = content
       const bookmarkGroups0 = copy(bookmarkGroups)
       const bookmarks0 = copy(bookmarks)
-      const bmTree = bookmarks0.reduce((p, v) => {
-        return {
-          ...p,
-          [v.id]: v
-        }
-      }, {})
-      const bmgTree = bookmarkGroups0.reduce((p, v) => {
-        return {
-          ...p,
-          [v.id]: v
-        }
-      }, {})
-      const add = []
-      const dbAdd = []
-      const updates = []
-      bookmarks1.forEach(bg => {
-        if (!bmTree[bg.id]) {
-          bookmarks.push(bg)
-          add.push(bg)
-          dbAdd.push({
-            db: 'bookmarks',
-            obj: bg
-          })
+
+      // Using Map instead of reduce
+      const bmTree = new Map(
+        bookmarks0.map(bookmark => [bookmark.id, bookmark])
+      )
+      const bmgTree = new Map(
+        bookmarkGroups0.map(group => [group.id, group])
+      )
+
+      const fixed = fixBookmarks(bookmarks1)
+
+      fixed.forEach(bg => {
+        if (!bmTree.has(bg.id)) {
+          store.bookmarks.push(bg)
         }
       })
+
       bookmarkGroups1.forEach(bg => {
-        if (!bmgTree[bg.id]) {
-          bookmarkGroups.push(bg)
-          dbAdd.push({
-            db: 'bookmarkGroups',
-            obj: bg
-          })
+        if (!bmgTree.has(bg.id)) {
+          store.bookmarkGroups.push(bg)
         } else {
           const bg1 = find(
-            bookmarkGroups,
+            store.bookmarkGroups,
             b => b.id === bg.id
           )
-          const old = copy(bg1.bookmarkIds)
           bg1.bookmarkIds = uniq(
             [
               ...bg1.bookmarkIds,
               ...bg.bookmarkIds
             ]
           )
-          if (!isEqual(bg1.bookmarkIds, old)) {
-            updates.push({
-              id: bg1.id,
-              db: 'bookmarkGroups',
-              update: {
-                bookmarkIds: bg1.bookmarkIds
-              }
-            })
-          }
         }
       })
-      store.setBookmarkGroups(bookmarkGroups)
-      store.setBookmarks(fixBookmarks(bookmarks))
-      store.batchDbAdd(dbAdd)
-      store.batchDbUpdate(updates)
     } catch (e) {
       store.onError(e)
     }
     return false
-  }
+  })
+
   const handleDownload = () => {
     const txt = JSON.stringify({
       bookmarkGroups: copy(bookmarkGroups),

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

@@ -9,101 +9,13 @@ import {
   EditOutlined
 } from '@ant-design/icons'
 import { Upload, Button } from 'antd'
-import download from '../../common/download'
-import time from '../../common/time'
-import copy from 'json-deep-copy'
-import { find, uniq, isEqual } from 'lodash-es'
-import { fixBookmarks } from '../../common/db-fix'
 
 const e = window.translate
 
 export default class BookmarkTransport extends PureComponent {
-  beforeUpload = async (file) => {
-    const { store } = window
-    const txt = await window.fs.readFile(file.path)
-    try {
-      const content = JSON.parse(txt)
-      const {
-        bookmarkGroups: bookmarkGroups1,
-        bookmarks: bookmarks1
-      } = content
-      const { props } = this
-      const bookmarkGroups = copy(props.bookmarkGroups)
-      const bookmarks = copy(props.bookmarks)
-      const bmTree = bookmarks.reduce((p, v) => {
-        return {
-          ...p,
-          [v.id]: v
-        }
-      }, {})
-      const bmgTree = bookmarkGroups.reduce((p, v) => {
-        return {
-          ...p,
-          [v.id]: v
-        }
-      }, {})
-      const add = []
-      const dbAdd = []
-      const updates = []
-      bookmarks1.forEach(bg => {
-        if (!bmTree[bg.id]) {
-          bookmarks.push(bg)
-          add.push(bg)
-          dbAdd.push({
-            db: 'bookmarks',
-            obj: bg
-          })
-        }
-      })
-      bookmarkGroups1.forEach(bg => {
-        if (!bmgTree[bg.id]) {
-          bookmarkGroups.push(bg)
-          dbAdd.push({
-            db: 'bookmarkGroups',
-            obj: bg
-          })
-        } else {
-          const bg1 = find(
-            bookmarkGroups,
-            b => b.id === bg.id
-          )
-          const old = copy(bg1.bookmarkIds)
-          bg1.bookmarkIds = uniq(
-            [
-              ...bg1.bookmarkIds,
-              ...bg.bookmarkIds
-            ]
-          )
-          if (!isEqual(bg1.bookmarkIds, old)) {
-            updates.push({
-              id: bg1.id,
-              db: 'bookmarkGroups',
-              update: {
-                bookmarkIds: bg1.bookmarkIds
-              }
-            })
-          }
-        }
-      })
-      store.setBookmarkGroups(bookmarkGroups)
-      store.setBookmarks(fixBookmarks(bookmarks))
-      store.batchDbAdd(dbAdd)
-      store.batchDbUpdate(updates)
-    } catch (e) {
-      store.onError(e)
-    }
-    return false
-  }
+  beforeUpload = async (file) => {}
 
-  handleDownload = () => {
-    const { bookmarkGroups, bookmarks } = this.props
-    const txt = JSON.stringify({
-      bookmarkGroups: copy(bookmarkGroups),
-      bookmarks: copy(bookmarks)
-    }, null, 2)
-    const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
-    download('bookmarks-' + stamp + '.json', txt)
-  }
+  handleDownload = () => {}
 
   handleToggleEdit = () => {
     window.store.bookmarkSelectMode = true

package/client/components/tree-list/move-item-modal.jsx

@@ -0,0 +1,101 @@
+// render bookmark select, use antd tree select
+import { useState } from 'react'
+import buildGroupData from '../bookmark-form/bookmark-group-tree-format'
+import { TreeSelect, Modal, Button } from 'antd'
+const e = window.translate
+
+export default function MoveItemModal (props) {
+  const [groupId, setGroupId] = useState(undefined)
+  const {
+    openMoveModal,
+    moveItem,
+    moveItemIsGroup,
+    bookmarkGroups
+  } = props
+  if (!openMoveModal) {
+    return null
+  }
+  const data = buildGroupData(bookmarkGroups, moveItem.id)
+  function onSelect () {
+    const {
+      bookmarkGroups
+    } = window.store
+    const groupMap = new Map(bookmarkGroups.map(d => [d.id, d]))
+    const group = groupMap.get(groupId)
+    if (!group) {
+      return
+    }
+    // Find and update the original parent group
+    const currentParentGroup = bookmarkGroups.find(bg => {
+      if (moveItemIsGroup) {
+        return (bg.bookmarkGroupIds || []).includes(moveItem.id)
+      }
+      return (bg.bookmarkIds || []).includes(moveItem.id)
+    })
+
+    // Remove from original parent if found
+    if (currentParentGroup) {
+      if (moveItemIsGroup) {
+        currentParentGroup.bookmarkGroupIds = currentParentGroup.bookmarkGroupIds.filter(
+          id => id !== moveItem.id
+        )
+      } else {
+        currentParentGroup.bookmarkIds = currentParentGroup.bookmarkIds.filter(
+          id => id !== moveItem.id
+        )
+      }
+    }
+    if (moveItemIsGroup) {
+      group.bookmarkGroupIds = [
+        moveItem.id,
+        ...(group.bookmarkGroupIds || [])
+      ]
+    } else {
+      group.bookmarkIds = [
+        moveItem.id,
+        ...(group.bookmarkIds || [])
+      ]
+    }
+    props.onCancelMoveItem()
+  }
+  const modalProps = {
+    open: openMoveModal,
+    title: e('moveTo'),
+    footer: null,
+    onCancel: props.onCancelMoveItem
+  }
+  const treeProps = {
+    treeData: data,
+    onChange: setGroupId,
+    placeholder: e('moveTo'),
+    showSearch: true,
+    value: groupId,
+    popupMatchSelectWidth: false,
+    treeDefaultExpandAll: true,
+    className: 'width-100'
+  }
+  return (
+    <Modal {...modalProps}>
+      <div className='pd1'>
+        <TreeSelect
+          {...treeProps}
+        />
+      </div>
+      <div className='pd1'>
+        <Button
+          type='primary'
+          onClick={onSelect}
+          disabled={!groupId}
+        >
+          {e('ok')}
+        </Button>
+        <Button
+          onClick={props.onCancelMoveItem}
+          className='mg1l'
+        >
+          {e('cancel')}
+        </Button>
+      </div>
+    </Modal>
+  )
+}

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

@@ -8,7 +8,7 @@ import {
   EditOutlined,
   FolderAddOutlined,
   FolderOpenOutlined,
-  SettingOutlined
+  RightSquareOutlined
 } from '@ant-design/icons'
 import {
   Popconfirm,
@@ -49,13 +49,13 @@ export default memo(function TreeListItem (props) {
   }
 
   const renderOperationBtn = (item, isGroup) => {
-    if (props.staticList) {
+    if (props.staticList || props.item.id === defaultBookmarkGroupId) {
       return null
     }
     return (
-      <SettingOutlined
+      <RightSquareOutlined
         className='pointer tree-control-btn'
-        onClick={handleContextMenu}
+        onClick={openMoveModal}
       />
     )
   }
@@ -64,8 +64,8 @@ export default memo(function TreeListItem (props) {
     props.openAll(props.item)
   }
 
-  const handleContextMenu = (e) => {
-    props.onContextMenu(e, props.item, props.isGroup)
+  const openMoveModal = (e) => {
+    props.openMoveModal(e, props.item, props.isGroup)
   }
 
   const handleEditItem = (e) => {
@@ -176,7 +176,6 @@ export default memo(function TreeListItem (props) {
     props.onDragLeave(e)
   }
 
-  // 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
   const onDrop = e => {
     props.onDrop(e)
   }
@@ -210,7 +209,6 @@ export default memo(function TreeListItem (props) {
   const propsAll = {
     className: cls,
     title: titleAll,
-    onContextMenu: handleContextMenu,
     draggable: true,
     'data-item-id': item.id,
     'data-parent-id': props.parentId,