@electerm/electerm-react 3.15.32 → 3.15.36

package/client/components/session/session.jsx

@@ -537,7 +537,7 @@ export default class SessionWrapper extends Component {
   }
 
   renderKeepaliveIcon = () => {
-    if (this.isSshDisabled() || !this.props.tab.authType) {
+    if (this.isSshDisabled()) {
       return null
     }
     const { keepaliveEnabled } = this.state

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

@@ -27,7 +27,6 @@ import {
   paneMap,
   isMac, maxEditFileSize, ctrlOrCmd
 } from '../../common/constants'
-import findParent from '../../common/find-parent'
 import sorter from '../../common/index-sorter'
 import { getFolderFromFilePath, getLocalFileInfo } from './file-read'
 import { readClipboard, copy as copyToClipboard, hasFileInClipboardText } from '../../common/clipboard'
@@ -192,33 +191,6 @@ export default class FileSection extends React.Component {
     this.props.addTransferList(res)
   }
 
-  onDrag = () => {}
-
-  onDragEnter = e => {
-    let { target } = e
-    target = findParent(target, '.' + fileItemCls)
-    if (!target) {
-      return e.preventDefault()
-    }
-    this.dropTarget = target
-    target.classList.add(onDragOverCls)
-  }
-
-  onDragExit = () => {}
-
-  onDragLeave = e => {
-    let { target } = e
-    target = findParent(target, '.' + fileItemCls)
-    if (!target) {
-      return e.preventDefault()
-    }
-    target.classList.remove(onDragOverCls)
-  }
-
-  onDragOver = e => {
-    e.preventDefault()
-  }
-
   onDragStart = e => {
     this.props.modifier({
       onDrag: true
@@ -248,6 +220,16 @@ export default class FileSection extends React.Component {
     return getDropFileList(data)
   }
 
+  onDragEnd = () => {
+    this.props.modifier({
+      onDrag: false
+    })
+    removeClass(this.domRef.current, onDragCls, onMultiDragCls)
+    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
+      removeClass(d, onDragOverCls)
+    })
+  }
+
   onDrop = async e => {
     e.preventDefault()
     const fromFileManager = !!e?.dataTransfer?.files?.length
@@ -279,17 +261,6 @@ export default class FileSection extends React.Component {
     this.onDropFile(fromFiles, toFile, fromFileManager)
   }
 
-  onDragEnd = e => {
-    this.props.modifier({
-      onDrag: false
-    })
-    removeClass(this.domRef.current, onDragCls, onMultiDragCls)
-    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
-      removeClass(d, onDragOverCls)
-    })
-    e && e.dataTransfer && e.dataTransfer.clearData()
-  }
-
   onDropFile = async (fromFiles, toFile, fromFileManager) => {
     const { type: fromType } = fromFiles[0]
     const {
@@ -1297,15 +1268,7 @@ export default class FileSection extends React.Component {
     const props = {
       className,
       draggable: draggable && !isParent,
-      ...pick(this, [
-        'onDrag',
-        'onDragEnter',
-        'onDragExit',
-        'onDragLeave',
-        'onDragOver',
-        'onDrop',
-        'onDragEnd'
-      ]),
+      onDrop: this.onDrop,
       onDragStart: onDragStart || this.onDragStart,
       'data-id': id,
       id: this.id,

package/client/components/sftp/list-table-ui.jsx

@@ -13,8 +13,14 @@ import {
 } from '@ant-design/icons'
 import IconHolder from '../sys-menu/icon-holder'
 import { filesRef } from '../common/ref'
+import findParent from '../../common/find-parent'
+import { removeClass } from '../../common/class'
 
 const e = window.translate
+const fileItemCls = 'sftp-item'
+const onDragCls = 'sftp-ondrag'
+const onDragOverCls = 'sftp-dragover'
+const onMultiDragCls = 'sftp-dragover-multi'
 
 export default class FileListTable extends Component {
   constructor (props) {
@@ -27,6 +33,67 @@ export default class FileListTable extends Component {
 
   containerRef = createRef()
 
+  onDragOver = e => {
+    e.preventDefault()
+  }
+
+  onDragEnter = e => {
+    let { target } = e
+    target = findParent(target, '.' + fileItemCls)
+    if (!target) {
+      return e.preventDefault()
+    }
+    if (this.dropTarget && this.dropTarget !== target) {
+      this.dropTarget.classList.remove(onDragOverCls)
+    }
+    this.dropTarget = target
+    target.classList.add(onDragOverCls)
+  }
+
+  onDragLeave = e => {
+    let { target } = e
+    target = findParent(target, '.' + fileItemCls)
+    if (!target) {
+      return e.preventDefault()
+    }
+    if (
+      this.containerRef.current &&
+      !this.containerRef.current.contains(e.relatedTarget)
+    ) {
+      target.classList.remove(onDragOverCls)
+    }
+  }
+
+  onDrop = e => {
+    e.preventDefault()
+    let { target } = e
+    if (!target) {
+      return
+    }
+    target = findParent(target, '.' + fileItemCls)
+    if (!target) {
+      return
+    }
+    const id = target.getAttribute('data-id')
+    const ref = filesRef.get('file-' + id)
+    if (ref) {
+      ref.onDrop(e)
+    }
+  }
+
+  onDragEnd = e => {
+    this.props.modifier({
+      onDrag: false
+    })
+    document.querySelectorAll('.' + onDragCls).forEach((d) => {
+      removeClass(d, onDragCls, onMultiDragCls)
+    })
+    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
+      removeClass(d, onDragOverCls)
+    })
+    e && e.dataTransfer && e.dataTransfer.clearData()
+  }
+
   componentDidUpdate (prevProps) {
     const prevList = prevProps.fileList
     const nextList = this.props.fileList
@@ -289,7 +356,12 @@ export default class FileListTable extends Component {
       draggable: false,
       onScroll: this.onScroll,
       onClick: this.handleClick,
-      onDoubleClick: this.handleDoubleClick
+      onDoubleClick: this.handleDoubleClick,
+      onDragOver: this.onDragOver,
+      onDragEnter: this.onDragEnter,
+      onDragLeave: this.onDragLeave,
+      onDrop: this.onDrop,
+      onDragEnd: this.onDragEnd
     }
     const cls = classnames('sftp-table relative')
     const ddProps = {

package/client/components/terminal/terminal.jsx

@@ -1356,7 +1356,7 @@ class Term extends Component {
         id
       )
     }
-    return `ws://${host}:${port}/terminals/${id}?token=${tokenElecterm}`
+    return `ws://${host}:${port}/terminals/${id}`
   }
 
   remoteInit = async (term = this.term) => {
@@ -1448,7 +1448,7 @@ class Term extends Component {
     if (this.onClose) {
       if (r && r.port) {
         try {
-          const tmpSock = new WebSocket(this.buildWsUrl(r.port))
+          const tmpSock = new WebSocket(this.buildWsUrl(r.port), [this.props.config.tokenElecterm])
           tmpSock.onopen = () => tmpSock.close()
         } catch (_e) {}
       }
@@ -1477,7 +1477,7 @@ class Term extends Component {
     term.pid = id
     this.pid = id
     const wsUrl = this.buildWsUrl(r.port)
-    const socket = new WebSocket(wsUrl)
+    const socket = new WebSocket(wsUrl, [this.props.config.tokenElecterm])
     socket.onclose = this.oncloseSocket
     socket.onerror = this.onerrorSocket
     this.socket = socket

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

@@ -96,7 +96,7 @@ export default class VncSession extends PureComponent {
         extra
       )
     }
-    return `ws://${host}:${port}/${type}/${id}?token=${tokenElecterm}${extra}`
+    return `ws://${host}:${port}/${type}/${id}${extra}`
   }
 
   getControlProps = (options = {}) => {
@@ -226,7 +226,7 @@ export default class VncSession extends PureComponent {
     }
 
     const { width, height } = this.calcCanvasSize()
-    const wsUrl = this.buildWsUrl(port, 'vnc', `&width=${width}&height=${height}`)
+    const wsUrl = this.buildWsUrl(port, 'vnc', `?width=${width}&height=${height}`)
     // When scaleViewport is false, we don't set fixed dimensions on the canvas
     // so it can render at the actual remote screen size
     const vncOpts = {
@@ -243,7 +243,8 @@ export default class VncSession extends PureComponent {
             overflow: 'hidden'
           }
         : {},
-      credentials: {}
+      credentials: {},
+      wsProtocols: [this.props.config.tokenElecterm]
     }
     if (username) {
       vncOpts.credentials.username = username

package/package.json

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

package/client/entry/basic.js

@@ -1,62 +0,0 @@
-/**
- * init app data then write main script to html body
- */
-import '../css/basic.styl'
-import '../css/mobile.styl'
-import { get as _get } from 'lodash-es'
-import '../common/pre'
-
-const { isDev } = window.et
-const { version } = window.pre.packInfo
-
-async function loadWorker () {
-  return new Promise((resolve) => {
-    const url = !isDev ? `js/worker-${version}.js` : 'js/worker.js'
-    window.worker = new window.Worker(url)
-    function onInit (e) {
-      if (!e || !e.data) {
-        return false
-      }
-      const {
-        action
-      } = e.data
-      if (action === 'worker-init') {
-        window.worker.removeEventListener('message', onInit)
-        resolve(1)
-      }
-    }
-    window.worker.addEventListener('message', onInit)
-  })
-}
-
-async function load () {
-  window.capitalizeFirstLetter = (string) => {
-    return string.charAt(0).toUpperCase() + string.slice(1)
-  }
-  function loadScript () {
-    const rcs = document.createElement('script')
-    const url = !isDev ? `js/electerm-${version}.js` : 'js/electerm.js'
-    rcs.src = url
-    rcs.type = 'module'
-    rcs.onload = () => {
-      const loadingEl = document.getElementById('content-loading')
-      if (loadingEl) {
-        document.body.removeChild(loadingEl)
-      }
-    }
-    document.body.appendChild(rcs)
-  }
-  window.getLang = (lang = window.store?.config.language || 'en_us') => {
-    return _get(window.langMap, `[${lang}].lang`)
-  }
-  window.translate = txt => {
-    const lang = window.getLang()
-    const str = _get(lang, `[${txt}]`) || txt
-    return window.capitalizeFirstLetter(str)
-  }
-  await loadWorker()
-  loadScript()
-}
-
-// window.addEventListener('load', load)
-load()

package/client/entry/electerm.jsx

@@ -1,9 +0,0 @@
-import { createRoot } from 'react-dom/client'
-import 'antd/dist/reset.css'
-import '@fontsource/maple-mono/index.css'
-import Main from '../components/main/index.jsx'
-
-const rootElement = createRoot(document.getElementById('container'))
-rootElement.render(
-  <Main />
-)

package/client/entry/worker.js

@@ -1,146 +0,0 @@
-/**
- * web worker
- */
-
-self.insts = {}
-
-function createWs (
-  type,
-  id,
-  sftpId = '',
-  config
-) {
-  // init gloabl ws
-  const { host, port, tokenElecterm } = config
-  const wsUrl = `ws://${host}:${port}/${type}/${id}?&sftpId=${sftpId}&token=${tokenElecterm}`
-  const ws = new WebSocket(wsUrl)
-  ws.s = msg => {
-    try {
-      ws.send(JSON.stringify(msg))
-    } catch (e) {
-      console.error('ws send error', e)
-    }
-  }
-  ws.id = id
-  ws.once = (callack, id) => {
-    const func = (evt) => {
-      const arg = JSON.parse(evt.data)
-      if (id === arg.id) {
-        callack(arg)
-        ws.removeEventListener('message', func)
-      }
-    }
-    ws.addEventListener('message', func)
-  }
-  ws.onclose = () => {
-    if (ws.dup) {
-      return
-    }
-    send({
-      id: ws.id,
-      action: 'close'
-    })
-    delete self.insts[ws.id]
-  }
-  return new Promise((resolve) => {
-    ws.onopen = () => {
-      if (self.insts[ws.id]) {
-        ws.dup = true
-        ws.close()
-        resolve(null)
-      } else {
-        resolve(ws)
-      }
-    }
-  })
-}
-
-function send (data) {
-  self.postMessage(data)
-}
-
-async function onMsg (e) {
-  const {
-    id,
-    wsId,
-    args,
-    action,
-    type,
-    persist
-  } = e.data
-  if (action === 'create') {
-    const inst = self.insts[id]
-    if (inst instanceof WebSocket) {
-      return send({
-        action,
-        id,
-        persist
-      }, '*')
-    } else if (inst) {
-      return false
-    } else {
-      const ws = await createWs(...args)
-      if (ws) {
-        self.insts[id] = ws
-      }
-    }
-    send({
-      action,
-      persist,
-      id
-    }, '*')
-  } else if (action === 'once') {
-    const ws = self.insts[wsId]
-    if (ws) {
-      const cb = (data) => {
-        send({
-          id,
-          wsId,
-          data
-        })
-      }
-      ws.once(cb, id)
-    }
-  } else if (action === 'close') {
-    const ws = self.insts[wsId]
-    if (ws) {
-      ws.close()
-    }
-  } else if (action === 's') {
-    const ws = self.insts[wsId]
-    if (ws) {
-      ws.s(...args)
-    }
-  } else if (action === 'addEventListener') {
-    const ws = self.insts[wsId]
-    if (ws) {
-      if (!ws.cbs) {
-        ws.cbs = {}
-      }
-      const cb = (e) => {
-        send({
-          wsId,
-          id,
-          data: {
-            data: e.data
-          }
-        })
-      }
-      ws.cbs[id] = cb
-      ws.addEventListener(type, cb)
-    }
-  } else if (action === 'removeEventListener') {
-    const ws = self.insts[wsId]
-    if (ws && ws.cbs && ws.cbs[id]) {
-      ws.removeEventListener(type, ws.cbs[id])
-      delete ws.cbs[id]
-    }
-  }
-}
-
-self.addEventListener('message', onMsg)
-setTimeout(() => {
-  send({
-    action: 'worker-init'
-  })
-}, 10)