feat: New quick command UI and support quick command export/import

src/client/components/quick-commands/qm.styl

@@ -0,0 +1,7 @@
+@require '../../css/includes/theme-default'
+.qm-list-wrap
+  max-height calc(100vh - 100px)
+  overflow-y scroll
+.qm-trigger
+  color text-disabled
+  background main-dark

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

@@ -0,0 +1,31 @@
+/**
+ * quick commands footer selection
+ */
+
+import {
+  PureComponent
+} from 'react'
+import {
+  Button
+} from 'antd'
+
+export default class QuickCommandsItem extends PureComponent {
+  onSelect = (id) => {
+    this.props.onSelect(
+      this.props.item.id
+    )
+  }
+
+  render () {
+    const { name, id } = this.props.item
+    return (
+      <Button
+        key={id}
+        className='mg1r mg1b'
+        onClick={this.onSelect}
+      >
+        {name}
+      </Button>
+    )
+  }
+}

src/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -0,0 +1,51 @@
+import BookmarkTransport from '../setting-panel/bookmark-transport'
+import download from '../../common/download'
+import time from '../../../app/common/time'
+import copy from 'json-deep-copy'
+
+export default class QmTransport extends BookmarkTransport {
+  beforeUpload = (file) => {
+    const { store } = this.props
+    const txt = window.pre
+      .readFileSync(file.path).toString()
+    try {
+      const quickCommands = JSON.parse(txt)
+      const quickCommandsOld = copy(store.quickCommands)
+      const bmTreeOld = quickCommandsOld.reduce((p, v) => {
+        return {
+          ...p,
+          [v.id]: v
+        }
+      }, {})
+      const add = []
+      const dbAdd = []
+      quickCommands.forEach(bg => {
+        if (!bmTreeOld[bg.id]) {
+          quickCommandsOld.push(bg)
+          add.push(bg)
+          dbAdd.push({
+            db: 'quickCommands',
+            obj: bg
+          })
+        }
+      })
+      store.storeAssign({
+        quickCommands: quickCommandsOld
+      })
+      store.batchDbAdd(dbAdd)
+    } catch (e) {
+      store.onError(e)
+    }
+    return false
+  }
+
+  down = () => {
+    const { store } = this.props
+    const {
+      quickCommands
+    } = store
+    const txt = JSON.stringify(quickCommands, null, 2)
+    const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
+    download('quickCommands-' + stamp + '.json', txt)
+  }
+}

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

@@ -0,0 +1,12 @@
+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>
+    )
+  }
+}

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

@@ -5,15 +5,25 @@
 import { Component } from '../common/react-subx'
 import { isWin } from '../../common/constants'
 import _ from 'lodash'
-import { Select } from 'antd'
+import { Popover, Button, Input } from 'antd'
 import copy from 'json-deep-copy'
+import CmdItem from './quick-command-item'
+import {
+  EditOutlined,
+  CloseCircleOutlined
+} from '@ant-design/icons'
+import './qm.styl'
 
-const { Option } = Select
 const { prefix } = window
 const e = prefix('quickCommands')
 const addQuickCommands = 'addQuickCommands'
 
 export default class QuickCommandsFooter extends Component {
+  state = {
+    visible: false,
+    keyword: ''
+  }
+
   onSelect = (id) => {
     if (id === addQuickCommands) {
       this.props.store.openQuickCommandsSetting()
@@ -35,13 +45,96 @@ export default class QuickCommandsFooter extends Component {
     }
   }
 
+  handleHoverChange = (v) => {
+    this.setState({
+      visible: v
+    })
+  }
+
+  close = () => {
+    this.setState({
+      visible: false
+    })
+  }
+
+  handleChange = e => {
+    this.setState({
+      keyword: e.target.value,
+      visible: true
+    })
+  }
+
   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)
   }
 
+  renderNoCmd = () => {
+    return (
+      <div className='pd1'>
+        <Button
+          type='primary'
+          onClick={this.props.store.openQuickCommandsSetting}
+        >
+          {e(addQuickCommands)}
+        </Button>
+      </div>
+    )
+  }
+
+  renderItem = (item) => {
+    return (
+      <CmdItem
+        item={item}
+        key={item.id}
+        onSelect={this.onSelect}
+      />
+    )
+  }
+
+  content = () => {
+    const all = copy(this.props.store.currentQuickCommands)
+    if (!all.length) {
+      return this.renderNoCmd()
+    }
+    const keyword = this.state.keyword.toLowerCase()
+    const filtered = keyword
+      ? all.filter(d => {
+        return d.name.toLowerCase().includes(keyword) || d.command.toLowerCase().includes(keyword)
+      })
+      : all
+    return (
+      <div>
+        <div className='pd2b fix'>
+          <span className='fleft'>
+            <Input.Search
+              value={this.state.keyword}
+              onChange={this.handleChange}
+              placeholder=''
+              className='iblock'
+            />
+          </span>
+          <span className='fright'>
+            <Button
+              className='mg1x iblock'
+              onClick={this.props.store.openQuickCommandsSetting}
+              icon={<EditOutlined />}
+            />
+            <Button
+              onClick={this.close}
+              icon={<CloseCircleOutlined />}
+            />
+          </span>
+        </div>
+        <div className='qm-list-wrap'>
+          {filtered.map(this.renderItem)}
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const all = copy(this.props.store.currentQuickCommands)
     if (!all.length) {
@@ -50,31 +143,23 @@ export default class QuickCommandsFooter extends Component {
         name: e(addQuickCommands)
       })
     }
+    const rProps = {
+      trigger: 'hover',
+      visible: this.state.visible,
+      content: this.content(),
+      onVisibleChange: this.handleHoverChange
+    }
     return (
       <div className='fleft relative'>
-        <Select
-          style={{
-            width: 200
-          }}
-          value={undefined}
-          placeholder={e('quickCommands')}
-          onSelect={this.onSelect}
-          autoFocus
-          size='small'
-          showSearch
-          optionFilterProp='children'
-          filterOption={this.filterFunc}
+        <Popover
+          {...rProps}
         >
-          {
-            all.map((qc, i) => {
-              return (
-                <Option key={qc.id + '-' + i} value={qc.id} cmd={qc.command}>
-                  {qc.name}
-                </Option>
-              )
-            })
-          }
-        </Select>
+          <Button
+            size='small'
+            type='ghost'
+            className='qm-trigger'
+          >{e('quickCommands')}</Button>
+        </Popover>
       </div>
     )
   }