@electerm/electerm-react 1.37.68 → 1.37.80

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

@@ -25,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'
@@ -34,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'
@@ -43,12 +41,12 @@ 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')
@@ -729,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 = ''
@@ -771,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
@@ -830,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)
@@ -843,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'
@@ -1032,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
     }

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.68",
+  "version": "1.37.80",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",