@electerm/electerm-react 1.40.20 → 1.50.31

package/client/components/session/sessions.jsx

@@ -1,36 +1,36 @@
-import { Component } from '../common/react-subx'
-import Session from './session'
+import { Component } from 'react'
+import Session from './session.jsx'
 import WebSession from '../web/web-session.jsx'
 import { findIndex, pick } from 'lodash-es'
 import classNames from 'classnames'
-import generate from '../../common/uid'
+import generate from '../../common/id-with-stamp'
 import copy from 'json-deep-copy'
-import wait from '../../common/wait'
-import Tabs from '../tabs'
+import wait from '../../common/wait.js'
+import Tabs from '../tabs/index.jsx'
 import {
-  commonActions,
   tabActions,
-  termInitId,
   paneMap,
   statusMap,
-  terminalWebType
-} from '../../common/constants'
-import newTerm, { updateCount } from '../../common/new-terminal'
-import postMsg from '../../common/post-msg'
-import TermSearch from '../terminal/term-search'
-import Footer from '../footer/footer-entry'
-import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
-import LogoElem from '../common/logo-elem'
+  terminalWebType,
+  termControlHeight
+} from '../../common/constants.js'
+import newTerm, { updateCount } from '../../common/new-terminal.js'
+import LogoElem from '../common/logo-elem.jsx'
 import { Button } from 'antd'
-import toSimpleObj from '../../common/to-simple-obj'
+import toSimpleObj from '../../common/to-simple-obj.js'
 import { shortcutExtend } from '../shortcuts/shortcut-handler.js'
+import deepEqual from 'fast-deep-equal'
 
 const e = window.translate
 
 class Sessions extends Component {
-  state = {
-    tabs: [],
-    currentTabId: ''
+  constructor (props) {
+    super(props)
+    this.state = {
+      tabs: copy(props.tabs || []),
+      currentTabId: props.currentTabId
+    }
+    this.bindHandleKeyboardEvent = this.handleKeyboardEvent.bind(this)
   }
 
   componentDidMount () {
@@ -38,11 +38,45 @@ class Sessions extends Component {
     this.initShortcuts()
   }
 
+  componentDidUpdate (prevProps) {
+    if (
+      this.props.tabs &&
+      !deepEqual(prevProps.tabs, this.props.tabs)
+    ) {
+      this.updateTabs(this.props.tabs)
+    }
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('message', this.onEvent)
+    window.removeEventListener('keydown', this.bindHandleKeyboardEvent)
+    this.timer && clearTimeout(this.timer)
+    this.timer = null
+  }
+
+  updateTabs = (propTabs) => {
+    const update = {
+      tabs: copy(propTabs)
+    }
+    const currentTab = propTabs.find(t => t.id === this.state.currentTabId)
+    if (!currentTab) {
+      update.currentTabId = propTabs[0]?.id
+    }
+    this.setState(update)
+  }
+
   initShortcuts () {
-    window.addEventListener('keydown', this.handleKeyboardEvent.bind(this))
+    window.addEventListener('keydown', this.bindHandleKeyboardEvent)
+  }
+
+  notCurrentTab = (tab) => {
+    return this.state.currentTabId !== window.store.currentTabId
   }
 
   closeCurrentTabShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
     e.stopPropagation()
     this.delTab(
       this.state.currentTabId
@@ -50,30 +84,43 @@ class Sessions extends Component {
   }
 
   reloadCurrentTabShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
     e.stopPropagation()
     this.reloadTab(
       this.getCurrentTab()
     )
   }
 
+  cloneToNextLayoutShortcut = (e) => {
+    if (this.notCurrentTab()) {
+      return
+    }
+    e.stopPropagation()
+    window.store.cloneToNextLayout()
+  }
+
   watch = () => {
     window.addEventListener('message', this.onEvent)
   }
 
   updateStoreTabs = (tabs) => {
-    postMsg({
-      action: commonActions.updateStore,
-      func: 'setTabs',
-      args: [copy(tabs)]
-    })
+    window.store.updateStoreTabs(tabs, this.props.batch)
   }
 
   updateStoreCurrentTabId = id => {
-    postMsg({
-      action: commonActions.updateStore,
-      value: id,
-      prop: 'currentTabId'
-    })
+    if (id) {
+      window.store.storeAssign({
+        currentTabId: id,
+        [id + this.props.batch]: id
+      })
+      this.setState({
+        currentTabId: id
+      })
+    } else {
+      document.querySelector('.tab.active').click()
+    }
   }
 
   getCurrentTab = () => {
@@ -113,6 +160,7 @@ class Sessions extends Component {
       } else {
         updateCount(tab)
       }
+      tab.batch = this.props.batch
       tabs.splice(index, 0, tab)
       this.updateStoreTabs(tabs)
       this.updateStoreCurrentTabId(tab.id)
@@ -134,7 +182,7 @@ class Sessions extends Component {
         })
         i = i ? i - 1 : i + 1
         const next = tabs[i] || {}
-        up.currentTabId = next.id
+        up.currentTabId = next.id || ''
         this.updateStoreCurrentTabId(next.id)
       }
       up.tabs = tabs.filter(t => {
@@ -147,24 +195,13 @@ class Sessions extends Component {
 
   initFirstTab = () => {
     const tab = newTerm()
-    tab.terminals = [{
-      id: termInitId,
-      position: 0
-    }]
+    const { batch } = this.props
+    tab.batch = batch
     this.addTab(tab)
   }
 
-  processTerminals = (tab) => {
-    if (!tab.terminals) {
-      return tab
-    }
-    tab.terminals = tab.terminals.map(t => {
-      return {
-        ...t,
-        stateId: t.id,
-        id: generate()
-      }
-    })
+  handleClick = () => {
+    window.store.currentTabId = this.state.currentTabId
   }
 
   reloadTab = async (tabToReload) => {
@@ -173,7 +210,6 @@ class Sessions extends Component {
         tabToReload
       )
       tab.pane = paneMap.terminal
-      this.processTerminals(tab)
       const { id } = tab
       const tabs = copy(oldState.tabs)
       tab.id = generate()
@@ -185,12 +221,11 @@ class Sessions extends Component {
     })
   }
 
-  onDuplicateTab = async (tabToDup) => {
-    this.setState(async oldState => {
+  onDuplicateTab = (tabToDup) => {
+    this.setState(oldState => {
       const defaultStatus = statusMap.processing
       let tab = copy(tabToDup)
       updateCount(tab)
-      this.processTerminals(tab)
       const tabs = copy(oldState.tabs)
       const index = findIndex(
         tabs,
@@ -208,6 +243,11 @@ class Sessions extends Component {
   }
 
   onChangeTabId = id => {
+    const matchedTab = this.state.tabs.find(t => t.id === id)
+    if (!matchedTab) {
+      return
+    }
+    this.timer = setTimeout(window.store.triggerResize, 500)
     this.updateStoreCurrentTabId(id)
     this.setState({
       currentTabId: id
@@ -260,6 +300,7 @@ class Sessions extends Component {
       update,
       tab,
       index,
+      batch,
       tabIds
     } = e.data || {}
     if (
@@ -270,7 +311,7 @@ class Sessions extends Component {
       this.onChangeTabId(currentTabId)
     } else if (action === tabActions.updateTabs) {
       this.editTab(id, update)
-    } else if (action === tabActions.addTab) {
+    } else if (action === tabActions.addTab && (batch ?? tab.batch) === this.props.batch) {
       this.addTab(tab, index)
     } else if (action === tabActions.initFirstTab) {
       this.initFirstTab()
@@ -284,21 +325,22 @@ class Sessions extends Component {
   }
 
   postChange = () => {
-    this.props.store.triggerResize()
+    window.store.currentLayoutBatch = this.props.batch
+    window.store.triggerResize()
   }
 
   handleNewTab = () => {
-    this.props.store.initFirstTab()
+    this.initFirstTab()
   }
 
   handleNewSsh = () => {
-    this.props.store.onNewSsh()
+    window.store.onNewSsh()
   }
 
   renderNoSession = () => {
     const props = {
       style: {
-        height: this.props.store.height + 'px'
+        height: this.props.height + 'px'
       }
     }
     return (
@@ -306,7 +348,7 @@ class Sessions extends Component {
         <Button
           onClick={this.handleNewTab}
           size='large'
-          className='mg1r mg1b'
+          className='mg1r mg1b add-new-tab-btn'
         >
           {e('newTab')}
         </Button>
@@ -324,15 +366,24 @@ class Sessions extends Component {
     )
   }
 
+  computeHeight = () => {
+    const {
+      tabsHeight
+    } = this.props
+    return this.props.height -
+      tabsHeight -
+      termControlHeight
+  }
+
   renderSessions () {
     const {
-      store, config
+      config, width, height
     } = this.props
     const {
       currentTabId,
       tabs
     } = this.state
-    if (!tabs.length) {
+    if (!tabs || !tabs.length) {
       return this.renderNoSession()
     }
     return tabs.map((tab) => {
@@ -346,19 +397,17 @@ class Sessions extends Component {
       const sessProps = {
         currentTabId,
         tab: toSimpleObj(tab),
-        ...pick(store, [
+        width,
+        height,
+        ...pick(this.props, [
+          'batch',
           'resolutions',
           'hideDelKeyTip',
           'fileOperation',
           'file',
-          'height',
-          'width',
-          'activeTerminalId',
           'pinnedQuickCommandBar',
           'tabsHeight',
           'appPath',
-          'topMenuHeight',
-          'rightSidebarWidth',
           'leftSidebarWidth',
           'pinned',
           'openedSideBar'
@@ -368,6 +417,7 @@ class Sessions extends Component {
           'onChangeTabId',
           'onDuplicateTab',
           'reloadTab',
+          'computeHeight',
           'delTab',
           'addTab',
           'editTab'
@@ -375,7 +425,12 @@ class Sessions extends Component {
       }
       if (type === terminalWebType) {
         const webProps = {
-          tab
+          tab,
+          width,
+          height: this.computeHeight(),
+          ...pick(this, [
+            'reloadTab'
+          ])
         }
         return (
           <div className={cls} key={id}>
@@ -397,22 +452,25 @@ class Sessions extends Component {
 
   renderTabs = () => {
     const {
-      store,
-      config
+      config,
+      width,
+      height,
+      batch,
+      layout,
+      isMaximized
     } = this.props
     const {
       tabs,
       currentTabId
     } = this.state
     const tabsProps = {
+      batch,
       currentTabId,
       config,
-      ...pick(store, [
-        'height',
-        'width',
-        'activeTerminalId',
-        'isMaximized'
-      ]),
+      width,
+      height,
+      layout,
+      isMaximized,
       tabs,
       ...pick(this, [
         'setTabs',
@@ -426,29 +484,18 @@ class Sessions extends Component {
     }
     return (
       <Tabs
-        key='main-tabs'
+        key={'main-tabs' + batch}
         {...tabsProps}
       />
     )
   }
 
   renderSessionsWrap = () => {
-    const { leftSidebarWidth, openedSideBar } = this.props.store
-    const w = leftSidebarWidth + 42
-    const ptp = openedSideBar
-      ? {
-          className: 'sessions',
-          style: {
-            marginLeft: `${w}px`
-          }
-        }
-      : {
-          className: 'sessions'
-        }
     return (
       <div
-        {...ptp}
+        className='sessions'
         key='main-sess'
+        onClick={this.handleClick}
       >
         {this.renderSessions()}
       </div>
@@ -456,30 +503,12 @@ class Sessions extends Component {
   }
 
   render () {
-    const { store, config } = this.props
-    const currentTab = this.getCurrentTab()
-    const termProps = {
-      currentTab,
-      store,
-      config
-    }
-    return [
-      this.renderTabs(),
-      this.renderSessionsWrap(),
-      <TermSearch
-        key='TermSearch'
-        {...termProps}
-      />,
-      <QuickCommandsFooterBox
-        key='QuickCommandsFooterBox'
-        store={store}
-      />,
-      <Footer
-        key='Footer'
-        store={store}
-        currentTab={currentTab}
-      />
-    ]
+    return (
+      <div>
+        {this.renderTabs()}
+        {this.renderSessionsWrap()}
+      </div>
+    )
   }
 }
 

package/client/components/setting-panel/bookmark-tree-list.jsx

@@ -5,7 +5,7 @@ export default function BookmarkTreeList (props) {
   return props.bookmarkSelectMode
     ? (
       <BookmarkTreeDelete
-        store={props.store}
+        {...props}
       />
       )
     : (

package/client/components/setting-panel/setting-common.jsx

@@ -493,20 +493,22 @@ export default class SettingCommon extends Component {
         </div>
       )
     }
+    const { props } = this
     const {
       hotkey,
       language,
       theme,
       customCss
-    } = this.props.config
+    } = props.config
     const {
       langs
     } = this.props.store
-    const terminalThemes = this.props.store.getSidebarList(settingMap.terminalThemes)
+    const terminalThemes = props.store.getSidebarList(settingMap.terminalThemes)
     const [modifier, key] = hotkey.split('+')
     const pops = {
-      onStartSessions: this.props.config.onStartSessions,
-      store: this.props.store,
+      onStartSessions: props.config.onStartSessions,
+      bookmarks: props.bookmarks,
+      bookmarkGroups: props.bookmarkGroups,
       onChangeStartSessions: this.onChangeStartSessions
     }
     return (

package/client/components/setting-panel/setting-modal.jsx

@@ -2,7 +2,7 @@
  * hisotry/bookmark/setting modal
  */
 
-import { Component } from '../common/react-subx'
+import { auto } from 'manate/react'
 import { pick } from 'lodash-es'
 import { Tabs } from 'antd'
 import SettingModal from './setting-wrap'
@@ -19,14 +19,13 @@ import TabProfiles from './tab-profiles'
 
 const e = window.translate
 
-export default class SettingModalWrap extends Component {
-  selectItem = (item) => {
-    const { store } = this.props
-    store.setSettingItem(item)
+export default auto(function SettingModalWrap (props) {
+  const selectItem = (item) => {
+    window.store.setSettingItem(item)
   }
 
-  renderTabs () {
-    const { store } = this.props
+  function renderTabs () {
+    const { store } = props
     const tabsShouldConfirmDel = [
       settingMap.bookmarks,
       settingMap.terminalThemes
@@ -36,7 +35,7 @@ export default class SettingModalWrap extends Component {
       store,
       activeItemId: settingItem.id,
       type: settingTab,
-      onClickItem: this.selectItem,
+      onClickItem: selectItem,
       shouldConfirmDel: tabsShouldConfirmDel.includes(settingTab),
       list: settingSidebarList
     }
@@ -62,7 +61,10 @@ export default class SettingModalWrap extends Component {
       ...pick(store, [
         'currentBookmarkGroupId',
         'autofocustrigger',
-        'config'
+        'config',
+        'checkedKeys',
+        'expandedKeys',
+        'leftSidebarWidth'
       ])
     }
     const items = [
@@ -153,26 +155,24 @@ export default class SettingModalWrap extends Component {
     )
   }
 
-  render () {
-    const {
-      showModal,
-      hideSettingModal,
-      innerWidth,
-      useSystemTitleBar
-    } = this.props.store
-    const show = showModal === modals.setting
-    if (!show) {
-      return null
-    }
-    return (
-      <SettingModal
-        onCancel={hideSettingModal}
-        visible={show}
-        useSystemTitleBar={useSystemTitleBar}
-        innerWidth={innerWidth}
-      >
-        {this.renderTabs()}
-      </SettingModal>
-    )
+  const {
+    showModal,
+    hideSettingModal,
+    innerWidth,
+    useSystemTitleBar
+  } = props.store
+  const show = showModal === modals.setting
+  if (!show) {
+    return null
   }
-}
+  return (
+    <SettingModal
+      onCancel={hideSettingModal}
+      visible={show}
+      useSystemTitleBar={useSystemTitleBar}
+      innerWidth={innerWidth}
+    >
+      {renderTabs()}
+    </SettingModal>
+  )
+})

package/client/components/setting-panel/start-session-select.jsx

@@ -1,15 +1,15 @@
 import { TreeSelect } from 'antd'
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import copy from 'json-deep-copy'
 import { createTitleWithTag } from '../../common/create-title'
 
 const e = window.translate
 const { SHOW_CHILD } = TreeSelect
 
-export default class StartSessionSelect extends Component {
+export default class StartSessionSelect extends PureComponent {
   buildData = () => {
-    const cats = this.props.store.bookmarkGroups
-    const tree = this.props.store.bookmarks
+    const cats = this.props.bookmarkGroups
+    const tree = this.props.bookmarks
       .reduce((p, k) => {
         return {
           ...p,

package/client/components/setting-panel/tab-settings.jsx

@@ -1,3 +1,4 @@
+import { auto } from 'manate/react'
 import SettingCommon from './setting-common'
 import SettingTerminal from './setting-terminal'
 import SettingCol from './col'
@@ -10,8 +11,9 @@ import {
   settingTerminalId,
   settingShortcutsId
 } from '../../common/constants'
+import { pick } from 'lodash-es'
 
-export default function TabSettings (props) {
+export default auto(function TabSettings (props) {
   const {
     settingTab
   } = props
@@ -26,14 +28,34 @@ export default function TabSettings (props) {
   let elem = null
   const sid = settingItem.id
   if (sid === settingSyncId) {
-    elem = <SyncSetting store={store} />
+    const syncProps = pick(store, [
+      'config',
+      'autofocustrigger',
+      'isSyncingSetting',
+      'isSyncDownload',
+      'isSyncUpload',
+      'syncType'
+    ])
+    elem = <SyncSetting {...syncProps} />
   } else if (sid === settingTerminalId) {
     elem = <SettingTerminal {...listProps} config={store.config} />
   } else if (sid === settingShortcutsId) {
-    elem = <Shortcuts store={store} />
+    const shortcutsProps = {
+      quickCommands: store.quickCommands,
+      config: store.config
+    }
+    elem = <Shortcuts {...shortcutsProps} />
   } else {
-    elem = <SettingCommon {...listProps} config={store.config} />
+    elem = (
+      <SettingCommon
+        {...listProps}
+        config={store.config}
+        bookmarks={store.bookmarks}
+        bookmarkGroups={store.bookmarkGroups}
+      />
+    )
   }
+
   return (
     <div
       className='setting-tabs-setting'
@@ -46,4 +68,4 @@ export default function TabSettings (props) {
       </SettingCol>
     </div>
   )
-}
+})