@electerm/electerm-react 1.60.18 → 1.60.32

package/client/store/setting.js

@@ -37,8 +37,7 @@ export default Store => {
   Store.prototype.openBookmarkEdit = function (item) {
     const { store } = window
     store.storeAssign({
-      settingTab: settingMap.bookmarks,
-      autofocustrigger: Date.now()
+      settingTab: settingMap.bookmarks
     })
     store.setSettingItem(item)
     store.openSettingModal()
@@ -47,8 +46,7 @@ export default Store => {
   Store.prototype.handleOpenQuickCommandsSetting = function () {
     const { store } = window
     store.storeAssign({
-      settingTab: settingMap.quickCommands,
-      autofocustrigger: Date.now()
+      settingTab: settingMap.quickCommands
     })
     store.setSettingItem(getInitItem([], settingMap.quickCommands))
     store.openSettingModal()
@@ -125,8 +123,7 @@ export default Store => {
       return store.hideSettingModal()
     }
     store.storeAssign({
-      settingTab: settingMap.terminalThemes,
-      autofocustrigger: Date.now()
+      settingTab: settingMap.terminalThemes
     })
     store.setSettingItem(buildNewTheme())
     store.openSettingModal()
@@ -162,7 +159,6 @@ export default Store => {
     const arr = store.getItems(settingTab)
     const item = getInitItem(arr, settingTab)
     store.storeAssign({
-      autofocustrigger: Date.now(),
       settingTab
     })
     store.setSettingItem(item)

package/client/store/sidebar.js

@@ -11,18 +11,12 @@ import * as ls from '../common/safe-local-storage'
 export default Store => {
   Store.prototype.expandBookmarks = function () {
     const { store } = window
-    window.store.setState(
-      'expandedKeys',
-      store.getBookmarkGroupsTotal().map(g => g.id)
-    )
+    window.store.expandedKeys = store.getBookmarkGroupsTotal().map(g => g.id)
   }
 
   Store.prototype.collapseBookmarks = function () {
     const { store } = window
-    store.setState(
-      'expandedKeys',
-      []
-    )
+    store.expandedKeys = []
   }
 
   Store.prototype.handlePin = function (pinned) {

package/client/store/store.js

@@ -11,7 +11,6 @@ import appUpgradeExtend from './app-upgrade'
 import bookmarkGroupExtend from './bookmark-group'
 import bookmarkExtend from './bookmark'
 import commonExtend from './common'
-import contextMenuExtend from './context-menu'
 import itemExtend from './item'
 import quickCommandExtend from './quick-command'
 import sessionExtend from './session'
@@ -269,24 +268,6 @@ class Store {
   }
 }
 
-const arrGetterProps = [
-  'addressBookmarks',
-  'addressBookmarksLocal',
-  'bookmarks',
-  'bookmarkGroups',
-  'profiles',
-  'quickCommands',
-  'terminalThemes'
-]
-
-for (const prop of arrGetterProps) {
-  Object.defineProperty(Store.prototype, prop, {
-    get: function () {
-      return JSON.parse(window.store[`_${prop}`] || '[]').filter(d => d)
-    }
-  })
-}
-
 loadDataExtend(Store)
 eventExtend(Store)
 dbUpgradeExtend(Store)
@@ -295,7 +276,6 @@ appUpgradeExtend(Store)
 bookmarkGroupExtend(Store)
 bookmarkExtend(Store)
 commonExtend(Store)
-contextMenuExtend(Store)
 itemExtend(Store)
 quickCommandExtend(Store)
 sessionExtend(Store)

package/client/store/system-menu.js

@@ -55,8 +55,7 @@ export default Store => {
   Store.prototype.onNewSsh = function () {
     const { store } = window
     store.storeAssign({
-      settingTab: settingMap.bookmarks,
-      autofocustrigger: Date.now()
+      settingTab: settingMap.bookmarks
     })
     store.setSettingItem(getInitItem([], settingMap.bookmarks))
     store.openSettingModal()

package/client/store/tab.js

@@ -9,6 +9,7 @@ import {
   paneMap,
   maxHistory
 } from '../common/constants'
+import { refs } from '../components/common/ref'
 import * as ls from '../common/safe-local-storage'
 import deepCopy from 'json-deep-copy'
 import generate from '../common/id-with-stamp'
@@ -449,10 +450,16 @@ export default Store => {
   }
 
   Store.prototype.updateHistory = function (tab) {
-    if (!tab.type && !tab.host) {
+    if (
+      !tab.type &&
+      !tab.host
+    ) {
       return
     }
     const { store } = window
+    if (store.config.disableConnectionHistory) {
+      return
+    }
     const tabPropertiesExcludes = [
       'id',
       'from',
@@ -546,4 +553,25 @@ export default Store => {
     // Ensure at least the active tab is selected
     store._batchInputSelectedTabIds.add(store.activeTabId)
   })
+
+  Store.prototype.notifyTabOnData = function (tabId) {
+    const tab = refs.get('tab-' + tabId)
+    if (tab) {
+      tab.notifyOnData()
+    }
+  }
+
+  Store.prototype.remoteList = function (sessionId) {
+    const sftp = refs.get('sftp-' + sessionId)
+    if (sftp) {
+      sftp.remoteListDebounce()
+    }
+  }
+
+  Store.prototype.localList = function (sessionId) {
+    const sftp = refs.get('sftp-' + sessionId)
+    if (sftp) {
+      sftp.localListDebounce()
+    }
+  }
 }

package/client/store/terminal-theme.js

@@ -19,10 +19,6 @@ export default Store => {
     return window.store.getItems(settingMap.terminalThemes)
   }
 
-  Store.prototype.setTerminalThemes = function (arr) {
-    return window.store.setItems(settingMap.terminalThemes, arr)
-  }
-
   Store.prototype.setTheme = function (id) {
     window.store.updateConfig({
       theme: id

package/client/store/watch.js

@@ -4,7 +4,7 @@
 
 import createTitle from '../common/create-title'
 import { autoRun } from 'manate'
-import { update, dbNamesForWatch } from '../common/db'
+import { update, remove, dbNamesForWatch } from '../common/db'
 import {
   sftpDefaultSortSettingKey,
   checkedKeysLsKey,
@@ -15,6 +15,9 @@ import {
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 import { debounce, isEmpty } from 'lodash-es'
+import deepCopy from 'json-deep-copy'
+import { refsStatic } from '../components/common/ref'
+import dataCompare from '../common/data-compare'
 
 export default store => {
   // autoRun(() => {
@@ -35,15 +38,34 @@ export default store => {
 
   for (const name of dbNamesForWatch) {
     autoRun(async () => {
+      const old = refsStatic.get('oldState-' + name)
+      const n = store.getItems(name)
+      const { updated, added, removed } = dataCompare(
+        old,
+        n
+      )
+      for (const item of removed) {
+        await remove(name, item.id)
+      }
+      for (const item of updated) {
+        await update(item.id, item, name, false)
+      }
+      store.batchDbAdd(added.map(d => {
+        return {
+          db: name,
+          obj: d
+        }
+      }))
       await update(
         `${name}:order`,
-        store.getItems(name).map(d => d.id)
+        (n || []).map(d => d.id)
       )
+      refsStatic.add('oldState-' + name, deepCopy(n) || [])
       await store.updateLastDataUpdateTime()
       if (store.config.autoSync) {
         await store.uploadSettingAll()
       }
-      return store['_' + name]
+      return store[name]
     }).start()
   }
 
@@ -90,7 +112,7 @@ export default store => {
 
   autoRun(() => {
     ls.setItemJSON(localAddrBookmarkLsKey, store.addressBookmarksLocal)
-    return store._addressBookmarksLocal
+    return store.addressBookmarksLocal
   }).start()
 
   autoRun(() => {

package/package.json

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

package/client/common/post-msg.js

@@ -1,3 +0,0 @@
-export default (msg) => {
-  window.postMessage(msg, '*')
-}

package/client/components/common/native-input.jsx

@@ -1,30 +0,0 @@
-/**
- * input with auto focus
- */
-
-import React from 'react'
-import './native-input.styl'
-
-export default function InputNative (props) {
-  const { value, type, onChange, onPressEnter, addonAfter = null, ...rest } = props
-  return (
-    <span
-      className='ant-input-group-wrapper'
-      data-id={props['data-id']}
-    >
-      <span className='ant-input-wrapper ant-input-group'>
-        <input
-          class='ant-input native-input'
-          type='text'
-          value={value}
-          onChange={onChange}
-          onPressEnter={onPressEnter}
-          {...rest}
-        />
-      </span>
-      <span class='ant-input-group-addon'>
-        {addonAfter}
-      </span>
-    </span>
-  )
-}

package/client/components/context-menu/context-menu.jsx

@@ -1,339 +0,0 @@
-/**
- * context menu
- */
-import { PureComponent } from 'react'
-import './context-menu.styl'
-import classnames from 'classnames'
-import {
-  contextMenuHeight,
-  contextMenuPaddingTop,
-  contextMenuWidth,
-  commonActions
-} from '../../common/constants'
-import {
-  Popconfirm
-} from 'antd'
-import postMessage from '../../common/post-msg'
-import { noop } from 'lodash-es'
-import History from './history'
-import Bookmark from './boomarks'
-import Tabs from './tabs'
-import Zoom from './zoom'
-import IconHolder from './icon-holder'
-import {
-  CodeOutlined,
-  BorderHorizontalOutlined,
-  SearchOutlined,
-  SelectOutlined,
-  SwitcherOutlined,
-  CheckOutlined,
-  CloudDownloadOutlined,
-  CloudUploadOutlined,
-  ArrowRightOutlined,
-  CheckSquareOutlined,
-  CloseCircleOutlined,
-  ContainerOutlined,
-  CopyOutlined,
-  EditOutlined,
-  EnterOutlined,
-  FileAddOutlined,
-  FileExcelOutlined,
-  FolderAddOutlined,
-  InfoCircleOutlined,
-  LockOutlined,
-  ReloadOutlined
-} from '@ant-design/icons'
-
-const e = window.translate
-
-export default class ContextMenu extends PureComponent {
-  state = {
-    items: [],
-    id: '',
-    pos: {
-      left: 0,
-      top: 0
-    },
-    className: 'context-menu'
-  }
-
-  componentDidMount () {
-    window.addEventListener('message', e => {
-      const {
-        type,
-        data
-      } = e.data || {}
-      if (
-        type === commonActions.closeContextMenu
-      ) {
-        this.closeContextMenu()
-      } else if (type === commonActions.openContextMenu) {
-        this.setOnCloseEvent()
-        this.setState(data)
-      }
-    })
-  }
-
-  setOnCloseEvent = () => {
-    const dom = document
-      .querySelector('.ant-drawer')
-    if (dom) {
-      dom.addEventListener('click', this.onTriggerClose)
-    }
-    document
-      .getElementById('outside-context')
-      .addEventListener('click', this.onTriggerClose)
-  }
-
-  onTriggerClose = () => {
-    this.closeContextMenu()
-    const dom = document
-      .querySelector('.ant-drawer')
-    if (dom) {
-      dom.removeEventListener('click', this.onTriggerClose)
-    }
-    document
-      .getElementById('outside-context')
-      .removeEventListener('click', this.onTriggerClose)
-  }
-
-  icons = {
-    CodeOutlined,
-    BorderHorizontalOutlined,
-    SearchOutlined,
-    SelectOutlined,
-    SwitcherOutlined,
-    IconHolder,
-    CheckOutlined,
-    CloudDownloadOutlined,
-    CloudUploadOutlined,
-    ArrowRightOutlined,
-    CheckSquareOutlined,
-    CloseCircleOutlined,
-    ContainerOutlined,
-    CopyOutlined,
-    EditOutlined,
-    EnterOutlined,
-    FileAddOutlined,
-    FileExcelOutlined,
-    FolderAddOutlined,
-    InfoCircleOutlined,
-    LockOutlined,
-    ReloadOutlined
-  }
-
-  modules = {
-    History,
-    Bookmark,
-    Tabs,
-    Zoom
-  }
-
-  closeContextMenu = () => {
-    this.setState({
-      id: '',
-      items: []
-    })
-    postMessage({
-      action: commonActions.closeContextMenuAfter
-    })
-  }
-
-  computePos = () => {
-    const {
-      pos,
-      items
-    } = this.state
-    const { length } = items
-    const count = length
-      ? items.filter(c => c.type !== 'hr').length
-      : 3
-    const countHr = length
-      ? items.filter(c => c.type === 'hr').length
-      : 3
-    let {
-      left,
-      top
-    } = pos
-    const height = count * contextMenuHeight + contextMenuPaddingTop * 2 + countHr * 1
-    const maxHeight = Math.max(
-      window.innerHeight - top,
-      top
-    )
-    const shouldScroll = maxHeight < height
-    const startTop = top > window.innerHeight / 2
-    const realHeight = Math.min(maxHeight, height)
-    if (startTop) {
-      top = top - realHeight
-    }
-    if (window.innerWidth < left + contextMenuWidth + 10) {
-      left = left - contextMenuWidth
-    }
-    return {
-      pos: {
-        left: left + 'px',
-        top: top + 'px',
-        height: realHeight + 'px'
-      },
-      realHeight,
-      shouldScroll
-    }
-  }
-
-  onClick = (e, item) => {
-    const {
-      disabled,
-      func,
-      args,
-      noCloseMenu
-    } = item
-    if (disabled) {
-      return
-    }
-    postMessage({
-      action: commonActions.clickContextMenu,
-      id: this.state.id,
-      args,
-      func
-    })
-    if (!noCloseMenu) {
-      this.closeContextMenu()
-    }
-  }
-
-  renderSubText = (subText) => {
-    return subText
-      ? (<span className='context-sub-text'>{subText}</span>)
-      : null
-  }
-
-  renderSubMenu = (submenu) => {
-    if (!submenu) {
-      return
-    }
-    const Mod = this.modules[submenu]
-    return (
-      <Mod {...this.props} />
-    )
-  }
-
-  renderItem = (item, i) => {
-    const {
-      disabled,
-      icon,
-      text,
-      noAutoClose,
-      requireConfirm,
-      confirmTitle,
-      subText,
-      className,
-      type,
-      module,
-      submenu
-    } = item
-    if (type === 'hr') {
-      return <hr />
-    }
-    const baseCls = 'context-item'
-    if (module && this.modules[module]) {
-      const Mod = this.modules[module]
-      return (
-        <div className={baseCls}>
-          <Mod {...this.props} />
-        </div>
-      )
-    }
-    let iconElem = null
-    if (icon && this.icons[icon]) {
-      const Icon = this.icons[icon]
-      iconElem = <Icon />
-    }
-    const cls = classnames(
-      baseCls,
-      {
-        disabled
-      },
-      {
-        'no-auto-close-context': noAutoClose
-      },
-      className,
-      {
-        'with-sub-menu': submenu
-      }
-    )
-    const act = requireConfirm || submenu
-      ? noop
-      : (e) => this.onClick(e, item)
-    const unit = (
-      <div
-        key={`context-item-${i}-${text}`}
-        className={cls}
-        onClick={act}
-      >
-        {iconElem}{iconElem ? ' ' : ''}{text}
-        {
-          this.renderSubText(subText)
-        }
-        {
-          this.renderSubMenu(submenu)
-        }
-      </div>
-    )
-    if (!requireConfirm) {
-      return unit
-    }
-    const title = (
-      <div className='wordbreak'>{confirmTitle}</div>
-    )
-    return (
-      <Popconfirm
-        cancelText={e('cancel')}
-        key={`context-item-${i}-${text}`}
-        okText={e('ok')}
-        title={title}
-        onConfirm={(e) => this.onClick(e, item)}
-      >
-        {unit}
-      </Popconfirm>
-    )
-  }
-
-  renderItems = () => {
-    return this.state.items.map(this.renderItem)
-  }
-
-  render () {
-    const { id, className } = this.state
-    if (!id) {
-      return null
-    }
-    const {
-      pos,
-      shouldScroll,
-      realHeight
-    } = this.computePos()
-    const cls = classnames(
-      className,
-      id ? 'show' : 'hide',
-      shouldScroll ? 'scroll' : ''
-    )
-    const innerProps = {
-      className: 'context-menu-inner',
-      style: {
-        height: (realHeight - contextMenuPaddingTop * 2) + 'px'
-      }
-    }
-    return (
-      <div
-        className={cls}
-        style={pos}
-      >
-        <div
-          {...innerProps}
-        >
-          {this.renderItems()}
-        </div>
-      </div>
-    )
-  }
-}