@electerm/electerm-react 1.40.20 → 1.50.31

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

@@ -13,50 +13,47 @@ import {
   ExportOutlined,
   InfoCircleOutlined
 } from '@ant-design/icons'
-import { Component } from '../common/react-subx'
 
 const e = window.translate
 
-export class DataTransport extends Component {
-  render () {
-    const txt = e('autoSync')
-    const {
-      store
-    } = this.props
-    return (
-      <div className='pd2 fix'>
-        <div className='fleft'>
+export default function DataTransport (props) {
+  const txt = e('autoSync')
+  const {
+    store
+  } = window
+  return (
+    <div className='pd2 fix'>
+      <div className='fleft'>
+        <Button
+          icon={<ExportOutlined />}
+          className='mg1r'
+          onClick={store.handleExportAllData}
+        >
+          {e('export')}
+        </Button>
+        <Upload
+          beforeUpload={store.importAll}
+          fileList={[]}
+        >
           <Button
-            icon={<ExportOutlined />}
-            className='mg1r'
-            onClick={store.handleExportAllData}
+            icon={<ImportOutlined />}
           >
-            {e('export')}
+            {e('importFromFile')}
           </Button>
-          <Upload
-            beforeUpload={store.importAll}
-            fileList={[]}
-          >
-            <Button
-              icon={<ImportOutlined />}
-            >
-              {e('importFromFile')}
-            </Button>
-          </Upload>
-        </div>
-        <div className='fright'>
-          <Switch
-            checked={store.config.autoSync || false}
-            checkedChildren={txt}
-            onChange={store.handleAutoSync}
-            unCheckedChildren={txt}
-            className='mg3l mg1r'
-          />
-          <Tooltip title={e('autoSyncTip')}>
-            <InfoCircleOutlined />
-          </Tooltip>
-        </div>
+        </Upload>
+      </div>
+      <div className='fright'>
+        <Switch
+          checked={props.config.autoSync || false}
+          checkedChildren={txt}
+          onChange={store.handleAutoSync}
+          unCheckedChildren={txt}
+          className='mg3l mg1r'
+        />
+        <Tooltip title={e('autoSyncTip')}>
+          <InfoCircleOutlined />
+        </Tooltip>
       </div>
-    )
-  }
+    </div>
+  )
 }

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

@@ -5,7 +5,7 @@
 /**
  * bookmark form
  */
-import { useDelta, useConditionalEffect } from 'react-delta'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
 import { Button, Input, notification, Form } from 'antd'
 import Link from '../common/external-link'
@@ -53,34 +53,34 @@ export default function SyncForm (props) {
       up[syncType + 'ApiUrl'] = 'https://electerm-cloud.html5beta.com/api/sync'
       // up[syncType + 'ApiUrl'] = 'http://127.0.0.1:5678/api/sync'
     }
-    props.store.updateSyncSetting(up)
-    const test = await props.store.testSyncToken(syncType, res.gistId)
+    window.store.updateSyncSetting(up)
+    const test = await window.store.testSyncToken(syncType, res.gistId)
     if (!test) {
       return notification.error({
         message: 'token invalid'
       })
     }
     if (!res.gistId && syncType !== syncTypes.custom && syncType !== syncTypes.cloud) {
-      props.store.createGist(syncType)
+      window.store.createGist(syncType)
     }
   }
 
   function upload () {
-    props
+    window
       .store
       .uploadSetting(props.syncType)
-      .catch(props.store.onError)
+      .catch(window.store.onError)
   }
 
   function download () {
-    props
+    window
       .store
       .downloadSetting(props.syncType)
-      .catch(props.store.onError)
+      .catch(window.store.onError)
   }
 
   // onChangeAutoSync = checked => {
-  //   this.props.store.updateSyncSetting({
+  //   this.window.store.updateSyncSetting({
   //     autoSync: checked
   //   })
   // }
@@ -273,7 +273,7 @@ export default function SyncForm (props) {
           </Button>
           <Button
             type='dashed'
-            onClick={props.store.handleClearSyncSetting}
+            onClick={window.store.handleClearSyncSetting}
             disabled={disabled()}
             className='mg1r mg1b sync-btn-clear'
             icon={<ClearOutlined />}

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

@@ -1,30 +1,31 @@
 /**
  * sync setting module entry
  */
-import { Component } from '../common/react-subx'
+
 import { Tabs, Spin } from 'antd'
 import SyncForm from './setting-sync-form'
 import { syncTypes, syncDataMaps } from '../../common/constants'
-import { DataTransport } from './data-import'
+import DataTransport from './data-import'
 import DataSelect from './data-select'
 import { pick } from 'lodash-es'
 
-export default class SyncSettingEntry extends Component {
-  handleChange = (key) => {
-    this.props.store.syncType = key
+export default function SyncSettingEntry (props) {
+  const handleChange = (key) => {
+    window.store.syncType = key
   }
-
-  renderForm () {
-    const {
-      store
-    } = this.props
-    const {
-      syncSetting
-    } = store.config
+  const {
+    config
+  } = props
+  const {
+    syncSetting
+  } = config
+  const {
+    store
+  } = window
+  function renderForm () {
     const syncProps = {
-      store,
       ...syncSetting,
-      ...pick(store, [
+      ...pick(props, [
         'autofocustrigger',
         'isSyncingSetting',
         'isSyncDownload',
@@ -32,7 +33,7 @@ export default class SyncSettingEntry extends Component {
         'syncType'
       ])
     }
-    const type = store.syncType
+    const type = props.syncType
     const formData = {
       gistId: syncSetting[type + 'GistId'],
       token: syncSetting[type + 'AccessToken'],
@@ -51,42 +52,39 @@ export default class SyncSettingEntry extends Component {
     )
   }
 
-  render () {
-    const {
-      store
-    } = this.props
-
-    const syncItems = Object.keys(syncTypes).map(type => {
-      return {
-        key: type,
-        label: type,
-        children: null
-      }
-    })
-    const {
-      dataSyncSelected
-    } = store.config
-    const arr = dataSyncSelected && dataSyncSelected !== 'all'
-      ? dataSyncSelected.split(',')
-      : Object.keys(syncDataMaps)
-    const dataSelectProps = {
-      dataSyncSelected: arr
+  const syncItems = Object.keys(syncTypes).map(type => {
+    return {
+      key: type,
+      label: type,
+      children: null
     }
-    return (
-      <div className='pd2l'>
-        <DataTransport store={store} />
-        <Spin spinning={store.isSyncingSetting}>
-          <Tabs
-            activeKey={store.syncType}
-            onChange={this.handleChange}
-            items={syncItems}
-          />
-          {
-            this.renderForm()
-          }
-          <DataSelect {...dataSelectProps} />
-        </Spin>
-      </div>
-    )
+  })
+  const {
+    dataSyncSelected
+  } = props.config
+  const arr = dataSyncSelected && dataSyncSelected !== 'all'
+    ? dataSyncSelected.split(',')
+    : Object.keys(syncDataMaps)
+  const dataSelectProps = {
+    dataSyncSelected: arr
+  }
+  const dataImportProps = {
+    config
   }
+  return (
+    <div className='pd2l'>
+      <DataTransport {...dataImportProps} />
+      <Spin spinning={store.isSyncingSetting}>
+        <Tabs
+          activeKey={store.syncType}
+          onChange={handleChange}
+          items={syncItems}
+        />
+        {
+          renderForm()
+        }
+        <DataSelect {...dataSelectProps} />
+      </Spin>
+    </div>
+  )
 }

package/client/components/sftp/address-bookmark.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import { auto } from 'manate/react'
 import {
   StarOutlined,
   PlusSquareOutlined
@@ -11,16 +11,16 @@ import { typeMap } from '../../common/constants'
 import uid from '../../common/uid'
 import './address-bookmark.styl'
 
-export default class AddrBookmark extends Component {
-  onDel = (item) => {
-    this.props.store.delAddressBookmark(item)
+export default auto(function AddrBookmark (props) {
+  function onDel (item) {
+    window.store.delAddressBookmark(item)
   }
 
-  handleAddAddr = () => {
+  function handleAddAddr () {
     const {
-      store, host, realPath, type
-    } = this.props
-    store.addAddressBookmark(
+      host, realPath, type
+    } = props
+    window.store.addAddressBookmark(
       {
         addr: realPath,
         host: type === typeMap.local ? '' : host,
@@ -29,55 +29,54 @@ export default class AddrBookmark extends Component {
     )
   }
 
-  render () {
-    const { type, onClickHistory, store, host } = this.props
-    // const cls = classnames(
-    //   'sftp-history',
-    //   'animated',
-    //   `sftp-history-${type}`
-    // )
-    const addrs = type === typeMap.local
-      ? store.addressBookmarksLocal
-      : store.addressBookmarks.filter(
-        g => g.host === host
-      )
-    const inner = addrs.length
-      ? addrs.map(o => {
-        return (
-          <AddrBookmarkItem
-            handleClick={onClickHistory}
-            type={type}
-            key={o.id}
-            handleDel={this.onDel}
-            item={o}
-          />
-        )
-      })
-      : null
-    const content = (
-      <div
-        className='addr-bookmark-list'
-      >
-        {inner}
-      </div>
+  const { type, onClickHistory, host } = props
+  const { store } = window
+  // const cls = classnames(
+  //   'sftp-history',
+  //   'animated',
+  //   `sftp-history-${type}`
+  // )
+  const addrs = type === typeMap.local
+    ? store.addressBookmarksLocal
+    : store.addressBookmarks.filter(
+      g => g.host === host
     )
-    const title = (
-      <div>
-        <PlusSquareOutlined
-          className='add-addr-bookmark'
-          onClick={this.handleAddAddr}
+  const inner = addrs.length
+    ? addrs.map(o => {
+      return (
+        <AddrBookmarkItem
+          handleClick={onClickHistory}
+          type={type}
+          key={o.id}
+          handleDel={onDel}
+          item={o}
         />
-      </div>
-    )
-    return (
-      <Popover
-        content={content}
-        title={title}
-        placement='bottom'
-        trigger='click'
-      >
-        <StarOutlined />
-      </Popover>
-    )
-  }
-}
+      )
+    })
+    : null
+  const content = (
+    <div
+      className='addr-bookmark-list'
+    >
+      {inner}
+    </div>
+  )
+  const title = (
+    <div>
+      <PlusSquareOutlined
+        className='add-addr-bookmark'
+        onClick={handleAddAddr}
+      />
+    </div>
+  )
+  return (
+    <Popover
+      content={content}
+      title={title}
+      placement='bottom'
+      trigger='click'
+    >
+      <StarOutlined />
+    </Popover>
+  )
+})

package/client/components/sftp/confirm-modal-store.jsx

@@ -3,7 +3,6 @@
  *
  */
 
-import { Component } from '../common/react-subx'
 import { Modal, Button } from 'antd'
 import { isString } from 'lodash-es'
 import AnimateText from '../common/animate-text'
@@ -23,13 +22,10 @@ function formatTimeAuto (strOrDigit) {
   return formatTime(strOrDigit * 1000)
 }
 
-export default class ConfirmModalStore extends Component {
-  act (action) {
-    const { store } = this.props
-    const {
-      transferToConfirm
-    } = store
-    store.setState(
+export default function ConfirmModalStore (props) {
+  function act (action) {
+    const { transferToConfirm } = props
+    window.store.setState(
       'transferToConfirm', {}
     )
     const {
@@ -48,10 +44,10 @@ export default class ConfirmModalStore extends Component {
     })
   }
 
-  renderContent () {
+  function renderContent () {
     const {
       transferToConfirm
-    } = this.props.store
+    } = props
     const {
       fromPath,
       toPath,
@@ -105,10 +101,10 @@ export default class ConfirmModalStore extends Component {
     )
   }
 
-  renderFooter () {
+  function renderFooter () {
     const {
       transferToConfirm
-    } = this.props.store
+    } = props
     if (!transferToConfirm) {
       return null
     }
@@ -122,21 +118,21 @@ export default class ConfirmModalStore extends Component {
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => this.act(fileActions.cancel)}
+          onClick={() => act(fileActions.cancel)}
         >
           {e('cancel')}
         </Button>
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => this.act(fileActions.skip)}
+          onClick={() => act(fileActions.skip)}
         >
           {e('skip')}
         </Button>
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => this.act(fileActions.skipAll)}
+          onClick={() => act(fileActions.skipAll)}
         >
           {e('skipAll')}
         </Button>
@@ -144,7 +140,7 @@ export default class ConfirmModalStore extends Component {
           danger
           className='mg1l'
           onClick={
-            () => this.act(fileActions.mergeOrOverwrite)
+            () => act(fileActions.mergeOrOverwrite)
           }
         >
           {isDirectory ? e('merge') : e('overwrite')}
@@ -153,7 +149,7 @@ export default class ConfirmModalStore extends Component {
           type='primary'
           className='mg1l'
           onClick={
-            () => this.act(fileActions.rename)
+            () => act(fileActions.rename)
           }
         >
           {e('rename')}
@@ -169,7 +165,7 @@ export default class ConfirmModalStore extends Component {
                 : e('overwriteDesc')
             }
             onClick={
-              () => this.act(fileActions.mergeOrOverwriteAll)
+              () => act(fileActions.mergeOrOverwriteAll)
             }
           >
             {isDirectory ? e('mergeAll') : e('overwriteAll')}
@@ -179,7 +175,7 @@ export default class ConfirmModalStore extends Component {
             className='mg1l'
             title={e('renameDesc')}
             onClick={
-              () => this.act(fileActions.renameAll)
+              () => act(fileActions.renameAll)
             }
           >
             {e('renameAll')}
@@ -189,26 +185,24 @@ export default class ConfirmModalStore extends Component {
     )
   }
 
-  render () {
-    const {
-      transferToConfirm
-    } = this.props.store
-    if (!transferToConfirm.id) {
-      return null
-    }
-    const modalProps = {
-      open: true,
-      width: 500,
-      title: e('fileConflict'),
-      footer: this.renderFooter(),
-      onCancel: () => this.act(fileActions.cancel)
-    }
-    return (
-      <Modal
-        {...modalProps}
-      >
-        {this.renderContent()}
-      </Modal>
-    )
+  const {
+    transferToConfirm
+  } = props
+  if (!transferToConfirm.id) {
+    return null
+  }
+  const modalProps = {
+    open: true,
+    width: 500,
+    title: e('fileConflict'),
+    footer: renderFooter(),
+    onCancel: () => act(fileActions.cancel)
   }
+  return (
+    <Modal
+      {...modalProps}
+    >
+      {renderContent()}
+    </Modal>
+  )
 }

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

@@ -10,7 +10,7 @@ import {
 } from '@ant-design/icons'
 import classnames from 'classnames'
 import copy from 'json-deep-copy'
-import { pick, some, without } from 'lodash-es'
+import { pick, some } from 'lodash-es'
 import Input from '../common/input-auto-focus'
 import resolve from '../../common/resolve'
 import { addClass, removeClass } from '../../common/class'
@@ -76,6 +76,9 @@ export default class FileSection extends React.Component {
 
   componentWillUnmount () {
     clearTimeout(this.timer)
+    this.timer = null
+    this.dom = null
+    this.dropTarget = null
     this.removeFileEditEvent()
     window.removeEventListener('message', this.changeFileMode)
     window.removeEventListener('message', this.onContextAction)
@@ -380,7 +383,7 @@ export default class FileSection extends React.Component {
     const { type } = this.props
     window.store.openFileInfoModal({
       file: this.state.file,
-      tab: without(this.props.tab, 'terminals'),
+      tab: this.props.tab,
       visible: true,
       pid: this.props.pid,
       sessionId: this.props.sessionId,
@@ -507,6 +510,10 @@ export default class FileSection extends React.Component {
       file = {},
       action
     } = e.data || {}
+    if (action === commonActions.submitFileModeClose) {
+      window.removeEventListener('message', this.changeFileMode)
+      return false
+    }
     if (
       action !== commonActions.submitFileModeEdit ||
       file.id !== this.state.file.id
@@ -529,7 +536,7 @@ export default class FileSection extends React.Component {
       'message', this.changeFileMode
     )
     window.store.openFileModeModal({
-      tab: without(this.props.tab, 'terminals'),
+      tab: this.props.tab,
       visible: true,
       uidTree: this.props[`${type}UidTree`],
       gidTree: this.props[`${type}GidTree`]
@@ -1092,6 +1099,10 @@ export default class FileSection extends React.Component {
       args = [],
       func
     } = e.data || {}
+    if (action === commonActions.closeContextMenuAfter) {
+      window.removeEventListener('message', this.onContextAction)
+      return false
+    }
     if (
       action !== commonActions.clickContextMenu ||
       id !== this.uid ||

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

@@ -83,6 +83,9 @@ export default class FileMode extends React.PureComponent {
   }
 
   onClose = () => {
+    postMessage({
+      action: commonActions.submitFileModeClose
+    })
     this.setStateProxy({
       file: {},
       data: {}

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

@@ -6,7 +6,7 @@
  * - click header to sort
  */
 
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import classnames from 'classnames'
 import { isEqual, pick, find, isNull, isArray, isUndefined } from 'lodash-es'
 import generate from '../../common/uid'
@@ -31,7 +31,7 @@ import IconHolder from '../context-menu/icon-holder'
 
 const e = window.translate
 
-export default class FileListTable extends Component {
+export default class FileListTable extends PureComponent {
   constructor (props) {
     super(props)
     this.state = {
@@ -162,7 +162,7 @@ export default class FileListTable extends Component {
   }
 
   getPropsDefault = () => {
-    return this.props.store.config.filePropsEnabled || [
+    return this.props.config.filePropsEnabled || [
       'name',
       'size',
       'modifyTime'
@@ -275,7 +275,7 @@ export default class FileListTable extends Component {
       : [...names, name]
     const props = all.filter(g => newProps.includes(g))
     const update = this.initFromProps(props)
-    this.props.store.setConfig({
+    window.store.setConfig({
       filePropsEnabled: props
     })
     this.setState(update)