@electerm/electerm-react 1.39.68 → 1.39.88

package/client/common/constants.js

@@ -352,3 +352,10 @@ export const instSftpKeys = [
 ]
 export const cwdId = '=__+__'
 export const zmodemTransferPackSize = 1024 * 1024 * 2
+export const syncDataMaps = {
+  settings: ['config'],
+  bookmarks: ['bookmarks', 'bookmarkGroups', 'profiles'],
+  terminalThemes: ['terminalThemes'],
+  quickCommands: ['quickCommands'],
+  addressBookmarks: ['addressBookmarks']
+}

package/client/common/create-title.jsx

@@ -58,7 +58,7 @@ export function createTitleTag (obj) {
     ? { color }
     : {}
   return (
-    <span style={styleTag}>♦</span>
+    <span style={styleTag} className='tab-title-tag'>●</span>
   )
 }
 

package/client/common/default-setting.js

@@ -58,5 +58,6 @@ export default {
     'size',
     'modifyTime'
   ],
-  hideIP: false
+  hideIP: false,
+  dataSyncSelected: 'all'
 }

package/client/components/bookmark-form/color-picker.jsx

@@ -48,7 +48,7 @@ export const ColorPicker = React.forwardRef((props, ref) => {
                     {...props}
                     key={color}
                   >
-                    ♦ {color}
+                    ● {color}
                   </div>
                 )
               })

package/client/components/bookmark-form/render-auth-ssh.jsx

@@ -24,6 +24,13 @@ export default function renderAuth (props) {
     form,
     authType
   } = props
+  const beforeUpload = async (file) => {
+    const privateKey = await window.fs.readFile(file.path)
+    form.setFieldsValue({
+      privateKey
+    })
+    return false
+  }
   if (authType === 'password') {
     const opts = {
       options: uniqBy(
@@ -101,7 +108,7 @@ export default function renderAuth (props) {
         />
       </FormItem>
       <Upload
-        beforeUpload={file => props.beforeUpload(file, form)}
+        beforeUpload={beforeUpload}
         fileList={[]}
       >
         <Button

package/client/components/bookmark-form/render-delayed-scripts.jsx

@@ -16,41 +16,43 @@ const e = prefix('form')
 export default function renderRunScripts () {
   function renderItem (field, i, add, remove) {
     return (
-      <Space
-        align='center'
-        key={field.key}
-      >
-        <FormItem
-          label=''
-          name={[field.name, 'delay']}
-          required
-        >
-          <InputNumber
-            min={1}
-            step={1}
-            max={65535}
-            addonBefore={e('loginScriptDelay')}
-            className='compact-input'
-          />
-        </FormItem>
-        <FormItem
-          label=''
-          name={[field.name, 'script']}
-          required
-          className='mg2x'
+      <div>
+        <Space
+          align='center'
+          key={field.key}
         >
-          <Input.TextArea
-            rows={1}
-            placeholder={e('loginScript')}
-            className='compact-input'
+          <FormItem
+            label=''
+            name={[field.name, 'delay']}
+            required
+          >
+            <InputNumber
+              min={1}
+              step={1}
+              max={65535}
+              addonBefore={e('loginScriptDelay')}
+              className='compact-input'
+            />
+          </FormItem>
+          <FormItem
+            label=''
+            name={[field.name, 'script']}
+            required
+            className='mg2x'
+          >
+            <Input.TextArea
+              rows={1}
+              placeholder={e('loginScript')}
+              className='compact-input'
+            />
+          </FormItem>
+          <Button
+            icon={<MinusCircleOutlined />}
+            onClick={() => remove(field.name)}
+            className='mg24b'
           />
-        </FormItem>
-        <Button
-          icon={<MinusCircleOutlined />}
-          onClick={() => remove(field.name)}
-          className='mg24b'
-        />
-      </Space>
+        </Space>
+      </div>
     )
   }
 

package/client/components/bookmark-form/ssh-form.jsx

@@ -307,17 +307,8 @@ export default class BookmarkForm extends PureComponent {
     }
   }
 
-  beforeUpload = async (file, form) => {
-    const privateKey = await window.fs.readFile(file.path)
-    form.setFieldsValue({
-      privateKey
-    })
-    return false
-  }
-
   getProps = () => {
     const funcs = pick(this, [
-      'beforeUpload',
       'handleFinish',
       'testConnection',
       'connect',

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

@@ -17,7 +17,7 @@ const {
 const { prefix } = window
 const f = prefix('form')
 
-export default class SystemMenu extends Component {
+export default class FooterEntry extends Component {
   handleInfoPanel = () => {
     const { activeTerminalId } = this.props.store
     postMessage({

package/client/components/footer/footer.styl

@@ -4,7 +4,7 @@
   background main
   height 36px
   position absolute
-  left 43px
+  left 44px
   right 0
   bottom 0
   color text

package/client/components/quick-commands/quick-commands-box.jsx

@@ -167,7 +167,9 @@ export default class QuickCommandsFooterBox extends Component {
       openQuickCommandBar,
       pinnedQuickCommandBar,
       qmSortByFrequency,
-      inActiveTerminal
+      inActiveTerminal,
+      leftSidebarWidth,
+      openedSideBar
     } = this.props.store
     if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
       return null
@@ -205,11 +207,18 @@ export default class QuickCommandsFooterBox extends Component {
       { 'fil-keyword': !!keyword }
     )
     const type = qmSortByFrequency ? 'primary' : 'default'
+    const w = openedSideBar ? 43 + leftSidebarWidth : 43
+    const qmProps = {
+      className: 'qm-wrap-tooltip',
+      style: {
+        left: w
+      },
+      onMouseLeave: this.handleMouseLeave,
+      onMouseEnter: this.handleMouseEnter
+    }
     return (
       <div
-        className='qm-wrap-tooltip'
-        onMouseLeave={this.handleMouseLeave}
-        onMouseEnter={this.handleMouseEnter}
+        {...qmProps}
       >
         <div className='pd2'>
           <div className='pd2b fix'>

package/client/components/session/session.jsx

@@ -589,7 +589,7 @@ export default class SessionWrapper extends Component {
           }
         </div>
         {
-          (isSsh && enableSsh) || isLocal
+          (isSsh && enableSsh !== false) || isLocal
             ? (
               <Tooltip title={checkTxt}>
                 <span {...checkProps}>

package/client/components/setting-sync/data-select-item.jsx

@@ -0,0 +1,25 @@
+import {
+  Checkbox
+} from 'antd'
+
+export default function DataSelectItem (props) {
+  const {
+    title,
+    checked,
+    value,
+    onChange
+  } = props
+  const boxProps = {
+    checked,
+    onChange,
+    'data-key': value
+  }
+  return (
+    <Checkbox
+      key={value}
+      {...boxProps}
+    >
+      {title}
+    </Checkbox>
+  )
+}

package/client/components/setting-sync/data-select.jsx

@@ -0,0 +1,51 @@
+import {
+  syncDataMaps
+} from '../../common/constants'
+import DataSelectItem from './data-select-item'
+
+const { prefix } = window
+const e = prefix('common')
+const f = prefix('config')
+const t = prefix('terminalThemes')
+const q = prefix('quickCommands')
+
+const translateMap = {
+  settings: f,
+  terminalThemes: t,
+  quickCommands: q,
+  bookmarks: e,
+  addressBookmarks: e
+}
+
+export default function DataSelect (props) {
+  const {
+    dataSyncSelected
+  } = props
+  function onChange (e) {
+    const key = e.target['data-key']
+    window.store.toggleDataSyncSelected(key)
+  }
+  return (
+    <div className='pd2y pd1x'>
+      {
+        Object.keys(syncDataMaps)
+          .map(d => {
+            const checked = dataSyncSelected.includes(d)
+            const title = translateMap[d](d)
+            const boxProps = {
+              checked,
+              onChange,
+              title,
+              value: d
+            }
+            return (
+              <DataSelectItem
+                key={d}
+                {...boxProps}
+              />
+            )
+          })
+      }
+    </div>
+  )
+}

package/client/components/setting-sync/setting-sync.jsx

@@ -4,8 +4,9 @@
 import { Component } from '../common/react-subx'
 import { Tabs, Spin } from 'antd'
 import SyncForm from './setting-sync-form'
-import { syncTypes } from '../../common/constants'
+import { syncTypes, syncDataMaps } from '../../common/constants'
 import { DataTransport } from './data-import'
+import DataSelect from './data-select'
 import { pick } from 'lodash-es'
 
 export default class SyncSettingEntry extends Component {
@@ -62,6 +63,15 @@ export default class SyncSettingEntry extends Component {
         children: null
       }
     })
+    const {
+      dataSyncSelected
+    } = store.config
+    const arr = dataSyncSelected && dataSyncSelected !== 'all'
+      ? dataSyncSelected.split(',')
+      : Object.keys(syncDataMaps)
+    const dataSelectProps = {
+      dataSyncSelected: arr
+    }
     return (
       <div className='pd2l'>
         <DataTransport store={store} />
@@ -74,6 +84,7 @@ export default class SyncSettingEntry extends Component {
           {
             this.renderForm()
           }
+          <DataSelect {...dataSelectProps} />
         </Spin>
       </div>
     )

package/client/components/sftp/file-item.jsx

@@ -967,7 +967,7 @@ export default class FileSection extends React.Component {
     if (
       isDirectory && id &&
       (
-        (hasHost && enableSsh && isRemote) ||
+        (hasHost && enableSsh !== false && isRemote) ||
         (isLocal && !hasHost)
       )
     ) {
@@ -1047,7 +1047,7 @@ export default class FileSection extends React.Component {
         text: m('copyFilePath')
       })
     }
-    if (enableSsh || isLocal) {
+    if (enableSsh !== false || isLocal) {
       res.push({
         func: 'newFile',
         icon: 'FileAddOutlined',

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/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

@@ -40,6 +40,7 @@ class Tab extends Component {
   }
 
   componentDidMount () {
+    console.log(this.props)
     this.dom = document.getElementById('id' + this.state.tab.id)
     window.addEventListener('message', this.onEvent)
   }
@@ -58,6 +59,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))
   }

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/terminal/index.jsx

@@ -1226,7 +1226,7 @@ class Term extends Component {
   }
 
   oncloseSocket = () => {
-    if (this.onClose || !this.props.tab.enableSsh) {
+    if (this.onClose || this.props.tab.enableSsh === false) {
       return
     }
     this.setStatus(

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

@@ -197,10 +197,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-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,10 @@
   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
+  &:hover
+    max-height none
 .info-panel-wrap-pin
   .toggle-info-panel-wrap
     color success

package/client/components/tree-list/tree-list.jsx

@@ -997,7 +997,8 @@ export default class ItemListTree extends Component {
       bookmarkGroupIds = [],
       id
     } = group
-    if (!this.state.expandedKeys.includes(id)) {
+    const shouldRender = this.state.keyword || this.state.expandedKeys.includes(id)
+    if (!shouldRender) {
       return null
     }
     return [

package/client/components/tree-list/tree-list.styl

@@ -3,10 +3,11 @@
   display none
   margin-left 3px
   width 16px
-  line-height 26px
-  height 20px
+  line-height 30px
+  height 26px
 .tree-item
   display flex
+  position relative
   line-height 26px
   padding-left 5px
   border-radius 3px

package/client/store/sync.js

@@ -2,10 +2,10 @@
  * sync data to github gist related
  */
 
-import { without, get, pick, debounce, findIndex } from 'lodash-es'
+import { get, pick, debounce, findIndex } from 'lodash-es'
 import copy from 'json-deep-copy'
 import {
-  settingMap, packInfo, syncTypes
+  settingMap, packInfo, syncTypes, syncDataMaps
 } from '../common/constants'
 import { remove, dbNames, insert, update, getData } from '../common/db'
 import fetch from '../common/fetch-from-server'
@@ -14,7 +14,6 @@ import { fixBookmarks } from '../common/db-fix'
 import dayjs from 'dayjs'
 import parseJsonSafe from '../common/parse-json-safe'
 
-const names = without(dbNames, settingMap.history)
 const {
   version: packVer
 } = packInfo
@@ -162,6 +161,7 @@ export default (Store) => {
     }
     const pass = store.getSyncPassword(type)
     const objs = {}
+    const { names, syncConfig } = store.getDataSyncNames()
     for (const n of names) {
       let str = store.getItems(n)
       const order = await getData(`${n}:order`)
@@ -182,14 +182,18 @@ export default (Store) => {
       objs[`${n}.order.json`] = {
         content: 'empty'
       }
+      if (syncConfig) {
+        objs['userConfig.json'] = {
+          content: JSON.stringify(
+            store.getSyncConfig()
+          )
+        }
+      }
     }
     const res = await fetchData(type, 'update', [gistId, {
       description: 'sync electerm data',
       files: {
         ...objs,
-        'userConfig.json': {
-          content: JSON.stringify(pick(store.config, ['theme']))
-        },
         'electerm-status.json': {
           content: JSON.stringify({
             lastSyncTime: Date.now(),
@@ -230,6 +234,7 @@ export default (Store) => {
       store.getProxySetting()
     )
     const toInsert = []
+    const { names, syncConfig } = store.getDataSyncNames()
     for (const n of names) {
       let str = get(gist, `files["${n}.json"].content`)
       if (!str) {
@@ -267,12 +272,18 @@ export default (Store) => {
       })
       store.setItems(n, arr)
     }
-    const userConfig = parseJsonSafe(
-      get(gist, 'files["userConfig.json"].content')
-    )
-    if (userConfig && userConfig.theme) {
-      store.setTheme(userConfig.theme)
+    if (syncConfig) {
+      const userConfig = parseJsonSafe(
+        get(gist, 'files["userConfig.json"].content')
+      )
+      if (userConfig) {
+        store.setConfig(userConfig)
+      }
+      if (userConfig && userConfig.theme) {
+        store.setTheme(userConfig.theme)
+      }
     }
+
     const up = {
       [type + 'LastSyncTime']: Date.now()
     }
@@ -331,6 +342,7 @@ export default (Store) => {
   Store.prototype.handleExportAllData = async function () {
     const { store } = window
     const objs = {}
+    const names = store.getDataSyncNames(true)
     for (const n of names) {
       objs[n] = store.getItems(n)
       const order = await getData(`${n}:order`)
@@ -342,49 +354,7 @@ export default (Store) => {
         })
       }
     }
-    objs.config = pick(store.config, [
-      'theme',
-      'useSystemTitleBar',
-      'defaultEditor',
-      'checkUpdateOnStart',
-      'confirmBeforeExit',
-      'ctrlOrMetaOpenTerminalLink',
-      'cursorStyle',
-      'defaultEditor',
-      'disableSshHistory',
-      'disableTransferHistory',
-      'enableGlobalProxy',
-      'execLinux',
-      'execLinuxArgs',
-      'execMac',
-      'execMacArgs',
-      'execWindows',
-      'execWindowsArgs',
-      'fontFamily',
-      'fontSize',
-      'hotkey',
-      'keepaliveCountMax',
-      'keepaliveInterval',
-      'language',
-      'opacity',
-      'pasteWhenContextMenu',
-      'proxyIp',
-      'proxyPassword',
-      'proxyPort',
-      'proxyType',
-      'proxyUsername',
-      'rendererType',
-      'rightClickSelectsWord',
-      'saveTerminalLogToFile',
-      'scrollback',
-      'sshReadyTimeout',
-      'syncSetting',
-      'terminalTimeout',
-      'terminalType',
-      'theme',
-      'useSystemTitleBar',
-      'zoom'
-    ])
+    objs.config = store.config
     const text = JSON.stringify(objs)
     const name = dayjs().format('YYYY-MM-DD-HH-mm-ss') + '-electerm-all-data.json'
     download(name, text)
@@ -396,6 +366,7 @@ export default (Store) => {
     const { store } = window
     const objs = JSON.parse(txt)
     const toInsert = []
+    const { names } = store.getDataSyncNames(true)
     for (const n of names) {
       let arr = objs[n]
       if (n === settingMap.terminalThemes) {
@@ -423,4 +394,83 @@ export default (Store) => {
       autoSync: v
     })
   }
+
+  Store.prototype.toggleDataSyncSelected = function (key) {
+    const { store } = window
+    const {
+      dataSyncSelected
+    } = store.config
+    let arr = dataSyncSelected && dataSyncSelected !== 'all'
+      ? dataSyncSelected.split(',')
+      : Object.keys(syncDataMaps)
+    if (arr.includes(key)) {
+      arr = arr.filter(d => d !== key)
+    } else {
+      arr.push(key)
+    }
+    store.setConfig({
+      dataSyncSelected: arr.join(',')
+    })
+  }
+  Store.prototype.getDataSyncNames = function (all) {
+    const { store } = window
+    const {
+      dataSyncSelected
+    } = store.config
+    const syncAll = all || dataSyncSelected === 'all'
+    const keys = syncAll
+      ? Object.keys(syncDataMaps)
+      : dataSyncSelected.split(',')
+    const names = keys
+      .filter(d => d !== 'settings')
+      .map(d => syncDataMaps[d]).flat()
+    const syncConfig = keys.includes('settings')
+    return {
+      names,
+      syncConfig
+    }
+  }
+  Store.prototype.getSyncConfig = function () {
+    const { store } = window
+    const configSyncKeys = [
+      'keepaliveInterval',
+      'rightClickSelectsWord',
+      'pasteWhenContextMenu',
+      'ctrlOrMetaOpenTerminalLink',
+      'hotkey',
+      'sshReadyTimeout',
+      'scrollback',
+      'fontSize',
+      'execWindows',
+      'execMac',
+      'execLinux',
+      'execWindowsArgs',
+      'execMacArgs',
+      'execLinuxArgs',
+      'disableSshHistory',
+      'disableTransferHistory',
+      'terminalType',
+      'keepaliveCountMax',
+      'saveTerminalLogToFile',
+      'checkUpdateOnStart',
+      'cursorBlink',
+      'cursorStyle',
+      'terminalWordSeparator',
+      'confirmBeforeExit',
+      'autoRefreshWhenSwitchToSftp',
+      'addTimeStampToTermLog',
+      'showHiddenFilesOnSftpStart',
+      'terminalInfos',
+      'filePropsEnabled',
+      'hideIP',
+      'terminalTimeout',
+      'theme',
+      'terminalTypes',
+      'language',
+      'copyWhenSelect',
+      'customCss',
+      'dataSyncSelected'
+    ]
+    return pick(store.config, configSyncKeys)
+  }
 }

package/package.json

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