@electerm/electerm-react 1.40.20 → 1.50.31

package/client/components/layout/layout.jsx

@@ -0,0 +1,167 @@
+import { auto } from 'manate/react'
+import Layouts from './layouts'
+import Sessions from '../session/sessions'
+import {
+  splitConfig,
+  quickCommandBoxHeight,
+  footerHeight
+} from '../../common/constants'
+import layoutAlg from './layout-alg'
+import calcSessionSize from './session-size-alg'
+import TermSearch from '../terminal/term-search'
+import Footer from '../footer/footer-entry'
+import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
+import { pick } from 'lodash-es'
+import './layout.styl'
+
+export default auto(function Layout (props) {
+  const handleMousedown = (e) => {
+
+  }
+
+  const calcLayoutStyle = () => {
+    const {
+      width,
+      height,
+      pinnedQuickCommandBar,
+      // tabsHeight,
+      leftSidebarWidth,
+      // infoPanelPinned,
+      pinned,
+      rightPanelVisible,
+      rightPanelPinned,
+      rightPanelWidth,
+      resizeTrigger
+    } = props.store
+    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) + resizeTrigger
+    const l = pinned ? 43 + leftSidebarWidth : 43
+    const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
+    return {
+      height: h,
+      top: 0,
+      left: l,
+      width: width - l - r
+    }
+  }
+
+  const buildLayoutStyles = () => {
+    const {
+      layout,
+      height,
+      width,
+      pinnedQuickCommandBar,
+      leftSidebarWidth,
+      infoPanelPinned,
+      pinned,
+      rightSidebarWidth
+    } = props.store
+    const l = pinned ? leftSidebarWidth : 0
+    const r = infoPanelPinned ? rightSidebarWidth : 0
+    const w = width - l - r - 42
+    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0)
+    return layoutAlg(layout, w, h)
+  }
+
+  function renderSessions (conf, layout) {
+    const {
+      width,
+      height
+    } = calcLayoutStyle()
+    const {
+      store
+    } = props
+    const { tabs } = store
+    const tabsBatch = {}
+    for (const tab of tabs) {
+      const { batch } = tab
+      if (!tabsBatch[batch]) {
+        tabsBatch[batch] = []
+      }
+      tabsBatch[batch].push(tab)
+    }
+    return calcSessionSize(layout, width, height).map((v, i) => {
+      const sessProps = {
+        batch: i,
+        layout,
+        ...v,
+        tabs: tabsBatch[i] || [],
+        ...pick(store, [
+          'isMaximized',
+          'config',
+          'resolutions',
+          'hideDelKeyTip',
+          'fileOperation',
+          'file',
+          'pinnedQuickCommandBar',
+          'tabsHeight',
+          'appPath',
+          'leftSidebarWidth',
+          'pinned',
+          'openedSideBar'
+        ])
+      }
+      return (
+        <Sessions
+          key={'sess' + i}
+          {...sessProps}
+        />
+      )
+    })
+  }
+
+  const { store } = props
+  const {
+    layout, config, currentTab
+  } = store
+  const conf = splitConfig[layout]
+  const layoutProps = {
+    layout,
+    ...buildLayoutStyles(conf, layout),
+    layoutStyle: calcLayoutStyle(),
+    handleMousedown
+  }
+  const termProps = {
+    currentTab,
+    config,
+    ...pick(store, [
+      'currentTabId',
+      'termSearchOpen',
+      'termSearch',
+      'termSearchOptions',
+      'termSearchMatchCount',
+      'termSearchMatchIndex'
+    ])
+  }
+  const footerProps = {
+    store,
+    currentTab
+  }
+  const qmProps = pick(store, [
+    'quickCommandTags',
+    'qmSortByFrequency',
+    'openQuickCommandBar',
+    'pinnedQuickCommandBar',
+    'qmSortByFrequency',
+    'inActiveTerminal',
+    'leftSidebarWidth',
+    'openedSideBar',
+    'currentQuickCommands'
+  ])
+  return [
+    <Layouts {...layoutProps} key='layouts'>
+      {renderSessions(conf, layout)}
+    </Layouts>,
+    <TermSearch
+      key='TermSearch'
+      {...termProps}
+    />,
+    <QuickCommandsFooterBox
+      key='QuickCommandsFooterBox'
+      {...qmProps}
+    />,
+    <Footer
+      key='Footer'
+      {...footerProps}
+    />
+  ]
+})

package/client/components/layout/layout.styl

@@ -0,0 +1,8 @@
+@require '../../css/includes/theme-default'
+.layout-wrap
+.layout-item
+  position absolute
+  background main
+  overflow hidden
+  &.drag-over
+    border 2px solid #08c

package/client/components/layout/layouts.jsx

@@ -0,0 +1,72 @@
+import { memo } from 'react'
+import {
+  splitConfig
+} from '../../common/constants'
+import LayoutItem from './layout-item'
+
+function pixed (style) {
+  return Object.keys(style).reduce((prev, k) => {
+    const v = style[k]
+    return {
+      ...prev,
+      [k]: isNaN(v) ? v : v + 'px'
+    }
+  }, {})
+}
+export default memo(function LayoutWrap (props) {
+  const {
+    children,
+    layout,
+    wrapStyles,
+    handleStyles,
+    layoutStyle,
+    handleMousedown
+  } = props
+  const {
+    children: childrenCount,
+    handle: handleCount
+  } = splitConfig[layout]
+  const wrapStyle = {
+    className: 'layout-wrap layout-wrap-' + layout,
+    style: pixed(layoutStyle)
+  }
+  return (
+    <div {...wrapStyle}>
+      {
+        new Array(childrenCount).fill(0).map((v, i) => {
+          const itemProps = {
+            i,
+            style: pixed(wrapStyles[i]),
+            className: 'layout-item v' + (i + 1),
+            batch: i
+          }
+          return (
+            <LayoutItem
+              key={i + 'layout-item'}
+              {...itemProps}
+            >
+              {children[i] || null}
+            </LayoutItem>
+          )
+        })
+      }
+      {
+        new Array(handleCount).fill(0).map((v, i) => {
+          const itemProps = {
+            className: 'layout-handle h' + (i + 1),
+            'data-layout': layout,
+            'data-index': i,
+            style: handleStyles[i],
+            onMouseDown: handleMousedown
+          }
+          return (
+            <div
+              key={i + 'layout-handle'}
+              {...itemProps}
+            />
+          )
+        })
+      }
+    </div>
+  )
+})

package/client/components/layout/session-size-alg.js

@@ -0,0 +1,31 @@
+const layoutConfigs = {
+  c1: { cols: 1, rows: 1 },
+  c2: { cols: 2, rows: 1 },
+  c3: { cols: 3, rows: 1 },
+  r2: { cols: 1, rows: 2 },
+  r3: { cols: 1, rows: 3 },
+  c2x2: { cols: 2, rows: 2 },
+  c1r2: { cols: 2, rows: 2, special: 'right', length: 3 },
+  r1c2: { cols: 2, rows: 2, special: 'bottom', length: 3 }
+}
+
+export default function calcSessionSize (layout, w, h) {
+  const { cols, rows, special, length = cols * rows } = layoutConfigs[layout] || layoutConfigs.c1
+  const spacing = 0
+
+  const sessionWidth = (w - (cols - 1) * spacing) / cols
+  const sessionHeight = (h - (rows - 1) * spacing) / rows
+
+  const sessions = new Array(length).fill(0).map((_, i) => ({
+    width: sessionWidth,
+    height: sessionHeight
+  }))
+
+  if (special === 'right') {
+    sessions[0].height = h
+  } else if (special === 'bottom') {
+    sessions[0].width = w
+  }
+
+  return sessions
+}

package/client/components/main/custom-css.jsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'custom-css'

package/client/components/main/main.jsx

@@ -1,5 +1,6 @@
-import { Component } from '../common/react-subx'
-import Sessions from '../session/sessions'
+import { auto } from 'manate/react'
+import { useEffect } from 'react'
+import Layout from '../layout/layout'
 import ContextMenu from '../context-menu/context-menu'
 import FileInfoModal from '../sftp/file-props-modal'
 import FileModeModal from '../sftp/file-mode-modal'
@@ -20,16 +21,20 @@ import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
+import TerminalInfo from '../terminal-info/terminal-info'
 import { LoadingUI } from './loading'
 import { ConfigProvider, notification } from 'antd'
+import InfoModal from '../sidebar/info-modal.jsx'
+import RightSidePanel from '../side-panel-r/side-panel-r'
+import { pick } from 'lodash-es'
 import './wrapper.styl'
 
-export default class Index extends Component {
-  componentDidMount () {
+export default auto(function Index (props) {
+  useEffect(() => {
     notification.config({
       placement: 'bottomRight'
     })
-    const { store } = this.props
+    const { store } = props
     window.addEventListener('resize', store.onResize)
     store.onResize()
     store.initStoreEvents()
@@ -59,117 +64,186 @@ export default class Index extends Component {
     if (window.et.isWebApp) {
       window.onbeforeunload = store.beforeExit
     }
-    store.isSencondInstance = window.pre.runSync('isSencondInstance')
+    store.isSecondInstance = window.pre.runSync('isSecondInstance')
     store.initData()
     store.checkForDbUpgrade()
     window.pre.runGlobalAsync('registerDeepLink')
-  }
+  }, [])
 
-  render () {
-    const { store } = this.props
-    const {
-      configLoaded,
-      config,
-      terminalFullScreen,
-      pinned,
-      isSencondInstance,
-      pinnedQuickCommandBar,
-      wsInited,
-      upgradeInfo,
-      installSrc,
-      uiThemeConfig
-    } = store
-    const cls = classnames({
-      loaded: configLoaded,
-      'not-webapp': !window.et.isWebApp,
-      'system-ui': store.config.useSystemTitleBar,
-      'not-system-ui': !store.config.useSystemTitleBar,
-      'is-mac': isMac,
-      'not-mac': !isMac,
-      'is-win': isWin,
-      pinned,
-      'qm-pinned': pinnedQuickCommandBar,
-      'term-fullscreen': terminalFullScreen,
-      'is-main': !isSencondInstance
-    })
-    const ext1 = {
-      className: cls
-    }
-    const cpConf = config
-    const confsCss = Object
-      .keys((cpConf))
-      .filter(d => d.startsWith('terminalBackground'))
-      .reduce((p, k) => {
-        return {
-          ...p,
-          [k]: cpConf[k]
-        }
-      }, {})
-    const themeProps = {
-      themeConfig: store.getUiThemeConfig()
-    }
-    const outerProps = {
-      style: {
-        opacity: config.opacity
+  const { store } = props
+  const {
+    configLoaded,
+    config,
+    terminalFullScreen,
+    pinned,
+    isSecondInstance,
+    pinnedQuickCommandBar,
+    wsInited,
+    upgradeInfo,
+    installSrc,
+    fileTransfers,
+    uiThemeConfig,
+    transferHistory,
+    transferToConfirm,
+    openResolutionEdit
+  } = store
+  const cls = classnames({
+    loaded: configLoaded,
+    'not-webapp': !window.et.isWebApp,
+    'system-ui': store.config.useSystemTitleBar,
+    'not-system-ui': !store.config.useSystemTitleBar,
+    'is-mac': isMac,
+    'not-mac': !isMac,
+    'is-win': isWin,
+    pinned,
+    'qm-pinned': pinnedQuickCommandBar,
+    'term-fullscreen': terminalFullScreen,
+    'is-main': !isSecondInstance
+  })
+  const ext1 = {
+    className: cls
+  }
+  const cpConf = config
+  const confsCss = Object
+    .keys((cpConf))
+    .filter(d => d.startsWith('terminalBackground'))
+    .reduce((p, k) => {
+      return {
+        ...p,
+        [k]: cpConf[k]
       }
+    }, {})
+  const themeProps = {
+    themeConfig: store.getUiThemeConfig()
+  }
+  const outerProps = {
+    style: {
+      opacity: config.opacity
     }
-    return (
-      <ConfigProvider
-        theme={uiThemeConfig}
-      >
-        <div {...ext1}>
-          <ShortcutControl config={config} />
-          <LoadingUI
-            wsInited={wsInited}
-          />
-          <TermFullscreenControl
-            terminalFullScreen={terminalFullScreen}
-          />
-          <CssOverwrite
-            {...confsCss}
-            wsInited={wsInited}
-          />
-          <TerminalInteractive />
-          <UiTheme
-            {...themeProps}
-            buildTheme={store.buildTheme}
-          />
-          <CustomCss customCss={config.customCss} />
-          <TextEditor customCss={cpConf.customCss} />
-          <UpdateCheck
-            skipVersion={cpConf.skipVersion}
-            upgradeInfo={upgradeInfo}
-            installSrc={installSrc}
-          />
-          <FileInfoModal />
-          <FileModeModal />
-          <SettingModal store={store} />
-          <BatchOp store={store} />
-          <div
-            id='outside-context'
-            {...outerProps}
-          >
-            <Sidebar store={store} />
-            <Sessions
-              store={store}
-              config={cpConf}
-            />
-          </div>
-          <ContextMenu store={store} />
-          <ConfirmModalStore
-            store={store}
-          />
-          <TransferConflictStore
-            store={store}
-            _fileTransfers={store._fileTransfers}
-          />
-          <TransportsActionStore
+  }
+  const sidebarProps = {
+    ...pick(store, [
+      'activeItemId',
+      'history',
+      'showModal',
+      'showInfoModal',
+      'openedSideBar',
+      'height',
+      'settingTab',
+      'settingItem',
+      'isSyncingSetting',
+      'leftSidebarWidth',
+      'transferTab'
+    ]),
+    fileTransfers,
+    transferHistory,
+    upgradeInfo,
+    pinned
+  }
+
+  const infoModalProps = {
+    ...pick(store, [
+      'infoModalTab',
+      'showInfoModal',
+      'commandLineHelp'
+    ]),
+    installSrc,
+    upgradeInfo
+  }
+  const conflictStoreProps = {
+    fileTransfers,
+    _fileTransfers: store._fileTransfers
+  }
+  const batchOpProps = {
+    transferHistory,
+    showModal: store.showModal,
+    innerWidth: store.innerWidth
+  }
+  const resProps = {
+    resolutions: store.resolutions,
+    openResolutionEdit
+  }
+  const contextMenuProps = {
+    ...pick(store, [
+      'history'
+    ]),
+    tabs: store.getTabs(),
+    config
+  }
+  const rightPanelProps = {
+    rightPanelVisible: store.rightPanelVisible,
+    rightPanelPinned: store.rightPanelPinned,
+    rightPanelWidth: store.rightPanelWidth
+  }
+  const terminalInfoProps = {
+    ...store.terminalInfoProps,
+    ...pick(
+      config,
+      ['host', 'port', 'saveTerminalLogToFile', 'terminalInfos']
+    ),
+    ...pick(store, [
+      'appPath'
+    ])
+  }
+  return (
+    <ConfigProvider
+      theme={uiThemeConfig}
+    >
+      <div {...ext1}>
+        <ShortcutControl config={config} />
+        <LoadingUI
+          wsInited={wsInited}
+        />
+        <TermFullscreenControl
+          terminalFullScreen={terminalFullScreen}
+        />
+        <CssOverwrite
+          {...confsCss}
+          wsInited={wsInited}
+        />
+        <TerminalInteractive />
+        <UiTheme
+          {...themeProps}
+          buildTheme={store.buildTheme}
+        />
+        <CustomCss customCss={config.customCss} />
+        <TextEditor customCss={cpConf.customCss} />
+        <UpdateCheck
+          skipVersion={cpConf.skipVersion}
+          upgradeInfo={upgradeInfo}
+          installSrc={installSrc}
+        />
+        <FileInfoModal />
+        <FileModeModal />
+        <SettingModal store={store} />
+        <BatchOp {...batchOpProps} />
+        <div
+          id='outside-context'
+          {...outerProps}
+        >
+          <Sidebar {...sidebarProps} />
+          <Layout
             store={store}
-            _fileTransfers={store._fileTransfers}
           />
-          <Resolutions store={store} />
         </div>
-      </ConfigProvider>
-    )
-  }
-}
+        <ContextMenu {...contextMenuProps} />
+        <ConfirmModalStore
+          transferToConfirm={transferToConfirm}
+        />
+        <TransferConflictStore
+          {...conflictStoreProps}
+          transferToConfirm={transferToConfirm}
+        />
+        <TransportsActionStore
+          {...conflictStoreProps}
+          config={config}
+        />
+        <Resolutions {...resProps} />
+        <InfoModal {...infoModalProps} />
+        <RightSidePanel {...rightPanelProps}>
+          <TerminalInfo {...terminalInfoProps} />
+        </RightSidePanel>
+      </div>
+    </ConfigProvider>
+  )
+})

package/client/components/main/ui-theme.jsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'theme-css'

package/client/components/main/wrapper.styl

@@ -6,10 +6,8 @@
     white-space pre
     max-height 300px
     overflow scroll
-.sessions
-  margin-left 43px
-.pinned .sessions
-  margin-left 343px
+// .pinned .sessions
+//   margin-left 343px
 .error-wrapper
   background main-light
   height 100%

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

@@ -60,9 +60,7 @@ export default class ProfileList extends List {
 
   renderTransport = () => {
     return (
-      <ProfileTransport
-        store={this.props.store}
-      />
+      <ProfileTransport />
     )
   }
 

package/client/components/profile/profile-transport-mod.jsx

@@ -1,4 +1,4 @@
-import QmTransport from '../quick-commands/quick-command-transport'
+import QmTransport from '../quick-commands/quick-command-transport-mod'
 
 export default class ProfileTransport extends QmTransport {
   name = 'profiles'

package/client/components/profile/profile-transport.jsx

@@ -1,12 +1,9 @@
 import ProfileTransportMod from './profile-transport-mod'
-import { Component } from '../common/react-subx'
 
-export default class ProfileTransport extends Component {
-  render () {
-    return (
-      <div className='pd1b'>
-        <ProfileTransportMod store={this.props.store} />
-      </div>
-    )
-  }
+export default function ProfileTransport () {
+  return (
+    <div className='pd1b'>
+      <ProfileTransportMod store={window.store} />
+    </div>
+  )
 }