@electerm/electerm-react 1.39.5 → 1.39.31

package/client/components/setting-panel/tab-profiles.jsx

@@ -0,0 +1,38 @@
+import SettingCol from './col'
+import ProfileForm from '../profile/profile-form'
+import ProfileList from '../profile/profile-list'
+import {
+  settingMap
+} from '../../common/constants'
+
+export default function TabProfiles (props) {
+  const {
+    settingTab
+  } = props
+  if (settingTab !== settingMap.profiles) {
+    return null
+  }
+  const {
+    settingItem,
+    listProps,
+    formProps,
+    store
+  } = props
+  return (
+    <div
+      className='setting-tabs-profile'
+    >
+      <SettingCol>
+        <ProfileList
+          {...listProps}
+          quickCommandId={store.quickCommandId}
+        />
+        <ProfileForm
+          {...formProps}
+          quickCommandTags={store.quickCommandTags}
+          key={settingItem.id}
+        />
+      </SettingCol>
+    </div>
+  )
+}

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

@@ -6,7 +6,7 @@
  * - click header to sort
  */
 
-import React from 'react'
+import { Component } from '../common/react-subx'
 import classnames from 'classnames'
 import { isEqual, pick, find, isNull, isArray, isUndefined } from 'lodash-es'
 import generate from '../../common/uid'
@@ -17,24 +17,32 @@ import {
   maxDragMove,
   sftpControlHeight,
   eventTypes,
-  paneMap,
-  commonActions
+  paneMap
 } from '../../common/constants'
 import copy from 'json-deep-copy'
 import FileSection from './file-item'
 import PagedList from './paged-list'
 import {
   DownOutlined,
-  UpOutlined
+  UpOutlined,
+  CheckOutlined
 } from '@ant-design/icons'
+import IconHolder from '../context-menu/icon-holder'
 
 const { prefix } = window
 const e = prefix('sftp')
 
-export default class FileListTable extends React.Component {
+export default class FileListTable extends Component {
   constructor (props) {
     super(props)
-    this.state = this.initFromProps()
+    this.state = {
+      ...this.initFromProps(),
+      showContextMenu: false,
+      contextMenuPos: {
+        left: 0,
+        top: 0
+      }
+    }
   }
 
   componentDidMount () {
@@ -61,10 +69,37 @@ export default class FileListTable extends React.Component {
   }
 
   componentWillUnmount () {
-    window.removeEventListener('message', this.onContextAction)
     window.removeEventListener('message', this.onMsg)
   }
 
+  setOnCloseEvent = () => {
+    const dom = document
+      .querySelector('.ant-drawer')
+    if (dom) {
+      dom.addEventListener('click', this.onTriggerClose)
+    }
+    document
+      .getElementById('outside-context')
+      .addEventListener('click', this.onTriggerClose)
+  }
+
+  onTriggerClose = (e) => {
+    if (e.target.closest('.context-menu')) {
+      return null
+    }
+    this.setState({
+      showContextMenu: false
+    })
+    const dom = document
+      .querySelector('.ant-drawer')
+    if (dom) {
+      dom.removeEventListener('click', this.onTriggerClose)
+    }
+    document
+      .getElementById('outside-context')
+      .removeEventListener('click', this.onTriggerClose)
+  }
+
   toVisible = (prevProps, props) => {
     return (
       prevProps.pane === paneMap.ssh ||
@@ -128,7 +163,7 @@ export default class FileListTable extends React.Component {
   }
 
   getPropsDefault = () => {
-    return [
+    return this.props.store.config.filePropsEnabled || [
       'name',
       'size',
       'modifyTime'
@@ -229,10 +264,7 @@ export default class FileListTable extends React.Component {
   }
 
   computePos = (e, height) => {
-    return {
-      left: e.clientX,
-      top: e.clientY
-    }
+    return e.target.getBoundingClientRect()
   }
 
   onToggleProp = name => {
@@ -244,41 +276,22 @@ export default class FileListTable extends React.Component {
       : [...names, name]
     const props = all.filter(g => newProps.includes(g))
     const update = this.initFromProps(props)
+    this.props.store.setConfig({
+      filePropsEnabled: props
+    })
     this.setState(update)
   }
 
-  onContextAction = e => {
-    const {
-      action,
-      id,
-      args = [],
-      func
-    } = e.data || {}
-    if (
-      action !== commonActions.clickContextMenu ||
-      id !== this.uid ||
-      !this[func]
-    ) {
-      return false
-    }
-    window.removeEventListener('message', this.onContextAction)
-    this[func](...args)
-  }
-
   handleContextMenu = e => {
     e && e.preventDefault()
-    const items = this.renderContext()
     const pos = e
       ? this.computePos(e)
       : this.pos
-    this.pos = pos
-    this.uid = generate()
-    window.store.openContextMenu({
-      id: this.uid,
-      items,
-      pos
+    this.setState({
+      contextMenuPos: pos,
+      showContextMenu: true
     })
-    window.addEventListener('message', this.onContextAction)
+    this.setOnCloseEvent()
   }
 
   onClickName = (e) => {
@@ -318,18 +331,23 @@ export default class FileListTable extends React.Component {
       const selected = selectedNames.includes(p)
       const disabled = !i
       const cls = classnames(
+        'context-item',
         { selected },
         { unselected: !selected }
       )
-      return {
-        func: 'onToggleProp',
-        icon: disabled || selected ? 'CheckOutlined' : 'IconHolder',
-        text: e(p),
-        disabled,
-        args: [p],
-        noCloseMenu: true,
-        className: cls
+      const icon = disabled || selected ? <CheckOutlined /> : <IconHolder />
+      const obj = {
+        className: cls,
+        onClick: () => this.onToggleProp(p)
       }
+      return (
+        <div
+          {...obj}
+          key={p}
+        >
+          {icon} {e(p)}
+        </div>
+      )
     })
   }
 
@@ -519,6 +537,40 @@ export default class FileListTable extends React.Component {
     )
   }
 
+  renderContextMenu = () => {
+    const {
+      showContextMenu
+    } = this.state
+    if (!showContextMenu) {
+      return null
+    }
+    const {
+      left,
+      top
+    } = this.state.contextMenuPos
+    const outerProps = {
+      className: 'context-menu file-header-context-menu',
+      style: {
+        left: left + 'px',
+        top: top + 'px'
+      }
+    }
+    const innerProps = {
+      className: 'context-menu-inner'
+    }
+    return (
+      <div
+        {...outerProps}
+      >
+        <div
+          {...innerProps}
+        >
+          {this.renderContext()}
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { fileList, height, type } = this.props
     const tableHeaderHeight = 30
@@ -539,6 +591,7 @@ export default class FileListTable extends React.Component {
     return (
       <div className={cls}>
         {this.renderTableHeader()}
+        {this.renderContextMenu()}
         <div
           {...props}
         >

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

@@ -990,6 +990,7 @@ export default class Sftp extends Component {
     const loading = this.state[`${type}Loading`]
     const { host, username } = this.props.tab
     const listProps = {
+      store: window.store,
       id,
       type,
       ...this.props,

package/client/components/sftp/sftp.styl

@@ -188,4 +188,7 @@
 
 .pager-wrap
   z-index 4
-  position relative
+  position relative
+.file-header-context-menu
+  position fixed
+  z-index 999

package/client/components/sftp/transfer-common.js

@@ -2,7 +2,7 @@ import createTitle from '../../common/create-title'
 
 export function createTransferProps (props) {
   return {
-    title: createTitle(props.tab),
+    title: createTitle(props.tab, false),
     tabId: props.tab.id,
     sessionId: props.sessionId
   }

package/client/components/tabs/index.jsx

@@ -258,7 +258,7 @@ export default class Tabs extends React.Component {
       : tabsWidthAll
     const w1 = isMacJs ? 30 : windowControlWidth
     const style = {
-      width: width - w1 - 136
+      width: width - w1 - 166
     }
     return (
       <div

package/client/components/tabs/tab.jsx

@@ -358,9 +358,14 @@ class Tab extends Component {
         sshTunnelLocalHost = '127.0.0.1',
         name
       } = obj
-      let tunnel = sshTunnel === 'forwardRemoteToLocal'
-        ? `-> ${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
-        : `-> ${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+      let tunnel
+      if (sshTunnel === 'dynamicForward') {
+        tunnel = `sock5://${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+      } else {
+        tunnel = sshTunnel === 'forwardRemoteToLocal'
+          ? `-> ${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+          : `-> ${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+      }
       if (error) {
         tunnel = `error: ${tunnel}`
       }
@@ -371,7 +376,7 @@ class Tab extends Component {
     })
     return (
       <div>
-        <div>${title}</div>
+        <div>{title}</div>
         {list}
       </div>
     )

package/client/components/terminal/index.jsx

@@ -1025,8 +1025,9 @@ class Term extends Component {
       const cmd = `ssh ${title.split(/\s/g)[0]}\r`
       return this.attachAddon._sendData(cmd)
     }
-    if (startDirectory) {
-      const cmd = `cd ${startDirectory}\r`
+    const startFolder = startDirectory || window.initFolder
+    if (startFolder) {
+      const cmd = `cd "${startFolder}"\r`
       this.attachAddon._sendData(cmd)
     }
     if (runScripts && runScripts.length) {
@@ -1048,8 +1049,6 @@ class Term extends Component {
     }
   }
 
-  count = 0
-
   setStatus = status => {
     const id = this.props.tab?.id
     this.props.editTab(id, {
@@ -1093,7 +1092,7 @@ class Term extends Component {
       server = ''
     } = config
     const { sessionId, terminalIndex, id, logName } = this.props
-    const tab = deepCopy(this.props.tab || {})
+    const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
     const {
       srcId, from = 'bookmarks',
       type,
@@ -1126,6 +1125,7 @@ class Term extends Component {
         'execLinuxArgs',
         'debug'
       ]),
+      keepaliveInterval: tab.keepaliveInterval === undefined ? config.keepaliveInterval : tab.keepaliveInterval,
       sessionId,
       tabId: id,
       srcTabId: tab.id,

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

@@ -0,0 +1,66 @@
+/**
+ * web form
+ */
+
+import {
+  Input,
+  Form,
+  Button
+} from 'antd'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+const s = prefix('sftp')
+
+export default function VncForm (props) {
+  const [form] = Form.useForm()
+
+  const initialValues = props.types.reduce((acc, cur) => {
+    acc[cur] = ''
+    return acc
+  }, {})
+  function renderCommon () {
+    const {
+      types
+    } = props
+    return types.map((type, index) => {
+      const Elem = type === 'password' ? Input.Password : Input
+      return (
+        <FormItem
+          {...formItemLayout}
+          label={e(type)}
+          name={type}
+          key={type}
+          autoFocus={index === 0}
+        >
+          <Elem />
+        </FormItem>
+      )
+    })
+  }
+
+  return (
+    <Form
+      form={form}
+      onFinish={props.handleFinish}
+      initialValues={initialValues}
+      name='vnc-form'
+    >
+      <div className='pd3t pd1b'>
+        {renderCommon()}
+        <FormItem
+          {...tailFormItemLayout}
+        >
+          <Button
+            type='primary'
+            htmlType='submit'
+          >
+            {s('submit')}
+          </Button>
+        </FormItem>
+      </div>
+    </Form>
+  )
+}