@electerm/electerm-react 1.39.76 → 1.39.99

package/client/components/sidebar/info-modal.jsx

@@ -22,12 +22,7 @@ import {
 } from '../../common/constants'
 import './info.styl'
 
-const { prefix } = window
-const e = prefix('control')
-const m = prefix('menu')
-const c = prefix('common')
-const a = prefix('app')
-const s = prefix('setting')
+const e = window.translate
 
 export default class InfoModal extends Component {
   handleChangeTab = key => {
@@ -103,14 +98,14 @@ export default class InfoModal extends Component {
     }
     const title = (
       <div className='ant-modal-confirm-title font16'>
-        <InfoCircleOutlined className='font20 mg1r' /> {m('about')} {name}
+        <InfoCircleOutlined className='font20 mg1r' /> {e('about')} {name}
       </div>
     )
     const attrs = {
       title,
       width: window.innerWidth - 100,
       maskClosable: true,
-      okText: c('ok'),
+      okText: e('ok'),
       onCancel: onCloseAbout,
       footer: null,
       open: true,
@@ -119,11 +114,11 @@ export default class InfoModal extends Component {
     const items = [
       {
         key: infoTabs.info,
-        label: m('about'),
+        label: e('about'),
         children: (
           <div>
             <LogoElem />
-            <p className='mg2b'>{a('desc')}</p>
+            <p className='mg2b'>{e('desc')}</p>
             <p className='mg1b'>
               <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
               <Link to={authorUrl} className='mg1l'>
@@ -143,7 +138,7 @@ export default class InfoModal extends Component {
               </Link>
             </p>
             <p className='mg1b'>
-              <GlobalOutlined /> <b className='mg1r'>{s('language')} repo ➾</b>
+              <GlobalOutlined /> <b className='mg1r'>{e('language')} repo ➾</b>
               <Link to={langugeRepo} className='mg1l'>
                 {langugeRepo}
               </Link>
@@ -155,25 +150,25 @@ export default class InfoModal extends Component {
               </Link>
             </p>
             <p className='mg1b'>
-              <HighlightOutlined /> <b className='mg1r'>{a('changeLog')} ➾</b>
+              <HighlightOutlined /> <b className='mg1r'>{e('changeLog')} ➾</b>
               <Link to={releaseLink} className='mg1l'>
                 {releaseLink}
               </Link>
             </p>
             <p className='mg1b'>
-              <AlignLeftOutlined /> <b className='mg1r'>{a('knownIssues')} ➾</b>
+              <AlignLeftOutlined /> <b className='mg1r'>{e('knownIssues')} ➾</b>
               <Link to={knownIssuesLink} className='mg1l'>
                 {knownIssuesLink}
               </Link>
             </p>
             <p className='mg1b'>
-              <WarningOutlined /> <b className='mg1r'>{a('privacyNotice')} ➾</b>
+              <WarningOutlined /> <b className='mg1r'>{e('privacyNotice')} ➾</b>
               <Link to={privacyNoticeLink} className='mg1l'>
                 {privacyNoticeLink}
               </Link>
             </p>
             <p className='mg1b'>
-              <HeartOutlined /> <b className='mg1r'>{a('sponsorElecterm')} ➾</b>
+              <HeartOutlined /> <b className='mg1r'>{e('sponsorElecterm')} ➾</b>
               <Link to={sponsorLink} className='mg1l'>
                 {sponsorLink}
               </Link>

package/client/components/sidebar/side-panel.jsx

@@ -1,6 +1,7 @@
 import { PureComponent } from 'react'
 export default class SidePanel extends PureComponent {
   handleMousedown = (e) => {
+    e.stopPropagation()
     this.dragStart = true
     this.clientX = e.clientX
     window.addEventListener('mouseup', this.handleMouseup)
@@ -13,8 +14,8 @@ export default class SidePanel extends PureComponent {
       clientX
     } = e
     let nw = clientX - this.clientX + this.props.leftSidebarWidth
-    if (nw < 343) {
-      nw = 343
+    if (nw < 150) {
+      nw = 150
     } else if (nw > 600) {
       nw = 600
     }

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

@@ -11,10 +11,7 @@ import './transfer-history.styl'
 import { get as _get } from 'lodash-es'
 import { filesize } from 'filesize'
 
-const { prefix } = window
-const e = prefix('transferHistory')
-const f = prefix('sftp')
-const m = prefix('menu')
+const e = window.translate
 const timeRender = t => time(t)
 const sorterFactory = prop => {
   return (a, b) => {
@@ -59,7 +56,7 @@ export default class TransferHistoryModal extends Component {
         )
       }
     }, {
-      title: m('host'),
+      title: e('host'),
       dataIndex: 'host',
       key: 'host',
       sorter: sorterFactory('host')
@@ -80,7 +77,7 @@ export default class TransferHistoryModal extends Component {
       },
       sorter: sorterFactory('toPath')
     }, {
-      title: f('size'),
+      title: e('size'),
       dataIndex: 'size',
       key: 'size',
       sorter: sorterFactory('size'),

package/client/components/sidebar/transfer-list-control.jsx

@@ -11,8 +11,7 @@ import { get } from 'lodash-es'
 
 const { Option } = Select
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default class TransferModalUI extends Component {
   state = {

package/client/components/sidebar/transfer-list.jsx

@@ -9,8 +9,7 @@ import {
 import TransferModal from './transfer-modal'
 import './transfer.styl'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default class TransferList extends Component {
   render () {

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

@@ -5,9 +5,7 @@ import {
 import Transports from './transfer-list-control'
 import TransportHistory from './transfer-history-modal'
 
-const { prefix } = window
-const e = prefix('sftp')
-const t = prefix('transferHistory')
+const e = window.translate
 
 export default class TransferModal extends Component {
   renderTransfer = () => {
@@ -46,7 +44,7 @@ export default class TransferModal extends Component {
     }
     if (transferHistory.length) {
       tabs.push({
-        title: t('transferHistory'),
+        title: e('transferHistory'),
         id: 'history',
         render: this.renderHistory
       })

package/client/components/sidebar/transport-ui.jsx

@@ -10,8 +10,7 @@ import {
 } from '@ant-design/icons'
 import './transfer.styl'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default function Transporter (props) {
   const {

package/client/components/tabs/index.jsx

@@ -31,16 +31,16 @@ import BookmarksList from '../sidebar/bookmark-select'
 import AppDrag from './app-drag'
 import classNames from 'classnames'
 
-const { prefix } = window
-const e = prefix('tabs')
-const c = prefix('control')
-const t = prefix('tabs')
+const e = window.translate
 const MenuItem = Menu.Item
 
 export default class Tabs extends React.Component {
   constructor (props) {
     super(props)
     this.tabsRef = React.createRef()
+    this.state = {
+      overflow: false
+    }
   }
 
   componentDidMount () {
@@ -53,11 +53,10 @@ export default class Tabs extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    prevProps = prevProps || {}
     if (
       prevProps.currentTabId !== this.props.currentTabId ||
       prevProps.width !== this.props.width ||
-      prevProps.tabs.map(d => d.title).join('#') !== this.props.tabs.map(d => d.title).join('#')
+      prevProps.tabs.length !== this.props.tabs.length
     ) {
       this.adjustScroll()
     }
@@ -72,12 +71,17 @@ export default class Tabs extends React.Component {
   }
 
   isOverflow = () => {
-    const { tabs = [], width } = this.props
+    const { tabs = [] } = this.props
     const len = tabs.length
     const addBtnWidth = 22
-    const tabsWidth = this.tabsWidth()
-    const tabsWidthAll = tabMargin * len + 166 + tabsWidth
-    return width < (tabsWidthAll + addBtnWidth)
+    const tabsWidth = this.tabsWidth() + tabMargin * len + addBtnWidth
+    const tabsInnerWidth = this.getInnerWidth()
+    return tabsWidth > tabsInnerWidth
+  }
+
+  getInnerWidth = () => {
+    const inner = document.querySelector('.tabs-inner')
+    return inner ? inner.clientWidth : 0
   }
 
   handleClickEvent = (e) => {
@@ -98,7 +102,7 @@ export default class Tabs extends React.Component {
   }
 
   adjustScroll = () => {
-    const { width, tabs, currentTabId } = this.props
+    const { tabs, currentTabId } = this.props
     const index = findIndex(tabs, t => t.id === currentTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll('.tab')
@@ -106,10 +110,14 @@ export default class Tabs extends React.Component {
       return prev + c.clientWidth
     }, 0)
     const w = (index + 1) * tabMargin + 5 + tabsDomWith
-    const scrollLeft = w > width - extraTabWidth
-      ? w - width + extraTabWidth
+    const tabsInnerWidth = this.getInnerWidth()
+    const scrollLeft = w > tabsInnerWidth
+      ? w - tabsInnerWidth
       : 0
     this.dom.scrollLeft = scrollLeft
+    this.setState({
+      overflow: this.isOverflow()
+    })
   }
 
   handleScrollLeft = () => {
@@ -178,13 +186,13 @@ export default class Tabs extends React.Component {
           className={cls}
           onClick={onNewSsh}
         >
-          <CodeFilled /> {c('newBookmark')}
+          <CodeFilled /> {e('newBookmark')}
         </div>
         <div
           className={cls}
           onClick={() => addTab()}
         >
-          <RightSquareFilled /> {t('newTab')}
+          <RightSquareFilled /> {e('newTab')}
         </div>
         <BookmarksList
           store={window.store}
@@ -252,7 +260,7 @@ export default class Tabs extends React.Component {
     const { tabs = [], width } = this.props
     const len = tabs.length
     const tabsWidthAll = tabMargin * len + 10 + this.tabsWidth()
-    const overflow = this.isOverflow()
+    const { overflow } = this.state
     const left = overflow
       ? '100%'
       : tabsWidthAll
@@ -291,9 +299,9 @@ export default class Tabs extends React.Component {
             })
           }
           {
-            !overflow
-              ? this.renderAddBtn()
-              : null
+            overflow
+              ? null
+              : this.renderAddBtn()
           }
         </div>
       </div>
@@ -301,7 +309,7 @@ export default class Tabs extends React.Component {
   }
 
   render () {
-    const overflow = this.isOverflow()
+    const { overflow } = this.state
     return (
       <div className='tabs' ref={this.tabsRef}>
         {this.renderContent()}

package/client/components/tabs/tab-title.jsx

@@ -9,7 +9,7 @@ export default function tabTitle (props) {
     : {}
   return (
     <span className='tab-title'>
-      <span style={styleTag}>♦</span> {tabCount}. {title}
+      <span style={styleTag}>●</span> {tabCount}. {title}
     </span>
   )
 }

package/client/components/tabs/tab.jsx

@@ -23,10 +23,7 @@ import {
 } from '../../common/constants'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
-const { prefix } = window
-const e = prefix('tabs')
-const m = prefix('menu')
-const s = prefix('sftp')
+const e = window.translate
 const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
@@ -58,6 +55,31 @@ class Tab extends Component {
     clearTimeout(this.handler)
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    return this.shouldUpdate(this.props, nextProps) || this.shouldUpdateState(this.state, nextState)
+  }
+
+  shouldUpdateState = (prevState, nextState) => {
+    return !isEqual(prevState, nextState)
+  }
+
+  shouldUpdate = (prevProps, nextProps) => {
+    // todo currentTabId still need improve
+    const pickKeys = [
+      'currentTabId',
+      'height',
+      'isLast',
+      'isMaximized',
+      'activeTerminalId',
+      'config',
+      'tab',
+      'width'
+    ]
+
+    // compare only the relevant props
+    return !isEqual(pick(prevProps, pickKeys), pick(nextProps, pickKeys))
+  }
+
   modifier = (...args) => {
     runIdle(() => this.setState(...args))
   }
@@ -290,7 +312,7 @@ class Tab extends Component {
     res.push({
       func: 'handleReloadTab',
       icon: 'Loading3QuartersOutlined',
-      text: m('reload'),
+      text: e('reload'),
       subText: reloadShortcut
     })
     return res
@@ -363,8 +385,8 @@ class Tab extends Component {
         tunnel = `sock5://${sshTunnelLocalHost}:${sshTunnelLocalPort}`
       } else {
         tunnel = sshTunnel === 'forwardRemoteToLocal'
-          ? `-> ${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
-          : `-> ${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+          ? `-> ${e('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+          : `-> ${e('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
       }
       if (error) {
         tunnel = `error: ${tunnel}`
@@ -462,7 +484,7 @@ class Tab extends Component {
             <Loading3QuartersOutlined
               className='pointer tab-reload mg1r'
               onClick={this.handleReloadTab}
-              title={m('reload')}
+              title={e('reload')}
             />
             <span className='tab-title'>
               {tabCount}. {title}

package/client/components/tabs/tabs.styl

@@ -205,3 +205,6 @@
 .system-ui
   .window-controls
     display none
+.tab-title-tag
+  margin-right 5px
+  font-size 14px

package/client/components/tabs/window-control.jsx

@@ -8,8 +8,7 @@ import {
   isMacJs
 } from '../../common/constants'
 
-const { prefix } = window
-const m = prefix('menu')
+const e = window.translate
 
 export default class WindowControl extends Component {
   render () {
@@ -35,7 +34,7 @@ export default class WindowControl extends Component {
     return (
       <div className='window-controls'>
         <div className='window-control-box window-control-minimize' onClick={minimize}>
-          <MinusOutlined title={m('minimize')} className='iblock font12 widnow-control-icon' />
+          <MinusOutlined title={e('minimize')} className='iblock font12 widnow-control-icon' />
         </div>
         <div
           className='window-control-box window-control-maximize'
@@ -45,7 +44,7 @@ export default class WindowControl extends Component {
         >
           <span
             title={
-              isMaximized ? m('unmaximize') : m('maximize')
+              isMaximized ? e('unmaximize') : e('maximize')
             }
             className={
               'iblock font12 icon-maximize widnow-control-icon ' +
@@ -54,7 +53,7 @@ export default class WindowControl extends Component {
           />
         </div>
         <div className='window-control-box window-control-close' onClick={closeApp}>
-          <CloseOutlined title={m('close')} className='iblock font12 widnow-control-icon' />
+          <CloseOutlined title={e('close')} className='iblock font12 widnow-control-icon' />
         </div>
       </div>
     )

package/client/components/terminal/index.jsx

@@ -53,9 +53,7 @@ import strip from '@electerm/strip-ansi'
 import { formatBytes } from '../../common/byte-format.js'
 import * as fs from './fs.js'
 
-const { prefix } = window
-const e = prefix('ssh')
-const m = prefix('menu')
+const e = window.translate
 
 const computePos = (e) => {
   return {
@@ -837,14 +835,14 @@ class Term extends Component {
       {
         func: 'onCopy',
         icon: 'CopyOutlined',
-        text: m('copy'),
+        text: e('copy'),
         disabled: !hasSlected,
         subText: copyShortcut
       },
       {
         func: 'onPaste',
         icon: 'SwitcherOutlined',
-        text: m('paste'),
+        text: e('paste'),
         disabled: !copyed,
         subText: pasteShortcut
       },
@@ -1226,7 +1224,7 @@ class Term extends Component {
   }
 
   oncloseSocket = () => {
-    if (this.onClose || !this.props.tab.enableSsh) {
+    if (this.onClose || this.props.tab.enableSsh === false) {
       return
     }
     this.setStatus(
@@ -1256,7 +1254,7 @@ class Term extends Component {
               this.props.delSplit(this.state.id)
             }}
           >
-            {m('close')}
+            {e('close')}
           </Button>
           <Button
             icon={<ReloadOutlined />}
@@ -1267,7 +1265,7 @@ class Term extends Component {
               )
             }}
           >
-            {m('reload')}
+            {e('reload')}
           </Button>
         </div>
       )

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

@@ -18,8 +18,7 @@ import copy from 'json-deep-copy'
 import { shortcutExtend } from '../shortcuts/shortcut-handler.js'
 import './term-search.styl'
 
-const { prefix } = window
-const s = prefix('ssh')
+const e = window.translate
 
 class TermSearch extends Component {
   searchControls = [{
@@ -171,7 +170,7 @@ class TermSearch extends Component {
     return (
       <Tooltip
         key={id}
-        title={s(id)}
+        title={e(id)}
       >
         <Icon
           className={cls}
@@ -197,10 +196,11 @@ class TermSearch extends Component {
       termSearchOpen,
       termSearch
     } = store
-    if (!termSearchOpen) {
-      return null
-    }
-    if (currentTab.pane === paneMap.fileManager) {
+    if (
+      !termSearchOpen ||
+      !currentTab ||
+      currentTab.pane === paneMap.fileManager
+    ) {
       return null
     }
     const props = {

package/client/components/terminal/terminal-interactive.jsx

@@ -9,9 +9,7 @@ import { tabActions } from '../../common/constants'
 import wait from '../../common/wait'
 import postMsg from '../../common/post-msg'
 
-const { prefix } = window
-const e = prefix('sftp')
-const c = prefix('common')
+const e = window.translate
 const FormItem = Form.Item
 
 export default function TermInteractive () {
@@ -153,7 +151,7 @@ export default function TermInteractive () {
             className='mg1l'
             onClick={onIgnore}
           >
-            {c('ignore')}
+            {e('ignore')}
           </Button>
           <Button
             className='mg1l'

package/client/components/terminal-info/activity.jsx

@@ -7,8 +7,7 @@ import { isEmpty } from 'lodash-es'
 import { CloseCircleOutlined, BarsOutlined } from '@ant-design/icons'
 import colsParser from './data-cols-parser'
 
-const { prefix } = window
-const m = prefix('menu')
+const e = window.translate
 
 export default function TerminalInfoActivities (props) {
   const { activities, isRemote, terminalInfos } = props
@@ -19,14 +18,14 @@ export default function TerminalInfoActivities (props) {
   col.unshift({
     dataIndex: 'kill',
     key: 'kill',
-    title: m('close'),
+    title: e('close'),
     render: (txt, inst) => {
       return (
         <Tooltip
-          title={m('close')}
+          title={e('close')}
         >
           <Popconfirm
-            title={m('close') + ' pid:' + inst.pid + ' ?'}
+            title={e('close') + ' pid:' + inst.pid + ' ?'}
             onConfirm={() => props.killProcess(inst.pid)}
           >
             <CloseCircleOutlined

package/client/components/terminal-info/base.jsx

@@ -17,8 +17,7 @@ import postMsg from '../../common/post-msg'
 import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
 import { ClockCircleOutlined, BorderlessTableOutlined, DatabaseOutlined, BarsOutlined, ApiOutlined, PartitionOutlined } from '@ant-design/icons'
 
-const { prefix } = window
-const st = prefix('setting')
+const e = window.translate
 
 const mapper = {
   uptime: <ClockCircleOutlined />,
@@ -136,7 +135,7 @@ export default class TerminalInfoBase extends Component {
     if (!saveTerminalLogToFile) {
       return null
     }
-    const name = st('addTimeStampToTermLog')
+    const name = e('addTimeStampToTermLog')
     return (
       <Switch
         checkedChildren={name}
@@ -186,7 +185,7 @@ export default class TerminalInfoBase extends Component {
       ? osResolve(appPath, 'electerm', 'session_logs')
       : window.et.sessionLogPath
     const path = osResolve(base, logName + '.log')
-    const name = st('saveTerminalLogToFile')
+    const name = e('saveTerminalLogToFile')
     const to = saveTerminalLogToFile
       ? <ShowItem disabled={!saveTerminalLogToFile} to={path}>{path}</ShowItem>
       : path

package/client/components/terminal-info/data-cols-parser.jsx

@@ -2,9 +2,6 @@ import { copy } from '../../common/clipboard'
 import filesizeParser from 'filesize-parser'
 import { formatBytes } from '../../common/byte-format'
 
-const { prefix } = window
-const m = prefix('menu')
-
 const valueParserMaps = {
   size: v => v,
   used: filesizeParser,
@@ -19,19 +16,24 @@ function valueParse (obj, k) {
   return obj[k]
 }
 
+function copyValue (event) {
+  copy(event.target.getAttribute('data-content'))
+}
+
 export default (data) => {
   return Object.keys(data).map(k => {
     const rd = (txt) => {
       const r = k === 'mem' ? formatBytes(parseInt(txt, 10)) : txt
+      const itemProps = {
+        className: 'activity-item pointer',
+        'data-content': r,
+        onClick: copyValue
+      }
       return (
-        <div className='activity-item'>
-          <span>{r}</span>
-          <span
-            className='pointer activity-item-copy mg1l bold color-blue'
-            onClick={() => copy(txt)}
-          >
-            {m('copy')}
-          </span>
+        <div
+          {...itemProps}
+        >
+          {r}
         </div>
       )
     }

package/client/components/terminal-info/terminal-info.styl

@@ -29,10 +29,11 @@
   max-height 260px
   overflow-y scroll
 .activity-item
-  .activity-item-copy
-    display none
-  &:hover .activity-item-copy
-    display inline
+  max-height 1.6em
+  line-height 1.6
+  overflow hidden
+  &:hover
+    max-height none
 .info-panel-wrap-pin
   .toggle-info-panel-wrap
     color success