@electerm/electerm-react 2.3.136 → 2.3.151

package/client/components/batch-op/batch-op.jsx

@@ -11,9 +11,9 @@ import {
   Input,
   Button,
   Table,
-  Drawer,
   Tabs
 } from 'antd'
+import Drawer from '../common/drawer'
 import {
   sidebarWidth,
   statusMap,
@@ -672,15 +672,10 @@ export default class BatchOp extends PureComponent {
     const pops = {
       open: showBatchOp,
       onClose: this.handleCancel,
-      className: 'setting-wrap',
+      className: 'setting-wrap batch-op-wrap',
       size: innerWidth - sidebarWidth,
       zIndex: 888,
-      placement: 'left',
-      styles: {
-        header: {
-          display: 'none'
-        }
-      }
+      placement: 'left'
     }
     return (
       <Drawer

package/client/components/bookmark-form/common/color-picker.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import { Popover } from 'antd'
-import { HexColorPicker, RgbaColorPicker } from 'react-colorful'
+import { Popover, ColorPicker as AntColorPicker } from 'antd'
 import { defaultColors, getRandomHexColor } from '../../../common/rand-hex-color.js'
 import { HexInput } from './hex-input.jsx'
 import './color-picker.styl'
@@ -18,8 +17,11 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     setVisible(vis)
   }
 
+  function onColorChange (color) {
+    handleChange(props.isRgba ? color.toRgbString() : color.toHexString())
+  }
+
   function renderContent () {
-    const Picker = props.isRgba ? RgbaColorPicker : HexColorPicker
     return (
       <div className='color-picker-box'>
         <div className='fix'>
@@ -40,7 +42,10 @@ export const ColorPicker = React.forwardRef((props, ref) => {
             }
           </div>
           <div className='fright'>
-            <Picker color={value} onChange={handleChange} />
+            <AntColorPicker
+              value={value}
+              onChange={onColorChange}
+            />
           </div>
         </div>
         <div className='pd1y'>
@@ -57,7 +62,13 @@ export const ColorPicker = React.forwardRef((props, ref) => {
   if (props.disabled) return inner
 
   return (
-    <Popover content={renderContent()} trigger='click' open={visible} placement='bottomLeft' onOpenChange={handleVisibleChange}>
+    <Popover
+      content={renderContent()}
+      trigger='click'
+      open={visible}
+      placement='bottomLeft'
+      onOpenChange={handleVisibleChange}
+    >
       {inner}
     </Popover>
   )

package/client/components/bookmark-form/common/color-picker.styl

@@ -10,8 +10,7 @@
   width 92px
 .color-picker-box
   width 420px
-  .react-colorful
-    height 200px
+
 .color-picker-defaults
   width 200px
 .color-picker-choose

package/client/components/bookmark-form/common/connection-hopping.jsx

@@ -180,6 +180,7 @@ export default function renderConnectionHopping (props) {
         form={formChild}
         onFinish={handleFinish}
         initialValues={initialValues}
+        component='div'
       >
         {renderList()}
         {renderWarn()}

package/client/components/bookmark-form/config/common-fields.js

@@ -219,6 +219,7 @@ export const commonFields = {
 export const terminalSettings = [
   commonFields.envLang,
   commonFields.terminalType,
+  commonFields.proxy,
   commonFields.displayRaw,
   commonFields.fontFamily,
   commonFields.fontSize,

package/client/components/common/drawer.jsx

@@ -0,0 +1,62 @@
+/**
+ * Simple drawer component without animation
+ * Replaces antd Drawer for better performance
+ */
+
+import classnames from 'classnames'
+import './drawer.styl'
+
+export default function Drawer (props) {
+  const {
+    open,
+    placement = 'left',
+    size,
+    zIndex = 1000,
+    className,
+    children,
+    styles = {},
+    onClose
+  } = props
+
+  function handleMaskClick (e) {
+    if (e.target === e.currentTarget && onClose) {
+      onClose()
+    }
+  }
+
+  if (!open) {
+    return null
+  }
+
+  const drawerStyle = {
+    zIndex
+  }
+
+  const contentStyle = {
+    width: typeof size === 'number' ? `${size}px` : size,
+    ...styles.content
+  }
+
+  const cls = classnames(
+    'custom-drawer',
+    `custom-drawer-${placement}`,
+    className
+  )
+
+  return (
+    <div className={cls} style={drawerStyle}>
+      <div
+        className='custom-drawer-mask'
+        onClick={handleMaskClick}
+      />
+      <div
+        className='custom-drawer-content-wrapper'
+        style={contentStyle}
+      >
+        <div className='custom-drawer-content'>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/client/components/common/drawer.styl

@@ -0,0 +1,34 @@
+.custom-drawer
+  position fixed
+  top 0
+  left 43px
+  right 0
+  bottom 0
+
+.custom-drawer-mask
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background rgba(0, 0, 0, 0.45)
+
+.custom-drawer-content-wrapper
+  position absolute
+  top 0
+  bottom 0
+  background var(--main)
+  box-shadow 2px 0 8px rgba(0, 0, 0, 0.15)
+  overflow auto
+  color var(--text)
+
+.custom-drawer-left .custom-drawer-content-wrapper
+  left 0
+
+.custom-drawer-right .custom-drawer-content-wrapper
+  right 0
+
+.custom-drawer-content
+  position relative
+  height 100%
+  width 100%

package/client/components/profile/profile-form.jsx

@@ -12,7 +12,7 @@ export default class ProfleFormIndex extends PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

package/client/components/quick-commands/qm.styl

@@ -20,11 +20,12 @@
 .fil-keyword
 .fil-label
   .qm-item
-    color var(--text-light)
+    color var(--text-disabled)
   .qm-item
     &.name-match
     &.label-match
       font-weight bold
+      color var(--text)
 
 .qm-search-input
   max-width 200px

package/client/components/quick-commands/quick-commands-form.jsx

@@ -12,7 +12,7 @@ export default class QuickCommandFormIndex extends PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

package/client/components/setting-panel/list.jsx

@@ -29,7 +29,7 @@ export default class ItemList extends React.PureComponent {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

package/client/components/setting-panel/setting-common.jsx

@@ -66,7 +66,7 @@ export default class SettingCommon extends Component {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

package/client/components/setting-panel/setting-terminal.jsx

@@ -52,7 +52,7 @@ export default class SettingTerminal extends Component {
       this.setState({
         ready: true
       })
-    }, 200)
+    }, 0)
   }
 
   componentWillUnmount () {

package/client/components/setting-panel/setting-wrap.jsx

@@ -3,7 +3,7 @@
  */
 
 import { Component } from 'react'
-import { Drawer } from 'antd'
+import Drawer from '../common/drawer'
 import { CloseCircleOutlined } from '@ant-design/icons'
 import { sidebarWidth } from '../../common/constants'
 import AppDrag from '../tabs/app-drag'
@@ -23,13 +23,7 @@ export default class SettingWrap extends Component {
       className: 'setting-wrap',
       size: this.props.innerWidth - sidebarWidth,
       zIndex: 888,
-      placement: 'left',
-      destroyOnHidden: true,
-      styles: {
-        header: {
-          display: 'none'
-        }
-      }
+      placement: 'left'
     }
     return (
       <Drawer
@@ -40,13 +34,13 @@ export default class SettingWrap extends Component {
           onClick={this.props.onCancel}
         />
         <CloseCircleOutlined
-          className='close-setting-wrap-icon alt-close-setting-wrap'
+          className='close-setting-wrap alt-close-setting-wrap'
           onClick={this.props.onCancel}
         />
         {
           this.props.useSystemTitleBar ? null : <AppDrag />
         }
-        {this.props.visible ? this.props.children : null}
+        {this.props.children}
       </Drawer>
     )
   }

package/client/components/setting-panel/setting-wrap.styl

@@ -1,18 +1,20 @@
 
-body .ant-drawer .ant-drawer-content-wrapper
-  left 43px
-.close-setting-wrap-icon
+
+.close-setting-wrap
   position absolute
   top 70px
   font-size 16px
   cursor pointer
   z-index 889
+  right 20px
   &:hover
     color var(--success)
 .alt-close-setting-wrap
-  right 20px
-.close-setting-wrap
-  top 70px
+  left 20px
+  right auto
+.batch-op-wrap .close-setting-wrap
+  top 40px
+  right 30px
 .setting-row
   position absolute
   top 127px

package/client/components/sftp/paged-list.jsx

@@ -37,8 +37,9 @@ export default class ScrollFiles extends Component {
       current: this.state.page,
       pageSize: this.state.pageSize,
       total: this.props.list.length,
+      showLessItems: true,
       showSizeChanger: false,
-      simple: true,
+      simple: false,
       onChange: this.onChange
     }
     return (

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

@@ -63,7 +63,7 @@ export default class Sftp extends Component {
       this.setState({
         ready: true
       })
-    }, 100)
+    }, 0)
   }
 
   componentDidUpdate (prevProps, prevState) {

package/client/components/sftp/sftp.styl

@@ -164,6 +164,19 @@
 .pager-wrap
   z-index 4
   position relative
+
+.sftp-has-pager
+  .sftp-table-content
+    position static
+    padding-bottom 42px
+  .pager-wrap
+    position absolute
+    bottom 0
+    left 0
+    width 100%
+    background var(--main)
+    border-top 1px solid var(--main-darker)
+
 .file-header-context-menu
   position fixed
   z-index 999

package/client/components/tree-list/move-item-modal.jsx

@@ -1,17 +1,62 @@
-// render bookmark select, use antd tree select
+// render bookmark select, use antd tree
 import { useState, useEffect } from 'react'
 import {
-  MergeOutlined
+  MergeOutlined,
+  SearchOutlined
 } from '@ant-design/icons'
 import buildGroupData from '../bookmark-form/common/bookmark-group-tree-format'
-import { TreeSelect, Modal, Button } from 'antd'
+import { Tree, Modal, Button, Input } from 'antd'
 import { auto } from 'manate/react'
 const e = window.translate
 
 const rootId = '__root__'
 
+// Helper function to filter tree data based on search text
+function filterTreeData (data, searchText) {
+  if (!searchText) {
+    return data
+  }
+  const lowerSearch = searchText.toLowerCase()
+
+  function filterNodes (nodes) {
+    return nodes.reduce((acc, node) => {
+      const titleText = typeof node.title === 'string'
+        ? node.title
+        : (node.title?.props?.children?.[1] || node.title?.props?.children || '')
+      const titleStr = String(titleText).toLowerCase()
+      const children = node.children ? filterNodes(node.children) : []
+
+      if (titleStr.includes(lowerSearch) || children.length > 0) {
+        acc.push({
+          ...node,
+          children: children.length > 0 ? children : node.children
+        })
+      }
+      return acc
+    }, [])
+  }
+
+  return filterNodes(data)
+}
+
+// Helper function to get all keys from tree data
+function getAllKeys (data) {
+  const keys = []
+  function traverse (nodes) {
+    for (const node of nodes) {
+      keys.push(node.key)
+      if (node.children) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(data)
+  return keys
+}
+
 export default auto(function MoveItemModal (props) {
   const [groupId, setGroupId] = useState(undefined)
+  const [searchText, setSearchText] = useState('')
   const {
     openMoveModal,
     moveItem,
@@ -27,10 +72,11 @@ export default auto(function MoveItemModal (props) {
     })
   }
 
-  // Reset groupId when modal opens
+  // Reset groupId and search when modal opens
   useEffect(() => {
     if (openMoveModal) {
       setGroupId(undefined)
+      setSearchText('')
     }
   }, [openMoveModal])
 
@@ -60,6 +106,31 @@ export default auto(function MoveItemModal (props) {
       disabled: false
     })
   }
+
+  // Filter tree data based on search
+  const filteredData = filterTreeData(data, searchText)
+  const expandedKeys = getAllKeys(filteredData)
+
+  function onTreeSelect (selectedKeys) {
+    if (selectedKeys.length > 0) {
+      // Find the node to check if it's disabled
+      const findNode = (nodes, key) => {
+        for (const node of nodes) {
+          if (node.key === key) return node
+          if (node.children) {
+            const found = findNode(node.children, key)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      const node = findNode(data, selectedKeys[0])
+      if (node && !node.disabled) {
+        setGroupId(selectedKeys[0])
+      }
+    }
+  }
+
   function onSelect () {
     const {
       bookmarkGroups
@@ -109,43 +180,56 @@ export default auto(function MoveItemModal (props) {
     }
     onCancelMoveItem()
   }
+
+  const footer = (
+    <>
+      <Button
+        type='primary'
+        onClick={onSelect}
+        disabled={!groupId}
+      >
+        {e('ok')}
+      </Button>
+      <Button
+        onClick={onCancelMoveItem}
+        className='mg1l'
+      >
+        {e('cancel')}
+      </Button>
+    </>
+  )
+
   const modalProps = {
     open: openMoveModal,
     title: e('moveTo'),
-    footer: null,
+    footer,
     onCancel: onCancelMoveItem
   }
+
   const treeProps = {
-    treeData: data,
-    onChange: setGroupId,
-    placeholder: e('moveTo'),
-    showSearch: true,
-    value: groupId,
-    popupMatchSelectWidth: false,
-    treeDefaultExpandAll: true,
-    className: 'width-100'
+    treeData: filteredData,
+    onSelect: onTreeSelect,
+    selectedKeys: groupId ? [groupId] : [],
+    expandedKeys,
+    autoExpandParent: true,
+    className: 'width-100 move-item-tree'
   }
+
   return (
     <Modal {...modalProps}>
-      <div className='pd1'>
-        <TreeSelect
-          {...treeProps}
+      <div className='pd1b'>
+        <Input
+          placeholder={e('search')}
+          prefix={<SearchOutlined />}
+          value={searchText}
+          onChange={e => setSearchText(e.target.value)}
+          allowClear
         />
       </div>
-      <div className='pd1'>
-        <Button
-          type='primary'
-          onClick={onSelect}
-          disabled={!groupId}
-        >
-          {e('ok')}
-        </Button>
-        <Button
-          onClick={onCancelMoveItem}
-          className='mg1l'
-        >
-          {e('cancel')}
-        </Button>
+      <div className='move-item-tree-wrap'>
+        <Tree
+          {...treeProps}
+        />
       </div>
     </Modal>
   )

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

@@ -55,7 +55,7 @@ export default class ItemListTree extends Component {
       this.setState({
         ready: true
       })
-    }, 100)
+    }, 0)
   }
 
   componentWillUnmount () {

package/client/components/tree-list/tree-list.styl

@@ -78,4 +78,9 @@
   margin-right 6px
   border-radius 2px
   border 1px solid #1a1a1a
-  vertical-align middle
+  vertical-align middle
+
+.move-item-tree-wrap
+  max-height 300px
+  overflow-y auto
+  padding 8px

package/package.json

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