@electerm/electerm-react 2.3.18 → 2.3.30

package/client/common/has-active-input.js

@@ -0,0 +1,10 @@
+export default function hasActiveInput (className = 'ant-input-search') {
+  const activeElement = document.activeElement
+  const isInput = activeElement && (
+    activeElement.tagName === 'INPUT' ||
+    activeElement.tagName === 'TEXTAREA'
+  )
+  const hasClass = className ? activeElement.classList.contains(className) : true
+  const hasInputDropDown = document.querySelector('.ant-dropdown:not(.ant-dropdown-hidden)')
+  return (isInput && hasClass) || hasInputDropDown
+}

package/client/components/file-transfer/transfer.styl

@@ -33,7 +33,8 @@
   display flex
   padding 8px 5px
   &:hover
-    background var(--main-darker)
+    background var(--primary)
+    color var(--primary-contrast)
 .sftp-transport .transfer-control-icon:hover
   color var(--primary)
 

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

@@ -119,7 +119,7 @@ export default class FileSection extends React.Component {
 
   onCopy = (targetFiles, isCut) => {
     const { file } = this.state
-    const selected = this.isSelected(file)
+    const selected = this.isSelected(file.id)
     const files = targetFiles ||
       (
         selected
@@ -138,7 +138,7 @@ export default class FileSection extends React.Component {
 
   onCopyPath = (targetFiles) => {
     const { file } = this.state
-    const selected = this.isSelected(file)
+    const selected = this.isSelected(file.id)
     const files = targetFiles ||
       (
         selected
@@ -339,7 +339,7 @@ export default class FileSection extends React.Component {
   }
 
   transferDrop = (fromFiles, toFile, operation) => {
-    const files = this.isSelected(fromFiles[0])
+    const files = this.isSelected(fromFiles[0]?.id)
       ? this.props.getSelectedFiles()
       : fromFiles
     return this.doTransferSelected(
@@ -351,8 +351,8 @@ export default class FileSection extends React.Component {
     )
   }
 
-  isSelected = file => {
-    return this.props.selectedFiles.has(file.id)
+  isSelected = (fileId = '') => {
+    return this.props.selectedFiles.has(fileId)
   }
 
   doRename = () => {
@@ -872,7 +872,7 @@ export default class FileSection extends React.Component {
   }
 
   handleContextMenuCapture = (e) => {
-    if (!this.isSelected(this.state.file)) {
+    if (!this.isSelected(this.state.file.id)) {
       this.onClick(e)
     }
     this.contextMenuPosition = {

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

@@ -27,7 +27,7 @@ import fs from '../../common/fs'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
-
+import { LoadingOutlined } from '@ant-design/icons'
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
@@ -47,7 +47,8 @@ export default class Sftp extends Component {
       onEditFile: false,
       ...this.defaultState(),
       loadingSftp: false,
-      inited: false
+      inited: false,
+      ready: false
     }
     this.retryCount = 0
   }
@@ -58,6 +59,11 @@ export default class Sftp extends Component {
     if (this.props.isFtp) {
       this.initFtpData()
     }
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 100)
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -1261,10 +1267,18 @@ export default class Sftp extends Component {
   }
 
   render () {
-    const { height } = this.props
     const {
-      id
+      id,
+      ready
     } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    const { height } = this.props
     const all = {
       className: 'sftp-wrap overhide relative',
       id: `id-${id}`,

package/client/components/sftp/sftp.styl

@@ -33,7 +33,7 @@
   box-shadow none
   border none
   height 0
-  background main
+  background var(--main)
   overflow hidden
   border-radius 3px
   &.focused
@@ -46,7 +46,8 @@
   cursor pointer
   border-bottom 1px solid var(--main-darker)
   &:hover
-    background var(--main-darker)
+    background var(--primary)
+    color var(--primary-contrast)
 
 .sftp-item-title
   width 100%
@@ -115,7 +116,7 @@
   height 28px
   line-height 25px
   padding 0 5px
-  background main
+  background var(--main)
   overflow hidden
   white-space nowrap
   text-overflow ellipsis

package/client/components/sidebar/index.jsx

@@ -20,6 +20,7 @@ import {
 } from '../../common/constants'
 import SideIcon from './side-icon'
 import SidePanel from './side-panel'
+import hasActiveInput from '../../common/has-active-input'
 import './sidebar.styl'
 
 const e = window.translate
@@ -50,6 +51,11 @@ export default memo(function Sidebar (props) {
     if (pinned) {
       return false
     }
+
+    if (hasActiveInput()) {
+      return false
+    }
+
     handler.current = setTimeout(
       () => store.setOpenedSideBar(''),
       400

package/client/components/sidebar/sidebar.styl

@@ -21,7 +21,7 @@
   width 36px
   z-index 100
   bottom 0
-  background var(--main-darker)
+  background var(--main-dark)
 
   .item-list
     padding-right 0
@@ -86,7 +86,7 @@
       color var(--success)
 //btns
 .btns
-  background var(--main-darker)
+  background var(--main-dark)
   border-color var(--primary)
   .open-about-icon
     color var(--text-dark)

package/client/components/sys-menu/sub-tab-menu.jsx

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react'
-import { createTitleWithTag } from '../../common/create-title'
+import createTitle from '../../common/create-title'
 
 export default class TabsSubMenuChild extends PureComponent {
   handleClick = () => {
@@ -8,7 +8,7 @@ export default class TabsSubMenuChild extends PureComponent {
 
   render () {
     const { item } = this.props
-    const title = createTitleWithTag(item)
+    const title = createTitle(item)
     return (
       <div
         className='sub-context-menu-item'

package/client/components/sys-menu/sys-menu.styl

@@ -42,16 +42,18 @@
   left 100%
   top 0
   background var(--main)
-  box-shadow 0px 0px 3px 3px var(--main-lighter)
+  box-shadow 0px 0px 3px 3px var(--main-darker)
   max-height 300px
   overflow-y scroll
+  color var(--text)
 .with-sub-menu
   &:hover
     .sub-context-menu
       display block
+
 .sub-context-menu-item
   cursor pointer
-  padding 10px 16px
+  padding 5px 16px
   overflow hidden
   white-space nowrap
   text-overflow ellipsis

package/client/components/tabs/add-btn.jsx

@@ -0,0 +1,258 @@
+/**
+ * Add button component for tabs
+ */
+
+import React, { Component } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  CodeFilled,
+  PlusOutlined,
+  RightSquareFilled
+} from '@ant-design/icons'
+import BookmarksList from '../sidebar/bookmark-select'
+import classNames from 'classnames'
+import hasActiveInput from '../../common/has-active-input'
+import './add-btn.styl'
+
+const e = window.translate
+
+export default class AddBtn extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      open: false,
+      menuPosition: 'right',
+      menuTop: 0,
+      menuLeft: 0
+    }
+    this.addBtnRef = React.createRef()
+    this.menuRef = React.createRef()
+    this.hideTimeout = null
+    this.portalContainer = null
+  }
+
+  getPortalContainer = () => {
+    if (!this.portalContainer) {
+      this.portalContainer = document.createElement('div')
+      this.portalContainer.className = 'add-btn-menu-portal'
+      document.body.appendChild(this.portalContainer)
+    }
+    return this.portalContainer
+  }
+
+  componentDidMount () {
+    document.addEventListener('click', this.handleDocumentClick)
+    // Listen for dropdown events to prevent menu closing
+    document.addEventListener('ant-dropdown-show', this.handleDropdownShow)
+    document.addEventListener('ant-dropdown-hide', this.handleDropdownHide)
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.handleDocumentClick)
+    document.removeEventListener('ant-dropdown-show', this.handleDropdownShow)
+    document.removeEventListener('ant-dropdown-hide', this.handleDropdownHide)
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+    }
+    // Clean up portal container
+    if (this.portalContainer) {
+      document.body.removeChild(this.portalContainer)
+      this.portalContainer = null
+    }
+  }
+
+  handleDropdownShow = () => {
+    // Cancel any pending hide timeout when dropdown shows
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+
+  handleDropdownHide = () => {
+    // Small delay after dropdown hides before allowing menu to close
+    // This prevents flicker when dropdown closes
+  }
+
+  handleDocumentClick = (e) => {
+    // Don't close menu when clicking inside menu or add button
+    if (this.menuRef.current && this.menuRef.current.contains(e.target)) {
+      return
+    }
+    if (this.addBtnRef.current && this.addBtnRef.current.contains(e.target)) {
+      return
+    }
+
+    // Don't close if clicking on dropdown or active input elements
+    if (hasActiveInput()) {
+      return
+    }
+
+    this.setState({ open: false })
+  }
+
+  handleMouseEnter = () => {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+
+    // Calculate menu position
+    if (this.addBtnRef.current) {
+      const rect = this.addBtnRef.current.getBoundingClientRect()
+      const windowWidth = window.innerWidth
+      const windowHeight = window.innerHeight
+
+      // Estimate menu width and height
+      const estimatedMenuWidth = Math.min(300, windowWidth - 40) // Responsive width
+      const estimatedMenuHeight = 400 // Rough estimate
+
+      // Calculate fixed position coordinates
+      let menuTop = rect.bottom + 4 // 4px margin
+      let menuLeft = rect.left
+      let menuPosition = 'right'
+
+      // Check if menu would overflow bottom of screen
+      if (menuTop + estimatedMenuHeight > windowHeight - 20) {
+        menuTop = rect.top - estimatedMenuHeight - 4 // Show above button
+      }
+
+      // If aligning right would cause overflow, align left instead
+      if (rect.left + estimatedMenuWidth > windowWidth - 20) {
+        menuPosition = 'left'
+        menuLeft = rect.right - estimatedMenuWidth
+      }
+
+      // If aligning left would cause overflow (negative position), force right
+      if (menuLeft < 20) {
+        menuPosition = 'right'
+        menuLeft = Math.max(20, rect.left) // Ensure at least 20px from edge
+      }
+
+      // Final check to ensure menu doesn't go off screen
+      if (menuLeft + estimatedMenuWidth > windowWidth - 20) {
+        menuLeft = windowWidth - estimatedMenuWidth - 20
+      }
+
+      this.setState({
+        open: true,
+        menuPosition,
+        menuTop,
+        menuLeft
+      })
+
+      if (!this.state.open) {
+        window.openTabBatch = this.props.batch
+      }
+    }
+  }
+
+  handleMouseLeave = () => {
+    this.hideTimeout = setTimeout(() => {
+      this.setState({ open: false })
+    }, 200)
+  }
+
+  handleMenuMouseEnter = () => {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+
+  handleMenuMouseLeave = () => {
+    // Don't close if there's an active input or dropdown
+    if (hasActiveInput()) {
+      return
+    }
+
+    this.hideTimeout = setTimeout(() => {
+      this.setState({ open: false })
+    }, 200)
+  }
+
+  handleMenuScroll = (e) => {
+    // Prevent scroll events from bubbling up
+    e.stopPropagation()
+  }
+
+  handleTabAdd = () => {
+    if (!window.store.hasNodePty) {
+      window.store.onNewSsh()
+      return
+    }
+    window.store.addTab(
+      undefined, undefined,
+      this.props.batch
+    )
+  }
+
+  renderMenus = () => {
+    const { onNewSsh } = window.store
+    const cls = 'pd2x pd1y context-item pointer'
+    const addTabBtn = window.store.hasNodePty
+      ? (
+        <div
+          className={cls}
+          onClick={this.handleTabAdd}
+        >
+          <RightSquareFilled /> {e('newTab')}
+        </div>
+        )
+      : null
+
+    const { menuPosition, menuTop, menuLeft } = this.state
+
+    return (
+      <div
+        ref={this.menuRef}
+        className={`add-menu-wrap add-menu-${menuPosition}`}
+        style={{
+          maxHeight: window.innerHeight - menuTop - 50,
+          top: menuTop,
+          left: menuLeft
+        }}
+        onMouseEnter={this.handleMenuMouseEnter}
+        onMouseLeave={this.handleMenuMouseLeave}
+        onScroll={this.handleMenuScroll}
+      >
+        <div
+          className={cls}
+          onClick={onNewSsh}
+        >
+          <CodeFilled /> {e('newBookmark')}
+        </div>
+        {addTabBtn}
+        <BookmarksList
+          store={window.store}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const { empty, className } = this.props
+    const { open } = this.state
+    const cls = classNames(
+      'tabs-add-btn pointer',
+      className,
+      {
+        empty
+      }
+    )
+
+    return (
+      <>
+        <PlusOutlined
+          title={e('openNewTerm')}
+          className={cls}
+          onClick={this.handleTabAdd}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          ref={this.addBtnRef}
+        />
+        {open && createPortal(this.renderMenus(), this.getPortalContainer())}
+      </>
+    )
+  }
+}

package/client/components/tabs/add-btn.styl

@@ -0,0 +1,12 @@
+
+.add-menu-wrap
+  position fixed
+  z-index 1000
+  background var(--main)
+  border 1px solid var(--main-darker)
+  border-radius 6px
+  min-width 160px
+  max-width 300px
+  overflow-y auto
+  margin-top 4px
+  padding 4px 15px

package/client/components/tabs/index.jsx

@@ -8,12 +8,9 @@ import runIdle from '../../common/run-idle'
 import { throttle } from 'lodash-es'
 import TabTitle from './tab-title'
 import {
-  CodeFilled,
   DownOutlined,
   LeftOutlined,
-  PlusOutlined,
-  RightOutlined,
-  RightSquareFilled
+  RightOutlined
 } from '@ant-design/icons'
 import {
   SingleIcon,
@@ -25,7 +22,7 @@ import {
   TwoRowsRightIcon,
   TwoColumnsBottomIcon
 } from '../icons/split-icons'
-import { Dropdown, Popover } from 'antd'
+import { Dropdown } from 'antd'
 import Tab from './tab'
 import './tabs.styl'
 import {
@@ -37,7 +34,7 @@ import {
   splitMapDesc
 } from '../../common/constants'
 import WindowControl from './window-control'
-import BookmarksList from '../sidebar/bookmark-select'
+import AddBtn from './add-btn'
 import AppDrag from './app-drag'
 import NoSession from './no-session'
 import classNames from 'classnames'
@@ -190,45 +187,6 @@ export default class Tabs extends Component {
     window.store.setLayout(key)
   }
 
-  handleOpenChange = (open) => {
-    if (open) {
-      window.openTabBatch = this.props.batch
-    }
-  }
-
-  renderMenus () {
-    const { onNewSsh } = window.store
-    const cls = 'pd2x pd1y context-item pointer'
-    const addTabBtn = window.store.hasNodePty
-      ? (
-        <div
-          className={cls}
-          onClick={this.handleTabAdd}
-        >
-          <RightSquareFilled /> {e('newTab')}
-        </div>
-        )
-      : null
-    return (
-      <div
-        className='add-menu-wrap' style={{
-          maxHeight: window.innerHeight - 200
-        }}
-      >
-        <div
-          className={cls}
-          onClick={onNewSsh}
-        >
-          <CodeFilled /> {e('newBookmark')}
-        </div>
-        {addTabBtn}
-        <BookmarksList
-          store={window.store}
-        />
-      </div>
-    )
-  }
-
   renderAddBtn = () => {
     const cls = classNames(
       'pointer tabs-add-btn font16',
@@ -237,17 +195,11 @@ export default class Tabs extends Component {
       }
     )
     return (
-      <Popover
-        content={this.renderMenus()}
-        onOpenChange={this.handleOpenChange}
-        placement='bottomRight'
-      >
-        <PlusOutlined
-          title={e('openNewTerm')}
-          className={cls}
-          onClick={this.handleTabAdd}
-        />
-      </Popover>
+      <AddBtn
+        className={cls}
+        empty={!this.props.tabs?.length}
+        batch={this.props.batch}
+      />
     )
   }
 

package/client/components/tabs/tabs.styl

@@ -41,7 +41,7 @@
   line-height 36px
   margin 0 1px 0 0
   border-radius 3px 3px 0 0
-  background var(--main-darker)
+  background var(--main-dark)
   text-align center
   color var(--text-dark)
   &.tab-last
@@ -121,8 +121,8 @@
   right 5px
   cursor pointer
   top 50%
+  background var(--main)
   margin-top -8px
-  background var(--text-dark)
   border-radius 100%
   color var(--text)
   height 16px
@@ -131,7 +131,8 @@
   line-height 16px
   font-size 10px
   &:hover
-    color var(--text-light)
+    background var(--primary)
+    color var(--primary-contast)
 
 .tabs-add-btn
   display inline-block
@@ -206,7 +207,7 @@
   .window-control-minimize
   .window-control-maximize
     &:hover
-      background var(--main-darker)
+      background var(--main-dark)
   .window-control-close:hover
     background var(--error)
 

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

@@ -4,10 +4,12 @@ import {
 } from '@ant-design/icons'
 
 export default function TreeExpander (props) {
-  function onExpand () {
+  function onExpand (e) {
+    e.stopPropagation()
     props.onExpand(group)
   }
-  function onUnExpand () {
+  function onUnExpand (e) {
+    e.stopPropagation()
     props.onUnExpand(group)
   }
   const { group } = props

package/client/css/basic.styl

@@ -3,7 +3,7 @@
 
 body
   overflow hidden
-  background main
+  background var(--main)
   font-size 12px
   line-height 1.5715
   font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

package/package.json

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