@electerm/electerm-react 1.60.18 → 1.60.29

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.29",
   "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>
-    )
-  }
-}

package/client/components/sftp/file-props-modal.jsx

@@ -1,210 +0,0 @@
-/**
- * file props
- */
-
-import { useState, useEffect } from 'react'
-import {
-  Modal,
-  Button
-} from 'antd'
-import {
-  commonActions,
-  isWin,
-  typeMap
-} from '../../common/constants'
-import resolve from '../../common/resolve'
-import { mode2permission } from '../../common/mode2permission'
-import time from '../../common/time'
-import renderPermission from './permission-render'
-import FileIcon from './file-icon'
-import fs from '../../common/fs'
-import postMsg from '../../common/post-msg'
-import { filesize } from 'filesize'
-import { runCmd } from '../terminal/terminal-apis'
-
-const e = window.translate
-const formatTime = time
-
-export default function FileInfoModal () {
-  const [state, setState] = useState({
-    loading: false
-  })
-  function onClose () {
-    setState({})
-  }
-  function onEvent (e) {
-    const {
-      action,
-      data
-    } = e.data || {}
-    if (action === commonActions.showFileInfoModal) {
-      setState(old => {
-        return {
-          ...old,
-          ...data,
-          size: 0
-        }
-      })
-    }
-  }
-  useEffect(() => {
-    window.addEventListener('message', onEvent)
-  }, [])
-  useEffect(() => {
-    postMsg({
-      action: commonActions.updateStore,
-      value: !!state.visible,
-      prop: 'showEditor'
-    })
-  }, [state.visible])
-  const {
-    visible,
-    file,
-    tab,
-    uidTree = {},
-    gidTree = {},
-    loading
-  } = state
-  if (!visible) {
-    return null
-  }
-  const {
-    name,
-    size,
-    owner,
-    group,
-    accessTime,
-    modifyTime,
-    isDirectory,
-    isSymbolicLink,
-    path,
-    mode,
-    type
-  } = file
-  const {
-    host,
-    port,
-    username
-  } = tab
-  const iconType = isDirectory ? 'folder' : 'file'
-  const ps = {
-    open: visible,
-    width: 500,
-    title: e(iconType) + ` ${e('attributes')}`,
-    footer: null,
-    onCancel: onClose
-  }
-  const fp = resolve(path, name)
-  const ffp = type === typeMap.local
-    ? fp
-    : `${username}@${host}:${port}:${fp}`
-  const perms = mode2permission(mode)
-  function setLoading (loading) {
-    setState(old => {
-      return {
-        ...old,
-        loading
-      }
-    })
-  }
-  function renderSize () {
-    if (isDirectory) {
-      return state.size || 0
-    }
-    return size
-  }
-  function getSize (str = '') {
-    if (isWin) {
-      const s = (str.stdout || '').split('\n').find(s => s.trim().startsWith('Sum'))
-      return s ? filesize(parseInt((s.split(':')[1]).trim(), 10)) : 0
-    } else {
-      return str.split(/\s+/)[0]
-    }
-  }
-  async function calcLocal (folder) {
-    const cmd = isWin
-      ? `Get-ChildItem -Recurse '${folder}' | Measure-Object -Property Length -Sum`
-      : `du -sh '${folder}'`
-    const func = isWin ? 'runWinCmd' : 'run'
-    const res = await fs[func](cmd).catch(window.store.onError)
-    return getSize(res)
-  }
-  async function calcRemote (folder) {
-    const cmd = `du -sh '${folder}'`
-    const r = await runCmd(
-      state.pid,
-      state.sessionId,
-      cmd
-    ).catch(window.store.onError)
-    return r ? r.split(/\s+/)[0] : 0
-  }
-  async function calc () {
-    setLoading(true)
-    const size = type === typeMap.local
-      ? await calcLocal(fp)
-      : await calcRemote(fp)
-    setState(old => {
-      return {
-        ...old,
-        loading: false,
-        size
-      }
-    })
-  }
-  function renderCalc () {
-    if (isDirectory) {
-      return (
-        <Button
-          onClick={calc}
-          loading={loading}
-          disabled={loading}
-          className='mg1l'
-        >
-          {e('calculate')}
-        </Button>
-      )
-    }
-  }
-  return (
-    <Modal
-      {...ps}
-    >
-      <div className='file-props-wrap relative'>
-        <FileIcon
-          className='file-icon'
-          file={file}
-          height={50}
-        />
-        <div className='file-props'>
-          <p className='bold'>{e(iconType)} {e('name')}:</p>
-          <p className='pd1b'>
-            {
-              isSymbolicLink
-                ? <sup className='color-blue symbolic-link-icon'>*</sup>
-                : null
-            }
-            {name}
-          </p>
-          <p className='bold'>{e('fullPath')}:</p>
-          <p className='pd1b'>{ffp}</p>
-          <p className='bold'>{e('size')}:</p>
-          <p className='pd1b'>{renderSize()}{renderCalc()}</p>
-          <p className='bold'>{e('accessTime')}:</p>
-          <p className='pd1b'>{formatTime(accessTime)}</p>
-          <p className='bold'>{e('modifyTime')}:</p>
-          <p className='pd1b'>{formatTime(modifyTime)}</p>
-          <p className='bold'>{e('owner')}</p>
-          <p className='pd1b'>{uidTree['' + owner]}</p>
-          <p className='bold'>{e('group')}</p>
-          <p className='pd1b'>{gidTree['' + group]}</p>
-          <p className='bold'>{e('mode')}:</p>
-          <div className='pd1b'>
-            {
-              perms.map(renderPermission)
-            }
-          </div>
-        </div>
-      </div>
-    </Modal>
-  )
-}

package/client/store/context-menu.js

@@ -1,23 +0,0 @@
-/**
- * context menu related functions
- */
-
-import postMessage from '../common/post-msg'
-import {
-  commonActions
-} from '../common/constants'
-
-export default Store => {
-  Store.prototype.openContextMenu = function (data) {
-    postMessage({
-      data,
-      type: commonActions.openContextMenu
-    })
-  }
-
-  Store.prototype.closeContextMenu = function () {
-    postMessage({
-      action: commonActions.closeContextMenu
-    })
-  }
-}