@electerm/electerm-react 1.39.88 → 1.39.99

package/client/components/sftp/file-props-modal.jsx

@@ -22,8 +22,7 @@ import postMsg from '../../common/post-msg'
 import { filesize } from 'filesize'
 import { runCmd } from '../terminal/terminal-apis'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 const formatTime = time
 
 export default function FileInfoModal () {

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

@@ -29,8 +29,7 @@ import {
 } from '@ant-design/icons'
 import IconHolder from '../context-menu/icon-holder'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default class FileListTable extends Component {
   constructor (props) {

package/client/components/sftp/permission-render.jsx

@@ -5,8 +5,7 @@
 import { Button, Space } from 'antd'
 import { isFunction, noop } from 'lodash-es'
 
-const { prefix } = window
-const e = prefix('permission')
+const e = window.translate
 
 export default (perm, _onClick) => {
   const {

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

@@ -36,9 +36,7 @@ import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
 import './sftp.styl'
 
-const { prefix } = window
-const e = prefix('sftp')
-const c = prefix('common')
+const e = window.translate
 
 const buildTree = arr => {
   return arr.reduce((prev, curr) => {
@@ -390,8 +388,8 @@ export default class Sftp extends Component {
   onDel = (type, files) => {
     this.onDelete = true
     Modal.confirm({
-      cancelText: c('cancel'),
-      okText: c('ok'),
+      cancelText: e('cancel'),
+      okText: e('ok'),
       title: this.renderDelConfirmTitle(files),
       onOk: () => this.delFiles(type, files)
     })
@@ -845,6 +843,22 @@ export default class Sftp extends Component {
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
 
+  parsePath = (type, pth) => {
+    const reg = /^%([^%]+)%/
+    if (!reg.test(pth)) {
+      return pth
+    }
+    const m = pth.match(reg)
+    if (!m || !m[1]) {
+      return pth
+    }
+    const envName = m[1]
+    const envPath = window.pre.env[envName]
+    if (envPath) {
+      return pth.replace(reg, envPath)
+    }
+  }
+
   onGoto = (type, e) => {
     e && e.preventDefault()
     if (type === typeMap.remote && !this.sftp) {
@@ -853,14 +867,14 @@ export default class Sftp extends Component {
     const n = `${type}Path`
     const nt = n + 'Temp'
     const oldPath = this.state[type + 'Path']
-    const np = this.state[nt]
+    const np = this.parsePath(type, this.state[nt])
     if (!isValidPath(np)) {
       return notification.warning({
         message: 'path not valid'
       })
     }
     this.setState({
-      [n]: this.state[nt]
+      [n]: np
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
 

package/client/components/sftp/transfer-tag.jsx

@@ -4,8 +4,7 @@
  */
 
 import './transfer-tag.styl'
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default function TransferTag (props) {
   const {

package/client/components/shortcuts/shortcuts.jsx

@@ -10,12 +10,7 @@ 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 e = window.translate
 const shortcutsDefaults = shortcutsDefaultsGen()
 
 export default class Shortcuts extends Component {
@@ -105,30 +100,12 @@ export default class Shortcuts extends Component {
         key: 'name',
         render: (name) => {
           const [a, b] = name.split('_')
-          const pre = a === 'terminal' ? `[${ss('terminal')}] ` : ''
-          if (
-            [
-              'clear', 'selectAll', 'search', 'split'
-            ].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)
-          }
+          const pre = a === 'terminal' ? `[${e('terminal')}] ` : ''
+          return pre + e(b)
         }
       },
       {
-        title: s('settingShortcuts'),
+        title: e('settingShortcuts'),
         dataIndex: 'shortcut',
         key: 'shortcut',
         render: (shortcut, inst) => {
@@ -174,7 +151,7 @@ export default class Shortcuts extends Component {
           <Button
             onClick={this.handleResetAll}
           >
-            {s('resetAllToDefault')}
+            {e('resetAllToDefault')}
           </Button>
         </div>
       </div>

package/client/components/sidebar/bookmark.jsx

@@ -8,10 +8,7 @@ import { pick } from 'lodash-es'
 import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
 import { Tooltip } from 'antd'
 
-const { prefix } = window
-const c = prefix('common')
-const m = prefix('menu')
-const e = prefix('control')
+const e = window.translate
 
 export default class BookmarkPanel extends Component {
   render () {
@@ -42,29 +39,29 @@ export default class BookmarkPanel extends Component {
       >
         <div className='pd1y pd2t pd2x'>
           <div className='fix'>
-            <div className='fleft'>{c('bookmarks')}</div>
+            <div className='fleft'>{e('bookmarks')}</div>
             <div className='fright'>
               <Tooltip title={e('newBookmark')}>
                 <PlusCircleOutlined
                   {...pop1}
                 />
               </Tooltip>
-              <Tooltip title={`${m('edit')} ${c('bookmarks')}`}>
+              <Tooltip title={`${e('edit')} ${e('bookmarks')}`}>
                 <EditOutlined
                   {...pop1}
                 />
               </Tooltip>
-              <Tooltip title={c('expandAll')}>
+              <Tooltip title={e('expandAll')}>
                 <ArrowsAltOutlined
                   {...pop2}
                 />
               </Tooltip>
-              <Tooltip title={c('collapseAll')}>
+              <Tooltip title={e('collapseAll')}>
                 <ShrinkOutlined
                   {...pop3}
                 />
               </Tooltip>
-              <Tooltip title={c('pin')}>
+              <Tooltip title={e('pin')}>
                 <PushpinOutlined
                   {...prps1}
                   onClick={store.handlePin}

package/client/components/sidebar/history.jsx

@@ -8,9 +8,7 @@ import { pick } from 'lodash-es'
 import { EditOutlined, PushpinOutlined } from '@ant-design/icons'
 import { Tooltip } from 'antd'
 
-const { prefix } = window
-const c = prefix('common')
-const m = prefix('menu')
+const e = window.translate
 
 export default class HistoryPanel extends Component {
   render () {
@@ -35,15 +33,15 @@ export default class HistoryPanel extends Component {
       >
         <div className='pd1y pd2t pd2x'>
           <div className='fix'>
-            <div className='fleft'>{c('history')}</div>
+            <div className='fleft'>{e('history')}</div>
             <div className='fleft'>
-              <Tooltip title={`${m('edit')} ${c('history')}`}>
+              <Tooltip title={`${e('edit')} ${e('history')}`}>
                 <EditOutlined
                   className='font16 mg1x mg2l pointer iblock control-icon icon-do-edit'
                   onClick={store.handleEditHistory}
                 />
               </Tooltip>
-              <Tooltip title={c('pin')}>
+              <Tooltip title={e('pin')}>
                 <PushpinOutlined
                   {...prps1}
                   onClick={store.handlePin}

package/client/components/sidebar/index.jsx

@@ -26,14 +26,7 @@ import SideIcon from './side-icon'
 import SidePanel from './side-panel'
 import './sidebar.styl'
 
-const { prefix } = window
-const e = prefix('control')
-const c = prefix('common')
-const m = prefix('menu')
-const t = prefix('terminalThemes')
-const u = prefix('updater')
-const ss = prefix('settingSync')
-const b = prefix('batchOp')
+const e = window.translate
 
 export default class Sidebar extends Component {
   handler = null
@@ -141,7 +134,7 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={c(settingMap.bookmarks)}
+            title={e(settingMap.bookmarks)}
             active={bookmarksActive}
           >
             <BookOutlined
@@ -152,7 +145,7 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={c(settingMap.history)}
+            title={e(settingMap.history)}
             active={historyActive}
           >
             <ClockCircleOutlined
@@ -164,7 +157,7 @@ export default class Sidebar extends Component {
           </SideIcon>
           <TransferList store={store} />
           <SideIcon
-            title={t(settingMap.terminalThemes)}
+            title={e(settingMap.terminalThemes)}
             active={themeActive}
           >
             <PictureOutlined
@@ -173,13 +166,13 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={c(settingMap.setting)}
+            title={e(settingMap.setting)}
             active={settingActive}
           >
             <SettingOutlined className='iblock font20 control-icon' onClick={openSetting} />
           </SideIcon>
           <SideIcon
-            title={ss('settingSync')}
+            title={e('settingSync')}
             active={syncActive}
           >
             <CloudSyncOutlined
@@ -189,13 +182,13 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={b('batchOp')}
+            title={e('batchOp')}
             active={showBatchOp}
           >
             <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
           </SideIcon>
           <SideIcon
-            title={m('about')}
+            title={e('about')}
             active={showInfoModal}
           >
             <InfoCircleOutlined
@@ -207,7 +200,7 @@ export default class Sidebar extends Component {
             !checkingRemoteVersion && !showUpgradeModal && shouldUpgrade
               ? (
                 <Tooltip
-                  title={`${u('upgrading')} ${upgradePercent || 0}%`}
+                  title={`${e('upgrading')} ${upgradePercent || 0}%`}
                   placement='right'
                 >
                   <div

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/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.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'
 
@@ -40,7 +37,6 @@ class Tab extends Component {
   }
 
   componentDidMount () {
-    console.log(this.props)
     this.dom = document.getElementById('id' + this.state.tab.id)
     window.addEventListener('message', this.onEvent)
   }
@@ -316,7 +312,7 @@ class Tab extends Component {
     res.push({
       func: 'handleReloadTab',
       icon: 'Loading3QuartersOutlined',
-      text: m('reload'),
+      text: e('reload'),
       subText: reloadShortcut
     })
     return res
@@ -389,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}`
@@ -488,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}