@electerm/electerm-react 2.4.38 → 2.5.6

package/client/components/common/ref.js

@@ -3,6 +3,7 @@ window.refs = new Map()
 window.refsStatic = new Map()
 window.refsTransfers = new Map()
 window.refsTabs = new Map()
+window.filesRef = new Map()
 
 class Ref {
   constructor (key) {
@@ -59,3 +60,4 @@ export const refs = new Ref('refs')
 export const refsTransfers = new Ref('refsTransfers')
 export const refsStatic = new Ref('refsStatic')
 export const refsTabs = new TabsRef('refsTabs')
+export const filesRef = new Ref('filesRef')

package/client/components/main/main.jsx

@@ -37,12 +37,8 @@ import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 
-function setupGlobalMessageDismiss () {
-}
-
 export default auto(function Index (props) {
   useEffect(() => {
-    setupGlobalMessageDismiss()
     const { store } = props
     window.addEventListener('resize', store.onResize)
     setTimeout(store.triggerResize, 200)
@@ -107,6 +103,7 @@ export default auto(function Index (props) {
     'not-mac': !isMac,
     'is-win': isWin,
     pinned,
+    'not-win': !isWin,
     'qm-pinned': pinnedQuickCommandBar,
     'term-fullscreen': terminalFullScreen,
     'is-main': !isSecondInstance

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

@@ -36,11 +36,8 @@ import time from '../../common/time'
 import { filesize } from 'filesize'
 import { createTransferProps } from './transfer-common'
 import generate from '../../common/uid'
-import { refsStatic, refs } from '../common/ref'
+import { refsStatic, refs, filesRef } from '../common/ref'
 import iconsMap from '../sys-menu/icons-map'
-import {
-  Dropdown
-} from 'antd'
 
 const e = window.translate
 
@@ -63,6 +60,7 @@ export default class FileSection extends React.Component {
   }
 
   componentDidMount () {
+    filesRef.add(this.id, this)
     this.applyStyle()
   }
 
@@ -84,6 +82,7 @@ export default class FileSection extends React.Component {
   }
 
   clearRef = () => {
+    filesRef.remove(this.id)
     refs.remove(this.id)
   }
 
@@ -91,11 +90,11 @@ export default class FileSection extends React.Component {
     return refsStatic.get('text-editor')
   }
 
-  handleDropdownOpenChange = (open) => {
-    if (open) {
-      this.forceUpdate()
-    }
-  }
+  // handleDropdownOpenChange = (open) => {
+  //   if (open) {
+  //     this.forceUpdate()
+  //   }
+  // }
 
   applyStyle = () => {
     if (!this.domRef) {
@@ -447,20 +446,18 @@ export default class FileSection extends React.Component {
     const {
       id,
       type,
-      isParent
+      isParent,
+      isEmpty
     } = file
-    if (isParent) {
-      return
+    if (isEmpty || isParent) {
+      return this.props.modifier({
+        selectedFiles: new Set()
+      })
     }
     this.props.modifier({
       lastClickedFile: file
     })
     this.onDragEnd(e)
-    if (!id) {
-      return this.props.modifier({
-        selectedFiles: new Set()
-      })
-    }
     const selectedFilesOld = this.props.getSelectedFiles()
     const isSameSide = selectedFilesOld.length &&
       type === selectedFilesOld[0].type
@@ -519,7 +516,7 @@ export default class FileSection extends React.Component {
 
   handleBlur = () => {
     const file = copy(this.state.file)
-    const { nameTemp, name, id, type } = this.state.file
+    const { nameTemp, name, type, id } = this.state.file
     if (name === nameTemp) {
       if (!id) {
         return this.cancelNew(type)
@@ -854,8 +851,8 @@ export default class FileSection extends React.Component {
     return this.props.renderDelConfirmTitle(files, true)
   }
 
-  showModeEdit (type, id) {
-    if (!id) {
+  showModeEdit (type, isRealFile) {
+    if (!isRealFile) {
       return false
     }
     if (type === typeMap.remote) {
@@ -865,6 +862,7 @@ export default class FileSection extends React.Component {
   }
 
   handleContextMenuCapture = (e) => {
+    this.props.setClickFileId(this.id)
     if (!this.isSelected(this.state.file.id)) {
       this.onClick(e)
     }
@@ -925,12 +923,13 @@ export default class FileSection extends React.Component {
         isDirectory,
         size,
         id,
+        isEmpty,
         isParent
       },
       selectedFiles,
       tab
     } = this.props
-    const isRealFile = id && !isParent
+    const isRealFile = !isEmpty && !isParent
     const hasHost = !!tab.host
     const { enableSsh } = tab
     const isLocal = type === typeMap.local
@@ -1202,9 +1201,7 @@ export default class FileSection extends React.Component {
     const props = {
       className,
       draggable: draggable && !isParent,
-      onDoubleClick: this.transferOrEnterDirectory,
       ...pick(this, [
-        'onClick',
         'onDrag',
         'onDragEnter',
         'onDragExit',
@@ -1216,33 +1213,22 @@ export default class FileSection extends React.Component {
       onDragStart: onDragStart || this.onDragStart,
       'data-id': id,
       id: this.id,
-      'data-is-parent': isParent ? 'y' : 'n',
       'data-type': type,
       title: file.name
     }
-    const ddProps = {
-      menu: {
-        items: this.renderContextMenu(),
-        onClick: this.onContextMenu
-      },
-      trigger: ['contextMenu'],
-      onOpenChange: this.handleDropdownOpenChange
-    }
     return (
-      <Dropdown {...ddProps}>
-        <div
-          ref={this.domRef}
-          {...props}
-          onContextMenu={this.handleContextMenuCapture}
-        >
-          <div className='file-bg' />
-          <div className='file-props-div'>
-            {
-              properties.map(this.renderProp)
-            }
-          </div>
+      <div
+        ref={this.domRef}
+        {...props}
+        onContextMenu={this.handleContextMenuCapture}
+      >
+        <div className='file-bg' />
+        <div className='file-props-div'>
+          {
+            properties.map(this.renderProp)
+          }
         </div>
-      </Dropdown>
+      </div>
     )
   }
 }

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

@@ -3,6 +3,7 @@
  */
 
 import { Component } from 'react'
+import { Dropdown } from 'antd'
 import classnames from 'classnames'
 import FileSection from './file-item'
 import PagedList from './paged-list'
@@ -11,6 +12,7 @@ import {
   CheckOutlined
 } from '@ant-design/icons'
 import IconHolder from '../sys-menu/icon-holder'
+import { filesRef } from '../common/ref'
 
 const e = window.translate
 
@@ -168,57 +170,6 @@ export default class FileListTable extends Component {
     'left'
   ]
 
-  // saveOldStyle = () => {
-  //   const { properties } = this.state
-  //   const ids = [
-  //     ...properties,
-  //     ...splitHandles
-  //   ]
-  //   const { type, id } = this.props
-  //   const parentWidth = document.querySelector(
-  //     `#id-${id} .tw-${type} .sftp-table`
-  //   ).clientWidth
-  //   this.oldStyles = ids.reduce((prev, { id, name }) => {
-  //     const sel = `.session-current .tw-${type} .sftp-file-table-header .shi-${name || id}`
-  //     return {
-  //       ...prev,
-  //       [name || id]: {
-  //         style: pick(
-  //           document.querySelector(sel)?.style || {},
-  //           this.positionProps
-  //         ),
-  //         parentWidth
-  //       }
-  //     }
-  //   }, {})
-  // }
-
-  // changePosition = (
-  //   dom,
-  //   xDiff,
-  //   type,
-  //   style
-  // ) => {
-  //   const realWidth = style.width
-  //   const realLeft = style.left
-  //   if (type === 'prev') {
-  //     dom.forEach(d => {
-  //       d.style.width = (realWidth + xDiff) + 'px'
-  //     })
-  //   } else if (type === 'dom') {
-  //     dom.style.left = (realLeft + xDiff) + 'px'
-  //   } else {
-  //     dom.forEach(d => {
-  //       d.style.width = (realWidth - xDiff) + 'px'
-  //       d.style.left = (realLeft + xDiff) + 'px'
-  //     })
-  //   }
-  // }
-
-  // onDragEnd = () => {}
-
-  // onDoubleClick = () => this.resetWidth()
-
   hasPager = () => {
     const {
       pageSize
@@ -230,36 +181,29 @@ export default class FileListTable extends Component {
     return len > pageSize
   }
 
-  // rebuildStyle = (name) => {
-  //   let { style, parentWidth } = this.oldStyles[name]
-  //   style = copy(style)
-  //   const {
-  //     type,
-  //     id
-  //   } = this.props
-  //   const currentParentWidth = document.querySelector(
-  //     `#id-${id} .tw-${type} .sftp-table`
-  //   ).clientWidth
-  //   style.width = (parseFloat(style.width) * currentParentWidth / parentWidth) + 'px'
-  //   style.left = (parseFloat(style.left) * currentParentWidth / parentWidth) + 'px'
-  //   return style
-  // }
-
   // reset
   resetWidth = () => {
     this.setState(this.initFromProps())
   }
 
+  setClickFileId = (id) => {
+    this.currentFileId = id
+  }
+
   renderItem = (item) => {
     const { type } = this.props
     const cls = item.isParent ? 'parent-file-item' : 'real-file-item'
     const key = item.id
+    const fileProps = {
+      ...this.props.getFileProps(item, type),
+      cls,
+      properties: this.state.properties,
+      setClickFileId: this.setClickFileId
+    }
     return (
       <FileSection
-        {...this.props.getFileProps(item, type)}
+        {...fileProps}
         key={key}
-        cls={cls}
-        properties={this.state.properties}
       />
     )
   }
@@ -268,9 +212,59 @@ export default class FileListTable extends Component {
     this.onToggleProp(key)
   }
 
+  handleClick = (e) => {
+    const target = e.target.closest('[data-id]')
+    if (target) {
+      const id = target.getAttribute('data-id')
+      const refKey = 'file-' + id
+      const ref = filesRef.get(refKey)
+      if (ref) {
+        ref.onClick(e)
+      }
+    }
+  }
+
+  handleDoubleClick = (e) => {
+    const target = e.target.closest('[data-id]')
+    if (target) {
+      const id = target.getAttribute('data-id')
+      const ref = filesRef.get('file-' + id)
+      if (ref) {
+        ref.transferOrEnterDirectory(e)
+      }
+    }
+  }
+
+  getClickedFile = () => {
+    const refKey = this.currentFileId
+    return filesRef.get(refKey)
+  }
+
+  handleDropdownOpenChange = (open) => {
+    if (open) {
+      this.forceUpdate()
+    }
+  }
+
+  onContextMenuFile = ({ key }) => {
+    if (key !== 'more-submenu') {
+      const inst = this.getClickedFile()
+      if (inst) {
+        inst[key]()
+      }
+    }
+  }
+
+  renderContextMenuFile = () => {
+    const fileInst = this.getClickedFile()
+    return fileInst ? fileInst.renderContextMenu() : []
+  }
+
   renderParent = (type) => {
     const { parentItem } = this.props
-    return parentItem ? this.renderItem(parentItem) : null
+    return parentItem
+      ? this.renderItem(parentItem)
+      : null
   }
 
   render () {
@@ -282,7 +276,9 @@ export default class FileListTable extends Component {
       style: {
         height: height - 42 - 30 - 32 - 90
       },
-      draggable: false
+      draggable: false,
+      onClick: this.handleClick,
+      onDoubleClick: this.handleDoubleClick
     }
     const hasPager = this.hasPager()
     const cls = classnames(
@@ -291,21 +287,37 @@ export default class FileListTable extends Component {
         'sftp-has-pager': hasPager
       }
     )
-
+    const ddProps = {
+      menu: {
+        items: this.renderContextMenuFile(),
+        onClick: this.onContextMenuFile
+      },
+      trigger: ['contextMenu'],
+      onOpenChange: this.handleDropdownOpenChange
+    }
     return (
       <div className={cls}>
         {this.renderTableHeader()}
-        <div
-          {...props}
-        >
-          {this.props.renderEmptyFile(type)}
-          {this.renderParent(type)}
-          <PagedList
-            list={fileList}
-            renderItem={this.renderItem}
-            hasPager={hasPager}
-          />
-        </div>
+        <Dropdown {...ddProps}>
+          <div
+            {...props}
+          >
+            {
+                this.props.renderEmptyFile(
+                  type,
+                  {
+                    setClickFileId: this.setClickFileId
+                  }
+                )
+            }
+            {this.renderParent(type)}
+            <PagedList
+              list={fileList}
+              renderItem={this.renderItem}
+              hasPager={hasPager}
+            />
+          </div>
+        </Dropdown>
       </div>
     )
   }

package/client/components/sftp/sftp-entry.jsx

@@ -1054,29 +1054,45 @@ export default class Sftp extends Component {
     }
   }
 
-  renderEmptyFile = (type) => {
+  renderEmptyFile = (type, extra = {}) => {
+    const uniqueId = this.getPathUid(type, 'empty')
     const item = {
       type,
       name: '',
-      isDirectory: true
+      isDirectory: true,
+      id: uniqueId,
+      isEmpty: true
+    }
+    const allProps = {
+      ...this.getFileProps(item, type),
+      ...extra,
+      cls: 'virtual-file-unit',
+      key: 'empty' + type,
+      isEmpty: true,
+      draggable: false,
+      ref: ref => {
+        this[type + 'Dom'] = ref
+      }
     }
     return (
       <div
         className={`virtual-file virtual-file-${type}`}
       >
         <FileSection
-          {...this.getFileProps(item, type)}
-          ref={ref => {
-            this[type + 'Dom'] = ref
-          }}
-          draggable={false}
-          cls='virtual-file-unit'
-          key={'empty' + type}
+          {...allProps}
+          key={uniqueId}
         />
       </div>
     )
   }
 
+  getPathUid = (type, type1) => {
+    const currentPath = this.state[`${type}Path`]
+    const parentPath = resolve(currentPath, '..')
+    const { id } = this.props.tab
+    return `${type1}-${parentPath}-${id}-${type}`
+  }
+
   renderParentItem = (type) => {
     const currentPath = this.state[`${type}Path`]
     const parentPath = resolve(currentPath, '..')
@@ -1085,8 +1101,7 @@ export default class Sftp extends Component {
       return null
     }
 
-    const { id } = this.props.tab
-    const uniqueId = `parent-${parentPath}-${id}-${type}`
+    const uniqueId = this.getPathUid(type, 'parent')
 
     return {
       type,

package/client/components/sidebar/sidebar.styl

@@ -13,7 +13,8 @@
   .item-list-unit:hover
     .list-item-remove
       display none !important
-
+.sidebar-panel
+  top 36px
 .sidebar
   position absolute
   left 0

package/client/components/tabs/app-drag.jsx

@@ -48,23 +48,37 @@ export default function AppDrag (props) {
       window.pre.runGlobalAsync('maximize')
     }
   }
+  if (!window.store.shouldSendWindowMove) {
+    useEffect(() => {
+      // Listen for mouseup at document level to catch mouseup outside window
+      document.addEventListener('mouseup', onMouseUp)
+      window.addEventListener('contextmenu', onMouseUp)
 
-  useEffect(() => {
-    // Listen for mouseup at document level to catch mouseup outside window
-    document.addEventListener('mouseup', onMouseUp)
-    window.addEventListener('contextmenu', onMouseUp)
-
-    return () => {
-      document.removeEventListener('mouseup', onMouseUp)
-      window.removeEventListener('contextmenu', onMouseUp)
+      return () => {
+        document.removeEventListener('mouseup', onMouseUp)
+        window.removeEventListener('contextmenu', onMouseUp)
+      }
+    }, [])
+  }
+  const props0 = {
+    className: 'app-drag',
+    onDoubleClick
+  }
+  if (
+    window.store.shouldSendWindowMove
+  ) {
+    Object.assign(props0, {
+      onMouseDown,
+      onMouseUp
+    })
+  } else {
+    props0.style = {
+      WebkitAppRegion: 'drag'
     }
-  }, [])
+  }
   return (
     <div
-      className='app-drag'
-      onMouseDown={onMouseDown}
-      onMouseUp={onMouseUp}
-      onDoubleClick={onDoubleClick}
+      {...props0}
     >
       {props.children}
     </div>

package/client/components/tabs/tabs.styl

@@ -308,3 +308,11 @@
   text-overflow ellipsis
   white-space nowrap
 
+.not-webapp.not-win
+  .tab
+  .tabs-add-btn
+  .window-control-box
+  .tab-close
+  .tab-reload
+  .tabs-extra
+    -webkit-app-region no-drag

package/client/store/event.js

@@ -12,13 +12,17 @@ export default Store => {
 
   Store.prototype.blur = function () {
     window.focused = false
-    window.pre.runSync('windowMove', false)
+    if (window.store.shouldSendWindowMove) {
+      window.pre.runSync('windowMove', false)
+    }
     refs.get('term-' + window.store.activeTabId)?.term?.blur()
   }
 
   Store.prototype.onBlur = function () {
     window.focused = false
-    window.pre.runSync('windowMove', false)
+    if (window.store.shouldSendWindowMove) {
+      window.pre.runSync('windowMove', false)
+    }
   }
 
   Store.prototype.selectall = function () {

package/client/store/store.js

@@ -36,7 +36,8 @@ import {
   settingMap,
   terminalSshConfigType,
   paneMap,
-  staticNewItemTabs
+  staticNewItemTabs,
+  isWin
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import createTitle from '../common/create-title'
@@ -89,6 +90,12 @@ class Store {
     return tab.props.tab
   }
 
+  get shouldSendWindowMove () {
+    return isWin &&
+        !window.et.isWebApp &&
+        !window.store.config.useSystemTitleBar
+  }
+
   get batchInputSelectedTabIds () {
     return Array.from(window.store._batchInputSelectedTabIds)
   }

package/package.json

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