@electerm/electerm-react 1.40.20 → 1.50.31

package/client/components/quick-commands/quick-command-transport.jsx

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

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

@@ -2,7 +2,7 @@
  * quick commands footer selection wrap
  */
 
-import { Component } from '../common/react-subx'
+import { useState, useRef } from 'react'
 import { quickCommandLabelsLsKey } from '../../common/constants'
 import { sortBy } from 'lodash-es'
 import { Button, Input, Select, Space } from 'antd'
@@ -14,41 +14,40 @@ import {
   PushpinOutlined
 } from '@ant-design/icons'
 import classNames from 'classnames'
-import onDrop from './on-drop'
+import onDropFunc from './on-drop'
 import './qm.styl'
 
 const e = window.translate
 const addQuickCommands = 'addQuickCommands'
 const { Option } = Select
 
-export default class QuickCommandsFooterBox extends Component {
-  state = {
-    keyword: '',
-    labels: ls.getItemJSON(quickCommandLabelsLsKey, [])
-  }
+export default function QuickCommandsFooterBox (props) {
+  const [keyword, setKeyword] = useState('')
+  const [labels, setLabels] = useState(ls.getItemJSON(quickCommandLabelsLsKey, []))
+  const timer = useRef(null)
 
-  handleMouseLeave = () => {
-    this.timer = setTimeout(() => {
-      this.toggle(false)
+  function handleMouseLeave () {
+    timer.current = setTimeout(() => {
+      toggle(false)
     }, 500)
   }
 
-  handleMouseEnter = () => {
-    clearTimeout(this.timer)
+  function handleMouseEnter () {
+    clearTimeout(timer.current)
   }
 
-  toggle = (openQuickCommandBar) => {
-    this.props.store.openQuickCommandBar = openQuickCommandBar
+  function toggle (openQuickCommandBar) {
+    window.store.openQuickCommandBar = openQuickCommandBar
   }
 
-  handleTogglePinned = () => {
-    this.props.store.pinnedQuickCommandBar = !this.props.store.pinnedQuickCommandBar
+  function handleTogglePinned () {
+    window.store.pinnedQuickCommandBar = !window.store.pinnedQuickCommandBar
   }
 
-  handleSelect = async (id) => {
+  async function handleSelect (id) {
     const {
       store
-    } = this.props
+    } = window
     if (id === addQuickCommands) {
       store.handleOpenQuickCommandsSetting()
     } else {
@@ -56,50 +55,45 @@ export default class QuickCommandsFooterBox extends Component {
     }
   }
 
-  handleClose = () => {
-    this.props.store.pinnedQuickCommandBar = false
-    this.props.store.openQuickCommandBar = false
+  function handleClose () {
+    window.store.pinnedQuickCommandBar = false
+    window.store.openQuickCommandBar = false
   }
 
-  handleChange = e => {
-    this.setState({
-      keyword: e.target.value
-    })
+  function handleChange (e) {
+    setKeyword(e.target.value)
   }
 
-  handleChangeLabels = (v) => {
+  function handleChangeLabels (v) {
     ls.setItemJSON(quickCommandLabelsLsKey, v)
-    this.setState({
-      labels: v
-    })
+    setLabels(v)
   }
 
-  filterFunc = (v, opt) => {
-    const c = opt.props.children.toLowerCase()
-    const m = opt.props.cmd.toLowerCase()
-    const vv = v.toLowerCase()
-    return c.includes(vv) || m.includes(vv)
-  }
+  // function filterFunc (v, opt) {
+  //   const c = opt.props.children.toLowerCase()
+  //   const m = opt.props.cmd.toLowerCase()
+  //   const vv = v.toLowerCase()
+  //   return c.includes(vv) || m.includes(vv)
+  // }
 
-  onDragOver = e => {
+  function onDragOver (e) {
     e.preventDefault()
   }
 
-  onDragStart = e => {
+  function onDragStart (e) {
     e.dataTransfer.setData('idDragged', e.target.getAttribute('data-id'))
   }
 
-  // sort quick commands array when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id, then set window.store.quickCommands use window.store.setItems
-  onDrop = e => {
-    onDrop(e, '.qm-item')
+  function onDrop (e) {
+    onDropFunc(e, '.qm-item')
   }
 
-  renderNoCmd = () => {
+  function renderNoCmd () {
     return (
       <div className='pd1'>
         <Button
           type='primary'
-          onClick={this.props.store.handleOpenQuickCommandsSetting}
+          onClick={window.store.handleOpenQuickCommandsSetting}
         >
           {e(addQuickCommands)}
         </Button>
@@ -107,24 +101,24 @@ export default class QuickCommandsFooterBox extends Component {
     )
   }
 
-  renderItem = (item) => {
+  function renderItem (item) {
     const {
       qmSortByFrequency
-    } = this.props.store
+    } = props
     return (
       <CmdItem
         item={item}
         key={item.id}
-        onSelect={this.handleSelect}
+        onSelect={handleSelect}
         draggable={!qmSortByFrequency}
-        handleDragOver={this.onDragOver}
-        handleDragStart={this.onDragStart}
-        handleDrop={this.onDrop}
+        handleDragOver={onDragOver}
+        handleDragStart={onDragStart}
+        handleDrop={onDrop}
       />
     )
   }
 
-  renderTag = tag => {
+  function renderTag (tag) {
     return (
       <Option
         value={tag}
@@ -135,7 +129,7 @@ export default class QuickCommandsFooterBox extends Component {
     )
   }
 
-  sortArray (array, keyword, labels, qmSortByFrequency) {
+  function sortArray (array, keyword, labels, qmSortByFrequency) {
     const sorters = [
       (obj) => !(keyword && obj.name.toLowerCase().includes(keyword)),
       (obj) => !labels.some((label) => (obj.labels || []).includes(label))
@@ -146,113 +140,110 @@ export default class QuickCommandsFooterBox extends Component {
     return sortBy(array, sorters)
   }
 
-  render () {
-    const {
-      openQuickCommandBar,
-      pinnedQuickCommandBar,
-      qmSortByFrequency,
-      inActiveTerminal,
-      leftSidebarWidth,
-      openedSideBar
-    } = this.props.store
-    if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
-      return null
-    }
-    const all = this.props.store.currentQuickCommands
-    if (!all.length) {
-      return this.renderNoCmd()
-    }
-    const keyword = this.state.keyword.toLowerCase()
-    const { labels } = this.state
-    const filtered = this.sortArray(all, keyword, labels, qmSortByFrequency)
-      .map(d => {
-        return {
-          ...d,
-          nameMatch: keyword && d.name.toLowerCase().includes(keyword),
-          labelMatch: labels.some((label) => (d.labels || []).includes(label))
-        }
-      })
-    const sprops = {
-      value: labels,
-      mode: 'multiple',
-      onChange: this.handleChangeLabels,
-      placeholder: e('labels'),
-      className: 'iblock',
-      style: {
-        minWidth: '100px'
+  const {
+    openQuickCommandBar,
+    pinnedQuickCommandBar,
+    qmSortByFrequency,
+    inActiveTerminal,
+    leftSidebarWidth,
+    openedSideBar
+  } = props
+  if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
+    return null
+  }
+  const all = props.currentQuickCommands
+  if (!all.length) {
+    return renderNoCmd()
+  }
+  const keyword0 = keyword.toLowerCase()
+  const filtered = sortArray(all, keyword0, labels, qmSortByFrequency)
+    .map(d => {
+      return {
+        ...d,
+        nameMatch: keyword && d.name.toLowerCase().includes(keyword),
+        labelMatch: labels.some((label) => (d.labels || []).includes(label))
       }
+    })
+  const sprops = {
+    value: labels,
+    mode: 'multiple',
+    onChange: handleChangeLabels,
+    placeholder: e('labels'),
+    className: 'iblock',
+    style: {
+      minWidth: '100px'
     }
-    const tp = pinnedQuickCommandBar
-      ? 'primary'
-      : 'ghost'
-    const cls = classNames(
-      'qm-list-wrap',
-      { 'fil-label': !!this.state.labels.length },
-      { '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
-        {...qmProps}
-      >
-        <div className='pd2'>
-          <div className='pd2b fix'>
-            <span className='fleft'>
-              <Input.Search
-                value={this.state.keyword}
-                onChange={this.handleChange}
-                placeholder=''
-                className='iblock qm-search-input'
+  }
+  const tp = pinnedQuickCommandBar
+    ? 'primary'
+    : 'ghost'
+  const cls = classNames(
+    'qm-list-wrap',
+    { 'fil-label': !!labels.length },
+    { 'fil-keyword': !!keyword }
+  )
+  const type = qmSortByFrequency ? 'primary' : 'default'
+  const w = openedSideBar ? 43 + leftSidebarWidth : 43
+  const qmProps = {
+    className: 'qm-wrap-tooltip',
+    style: {
+      left: w
+    },
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter
+  }
+  return (
+    <div
+      {...qmProps}
+    >
+      <div className='pd2'>
+        <div className='pd2b fix'>
+          <span className='fleft'>
+            <Input.Search
+              value={keyword}
+              onChange={handleChange}
+              placeholder=''
+              className='iblock qm-search-input'
+            />
+          </span>
+          <span className='fleft mg1l'>
+            <Select
+              {...sprops}
+            >
+              {props.quickCommandTags.map(
+                renderTag
+              )}
+            </Select>
+            <Button
+              className='mg1l iblock'
+              type={type}
+              onClick={window.store.handleSortByFrequency}
+            >
+              {e('sortByFrequency')}
+            </Button>
+          </span>
+          <span className='fright'>
+            <Space.Compact>
+              <Button
+                onClick={handleTogglePinned}
+                icon={<PushpinOutlined />}
+                type={tp}
+              />
+              <Button
+                onClick={window.store.handleOpenQuickCommandsSetting}
+                icon={<EditOutlined />}
               />
-            </span>
-            <span className='fleft mg1l'>
-              <Select
-                {...sprops}
-              >
-                {this.props.store.quickCommandTags.map(
-                  this.renderTag
-                )}
-              </Select>
               <Button
-                className='mg1l iblock'
-                type={type}
-                onClick={this.props.store.handleSortByFrequency}
-              >
-                {e('sortByFrequency')}
-              </Button>
-            </span>
-            <span className='fright'>
-              <Space.Compact>
-                <Button
-                  onClick={this.handleTogglePinned}
-                  icon={<PushpinOutlined />}
-                  type={tp}
-                />
-                <Button
-                  onClick={this.props.store.handleOpenQuickCommandsSetting}
-                  icon={<EditOutlined />}
-                />
-                <Button
-                  onClick={this.handleClose}
-                  icon={<CloseCircleOutlined />}
-                />
-              </Space.Compact>
-            </span>
-          </div>
-          <div className={cls}>
-            {filtered.map(this.renderItem)}
-          </div>
+                onClick={handleClose}
+                icon={<CloseCircleOutlined />}
+              />
+            </Space.Compact>
+          </span>
+        </div>
+        <div className={cls}>
+          {filtered.map(renderItem)}
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }

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

@@ -9,6 +9,11 @@ import './qm.styl'
 const e = window.translate
 
 export default class QuickCommandsFooter extends PureComponent {
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+    this.timer = null
+  }
+
   handleOpen = () => {
     this.timer = setTimeout(this.act, 500)
   }
@@ -23,11 +28,13 @@ export default class QuickCommandsFooter extends PureComponent {
 
   render () {
     return (
-      <div className='fleft relative'>
+      <div
+        className='fleft relative'
+        onMouseEnter={this.handleOpen}
+        onMouseLeave={this.handleMouseLeave}
+      >
         <Button
           size='small'
-          onMouseEnter={this.handleOpen}
-          onMouseLeave={this.handleMouseLeave}
           type='ghost'
         >
           <span className='w500'>{e('quickCommands')}</span>

package/client/components/rdp/rdp-session.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import { createTerm } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
 import clone from '../../common/to-simple-obj'
@@ -22,7 +22,7 @@ import resolutions from './resolutions'
 
 const { Option } = Select
 
-export default class RdpSession extends Component {
+export default class RdpSession extends PureComponent {
   constructor (props) {
     const id = `rdp-reso-${props.tab.host}`
     const resObj = ls.getItemJSON(id, resolutions[0])
@@ -55,21 +55,6 @@ export default class RdpSession extends Component {
     })
   }
 
-  computeProps = () => {
-    const {
-      height,
-      width,
-      tabsHeight,
-      leftSidebarWidth,
-      pinned,
-      openedSideBar
-    } = this.props
-    return {
-      width: width - (pinned && openedSideBar ? leftSidebarWidth : 0) - 42,
-      height: height - tabsHeight
-    }
-  }
-
   remoteInit = async (term = this.term) => {
     this.setState({
       loading: true
@@ -202,8 +187,6 @@ export default class RdpSession extends Component {
   }
 
   handleCanvasEvent = e => {
-    // e.preventDefault()
-    // console.log('e', e)
     const {
       type,
       clientX,
@@ -215,7 +198,6 @@ export default class RdpSession extends Component {
     } = e.target.getBoundingClientRect()
     const x = clientX - left
     const y = clientY - top
-    // console.log('x,y', x, y, left, top, clientX, clientY, pageX, pageY)
     const keyCode = this.getKeyCode(e)
     const action = type.startsWith('key')
       ? 'sendKeyEventScancode'
@@ -230,7 +212,6 @@ export default class RdpSession extends Component {
       const isHorizontal = false
       const delta = isHorizontal ? e.deltaX : e.deltaY
       const step = Math.round(Math.abs(delta) * 15 / 8)
-      // console.log(x, y, step, delta, isHorizontal)
       params = [x, y, step, delta > 0, isHorizontal]
     } else if (type === 'keydown' || type === 'keyup') {
       params = [keyCode, pressed]
@@ -242,7 +223,6 @@ export default class RdpSession extends Component {
   }
 
   onData = async (msg) => {
-    // console.log('msg', msg.data)
     let { data } = msg
     data = JSON.parse(data)
     if (data.action === 'session-rdp-connected') {
@@ -409,7 +389,7 @@ export default class RdpSession extends Component {
   }
 
   render () {
-    const { width: w, height: h } = this.computeProps()
+    const { width: w, height: h } = this.props
     const rdpProps = {
       style: {
         width: w + 'px',

package/client/components/rdp/resolution-edit.jsx

@@ -1,63 +1,61 @@
-import { Component } from '../common/react-subx'
+// import { memo } from 'react'
 import ResolutionForm from './resolution-form'
 import {
   Modal
 } from 'antd'
 import uid from '../../common/uid'
 
-export default class Resolutions extends Component {
-  remove = id => {
-    const { store } = this.props
-    const { resolutions } = store
+export default function Resolutions (props) {
+  function remove (id) {
+    const { resolutions } = props
     const index = resolutions.findIndex(d => d.id === id)
     if (index < 0) {
       return
     }
     resolutions.splice(index, 1)
-    store.setState('resolutions', resolutions)
+    window.store.setState('resolutions', resolutions)
   }
 
-  submit = (data) => {
-    const { store } = this.props
-    const { resolutions } = store
+  function submit (data) {
+    const { resolutions } = props
     resolutions.push({
       ...data,
       id: uid()
     })
-    store.setState('resolutions', resolutions)
+    window.store.setState('resolutions', resolutions)
   }
 
-  render () {
-    const {
-      openResolutionEdit,
-      toggleResolutionEdit,
-      resolutions
-    } = this.props.store
-    if (!openResolutionEdit) {
-      return null
-    }
-    const modalProps = {
-      footer: null,
-      visible: true,
-      onCancel: () => toggleResolutionEdit()
-    }
-    const resList = {
-      list: resolutions,
-      initialValues: {
-        width: 1600,
-        height: 900
-      },
-      remove: this.remove,
-      submit: this.submit
-    }
-    return (
-      <Modal
-        {...modalProps}
-      >
-        <ResolutionForm
-          {...resList}
-        />
-      </Modal>
-    )
+  const {
+    resolutions
+  } = props
+  const {
+    openResolutionEdit,
+    toggleResolutionEdit
+  } = window.store
+  if (!openResolutionEdit) {
+    return null
+  }
+  const modalProps = {
+    footer: null,
+    visible: true,
+    onCancel: () => toggleResolutionEdit()
+  }
+  const resList = {
+    list: resolutions,
+    initialValues: {
+      width: 1600,
+      height: 900
+    },
+    remove,
+    submit
   }
+  return (
+    <Modal
+      {...modalProps}
+    >
+      <ResolutionForm
+        {...resList}
+      />
+    </Modal>
+  )
 }