@electerm/electerm-react 1.34.68 → 1.35.0

package/client/components/shortcuts/shortcuts-defaults.js

@@ -0,0 +1,87 @@
+export default () => {
+  return [
+    {
+      name: 'app_closeCurrentTab',
+      shortcut: 'ctrl+w',
+      shortcutMac: 'ctrl+w'
+    },
+    {
+      name: 'app_newBookmark',
+      shortcut: 'ctrl+b',
+      shortcutMac: 'meta+b'
+    },
+    {
+      name: 'app_togglefullscreen',
+      shortcut: 'alt+f',
+      shortcutMac: 'alt+f'
+    },
+    {
+      name: 'app_zoomin',
+      shortcut: 'ctrl+=',
+      shortcutMac: 'meta+='
+    },
+    {
+      name: 'app_zoomout',
+      shortcut: 'ctrl+-',
+      shortcutMac: 'meta+-'
+    },
+    {
+      name: 'app_prevTab',
+      shortcut: 'ctrl+shift+tab',
+      shortcutMac: 'ctrl+shift+tab'
+    },
+    {
+      name: 'app_nextTab',
+      shortcut: 'ctrl+tab',
+      shortcutMac: 'ctrl+tab'
+    },
+    {
+      name: 'terminal_clear',
+      shortcut: 'ctrl+l,ctrl+shift+l',
+      shortcutMac: 'meta+l'
+    },
+    {
+      name: 'terminal_selectAll',
+      shortcut: 'ctrl+a,ctrl+shift+a',
+      shortcutMac: 'meta+a',
+      readonly: true
+    },
+    {
+      name: 'terminal_copy',
+      shortcut: 'ctrl+c,ctrl+shift+c',
+      shortcutMac: 'meta+c',
+      readonly: true
+    },
+    {
+      name: 'terminal_paste',
+      shortcut: 'ctrl+v,ctrl+shift+v',
+      shortcutMac: 'meta+v',
+      readonly: true
+    },
+    {
+      name: 'terminal_search',
+      shortcut: 'ctrl+f',
+      shortcutMac: 'meta+f'
+    },
+    {
+      name: 'terminal_pasteSelected',
+      shortcut: 'alt+insert',
+      shortcutMac: 'alt+insert'
+    },
+    {
+      name: 'terminal_showNormalBuffer',
+      shortcut: 'ctrl+ArrowUp',
+      shortcutMac: 'meta+↑'
+    },
+    {
+      name: 'terminal_zoominTerminal',
+      shortcut: 'ctrl+▲',
+      shortcutMac: 'meta+▲'
+    },
+    {
+      name: 'terminal_zoomoutTerminal',
+      shortcut: 'ctrl+▼',
+      shortcutMac: 'meta+▼'
+    }
+  ]
+}

package/client/components/shortcuts/shortcuts.jsx

@@ -0,0 +1,166 @@
+import { Component } from '../common/react-subx'
+import shortcutsDefaultsGen from './shortcuts-defaults'
+import ShortcutEdit from './shortcut-editor'
+import deepCopy from 'json-deep-copy'
+import {
+  Table,
+  Button
+} from 'antd'
+import {
+  isMacJs as isMac
+} from '../../common/constants.js'
+
+const { prefix } = window
+const e = prefix('form')
+const c = prefix('control')
+const m = prefix('menu')
+const ss = prefix('ssh')
+const s = prefix('setting')
+const shortcutsDefaults = shortcutsDefaultsGen()
+
+export default class Shortcuts extends Component {
+  handleResetAll = () => {
+    this.props.store.updateConfig({
+      shortcuts: {}
+    })
+  }
+
+  updateConfig = (name, value) => {
+    const { store } = this.props
+    const shortcuts = deepCopy(store.config.shortcuts || {})
+    shortcuts[name] = value
+    this.props.store.updateConfig({
+      shortcuts
+    })
+  }
+
+  getData () {
+    const { shortcuts = {} } = this.props.store.config
+    return shortcutsDefaults.map((c, i) => {
+      const propName = isMac ? 'shortcutMac' : 'shortcut'
+      const name = c.name + '_' + propName
+      return {
+        index: i + 1,
+        name,
+        readonly: c.readonly,
+        shortcut: c.readonly ? c[propName] : (shortcuts[name] || c[propName])
+      }
+    })
+  }
+
+  getKeysTakenData = () => {
+    const { shortcuts = {} } = this.props.store.config
+    return shortcutsDefaults
+      .reduce((p, k) => {
+        const propName = isMac ? 'shortcutMac' : 'shortcut'
+        const name = k.name + '_' + propName
+        const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
+        const v = vv
+          .split(',')
+          .map(f => f.trim())
+          .reduce((p, k, i) => {
+            return {
+              ...p,
+              [k]: true
+            }
+          }, {})
+        return {
+          ...p,
+          ...v
+        }
+      }, {})
+  }
+
+  render () {
+    const { store } = this.props
+    const columns = [
+      {
+        title: 'NO.',
+        dataIndex: 'index',
+        key: 'index',
+        render: (index) => {
+          return index
+        }
+      },
+      {
+        title: e('description'),
+        dataIndex: 'name',
+        key: 'name',
+        render: (name) => {
+          const [a, b] = name.split('_')
+          const pre = a === 'terminal' ? `[${ss('terminal')}] ` : ''
+          if (
+            [
+              'clear', 'selectAll', 'search'
+            ].includes(b)
+          ) {
+            return pre + ss(b)
+          } else if (b === 'copy') {
+            return pre + m(b)
+          } else if (b === 'newBookmark') {
+            return pre + c(b)
+          } else if (b.includes('zoomin')) {
+            return pre + m('zoomin')
+          } else if (b.includes('zoomout')) {
+            return pre + m('zoomout')
+          } else if (['togglefullscreen'].includes(b)) {
+            return pre + m(b)
+          } else {
+            return pre + s(b)
+          }
+        }
+      },
+      {
+        title: s('shortcut'),
+        dataIndex: 'shortcut',
+        key: 'shortcut',
+        render: (shortcut, inst) => {
+          const { readonly } = inst
+          if (readonly) {
+            return (
+              <span className='readonly'>
+                {
+                  shortcut.split(',').map(s => {
+                    return (
+                      <span className='shortcut-unit' key={s}>{s}</span>
+                    )
+                  })
+                }
+              </span>
+            )
+          }
+          return (
+            <ShortcutEdit
+              data={inst}
+              keysTaken={this.getKeysTakenData()}
+              store={store}
+              updateConfig={this.updateConfig}
+            />
+          )
+        }
+      }
+    ]
+    const props = {
+      dataSource: this.getData(),
+      columns,
+      bordered: true,
+      pagination: false,
+      size: 'small',
+      rowKey: 'id'
+    }
+    return (
+      <div>
+        <Table
+          {...props}
+        />
+        <div className='pd1y'>
+          <Button
+            onClick={this.handleResetAll}
+          >
+            {s('resetAllToDefault')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/sidebar/index.jsx

@@ -116,7 +116,7 @@ export default class Sidebar extends Component {
       >
         <div className='sidebar-bar btns'>
           <div className='control-icon-wrap'>
-            <MenuBtn store={store} />
+            <MenuBtn store={store} config={store.config} />
           </div>
           <SideIcon
             title={e('newBookmark')}

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

@@ -22,12 +22,20 @@ const sorterFactory = prop => {
   }
 }
 export default class TransferHistoryModal extends Component {
+  state = {
+    pageSize: 5
+  }
+
+  handlePageSizeChange = (page, pageSize) => {
+    this.setState({ pageSize })
+  }
+
   render () {
     const {
       getTransferHistory,
       clearTransferHistory
     } = this.props.store
-    const transferHistory = getTransferHistory()
+    const transferHistory = getTransferHistory().filter(d => !d.unzip)
     const columns = [{
       title: e('startTime'),
       dataIndex: 'startTime',
@@ -88,7 +96,11 @@ export default class TransferHistoryModal extends Component {
       columns,
       bordered: true,
       pagination: {
-        pageSize: 10
+        pageSize: this.state.pageSize,
+        showSizeChanger: true,
+        pageSizeOptions: [5, 10, 20, 50, 100],
+        onChange: this.handlePageSizeChange,
+        position: ['topRight']
       },
       size: 'small',
       rowKey: 'id'

package/client/components/tabs/index.jsx

@@ -42,7 +42,6 @@ export default class Tabs extends React.Component {
     const {
       tabsRef
     } = this
-    window.addEventListener('keypress', this.handleTabHotkey)
     tabsRef.current.addEventListener('dblclick', this.handleDblClickEvent)
     tabsRef.current.addEventListener('mousedown', this.handleClickEvent)
   }
@@ -58,14 +57,6 @@ export default class Tabs extends React.Component {
     }
   }
 
-  // componentWillUnmount () {
-  //   const {
-  //     tabsRef
-  //   } = this
-  //   window.removeEventListener('keydown', this.handleTabHotkey)
-  //   tabsRef.current.removeEventListener('mousedown', this.handleClickEvent)
-  // }
-
   tabsWidth = () => {
     return Array.from(
       document.querySelectorAll('.tab')
@@ -83,22 +74,6 @@ export default class Tabs extends React.Component {
     return width < (tabsWidthAll + addBtnWidth)
   }
 
-  handleTabHotkey = e => {
-    if (
-      e.ctrlKey &&
-      e.code === 'Tab' &&
-      !e.shiftKey
-    ) {
-      window.store.clickNextTab()
-    } else if (
-      e.ctrlKey &&
-      e.code === 'Tab' &&
-      e.shiftKey
-    ) {
-      window.store.clickPrevTab()
-    }
-  }
-
   handleClickEvent = (e) => {
     if (e.button === 1) {
       const p = findParentBySel(e.target, '.tab')

package/client/components/tabs/tab.jsx

@@ -19,7 +19,6 @@ import createName from '../../common/create-title'
 import { addClass, removeClass } from '../../common/class'
 import {
   terminalSshConfigType,
-  ctrlOrCmd,
   commonActions
 } from '../../common/constants'
 
@@ -255,8 +254,7 @@ export default class Tab extends React.Component {
     res.push({
       func: 'handleClose',
       icon: 'CloseOutlined',
-      text: e('close'),
-      subText: `${ctrlOrCmd} + W`
+      text: e('close')
     })
     res.push({
       func: 'closeOther',
@@ -359,7 +357,7 @@ export default class Tab extends React.Component {
     } = this.props
     const { isLast } = this.props
     const { tab, terminalOnData } = this.state
-    const { id, isEditting, status, isTransporting, tabCount } = tab
+    const { id, isEditting, status, isTransporting, tabCount, color } = tab
     const active = id === currentTabId
     const cls = classnames(
       `tab-${id}`,
@@ -380,6 +378,9 @@ export default class Tab extends React.Component {
     if (isEditting) {
       return this.renderEditting(tab, cls)
     }
+    const styleTag = color
+      ? { color }
+      : {}
     return (
       <Tooltip
         title={title}
@@ -412,7 +413,7 @@ export default class Tab extends React.Component {
               onClick={this.handleReloadTab}
               title={m('reload')}
             />
-            {tabCount}. {title}
+            <span style={styleTag}>♦</span> {tabCount}. {title}
           </div>
           <div className={'tab-status ' + status} />
           <div className='tab-traffic' />

package/client/components/terminal/index.jsx

@@ -10,7 +10,6 @@ import {
   CheckCircleOutlined,
   ReloadOutlined
 } from '@ant-design/icons'
-
 import {
   notification,
   Spin,
@@ -26,7 +25,6 @@ import {
   paneMap,
   typeMap,
   isWin,
-  isMac,
   terminalSshConfigType,
   transferTypeMap,
   terminalActions,
@@ -47,13 +45,12 @@ import getProxy from '../../common/get-proxy'
 import { Zmodem, AddonZmodem } from './xterm-zmodem'
 import { Unicode11Addon } from 'xterm-addon-unicode11'
 import keyControlPressed from '../../common/key-control-pressed'
-import keyShiftPressed from '../../common/key-shift-pressed'
-import keyPressed from '../../common/key-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'
 
 const { prefix } = window
 const e = prefix('ssh')
@@ -70,7 +67,7 @@ const computePos = (e) => {
   }
 }
 
-export default class Term extends Component {
+class Term extends Component {
   constructor (props) {
     super(props)
     this.state = {
@@ -223,13 +220,58 @@ export default class Term extends Component {
     this.props.pane === paneMap.terminal
   }
 
+  clearShortcut = (e) => {
+    e.stopPropagation()
+    this.onClear()
+  }
+
+  selectAllShortcut = (e) => {
+    e.stopPropagation()
+    this.term.selectAll()
+  }
+
+  copyShortcut = (e) => {
+    const sel = this.term.getSelection()
+    if (sel) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.copySelectionToClipboard()
+      return false
+    }
+  }
+
+  searchShortcut = (e) => {
+    e.stopPropagation()
+    this.toggleSearch()
+  }
+
+  pasteSelectedShortcut = (e) => {
+    e.stopPropagation()
+    this.tryInsertSelected()
+  }
+
+  showNormalBufferShortcut = (e) => {
+    e.stopPropagation()
+    this.openNormalBuffer()
+  }
+
+  prevTabShortcut = debounce((e) => {
+    e.stopPropagation()
+    window.store.clickPrevTab()
+  }, 300)
+
+  nextTabShortcut = debounce((e) => {
+    e.stopPropagation()
+    window.store.clickNextTab()
+  }, 300)
+
   handleEvent = (e) => {
     const {
       keyword,
       options,
       action,
       encode,
-      id,
+      // id,
       type,
       cmd,
       activeSplitId,
@@ -312,67 +354,6 @@ export default class Term extends Component {
       e.stopPropagation()
       return this.term && this.term.blur()
     }
-    if (
-      keyControlPressed(e) &&
-      !keyShiftPressed(e) &&
-      keyPressed(e, 'c')
-    ) {
-      const sel = this.term.getSelection()
-      if (sel) {
-        e.stopPropagation()
-        e.preventDefault()
-        this.copySelectionToClipboard()
-        return false
-      }
-    } else if (
-      keyControlPressed(e) &&
-      keyShiftPressed(e) &&
-      keyPressed(e, 'c')
-    ) {
-      e.stopPropagation()
-      this.copySelectionToClipboard()
-    } else if (id === this.props.id) {
-      e.stopPropagation()
-      this.term.selectAll()
-    } else if (
-      keyPressed(e, 'f') && keyControlPressed(e) &&
-      (
-        isMac ||
-        (!isMac && keyShiftPressed(e))
-      )
-    ) {
-      e.stopPropagation()
-      this.toggleSearch()
-    } else if (
-      keyPressed(e, 'tab')
-    ) {
-      e.stopPropagation()
-      e.preventDefault()
-      if (e.ctrlKey && e.type === 'keydown') {
-        if (e.shiftKey) {
-          window.store.clickPrevTab()
-        } else {
-          window.store.clickNextTab()
-        }
-        return false
-      }
-    } else if (
-      keyControlPressed(e) &&
-      keyPressed(e, 'ArrowUp') && this.bufferMode === 'alternate'
-    ) {
-      e.stopPropagation()
-      this.openNormalBuffer()
-    } else if (
-      e.ctrlKey &&
-      keyPressed(e, 'tab')
-    ) {
-      this.onClear()
-    } else if (
-      e.altKey &&
-      keyPressed(e, 'insert')
-    ) {
-      this.tryInsertSelected()
-    }
   }
 
   onDrop = e => {
@@ -692,12 +673,11 @@ export default class Term extends Component {
   renderContext = () => {
     const hasSlected = this.term.hasSelection()
     const copyed = readClipboard()
-    const copyShortcut = isMac
-      ? 'Command+C'
-      : 'Ctrl+Shift+C'
-    const pasteShortcut = isMac
-      ? 'Command+V'
-      : 'Ctrl+Shift+V'
+    const copyShortcut = this.getShortcut('terminal_copy')
+    const pasteShortcut = this.getShortcut('terminal_paste')
+    const clearShortcut = this.getShortcut('terminal_clear')
+    const selectAllShortcut = this.getShortcut('terminal_selectAll')
+    const searchShortcut = this.getShortcut('terminal_search')
     return [
       {
         func: 'onCopy',
@@ -717,17 +697,19 @@ export default class Term extends Component {
         func: 'onClear',
         icon: 'ReloadOutlined',
         text: e('clear'),
-        subText: 'Ctrl+L'
+        subText: clearShortcut
       },
       {
         func: 'onSelectAll',
         icon: 'SelectOutlined',
-        text: e('selectAll')
+        text: e('selectAll'),
+        subText: selectAllShortcut
       },
       {
         func: 'toggleSearch',
         icon: 'SearchOutlined',
-        text: e('search')
+        text: e('search'),
+        subText: searchShortcut
       },
       {
         func: 'split',
@@ -837,7 +819,7 @@ export default class Term extends Component {
     // term.on('keydown', this.handleEvent)
     term.onData(this.onData)
     this.term = term
-    term.attachCustomKeyEventHandler(this.handleEvent)
+    term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
     term.onKey(this.onKey)
     // if (host && !password && !privateKey) {
     //   return this.promote()
@@ -895,16 +877,6 @@ export default class Term extends Component {
     })
   }
 
-  watchNormalBufferTrigger = e => {
-    if (
-      keyControlPressed(e) &&
-      keyPressed(e, 'ArrowUp')
-    ) {
-      e.stopPropagation()
-      this.copySelectionToClipboard()
-    }
-  }
-
   openNormalBuffer = () => {
     const normal = this.term.buffer._normal
     const len = normal.length
@@ -940,7 +912,8 @@ export default class Term extends Component {
       srcId, from = 'bookmarks',
       type,
       encode,
-      term: terminalType
+      term: terminalType,
+      displayRaw
     } = tab
     const { savePassword } = this.state
     const isSshConfig = type === terminalSshConfigType
@@ -1054,32 +1027,40 @@ export default class Term extends Component {
     }
 
     // this.decoder = new TextDecoder(encode)
-    // const oldWrite = term.write
-    // const th = this
-    // term.write = function (data) {
-    //   let str = ''
-    //   if (typeof data === 'object') {
-    //     if (data instanceof ArrayBuffer) {
-    //       str = th.decoder.decode(data)
-    //       oldWrite.call(term, str)
-    //     } else {
-    //       const fileReader = new FileReader()
-    //       fileReader.addEventListener('load', () => {
-    //         str = th.decoder.decode(fileReader.result)
-    //         oldWrite.call(term, str)
-    //       })
-    //       fileReader.readAsArrayBuffer(new window.Blob([data]))
-    //     }
-    //   } else if (typeof data === 'string') {
-    //     oldWrite.call(term, data)
-    //   } else {
-    //     throw Error(`Cannot handle ${typeof data} websocket message.`)
-    //   }
-    // }
+    if (displayRaw) {
+      const oldWrite = term.write
+      const th = this
+      term.write = function (data) {
+        // let str = ''
+        // if (typeof data === 'object') {
+        //   if (data instanceof ArrayBuffer) {
+        //     str = th.decoder.decode(data)
+        //     oldWrite.call(term, th.escape(str))
+        //   } else {
+        //     const fileReader = new FileReader()
+        //     fileReader.addEventListener('load', () => {
+        //       str = th.decoder.decode(fileReader.result)
+        //       oldWrite.call(term, th.escape(str))
+        //     })
+        //     fileReader.readAsArrayBuffer(new window.Blob([data]))
+        //   }
+        // } else if (typeof data === 'string') {
+        //   oldWrite.call(term, th.escape(data))
+        // } else {
+        //   throw Error(`Cannot handle ${typeof data} websocket message.`)
+        // }
+        oldWrite.call(term, th.escape(data))
+      }
+    }
     this.term = term
     window.store.triggerResize()
   }
 
+  escape = str => {
+    return str.replace(/\\x1B/g, '\\x1B')
+      .replace(/\033/g, '\\033')
+  }
+
   onKey = (key, e) => {
     // log.log('onKey', key, e)
   }
@@ -1382,3 +1363,5 @@ export default class Term extends Component {
     )
   }
 }
+
+export default shortcutDescExtend(shortcutExtend(Term))