@electerm/electerm-react 1.37.66 → 1.37.78

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

@@ -5,9 +5,7 @@
 
 body .ant-drawer .ant-drawer-content-wrapper
   left 43px
-// .setting-wrap-hide
-//   width 0
-//   border-left-width 0
+
 .close-setting-wrap
   position absolute
   left 20px

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

@@ -23,6 +23,10 @@ import {
 import copy from 'json-deep-copy'
 import FileSection from './file-item'
 import PagedList from './paged-list'
+import {
+  DownOutlined,
+  UpOutlined
+} from '@ant-design/icons'
 
 const { prefix } = window
 const e = prefix('sftp')
@@ -206,6 +210,9 @@ export default class FileListTable extends React.Component {
           onClick: this.onClickName
         }
     const text = e(name || '')
+    const directionIcon = isSorting
+      ? (sortDirection === 'asc' ? <DownOutlined /> : <UpOutlined />)
+      : null
     return (
       <div
         className={cls}
@@ -216,7 +223,7 @@ export default class FileListTable extends React.Component {
         {...props}
         title={text}
       >
-        {text}
+        {directionIcon} {text}
       </div>
     )
   }

package/client/components/sftp/sftp.styl

@@ -1,8 +1,5 @@
 @require '../../css/includes/theme-default'
-// .sftp-wrap
-//   .ant-spin-container
-//   .ant-spin-nested-loading
-//     filter none
+
 .sftp-section
   position absolute
 .sftp-title-wrap
@@ -143,10 +140,6 @@
     border-right 1px solid main
     right 0 !important
     width auto !important
-  &.desc
-    background linear-gradient(to bottom, main-dark 0%,main-light 100%)
-  &.asc
-    background linear-gradient(to bottom, main-light 0%,main-dark 100%)
 .sftp-header-handle
   z-index 20
   cursor ew-resize
@@ -159,18 +152,6 @@
   &:hover
     ::-webkit-scrollbar
       width 12px
-// .sftp-table-content
-//   overflow-x hidden
-//   ::-webkit-scrollbar
-//     width 7px
-//     background alpha(main, .5)
-
-//   ::-webkit-scrollbar-track
-//     -webkit-box-shadow none
-
-//   ::-webkit-scrollbar-thumb
-//     background-color primary
-//     outline none
 .sftp-item
   &.sftp-dragover
     .sftp-file-prop
@@ -202,13 +183,6 @@
   color text
 
 .file-list
-  // &::-webkit-scrollbar
-  //   width 1em
-  //   background main
-
-  // &::-webkit-scrollbar-track
-  //   -webkit-box-shadow inset 0 0 6px alpha(main, .1)
-
   ::-webkit-scrollbar-thumb
     background-color primary !important
 

package/client/components/sftp/transfer.styl

@@ -39,14 +39,7 @@
   color primary
 .transports-count
   color text
-// .sftp-file
-//   flex-grow 1
-// .sftp-file-percent
-//   width 100px
-// .transfer-tag
-//   width 200px
-// .transfer-control-icon
-//   width 20px
+
 .flex-child + .flex-child
   margin-left 5px
   flex-grow 1

package/client/components/sftp/transport-action.jsx

@@ -66,6 +66,7 @@ export default function transportAction (props) {
           ...update,
           finishTime,
           startTime: inst.current.startTime,
+          size: transfer.fromFile.size,
           speed: format(transfer.fromFile.size, inst.current.startTime),
           host: props.tab.host
         }

package/client/components/shortcuts/shortcut-handler.js

@@ -20,7 +20,8 @@ function buildConfig (config, filter = d => d) {
       [name]: {
         shortcut: c.readonly ? c[propName] : (shortcuts[name] || c[propName]),
         type,
-        func
+        func,
+        readonly: c.readonly
       }
     }
   }, {})
@@ -54,6 +55,20 @@ export function shortcutExtend (Cls) {
       altKey,
       wheelDeltaY
     } = event
+    if (this.isTerm) {
+      const keymap = [
+        { key: 'Backspace', shiftKey: false, mapCode: 8 },
+        { key: 'Backspace', shiftKey: true, mapCode: 127 }
+      ]
+      if (event.type === 'keydown') {
+        for (const i in keymap) {
+          if (keymap[i].key === event.key && keymap[i].shiftKey === shiftKey) {
+            this.socket.send(String.fromCharCode(keymap[i].mapCode))
+            return false
+          }
+        }
+      }
+    }
     const codeName = event instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
       : code
@@ -77,8 +92,10 @@ export function shortcutExtend (Cls) {
       if (conf.shortcut.split(',').includes(r)) {
         if (this[funcName]) {
           return this[funcName](event)
-        } else if (this.isTerm) {
+        } else if (this.isTerm && conf.readonly) {
           return true
+        } else {
+          return false
         }
       }
     }

package/client/components/sidebar/sidebar.styl

@@ -65,16 +65,11 @@
 .btns
   background main-dark
   border-color primary
-  // .ant-select-arrow
   .open-about-icon
     color text-dark
     &:hover
       color text-light
-  // .ant-btn
-  // .ant-select-selection
-  //   background transparent
-  //   color #aaa
-  //   border-color #555
+
 .drag-handle
   position absolute
   right 0

package/client/components/sidebar/transfer-history-modal.jsx

@@ -81,9 +81,9 @@ export default class TransferHistoryModal extends Component {
       sorter: sorterFactory('toPath')
     }, {
       title: f('size'),
-      dataIndex: 'fromFile.size',
-      key: 'fromFile.size',
-      sorter: sorterFactory('fromFile.size'),
+      dataIndex: 'size',
+      key: 'size',
+      sorter: sorterFactory('size'),
       render: (v) => filesize(v || 0)
     }, {
       title: e('speed'),

package/client/components/tabs/index.jsx

@@ -10,7 +10,7 @@ import {
   CodeFilled,
   DownOutlined,
   LeftOutlined,
-  PlusCircleOutlined,
+  PlusOutlined,
   RightOutlined,
   RightSquareFilled
 } from '@ant-design/icons'
@@ -187,7 +187,7 @@ export default class Tabs extends React.Component {
       <Popover
         content={this.renderMenus()}
       >
-        <PlusCircleOutlined
+        <PlusOutlined
           title={e('openNewTerm')}
           className={cls}
           onClick={() => this.props.addTab()}

package/client/components/tabs/tabs.styl

@@ -136,12 +136,6 @@
   z-index 20
   -webkit-app-region no-drag
 
-  // .ant-btn
-  //   background #333
-  //   color #aaa
-  //   border-color: #333
-  //   &:hover
-  //     color #ccc
   .tabs-dd-icon
     color text
     font-size 12px

package/client/components/terminal/index.jsx

@@ -7,17 +7,13 @@ import postMessage from '../../common/post-msg'
 import clone from '../../common/to-simple-obj'
 import runIdle from '../../common/run-idle'
 import {
-  CheckCircleOutlined,
   ReloadOutlined
 } from '@ant-design/icons'
 import {
   notification,
   Spin,
-  Modal,
-  Button,
-  Checkbox
+  Button
 } from 'antd'
-import Input from '../common/input-auto-focus'
 import classnames from 'classnames'
 import './terminal.styl'
 import {
@@ -29,8 +25,7 @@ import {
   transferTypeMap,
   terminalActions,
   commonActions,
-  rendererTypes,
-  termInitId
+  rendererTypes
 } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import { readClipboard, copy } from '../../common/clipboard'
@@ -38,7 +33,6 @@ import { FitAddon } from 'xterm-addon-fit'
 import AttachAddon from './attach-addon-custom'
 import { SearchAddon } from 'xterm-addon-search'
 import { WebLinksAddon } from 'xterm-addon-web-links'
-import { SerializeAddon } from 'xterm-addon-serialize'
 import { CanvasAddon } from 'xterm-addon-canvas'
 import { WebglAddon } from 'xterm-addon-webgl'
 import { LigaturesAddon } from 'xterm-addon-ligatures'
@@ -47,20 +41,16 @@ import { Zmodem, AddonZmodem } from './xterm-zmodem'
 import { Unicode11Addon } from 'xterm-addon-unicode11'
 import keyControlPressed from '../../common/key-control-pressed'
 import { Terminal } from 'xterm'
-import * as ls from '../../common/safe-local-storage'
 import NormalBuffer from './normal-buffer'
 import { createTerm, resizeTerm } from './terminal-apis'
-import createLsId from './build-ls-term-id'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
+import { SerializeAddon } from 'xterm-addon-serialize'
+import strip from '@electerm/strip-ansi'
 
 const { prefix } = window
 const e = prefix('ssh')
 const m = prefix('menu')
-const f = prefix('form')
-const c = prefix('common')
-const authFailMsg = 'All configured authentication methods failed'
-const privateKeyMsg = 'no passphrase'
 
 const computePos = (e) => {
   return {
@@ -76,11 +66,8 @@ class Term extends Component {
       pid: '',
       id: props.id || 'id' + generate(),
       loading: false,
-      promoteModalVisible: false,
-      savePassword: false,
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
-      tempPassword: '',
       passType: 'password',
       zmodemTransfer: null,
       lines: []
@@ -740,34 +727,17 @@ class Term extends Component {
     ]
   }
 
-  loadState = term => {
-    const uid = this.props.stateId || this.state.id
-    if (uid === termInitId) {
-      const id = createLsId(this.props.stateId || this.state.id)
-      let str = ls.getItem(id)
-      const after = '\r\n\r\n=======\r\nload from history\r\n=======\r\n\r\n'
-      str = str.replace(/\s+=======\s+load from history\s+=======\s+/g, '\r\n').trim()
-      if (str) {
-        term.write(str + after)
-      }
-    }
-  }
-
   notifyOnData = debounce(() => {
-    const str = this.serializeAddon.serialize()
-    const id = createLsId(this.state.id)
-    ls.setItem(id, str)
     postMessage({
       action: 'terminal-receive-data',
       tabId: this.props.tab.id
     })
-  }, 100)
+  }, 1000)
 
-  onSocketData = () => {
-    if (this.state.id === termInitId) {
-      runIdle(this.notifyOnData)
-    }
-  }
+  // onSocketData = (a) => {
+  //   console.log('onSocketData', a)
+  //   runIdle(this.notifyOnData)
+  // }
 
   parse (rawText) {
     let result = ''
@@ -782,21 +752,33 @@ class Term extends Component {
     return result
   }
 
-  onKey = ({ key }) => {
-    if (key === '\x7F') {
-      this.dataCache = this.dataCache.slice(0, -1)
-    } else {
-      this.dataCache += key
-    }
+  // onKey = ({ key }) => {
+  //   if (key === '\r') {
+  //     this.getCmd()
+  //   }
+  // }
+
+  getCmd = () => {
+    const str = this.serializeAddon.serialize()
+    const arr = strip(str).split(/ +/)
+    const len = arr.length
+    const last = arr[len - 1]
+    this.dataCache = last
   }
 
   onData = (d) => {
+    runIdle(this.notifyOnData)
     if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {
-      const data = this.parse(this.dataCache.trim())
+      this.getCmd()
+      const data = this.dataCache
       this.dataCache = ''
-      if (data === 'exit') {
+      const exitCmds = [
+        'exit',
+        'logout'
+      ]
+      if (exitCmds.includes(data)) {
         this.userTypeExit = true
         this.timers.userTypeExit = setTimeout(() => {
           delete this.userTypeExit
@@ -841,11 +823,10 @@ class Term extends Component {
     // term.onLineFeed(this.onLineFeed)
     // term.onTitleChange(this.onTitleChange)
     term.onSelectionChange(this.onSelection)
-    this.loadState(term)
     term.open(document.getElementById(id), true)
     this.loadRenderer(term, config)
     term.textarea.addEventListener('focus', this.setActive)
-    term.onKey(this.onKey)
+    // term.onKey(this.onKey)
     // term.textarea.addEventListener('blur', this.onBlur)
 
     // term.on('keydown', this.handleEvent)
@@ -854,9 +835,9 @@ class Term extends Component {
     const ligtureAddon = new LigaturesAddon()
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
     const unicode11Addon = new Unicode11Addon()
+    term.loadAddon(unicode11Addon)
     this.serializeAddon = new SerializeAddon()
     term.loadAddon(this.serializeAddon)
-    term.loadAddon(unicode11Addon)
     term.loadAddon(ligtureAddon)
     // activate the new version
     term.unicode.activeVersion = '11'
@@ -1002,15 +983,7 @@ class Term extends Component {
     let pid = await createTerm(opts)
       .catch(err => {
         const text = err.message
-        if (text.includes(authFailMsg)) {
-          this.setState(() => ({ passType: 'password' }))
-          return 'fail'
-        } else if (text.includes(privateKeyMsg)) {
-          this.setState(() => ({ passType: 'passphrase' }))
-          return 'fail-private'
-        } else {
-          handleErr({ message: text })
-        }
+        handleErr({ message: text })
       })
     pid = pid || ''
     if (pid.includes('fail')) {
@@ -1051,7 +1024,7 @@ class Term extends Component {
         isWin && !this.isRemote()
       )
       term.loadAddon(this.attachAddon)
-      socket.addEventListener('message', this.onSocketData)
+      // socket.addEventListener('message', this.onSocketData)
       this.runInitScript()
       term._initialized = true
     }
@@ -1159,75 +1132,11 @@ class Term extends Component {
     resizeTerm(this.pid, this.props.sessionId, cols, rows)
   }
 
-  promote = () => {
-    this.setState({
-      promoteModalVisible: true,
-      tempPassword: ''
-    })
-  }
-
   handleCancel = () => {
     const { id } = this.props.tab
     this.props.delTab(id)
   }
 
-  handleToggleSavePass = () => {
-    this.setState({
-      savePassword: !this.state.savePassword
-    })
-  }
-
-  renderPasswordForm = () => {
-    const { tempPassword, savePassword, promoteModalVisible } = this.state
-    const { type } = this.props.tab
-    return (
-      <div>
-        <Input
-          value={tempPassword}
-          type='password'
-          autofocustrigger={promoteModalVisible ? 1 : 2}
-          selectall='yes'
-          onChange={this.handleChangePass}
-          onPressEnter={this.handleClickConfirmPass}
-        />
-        {
-          type !== terminalSshConfigType
-            ? (
-              <div className='pd1t'>
-                <Checkbox
-                  checked={savePassword}
-                  onChange={this.handleToggleSavePass}
-                >{f('save')}
-                </Checkbox>
-              </div>
-              )
-            : null
-        }
-      </div>
-    )
-  }
-
-  handleChangePass = e => {
-    this.setState({
-      tempPassword: e.target.value
-    })
-  }
-
-  handleClickConfirmPass = () => {
-    const {
-      tempPassword,
-      passType
-    } = this.state
-    this.props.setSessionState(old => {
-      const sessionOptions = deepCopy(old.sessionOptions) || {}
-      sessionOptions[passType] = tempPassword
-      return { sessionOptions }
-    })
-    this.setState({
-      promoteModalVisible: false
-    }, this.remoteInit)
-  }
-
   handleShowInfo = () => {
     const { id, sessionId, logName } = this.props
     const { pid } = this.state
@@ -1256,54 +1165,6 @@ class Term extends Component {
   //   return result ? result[0].trim() : ''
   // }
 
-  renderPromoteModal = () => {
-    if (!this.isActiveTerminal()) {
-      return null
-    }
-    const {
-      passType = 'password'
-    } = this.state
-    const props = {
-      title: f(passType) + '?',
-      content: this.renderPasswordForm(),
-      onCancel: this.handleCancel,
-      show: this.state.promoteModalVisible,
-      footer: this.renderModalFooter(),
-      cancelText: c('cancel')
-    }
-    return (
-      <Modal
-        {...props}
-      >
-        {this.renderPasswordForm()}
-      </Modal>
-    )
-  }
-
-  renderModalFooter = () => {
-    const disabled = !this.state.tempPassword
-    return (
-      <div className='alignright pd1'>
-        <Button
-          type='primary'
-          icon={<CheckCircleOutlined />}
-          disabled={disabled}
-          onClick={this.handleClickConfirmPass}
-          className='mg1r'
-        >
-          {c('ok')}
-        </Button>
-        <Button
-          type='dashed'
-          className='mg1r'
-          onClick={this.handleCancel}
-        >
-          {c('cancel')}
-        </Button>
-      </div>
-    )
-  }
-
   switchEncoding = encode => {
     this.decode = new TextDecoder(encode)
     this.attachAddon.decoder = this.decode
@@ -1357,7 +1218,6 @@ class Term extends Component {
       <div
         {...prps1}
       >
-        {this.renderPromoteModal()}
         <div
           {...prps2}
         >

package/client/components/terminal/term-search.jsx

@@ -56,7 +56,7 @@ class TermSearch extends Component {
 
   toggleSearch = () => {
     this.props.store.toggleTerminalSearch()
-    setTimeout(window.store.focus, 100)
+    setTimeout(window.store.focus, 200)
   }
 
   searchShortcut = (e) => {
@@ -86,7 +86,7 @@ class TermSearch extends Component {
 
   handleChange = e => {
     this.props.store.termSearch = e.target.value
-    this.next()
+    this.prev()
   }
 
   close = () => {

package/client/components/terminal/terminal.styl

@@ -5,39 +5,16 @@
 .loading-wrapper
   padding 30px
   z-index 100
-  // .ant-spin
-  //   color #fff
-  //   background #000
-  // .ant-spin-blur
-  //   opacity 0
 .term-search-box
   position absolute
   right 5px
   top 5px
   z-index 30
-// .term-sftp-box
-//   .ant-tabs-bar
-//     margin-bottom 0
-//     .ant-tabs-tab
-//       color #999
-//     .ant-tabs-tab-active
-//       color #fff
-//   .ant-tabs-nav-wrap
-//     background #333
+
 .terminal-control
   background main
   line-height 32px
   padding 0 10px
-// .fileManager
-//   .terminal-control
-//     background main-dark
-//   .type-tab
-//     color text
-//     &:hover
-//     &.active
-//       color text-dark
-//     &.active
-//       border-bottom 1px solid text-dark
 
 .terms-box
   position relative
@@ -56,8 +33,6 @@
 
 #container
   .xterm-viewport
-    // background-color transparent !important
-    // background-image url("./images/electerm-watermark.")
     background-repeat no-repeat
     background-position 50% 50%
 

package/client/css/antd-overwrite.styl

@@ -1,9 +1,5 @@
 
-// .ant-switch-handle::before
-//   background #232340
-// .ant-spin-container
-// .ant-spin-nested-loading
-//   filter none
+
 #container .ant-spin-blur
   opacity 1 !important
 .ant-tree-indent-unit

package/client/store/index.js

@@ -175,9 +175,11 @@ class Store {
     return {
       ...JSON.parse(window.store._termSearchOptions),
       decorations: {
+        activeMatchBorder: theme.yellow,
+        activeMatchBackground: theme.selectionBackground,
         activeMatchColorOverviewRuler: theme.selectionBackground,
         matchBackground: theme.background,
-        matchOverviewRuler: theme.selectionBackground,
+        matchOverviewRuler: theme.yellow,
         matchBorder: getReverseColor(theme.background)
       }
     }

package/package.json

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