@electerm/electerm-react 1.39.47 → 1.39.68

package/client/components/batch-op/batch-op.jsx

@@ -22,6 +22,7 @@ import {
   modals
 } from '../../common/constants'
 import HelpIcon from '../common/help-icon'
+import download from '../../common/download'
 import { autoRun } from 'manate'
 import { pick } from 'lodash-es'
 import { runCmd } from '../terminal/terminal-apis'
@@ -48,6 +49,45 @@ export default class BatchOp extends Component {
     tab: 'tasks'
   }
 
+  exampleColumns = [
+    { title: f('host'), dataIndex: 'host', key: 'host' },
+    { title: f('port'), dataIndex: 'port', key: 'port', responsive: ['md'] },
+    { title: f('username'), dataIndex: 'username', key: 'username', responsive: ['lg'] },
+    { title: f('password'), dataIndex: 'password', key: 'password', responsive: ['xl'] },
+    { title: 'Command', dataIndex: 'command', key: 'command', responsive: ['lg'] },
+    { title: t('localPath'), dataIndex: 'localPath', key: 'localPath', responsive: ['xl'] },
+    { title: t('remotePath'), dataIndex: 'remotePath', key: 'remotePath', responsive: ['xl'] },
+    { title: 'Action', dataIndex: 'action', key: 'action', responsive: ['md'] },
+    { title: 'Command After', dataIndex: 'commandAfter', key: 'commandAfter', responsive: ['xl'] }
+  ]
+
+  exampleData = [
+    {
+      key: '1',
+      host: '192.168.1.3',
+      port: '22',
+      username: 'username',
+      password: 'password',
+      command: 'touch yy.js && ls -al',
+      localPath: '/home/user/some_local_file_or_folder_to_upload',
+      remotePath: '/server/some_server_folder_for_upload',
+      action: 'upload',
+      commandAfter: 'touch yy1.js && ls -al'
+    },
+    {
+      key: '2',
+      host: '192.168.1.3',
+      port: '22',
+      username: 'username',
+      password: 'password',
+      command: 'ls -al',
+      localPath: '/home/user/some_local_folder_for_download',
+      remotePath: '/server/some_server_file_or_folder',
+      action: 'download',
+      commandAfter: 'ls'
+    }
+  ]
+
   componentDidMount () {
     this.watch()
   }
@@ -64,6 +104,15 @@ export default class BatchOp extends Component {
     window.removeEventListener('message', this.handleEvent)
   }
 
+  handleDownloadExample = () => {
+    const csvText = this.exampleData.map(d => {
+      return Object.keys(d).filter(d => d !== 'key').map(k => {
+        return d[k]
+      }).join(',')
+    }).join('\n')
+    download('batch-op-example.csv', csvText)
+  }
+
   handleEvent = e => {
     if (e && e.data && e.data.action === commonActions.batchOp) {
       const {
@@ -448,6 +497,14 @@ export default class BatchOp extends Component {
       working
     } = this.state
     const disabled = loading || working
+    const exampleTableProps = {
+      dataSource: this.exampleData,
+      columns: this.exampleColumns,
+      pagination: false,
+      size: 'small',
+      rowKey: 'key'
+    }
+
     return (
       <div>
         <div className='pd1y'>
@@ -458,12 +515,25 @@ export default class BatchOp extends Component {
             />
           </h2>
           <div className='pd1y'>{c('examples')}:</div>
-          <pre>
-            <code>"192.168.1.3","22","username","password","touch yy.js && ls -al","/home/user/some_local_file_or_folder_to_upload","/server/some_server_folder_for_upload","upload","touch yy1.js && ls -al"</code>
-          </pre>
-          <pre>
-            <code>"192.168.1.3","22","username","password","ls -al","/home/user/some_local_folder_for_download","/server/some_server_file_or_folder","download","ls"</code>
-          </pre>
+          <Table
+            {...exampleTableProps}
+          />
+          <div className='pd1t pd2b'>
+            <Button
+              onClick={this.handleDownloadExample}
+              type='dashed'
+            >
+              Download example csv
+            </Button>
+          </div>
+          <div className='pd2y'>
+            <pre>
+              <code>"192.168.1.3","22","username","password","touch yy.js && ls -al","/home/user/some_local_file_or_folder_to_upload","/server/some_server_folder_for_upload","upload","touch yy1.js && ls -al"</code>
+            </pre>
+            <pre>
+              <code>"192.168.1.3","22","username","password","ls -al","/home/user/some_local_folder_for_download","/server/some_server_file_or_folder","download","ls"</code>
+            </pre>
+          </div>
         </div>
         {this.renderErrors()}
         <div className='pd1y'>

package/client/components/main/main.jsx

@@ -81,9 +81,11 @@ export default class Index extends Component {
     } = 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 && !window.et.isWebApp,
+      'is-mac': isMac,
+      'not-mac': !isMac,
       'is-win': isWin,
       pinned,
       'qm-pinned': pinnedQuickCommandBar,

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

@@ -18,7 +18,7 @@ export default class QuickCommandsItem extends PureComponent {
   }
 
   render () {
-    const { name, id, nameMatch, labelMatch } = this.props.item
+    const { name, id, nameMatch, labelMatch, shortcut } = this.props.item
     const {
       draggable,
       handleDragOver,
@@ -29,16 +29,20 @@ export default class QuickCommandsItem extends PureComponent {
       'name-match': nameMatch,
       'label-match': labelMatch
     })
+    const btnProps = {
+      className: cls,
+      onClick: this.handleSelect,
+      'data-id': id,
+      title: shortcut,
+      draggable,
+      onDragOver: handleDragOver,
+      onDragStart: handleDragStart,
+      onDrop: handleDrop
+    }
     return (
       <Button
         key={id}
-        className={cls}
-        onClick={this.handleSelect}
-        data-id={id}
-        draggable={draggable}
-        onDragOver={handleDragOver}
-        onDragStart={handleDragStart}
-        onDrop={handleDrop}
+        {...btnProps}
       >
         {name}
       </Button>

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

@@ -3,13 +3,11 @@
  */
 
 import { Component } from '../common/react-subx'
-import { isWin, quickCommandLabelsLsKey } from '../../common/constants'
-import { find, sortBy } from 'lodash-es'
+import { quickCommandLabelsLsKey } from '../../common/constants'
+import { sortBy } from 'lodash-es'
 import { Button, Input, Select, Space } from 'antd'
 import * as ls from '../../common/safe-local-storage'
-import generate from '../../common/uid'
 import CmdItem from './quick-command-item'
-import delay from '../../common/wait'
 import {
   EditOutlined,
   CloseCircleOutlined,
@@ -54,33 +52,7 @@ export default class QuickCommandsFooterBox extends Component {
     if (id === addQuickCommands) {
       store.handleOpenQuickCommandsSetting()
     } else {
-      const qm = find(
-        this.props.store.currentQuickCommands,
-        a => a.id === id
-      )
-      const { runQuickCommand } = this.props.store
-      const qms = qm && qm.commands
-        ? qm.commands
-        : (qm && qm.command
-            ? [
-                {
-                  command: qm.command,
-                  id: generate(),
-                  delay: 100
-                }
-              ]
-            : []
-          )
-      for (const q of qms) {
-        const realCmd = isWin
-          ? q.command.replace(/\n/g, '\n\r')
-          : q.command
-        await delay(q.delay || 100)
-        runQuickCommand(realCmd, qm.inputOnly)
-        store.editQuickCommand(qm.id, {
-          clickCount: ((qm.clickCount || 0) + 1)
-        })
-      }
+      store.runQuickCommandItem(id)
     }
   }
 

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -1,48 +1,118 @@
-import { Button, Switch, Form, message, Select } from 'antd'
-import copy from 'json-deep-copy'
+import {
+  Button,
+  Switch,
+  Form,
+  message,
+  Select,
+  Input
+} from 'antd'
+import { useState } from 'react'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
 import renderQm from './quick-commands-list-form'
+import ShortcutEdit from '../shortcuts/shortcut-editor'
+import shortcutsDefaultsGen from '../shortcuts/shortcuts-defaults'
+import deepCopy from 'json-deep-copy'
+import {
+  isMacJs as isMac
+} from '../../common/constants.js'
+
 const FormItem = Form.Item
 const { Option } = Select
 const { prefix } = window
 const e = prefix('form')
 const t = prefix('quickCommands')
 const s = prefix('setting')
+const shortcutsDefaults = shortcutsDefaultsGen()
 
 export default function QuickCommandForm (props) {
   const [form] = Form.useForm()
-  const { autofocustrigger, quickCommandTags = [] } = props.store
+  const { store, formData } = props
+  const { autofocustrigger, quickCommandTags = [] } = store
+  const [shortcut, setShortcut] = useState(formData.shortcut || '')
+  const uid = formData.id || generate()
+  const updateConfig = (name, value) => {
+    form.setFieldsValue({
+      shortcut: value
+    })
+    setShortcut(value)
+  }
+  const handleClear = () => {
+    console.log('handleClear')
+    form.setFieldsValue({
+      shortcut: ''
+    })
+    setShortcut('')
+  }
+  const getKeysTakenData = () => {
+    const { shortcuts = {} } = store.config
+    const { quickCommands = [] } = store
+
+    // Gather system shortcuts
+    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
+      const propName = isMac ? 'shortcutMac' : 'shortcut'
+      const name = k.name + '_' + propName
+      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
+      const v = vv
+        .split(',')
+        .map(f => f.trim())
+        .reduce((p, k) => ({
+          ...p,
+          [k]: true
+        }), {})
+      return {
+        ...p,
+        ...v
+      }
+    }, {})
+
+    // Gather quick command shortcuts
+    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
+      if (command.shortcut) {
+        acc[command.shortcut] = true
+      }
+      return acc
+    }, {})
+
+    // Combine system shortcuts and quick command shortcuts
+    return {
+      ...systemShortcuts,
+      ...quickCommandShortcuts
+    }
+  }
+
   async function handleSubmit (res) {
     const { formData } = props
     const {
       name,
       commands,
       inputOnly,
-      labels
+      labels,
+      shortcut
     } = res
-    const update = copy({
+    const update = deepCopy({
       name,
       commands,
       inputOnly,
-      labels
+      labels,
+      shortcut
     })
     const update1 = {
       ...update,
-      id: generate()
+      id: uid
     }
     if (formData.id) {
-      props.store.editQuickCommand(formData.id, update)
+      store.editQuickCommand(formData.id, update)
     } else {
-      props.store.addQuickCommand(update1)
-      props.store.setSettingItem({
+      store.addQuickCommand(update1)
+      store.setSettingItem({
         id: '',
         name: t('newQuickCommand')
       })
     }
     message.success(s('saved'))
   }
-  const initialValues = props.formData
+  const initialValues = formData
   if (!initialValues.labels) {
     initialValues.labels = []
   }
@@ -53,6 +123,18 @@ export default function QuickCommandForm (props) {
       delay: 100
     }]
   }
+  console.log('initialValues', initialValues, formData)
+  const editorProps = {
+    data: {
+      name: uid,
+      shortcut
+    },
+    keysTaken: getKeysTakenData(),
+    store,
+    updateConfig,
+    handleClear,
+    renderClear: true
+  }
   return (
     <Form
       form={form}
@@ -95,6 +177,17 @@ export default function QuickCommandForm (props) {
           }
         </Select>
       </FormItem>
+      <FormItem
+        label={s('settingShortcuts')}
+        name='shortcut'
+      >
+        <div>
+          <Input className='hide' />
+          <ShortcutEdit
+            {...editorProps}
+          />
+        </div>
+      </FormItem>
       <FormItem
         label={t('inputOnly')}
         name='inputOnly'

package/client/components/setting-panel/keywords-form.jsx

@@ -26,6 +26,10 @@ export default function KeywordForm (props) {
     formChild.submit()
   }
 
+  function handleChange (e) {
+    formChild.submit()
+  }
+
   function handleFinish (data) {
     props.submit(data)
   }
@@ -34,7 +38,7 @@ export default function KeywordForm (props) {
     try {
       return Promise.resolve(!!new RegExp(`(${value})`, 'gi'))
     } catch (e) {
-      console.log(e)
+      console.log(e, 'check keyword error')
       return Promise.reject(e)
     }
   }
@@ -57,6 +61,7 @@ export default function KeywordForm (props) {
           >
             <Input
               addonBefore={renderBefore(field.name)}
+              onChange={handleChange}
             />
           </FormItem>
         </FormItem>
@@ -121,7 +126,9 @@ export default function KeywordForm (props) {
                     <FormItem>
                       <Button
                         type='dashed'
-                        onClick={() => add()}
+                        onClick={() => add({
+                          color: 'red'
+                        })}
                         icon={<PlusOutlined />}
                       >
                         {f('keyword')}

package/client/components/shortcuts/shortcut-editor.jsx

@@ -143,16 +143,30 @@ export default class ShortcutEdit extends PureComponent {
     return (
       <Button
         className='edit-shortcut-button'
-        onClick={this.handleEditClick}
       >
         <span>{shortcut}</span>
         <EditFilled
           className='shortcut-edit-icon pointer mg1l'
+          onClick={this.handleEditClick}
         />
+        {
+          this.renderClear()
+        }
       </Button>
     )
   }
 
+  renderClear () {
+    if (this.props.renderClear && this.props.data.shortcut) {
+      return (
+        <CloseOutlined
+          className='pointer mg1l'
+          onClick={this.props.handleClear}
+        />
+      )
+    }
+  }
+
   renderAfter () {
     const {
       shortcut

package/client/components/shortcuts/shortcut-handler.js

@@ -102,6 +102,14 @@ export function shortcutExtend (Cls) {
     const shortcutsConfig = buildConfig(this.props.config, d => !d.hidden)
     const keys = Object.keys(shortcutsConfig)
     const len = keys.length
+    if (this.term) {
+      const qmMatch = window.store.quickCommands.find(d => d.shortcut === r)
+      if (qmMatch) {
+        window.store.runQuickCommandItem(
+          qmMatch.id
+        )
+      }
+    }
     for (let i = 0; i < len; i++) {
       const k = keys[i]
       const conf = shortcutsConfig[k]

package/client/components/shortcuts/shortcuts.jsx

@@ -51,26 +51,41 @@ export default class Shortcuts extends Component {
   }
 
   getKeysTakenData = () => {
-    const { shortcuts = {} } = this.props.store.config
-    return shortcutsDefaults
-      .reduce((p, k) => {
-        const propName = isMac ? 'shortcutMac' : 'shortcut'
-        const name = k.name + '_' + propName
-        const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
-        const v = vv
-          .split(',')
-          .map(f => f.trim())
-          .reduce((p, k, i) => {
-            return {
-              ...p,
-              [k]: true
-            }
-          }, {})
-        return {
+    const { store } = this.props
+    const { shortcuts = {} } = store.config
+    const { quickCommands = [] } = store
+
+    // Gather system shortcuts
+    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
+      const propName = isMac ? 'shortcutMac' : 'shortcut'
+      const name = k.name + '_' + propName
+      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
+      const v = vv
+        .split(',')
+        .map(f => f.trim())
+        .reduce((p, k) => ({
           ...p,
-          ...v
-        }
-      }, {})
+          [k]: true
+        }), {})
+      return {
+        ...p,
+        ...v
+      }
+    }, {})
+
+    // Gather quick command shortcuts
+    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
+      if (command.shortcut) {
+        acc[command.shortcut] = true
+      }
+      return acc
+    }, {})
+
+    // Combine system shortcuts and quick command shortcuts
+    return {
+      ...systemShortcuts,
+      ...quickCommandShortcuts
+    }
   }
 
   render () {
@@ -113,7 +128,7 @@ export default class Shortcuts extends Component {
         }
       },
       {
-        title: s('shortcut'),
+        title: s('settingShortcuts'),
         dataIndex: 'shortcut',
         key: 'shortcut',
         render: (shortcut, inst) => {

package/client/components/tabs/tabs.styl

@@ -7,9 +7,10 @@
   ::-webkit-scrollbar
     width 0
     display none
-.not-system-ui.is-mac
+.not-system-ui.is-mac.not-webapp
   .tabs-inner
     margin-left 72px
+.not-system-ui.not-mac.not-webapp
   .tabs-extra
     right 96px
 .tabs-inner

package/client/components/terminal-info/content.jsx

@@ -19,6 +19,7 @@ import {
   PushpinOutlined
 } from '@ant-design/icons'
 import classNames from 'classnames'
+import './terminal-info.styl'
 
 export default class TerminalInfoContent extends PureComponent {
   state = {

package/client/store/quick-command.js

@@ -5,8 +5,11 @@
 import {
   settingMap,
   qmSortByFrequencyKey,
-  terminalActions
+  terminalActions,
+  isWin
 } from '../common/constants'
+import delay from '../common/wait'
+import generate from '../common/uid'
 import postMessage from '../common/post-msg'
 import * as ls from '../common/safe-local-storage'
 
@@ -39,6 +42,39 @@ export default Store => {
     })
   }
 
+  Store.prototype.runQuickCommandItem = async (id) => {
+    const {
+      store
+    } = window
+
+    const qm = store.currentQuickCommands.find(
+      a => a.id === id
+    )
+    const { runQuickCommand } = store
+    const qms = qm && qm.commands
+      ? qm.commands
+      : (qm && qm.command
+          ? [
+              {
+                command: qm.command,
+                id: generate(),
+                delay: 100
+              }
+            ]
+          : []
+        )
+    for (const q of qms) {
+      const realCmd = isWin
+        ? q.command.replace(/\n/g, '\n\r')
+        : q.command
+      await delay(q.delay || 100)
+      runQuickCommand(realCmd, qm.inputOnly)
+      store.editQuickCommand(qm.id, {
+        clickCount: ((qm.clickCount || 0) + 1)
+      })
+    }
+  }
+
   Store.prototype.setQmSortByFrequency = function (v) {
     window.store.qmSortByFrequency = v
     ls.setItem(qmSortByFrequencyKey, v ? 'yes' : 'no')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.39.47",
+  "version": "1.39.68",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",