@electerm/electerm-react 1.40.18 → 1.50.21

package/client/components/sidebar/info-modal.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'react'
 import {
   GithubOutlined,
   GlobalOutlined,
@@ -10,7 +11,6 @@ import {
   BugOutlined,
   HeartOutlined
 } from '@ant-design/icons'
-import { Component } from '../common/react-subx'
 import { Modal, Tabs, Button } from 'antd'
 import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
@@ -24,20 +24,22 @@ import './info.styl'
 
 const e = window.translate
 
-export default class InfoModal extends Component {
-  handleChangeTab = key => {
-    this.props.store.infoModalTab = key
+export default memo(function InfoModal (props) {
+  const handleChangeTab = key => {
+    window.store.infoModalTab = key
   }
 
-  renderCheckUpdate = () => {
-    if (srcsSkipUpgradeCheck.includes(this.props.store.installSrc)) {
+  const renderCheckUpdate = () => {
+    if (srcsSkipUpgradeCheck.includes(props.installSrc)) {
       return null
     }
-    const { store } = this.props
     const {
       onCheckUpdate
-    } = store
-    const onCheckUpdating = store.upgradeInfo.checkingRemoteVersion || store.upgradeInfo.upgrading
+    } = window.store
+    const {
+      upgradeInfo
+    } = props
+    const onCheckUpdating = upgradeInfo.checkingRemoteVersion || upgradeInfo.upgrading
     return (
       <p className='mg1b mg2t'>
         <Button
@@ -51,206 +53,204 @@ export default class InfoModal extends Component {
     )
   }
 
-  formatJSON = (jsonStr) => {
+  const formatJSON = (jsonStr) => {
     return JSON.stringify(JSON.parse(jsonStr), null, 2)
   }
 
-  render () {
-    const { store } = this.props
-    const {
-      onCloseAbout,
-      showInfoModal,
-      commandLineHelp,
-      infoModalTab
-    } = store
-    if (!showInfoModal) {
-      return null
-    }
-    const {
-      name,
-      // description,
-      devDependencies,
-      dependencies,
-      langugeRepo,
-      author: {
-        name: authorName,
-        email,
-        url: authorUrl
-      },
-      homepage,
-      bugs: {
-        url: bugReportLink
-      },
-      releases: releaseLink,
-      privacyNoticeLink,
-      sponsorLink,
-      knownIssuesLink
-    } = packInfo
-    const link = releaseLink.replace('/releases', '')
-    const { env, versions } = window.pre
-    const deps = {
-      ...devDependencies,
-      ...dependencies
-    }
-    const envs = {
-      ...versions,
-      ...env
-    }
-    const title = (
-      <div className='ant-modal-confirm-title font16'>
-        <InfoCircleOutlined className='font20 mg1r' /> {e('about')} {name}
-      </div>
-    )
-    const attrs = {
-      title,
-      width: window.innerWidth - 100,
-      maskClosable: true,
-      okText: e('ok'),
-      onCancel: onCloseAbout,
-      footer: null,
-      open: true,
-      wrapClassName: 'info-modal'
-    }
-    const items = [
-      {
-        key: infoTabs.info,
-        label: e('about'),
-        children: (
-          <div>
-            <LogoElem />
-            <p className='mg2b'>{e('desc')}</p>
-            <p className='mg1b'>
-              <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
-              <Link to={authorUrl} className='mg1l'>
-                {authorName} ({email})
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <HomeOutlined /> <b>{e('homepage')}/{e('download')} ➾</b>
-              <Link to={homepage} className='mg1l'>
-                {homepage}
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <GithubOutlined /> <b className='mg1r'>github ➾</b>
-              <Link to={link} className='mg1l'>
-                {link}
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <GlobalOutlined /> <b className='mg1r'>{e('language')} repo ➾</b>
-              <Link to={langugeRepo} className='mg1l'>
-                {langugeRepo}
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <BugOutlined /> <b className='mg1r'>{e('bugReport')} ➾</b>
-              <Link to={bugReportLink} className='mg1l'>
-                {bugReportLink}
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <HighlightOutlined /> <b className='mg1r'>{e('changeLog')} ➾</b>
-              <Link to={releaseLink} className='mg1l'>
-                {releaseLink}
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <AlignLeftOutlined /> <b className='mg1r'>{e('knownIssues')} ➾</b>
-              <Link to={knownIssuesLink} className='mg1l'>
-                {knownIssuesLink}
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <WarningOutlined /> <b className='mg1r'>{e('privacyNotice')} ➾</b>
-              <Link to={privacyNoticeLink} className='mg1l'>
-                {privacyNoticeLink}
-              </Link>
-            </p>
-            <p className='mg1b'>
-              <HeartOutlined /> <b className='mg1r'>{e('sponsorElecterm')} ➾</b>
-              <Link to={sponsorLink} className='mg1l'>
-                {sponsorLink}
-              </Link>
-            </p>
-            {this.renderCheckUpdate()}
+  const { infoModalTab, commandLineHelp } = props
+  const {
+    showInfoModal
+  } = window.store
+  function onCloseAbout () {
+    window.store.showInfoModal = false
+  }
+  if (!showInfoModal) {
+    return null
+  }
+  const {
+    name,
+    // description,
+    devDependencies,
+    dependencies,
+    langugeRepo,
+    author: {
+      name: authorName,
+      email,
+      url: authorUrl
+    },
+    homepage,
+    bugs: {
+      url: bugReportLink
+    },
+    releases: releaseLink,
+    privacyNoticeLink,
+    sponsorLink,
+    knownIssuesLink
+  } = packInfo
+  const link = releaseLink.replace('/releases', '')
+  const { env, versions } = window.pre
+  const deps = {
+    ...devDependencies,
+    ...dependencies
+  }
+  const envs = {
+    ...versions,
+    ...env
+  }
+  const title = (
+    <div className='ant-modal-confirm-title font16'>
+      <InfoCircleOutlined className='font20 mg1r' /> {e('about')} {name}
+    </div>
+  )
+  const attrs = {
+    title,
+    width: window.innerWidth - 100,
+    maskClosable: true,
+    okText: e('ok'),
+    onCancel: onCloseAbout,
+    footer: null,
+    open: true,
+    wrapClassName: 'info-modal'
+  }
+  const items = [
+    {
+      key: infoTabs.info,
+      label: e('about'),
+      children: (
+        <div>
+          <LogoElem />
+          <p className='mg2b'>{e('desc')}</p>
+          <p className='mg1b'>
+            <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
+            <Link to={authorUrl} className='mg1l'>
+              {authorName} ({email})
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <HomeOutlined /> <b>{e('homepage')}/{e('download')} ➾</b>
+            <Link to={homepage} className='mg1l'>
+              {homepage}
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <GithubOutlined /> <b className='mg1r'>github ➾</b>
+            <Link to={link} className='mg1l'>
+              {link}
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <GlobalOutlined /> <b className='mg1r'>{e('language')} repo ➾</b>
+            <Link to={langugeRepo} className='mg1l'>
+              {langugeRepo}
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <BugOutlined /> <b className='mg1r'>{e('bugReport')} ➾</b>
+            <Link to={bugReportLink} className='mg1l'>
+              {bugReportLink}
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <HighlightOutlined /> <b className='mg1r'>{e('changeLog')} ➾</b>
+            <Link to={releaseLink} className='mg1l'>
+              {releaseLink}
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <AlignLeftOutlined /> <b className='mg1r'>{e('knownIssues')} ➾</b>
+            <Link to={knownIssuesLink} className='mg1l'>
+              {knownIssuesLink}
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <WarningOutlined /> <b className='mg1r'>{e('privacyNotice')} ➾</b>
+            <Link to={privacyNoticeLink} className='mg1l'>
+              {privacyNoticeLink}
+            </Link>
+          </p>
+          <p className='mg1b'>
+            <HeartOutlined /> <b className='mg1r'>{e('sponsorElecterm')} ➾</b>
+            <Link to={sponsorLink} className='mg1l'>
+              {sponsorLink}
+            </Link>
+          </p>
+          {renderCheckUpdate()}
+        </div>
+      )
+    },
+    {
+      key: infoTabs.deps,
+      label: e('dependencies'),
+      children: Object.keys(deps).map((k, i) => {
+        const v = deps[k]
+        return (
+          <div className='pd1b' key={i + '_dp_' + k}>
+            <b className='bold'>{k}</b>:
+            <span className='mg1l'>
+              {v}
+            </span>
           </div>
         )
-      },
-      {
-        key: infoTabs.deps,
-        label: e('dependencies'),
-        children: Object.keys(deps).map((k, i) => {
-          const v = deps[k]
-          return (
-            <div className='pd1b' key={i + '_dp_' + k}>
-              <b className='bold'>{k}</b>:
-              <span className='mg1l'>
-                {v}
-              </span>
-            </div>
-          )
-        })
-      },
-      {
-        key: infoTabs.env,
-        label: e('env'),
-        children: Object.keys(envs).map((k, i) => {
-          const v = envs[k]
-          return (
-            <div className='pd1b' key={i + '_env_' + k}>
-              <b className='bold'>{k}</b>:
-              <span className='mg1l'>
-                {v}
-              </span>
-            </div>
-          )
-        })
-      },
-      {
-        key: infoTabs.os,
-        label: e('os'),
-        children: window.pre.osInfo().map(({ k, v }, i) => {
-          return (
-            <div className='pd1b' key={i + '_os_' + k}>
-              <b className='bold'>{k}</b>:
-              <span className='mg1l'>
-                {
-                  v.length > 30
-                    ? <pre>{this.formatJSON(v)}</pre>
-                    : v
-                }
-              </span>
-            </div>
-          )
-        })
-      }
-    ]
-
-    if (!window.et.isWebApp) {
-      items.push({
-        key: infoTabs.cmd,
-        label: e('commandLineUsage'),
-        children: (
-          <pre>
-            <code>{commandLineHelp}</code>
-          </pre>
+      })
+    },
+    {
+      key: infoTabs.env,
+      label: e('env'),
+      children: Object.keys(envs).map((k, i) => {
+        const v = envs[k]
+        return (
+          <div className='pd1b' key={i + '_env_' + k}>
+            <b className='bold'>{k}</b>:
+            <span className='mg1l'>
+              {v}
+            </span>
+          </div>
+        )
+      })
+    },
+    {
+      key: infoTabs.os,
+      label: e('os'),
+      children: window.pre.osInfo().map(({ k, v }, i) => {
+        return (
+          <div className='pd1b' key={i + '_os_' + k}>
+            <b className='bold'>{k}</b>:
+            <span className='mg1l'>
+              {
+                v.length > 30
+                  ? <pre>{formatJSON(v)}</pre>
+                  : v
+              }
+            </span>
+          </div>
         )
       })
     }
+  ]
 
-    return (
-      <Modal
-        {...attrs}
-      >
-        <div className='about-wrap'>
-          <Tabs
-            activeKey={infoModalTab}
-            onChange={this.handleChangeTab}
-            items={items}
-          />
-        </div>
-      </Modal>
-    )
+  if (!window.et.isWebApp) {
+    items.push({
+      key: infoTabs.cmd,
+      label: e('commandLineUsage'),
+      children: (
+        <pre>
+          <code>{commandLineHelp}</code>
+        </pre>
+      )
+    })
   }
-}
+
+  return (
+    <Modal
+      {...attrs}
+    >
+      <div className='about-wrap'>
+        <Tabs
+          activeKey={infoModalTab}
+          onChange={handleChangeTab}
+          items={items}
+        />
+      </div>
+    </Modal>
+  )
+})

package/client/components/sidebar/sidebar.styl

@@ -60,10 +60,16 @@
   border-right 1px solid darken(main, 30%)
 
 .pinned
+  .sidebar-list
+    top 0
+    .sidebar-panel
+      top 0
+      padding-top 36px
   .drag-handle
     display block
-  .sidebar-panel .pinned
-    color success
+  .sidebar-panel
+    .pinned
+      color success
 //btns
 .btns
   background main-dark

package/client/components/sidebar/transfer-history-modal.jsx

@@ -2,7 +2,7 @@
  * transfer-history-modal
  */
 
-import { Component } from '../common/react-subx'
+import { memo, useState } from 'react'
 import { CloseOutlined } from '@ant-design/icons'
 import { Table } from 'antd'
 import time from '../../common/time'
@@ -18,107 +18,102 @@ const sorterFactory = prop => {
     return _get(a, prop) > _get(b, prop) ? 1 : -1
   }
 }
-export default class TransferHistoryModal extends Component {
-  state = {
-    pageSize: 5
-  }
+export default memo(function TransferHistoryModal (props) {
+  const [pageSize, setPageSize] = useState(5)
 
-  handlePageSizeChange = (page, pageSize) => {
-    this.setState({ pageSize })
+  const handlePageSizeChange = (page, pageSize) => {
+    setPageSize(pageSize)
   }
 
-  render () {
-    const {
-      getTransferHistory,
-      clearTransferHistory
-    } = this.props.store
-    const transferHistory = getTransferHistory().filter(d => !d.unzip)
-    const columns = [{
-      title: e('startTime'),
-      dataIndex: 'startTime',
-      key: 'startTime',
-      sorter: sorterFactory('startTime'),
-      render: timeRender
-    }, {
-      title: e('finishTime'),
-      dataIndex: 'finishTime',
-      key: 'finishTime',
-      sorter: sorterFactory('finishTime'),
-      render: timeRender
-    }, {
-      title: e('type'),
-      dataIndex: 'type',
-      key: 'typeFrom',
-      sorter: sorterFactory('typeFrom'),
-      render: (type, inst) => {
-        return (
-          <Tag transfer={inst} />
-        )
-      }
-    }, {
-      title: e('host'),
-      dataIndex: 'host',
-      key: 'host',
-      sorter: sorterFactory('host')
-    }, {
-      title: e('fromPath'),
-      dataIndex: 'fromPath',
-      key: 'fromPath',
-      render: (txt, inst) => {
-        return inst.fromPathReal || txt
-      },
-      sorter: sorterFactory('fromPath')
-    }, {
-      title: e('toPath'),
-      dataIndex: 'toPath',
-      key: 'toPath',
-      render: (txt, inst) => {
-        return inst.toPathReal || txt
-      },
-      sorter: sorterFactory('toPath')
-    }, {
-      title: e('size'),
-      dataIndex: 'size',
-      key: 'size',
-      sorter: sorterFactory('size'),
-      render: (v) => filesize(v || 0)
-    }, {
-      title: e('speed'),
-      dataIndex: 'speed',
-      key: 'speed',
-      sorter: sorterFactory('speed')
-    }]
-    const tabConf = {
-      dataSource: transferHistory,
-      columns,
-      bordered: true,
-      pagination: {
-        pageSize: this.state.pageSize,
-        showSizeChanger: true,
-        pageSizeOptions: [5, 10, 20, 50, 100],
-        onChange: this.handlePageSizeChange,
-        position: ['topRight']
-      },
-      size: 'small',
-      rowKey: 'id'
+  const {
+    clearTransferHistory
+  } = window.store
+  const transferHistory = props.transferHistory.filter(d => !d.unzip)
+  const columns = [{
+    title: e('startTime'),
+    dataIndex: 'startTime',
+    key: 'startTime',
+    sorter: sorterFactory('startTime'),
+    render: timeRender
+  }, {
+    title: e('finishTime'),
+    dataIndex: 'finishTime',
+    key: 'finishTime',
+    sorter: sorterFactory('finishTime'),
+    render: timeRender
+  }, {
+    title: e('type'),
+    dataIndex: 'type',
+    key: 'typeFrom',
+    sorter: sorterFactory('typeFrom'),
+    render: (type, inst) => {
+      return (
+        <Tag transfer={inst} />
+      )
     }
-    return (
-      <div className='pd2'>
-        <div>
-          <span
-            className='iblock pointer'
-            onClick={clearTransferHistory}
-          >
-            <CloseOutlined className='mg1r' />
-            {e('clear')}
-          </span>
-        </div>
-        <div className='table-scroll-wrap'>
-          <Table
-            {...tabConf}
-          />
-        </div>
-      </div>
-    )
+  }, {
+    title: e('host'),
+    dataIndex: 'host',
+    key: 'host',
+    sorter: sorterFactory('host')
+  }, {
+    title: e('fromPath'),
+    dataIndex: 'fromPath',
+    key: 'fromPath',
+    render: (txt, inst) => {
+      return inst.fromPathReal || txt
+    },
+    sorter: sorterFactory('fromPath')
+  }, {
+    title: e('toPath'),
+    dataIndex: 'toPath',
+    key: 'toPath',
+    render: (txt, inst) => {
+      return inst.toPathReal || txt
+    },
+    sorter: sorterFactory('toPath')
+  }, {
+    title: e('size'),
+    dataIndex: 'size',
+    key: 'size',
+    sorter: sorterFactory('size'),
+    render: (v) => filesize(v || 0)
+  }, {
+    title: e('speed'),
+    dataIndex: 'speed',
+    key: 'speed',
+    sorter: sorterFactory('speed')
+  }]
+  const tabConf = {
+    dataSource: transferHistory,
+    columns,
+    bordered: true,
+    pagination: {
+      pageSize,
+      showSizeChanger: true,
+      pageSizeOptions: [5, 10, 20, 50, 100],
+      onChange: handlePageSizeChange,
+      position: ['topRight']
+    },
+    size: 'small',
+    rowKey: 'id'
   }
-}
+  return (
+    <div className='pd2'>
+      <div>
+        <span
+          className='iblock pointer'
+          onClick={clearTransferHistory}
+        >
+          <CloseOutlined className='mg1r' />
+          {e('clear')}
+        </span>
+      </div>
+      <div className='table-scroll-wrap'>
+        <Table
+          {...tabConf}
+        />
+      </div>
+    </div>
+  )
+})