@electerm/electerm-react 1.60.18 → 1.60.32

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

@@ -8,21 +8,13 @@ import {
   CloseOutlined,
   LoadingOutlined
 } from '@ant-design/icons'
-import {
-  readClipboard,
-  cut,
-  hasBookmarkOrGroupInClipboardText
-} from '../../common/clipboard'
 import createName from '../../common/create-title'
 import InputAutoFocus from '../common/input-auto-focus'
-import { find, uniq, isEqual, filter, pick } from 'lodash-es'
+import { find, uniq, filter, pick } from 'lodash-es'
 import {
   maxBookmarkGroupTitleLength,
   defaultBookmarkGroupId,
-  settingMap,
-  commonActions,
-  copyBookmarkItemPrefix,
-  copyBookmarkGroupItemPrefix
+  settingMap
 } from '../../common/constants'
 import findParentBySel from '../../common/find-parent'
 import copy, { deepCopy } from 'json-deep-copy'
@@ -30,13 +22,13 @@ import NewButtonsGroup from './bookmark-toolbar'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import getInitItem from '../../common/init-setting-item'
 import uid from '../../common/uid'
+import { action } from 'manate'
 import deepEqual from 'fast-deep-equal'
 import './tree-list.styl'
 import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeSearch from './tree-search'
-
-const e = window.translate
+import MoveItemModal from './move-item-modal'
 
 export default class ItemListTree extends Component {
   constructor (props) {
@@ -46,6 +38,9 @@ export default class ItemListTree extends Component {
       keyword: '',
       parentId: '',
       showNewBookmarkGroupForm: false,
+      openMoveModal: false,
+      moveItem: null,
+      moveItemIsGroup: false,
       bookmarkGroupTitle: '',
       categoryTitle: '',
       categoryId: '',
@@ -53,6 +48,10 @@ export default class ItemListTree extends Component {
     }
   }
 
+  onSubmit = false
+
+  onSubmitEdit = false
+
   componentDidMount () {
     this.timer = setTimeout(() => {
       this.setState({
@@ -74,7 +73,14 @@ export default class ItemListTree extends Component {
 
   componentWillUnmount () {
     clearTimeout(this.timer)
-    window.removeEventListener('message', this.onContextAction)
+  }
+
+  onCancelMoveItem = () => {
+    this.setState({
+      openMoveModal: false,
+      moveItem: null,
+      moveItemIsGroup: false
+    })
   }
 
   filter = list => {
@@ -152,9 +158,7 @@ export default class ItemListTree extends Component {
     if (!categoryTitle) {
       return
     }
-    const bookmarkGroups = copy(
-      this.props.bookmarkGroups
-    )
+    const { bookmarkGroups } = window.store
     const obj = find(
       bookmarkGroups,
       bg => bg.id === categoryId
@@ -166,27 +170,20 @@ export default class ItemListTree extends Component {
     this.setState({
       categoryId: ''
     })
-    const { store } = window
-    store.setBookmarkGroups(
-      bookmarkGroups
-    )
-    store.batchDbUpdate([{
-      id: categoryId,
-      db: 'bookmarkGroups',
-      upsert: false,
-      update: {
-        title: categoryTitle
-      }
-    }])
   }
 
   onClick = () => {
 
   }
 
-  onSubmit = false
-
-  onSubmitEdit = false
+  openMoveModal = (e, item, isGroup) => {
+    e.stopPropagation()
+    this.setState({
+      openMoveModal: true,
+      moveItem: item,
+      moveItemIsGroup: isGroup
+    })
+  }
 
   handleChangeBookmarkGroupTitle = e => {
     let { value } = e.target
@@ -227,55 +224,37 @@ export default class ItemListTree extends Component {
       return
     }
     this.onSubmit = true
-    const id = this.state.parentId
+    this.parentId = this.state.parentId
     this.setState({
       showNewBookmarkGroupForm: false,
       parentId: ''
-    }, () => {
-      this.onSubmit = false
-      let bookmarkGroups = copy(
-        this.props.bookmarkGroups
-      )
-      const newCat = {
-        id: uid(),
-        title: this.state.bookmarkGroupTitle,
-        level: 2,
-        bookmarkIds: []
-      }
-      bookmarkGroups = [
-        newCat,
-        ...bookmarkGroups
-      ]
-      const cat = find(
-        bookmarkGroups,
-        d => d.id === id
-      )
-      if (!cat) {
-        return
-      }
-      cat.bookmarkGroupIds = [
-        ...(cat.bookmarkGroupIds || []),
-        newCat.id
-      ]
-      const { store } = window
-      store.setBookmarkGroups(
-        bookmarkGroups
-      )
-      store.batchDbAdd([{
-        db: 'bookmarkGroups',
-        obj: newCat
-      }])
-      store.batchDbUpdate([{
-        upsert: false,
-        id,
-        update: {
-          bookmarkGroupIds: cat.bookmarkGroupIds
-        },
-        db: 'bookmarkGroups'
-      }])
-    })
+    }, this.afterSubmitSub)
   }
 
+  afterSubmitSub = action(() => {
+    const id = this.parentId
+    this.onSubmit = false
+    const { bookmarkGroups } = window.store
+    const newCat = {
+      id: uid(),
+      title: this.state.bookmarkGroupTitle,
+      level: 2,
+      bookmarkIds: []
+    }
+    bookmarkGroups.unshift(newCat)
+    const cat = find(
+      bookmarkGroups,
+      d => d.id === id
+    )
+    if (!cat) {
+      return
+    }
+    cat.bookmarkGroupIds = [
+      ...(cat.bookmarkGroupIds || []),
+      newCat.id
+    ]
+  })
+
   handleNewBookmarkGroup = () => {
     this.setState({
       showNewBookmarkGroupForm: true,
@@ -345,137 +324,6 @@ export default class ItemListTree extends Component {
     )
   }
 
-  onCut = (item, isGroup) => {
-    const str = isGroup
-      ? copyBookmarkGroupItemPrefix
-      : copyBookmarkItemPrefix
-    const txt = str + item.id
-    cut(txt, createName(item))
-  }
-
-  onPaste = (item) => {
-    const str = readClipboard()
-    const id = str.split(':')[1]
-    const bookmarkGroups = copy(
-      this.props.bookmarkGroups
-    )
-    const from = bookmarkGroups.find(t => {
-      return t.bookmarkIds.includes(id)
-    })
-    from.bookmarkIds = from.bookmarkIds.filter(d => {
-      return d !== id
-    })
-    const to = bookmarkGroups.find(t => {
-      return t.id === item.id
-    })
-    if (!to.bookmarkIds) {
-      to.bookmarkIds = []
-    }
-    to.bookmarkIds = uniq(
-      [
-        ...to.bookmarkIds,
-        id
-      ]
-    )
-    const { store } = window
-    if (from) {
-      store.editBookmarkGroup(
-        from.id,
-        {
-          bookmarkIds: (from.bookmarkIds || []).filter(d => {
-            return d !== id
-          })
-        }
-      )
-    }
-    store.editBookmarkGroup(
-      item.id,
-      {
-        bookmarkIds: uniq(
-          [
-            ...(item.bookmarkIds || []),
-            id
-          ]
-        )
-      }
-    )
-  }
-
-  computePos = (e) => {
-    return {
-      left: e.clientX,
-      top: e.clientY
-    }
-  }
-
-  onContextAction = e => {
-    const {
-      action,
-      id,
-      args = [],
-      func
-    } = e.data || {}
-    if (action === commonActions.closeContextMenuAfter) {
-      window.removeEventListener('message', this.onContextAction)
-      return false
-    }
-    if (
-      action !== commonActions.clickContextMenu ||
-      id !== this.uid ||
-      !this[func]
-    ) {
-      return false
-    }
-    window.removeEventListener('message', this.onContextAction)
-    this[func](...args)
-  }
-
-  onContextMenu = (e, item, isGroup) => {
-    e.preventDefault()
-    if (this.props.staticList) {
-      return null
-    }
-    const menus = this.renderContextItems(item, isGroup)
-    this.uid = uid()
-    window.store.openContextMenu({
-      items: menus,
-      id: this.uid,
-      pos: this.computePos(e)
-    })
-    window.addEventListener('message', this.onContextAction)
-    this.closeNewGroupForm()
-  }
-
-  renderContextItems (item, isGroup) {
-    const res = []
-    const args = [copy(item), isGroup]
-    if (!isGroup) {
-      // res.push({
-      //   func: 'onCopy',
-      //   icon: 'CopyOutlined',
-      //   text: e('copy'),
-      //   args
-      // })
-      res.push({
-        func: 'onCut',
-        icon: 'FileExcelOutlined',
-        text: e('cut'),
-        args
-      })
-    }
-    const canPaste = hasBookmarkOrGroupInClipboardText()
-    if (isGroup) {
-      res.push({
-        func: 'onPaste',
-        icon: 'CopyOutlined',
-        text: e('paste'),
-        disabled: !canPaste,
-        args
-      })
-    }
-    return res
-  }
-
   editItem = (e, item, isGroup) => {
     e.stopPropagation()
     if (isGroup) {
@@ -547,7 +395,7 @@ export default class ItemListTree extends Component {
     target.classList.add('item-dragover')
   }
 
-  onDrop = e => {
+  onDrop = action(e => {
     e.preventDefault()
     const elems = document.querySelectorAll('.tree-item.item-dragover')
     elems.forEach(elem => {
@@ -604,9 +452,8 @@ export default class ItemListTree extends Component {
         0,
         dragItem
       )
-      return window.store.setState('bookmarkGroups', bookmarkGroups)
+      return
     }
-    const updates = []
     if (isGroupDrag) {
       const parentDrag = pidDragged
         ? bookmarkGroups.find(
@@ -617,14 +464,6 @@ export default class ItemListTree extends Component {
         parentDrag.bookmarkGroupIds = (parentDrag.bookmarkGroupIds || []).filter(
           id => id !== idDragged
         )
-        updates.push({
-          upsert: false,
-          id: parentDrag.id,
-          update: {
-            bookmarkGroupIds: parentDrag.bookmarkGroupIds
-          },
-          db: 'bookmarkGroups'
-        })
       }
       const parentDrop = pidDrop
         ? bookmarkGroups.find(
@@ -651,14 +490,6 @@ export default class ItemListTree extends Component {
         }
         arr.splice(index, 0, idDragged)
       }
-      updates.push({
-        upsert: false,
-        id: parentDrop.id,
-        update: {
-          bookmarkGroupIds: parentDrop.bookmarkGroupIds
-        },
-        db: 'bookmarkGroups'
-      })
     } else {
       const parentDrag = bookmarkGroups.find(
         item => item.id === pidDragged
@@ -669,14 +500,6 @@ export default class ItemListTree extends Component {
       parentDrag.bookmarkIds = (parentDrag.bookmarkIds || []).filter(
         id => id !== idDragged
       )
-      updates.push({
-        upsert: false,
-        id: parentDrag.id,
-        update: {
-          bookmarkIds: parentDrag.bookmarkIds
-        },
-        db: 'bookmarkGroups'
-      })
       const parentDrop = isGroupDrop
         ? bookmarkGroups.find(
           item => item.id === idDrop
@@ -702,14 +525,6 @@ export default class ItemListTree extends Component {
         }
         arr.splice(index, 0, idDragged)
       }
-      updates.push({
-        upsert: false,
-        id: parentDrop.id,
-        update: {
-          bookmarkIds: parentDrop.bookmarkIds
-        },
-        db: 'bookmarkGroups'
-      })
     }
     if (
       isGroupDrag &&
@@ -720,19 +535,9 @@ export default class ItemListTree extends Component {
       if (i >= 0) {
         const item = bookmarkGroups[i]
         item.level = 2
-        updates.push({
-          upsert: false,
-          id: item.id,
-          update: {
-            level: item.level
-          },
-          db: 'bookmarkGroups'
-        })
       }
     }
-    window.store.batchDbUpdate(updates)
-    return window.store.setState('bookmarkGroups', bookmarkGroups)
-  }
+  })
 
   editCategory = () => {
     const {
@@ -757,9 +562,7 @@ export default class ItemListTree extends Component {
   duplicateItem = (e, item) => {
     e.stopPropagation()
     const { addItem } = window.store
-    const bookmarkGroups = copy(
-      this.props.bookmarkGroups
-    )
+    const { bookmarkGroups } = this.props
 
     const newbookmark = copy(item)
     newbookmark.id = uid()
@@ -779,14 +582,16 @@ export default class ItemListTree extends Component {
     addItem(newbookmark, settingMap.bookmarks)
     // update bookmark groups
     this.updateBookmarkGroups(
-      bookmarkGroups,
       newbookmark,
       categoryId
     )
     this.props.onClickItem(newbookmark)
   }
 
-  updateBookmarkGroups = (bookmarkGroups, bookmark, categoryId) => {
+  updateBookmarkGroups = (bookmark, categoryId) => {
+    const {
+      bookmarkGroups
+    } = window.store
     let index = bookmarkGroups.findIndex(
       bg => bg.id === categoryId
     )
@@ -795,48 +600,20 @@ export default class ItemListTree extends Component {
         bg => bg.id === defaultBookmarkGroupId
       )
     }
-    const updates = []
     const bid = bookmark.id
     const bg = bookmarkGroups[index]
-    const old = copy(bg.bookmarkIds)
     if (!bg.bookmarkIds.includes(bid)) {
       bg.bookmarkIds.unshift(bid)
     }
     bg.bookmarkIds = uniq(bg.bookmarkIds)
-    if (!isEqual(old, copy(bg.bookmarkIds))) {
-      updates.push({
-        id: bg.id,
-        db: 'bookmarkGroups',
-        upsert: false,
-        update: {
-          bookmarkIds: bg.bookmarkIds
-        }
-      })
-    }
-    bookmarkGroups = bookmarkGroups.map((bg, i) => {
+    bookmarkGroups.forEach((bg, i) => {
       if (i === index) {
-        return bg
+        return
       }
-      const old = copy(bg.bookmarkIds)
       bg.bookmarkIds = bg.bookmarkIds.filter(
         g => g !== bid
       )
-      if (!isEqual(old, copy(bg.bookmarkIds))) {
-        updates.push({
-          id: bg.id,
-          db: 'bookmarkGroups',
-          upsert: false,
-          update: {
-            bookmarkIds: bg.bookmarkIds
-          }
-        })
-      }
-      return bg
     })
-    window.store.setBookmarkGroups(
-      bookmarkGroups
-    )
-    window.store.batchDbUpdate(updates)
   }
 
   findBookmarkByTitle = (bookmarks, oldBookmark) => {
@@ -861,7 +638,7 @@ export default class ItemListTree extends Component {
         [
           'del',
           'openAll',
-          'onContextMenu',
+          'openMoveModal',
           'editItem',
           'addSubCat',
           'onSelect',
@@ -875,13 +652,7 @@ export default class ItemListTree extends Component {
       ...pick(
         this.state,
         [
-          'keyword',
-          'openAll',
-          'onContextMenu',
-          'editItem',
-          'addSubCat',
-          'onSelect',
-          'duplicateItem'
+          'keyword'
         ]
       )
     }
@@ -1024,7 +795,7 @@ export default class ItemListTree extends Component {
   }
 
   render () {
-    const { ready } = this.state
+    const { ready, openMoveModal, moveItem, moveItemIsGroup } = this.state
     if (!ready) {
       return (
         <div className='pd3 aligncenter'>
@@ -1038,6 +809,13 @@ export default class ItemListTree extends Component {
       staticList,
       listStyle = {}
     } = this.props
+    const moveProps = {
+      openMoveModal,
+      moveItem,
+      moveItemIsGroup,
+      bookmarkGroups,
+      onCancelMoveItem: this.onCancelMoveItem
+    }
     const level1Bookgroups = ready
       ? bookmarkGroups.filter(
         d => !d.level || d.level < 2
@@ -1045,6 +823,7 @@ export default class ItemListTree extends Component {
       : []
     return (
       <div className={`tree-list item-type-${type}`}>
+        <MoveItemModal {...moveProps} />
         {
           staticList
             ? null

package/client/components/vnc/vnc-session.jsx

@@ -1,3 +1,4 @@
+import { createRef } from 'react'
 import RdpSession from '../rdp/rdp-session'
 import { createTerm } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
@@ -35,6 +36,8 @@ export default class VncSession extends RdpSession {
     }
   }
 
+  domRef = createRef()
+
   componentDidMount () {
     this.remoteInit()
   }
@@ -203,8 +206,7 @@ export default class VncSession extends RdpSession {
   }
 
   getDom = () => {
-    const id = 'canvas_' + this.props.tab.id
-    return document.getElementById(id)
+    return this.domRef.current
   }
 
   handleReInit = () => {
@@ -282,7 +284,7 @@ export default class VncSession extends RdpSession {
           <div
             {...divProps}
             className='vnc-session-wrap session-v-wrap'
-            id={'canvas_' + this.props.tab.id}
+            ref={this.domRef}
           />
           {this.renderConfirm()}
         </div>

package/client/store/app-upgrade.js

@@ -2,14 +2,11 @@
  * app upgrade
  */
 
-import { commonActions } from '../common/constants'
+import { refsStatic } from '../components/common/ref'
 
 export default Store => {
   Store.prototype.onCheckUpdate = (noSkip = true) => {
-    window.postMessage({
-      action: commonActions.appUpdateCheck,
-      noSkip
-    }, '*')
+    refsStatic.get('upgrade')?.appUpdateCheck(noSkip)
   }
   Store.prototype.getProxySetting = function () {
     const {