@electerm/electerm-react 1.34.30

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

@@ -0,0 +1,233 @@
+/**
+ * quick commands footer selection wrap
+ */
+
+import { Component } from '../common/react-subx'
+import { isWin, quickCommandLabelsLsKey } from '../../common/constants'
+import { find, sortBy } from 'lodash-es'
+import { Button, Input, Select, Space } from 'antd'
+import * as ls from '../../common/safe-local-storage'
+import copy from 'json-deep-copy'
+import CmdItem from './quick-command-item'
+import {
+  EditOutlined,
+  CloseCircleOutlined,
+  PushpinOutlined
+} from '@ant-design/icons'
+import classNames from 'classnames'
+import './qm.styl'
+
+const { prefix } = window
+const e = prefix('quickCommands')
+const addQuickCommands = 'addQuickCommands'
+const { Option } = Select
+
+export default class QuickCommandsFooterBox extends Component {
+  state = {
+    keyword: '',
+    labels: ls.getItemJSON(quickCommandLabelsLsKey, [])
+  }
+
+  handleMouseLeave = () => {
+    this.timer = setTimeout(() => {
+      this.toggle(false)
+    }, 500)
+  }
+
+  handleMouseEnter = () => {
+    clearTimeout(this.timer)
+  }
+
+  toggle = (openQuickCommandBar) => {
+    this.props.store.openQuickCommandBar = openQuickCommandBar
+  }
+
+  handleTogglePinned = () => {
+    this.props.store.pinnedQuickCommandBar = !this.props.store.pinnedQuickCommandBar
+  }
+
+  handleSelect = (id) => {
+    const {
+      store
+    } = this.props
+    if (id === addQuickCommands) {
+      store.handleOpenQuickCommandsSetting()
+    } else {
+      const qm = find(
+        this.props.store.currentQuickCommands,
+        a => a.id === id
+      )
+      if (qm && qm.command) {
+        const { runQuickCommand } = this.props.store
+        const realCmd = isWin
+          ? qm.command.replace(/\n/g, '\n\r')
+          : qm.command
+        runQuickCommand(realCmd, qm.inputOnly)
+        store.editQuickCommand(qm.id, {
+          clickCount: ((qm.clickCount || 0) + 1)
+        })
+      }
+    }
+  }
+
+  handleClose = () => {
+    this.props.store.pinnedQuickCommandBar = false
+    this.props.store.openQuickCommandBar = false
+  }
+
+  handleChange = e => {
+    this.setState({
+      keyword: e.target.value
+    })
+  }
+
+  handleChangeLabels = (v) => {
+    ls.setItemJSON(quickCommandLabelsLsKey, v)
+    this.setState({
+      labels: 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)
+  }
+
+  renderNoCmd = () => {
+    return (
+      <div className='pd1'>
+        <Button
+          type='primary'
+          onClick={this.props.store.handleOpenQuickCommandsSetting}
+        >
+          {e(addQuickCommands)}
+        </Button>
+      </div>
+    )
+  }
+
+  renderItem = (item) => {
+    return (
+      <CmdItem
+        item={item}
+        key={item.id}
+        onSelect={this.handleSelect}
+      />
+    )
+  }
+
+  renderTag = tag => {
+    return (
+      <Option
+        value={tag}
+        key={'tag-' + tag}
+      >
+        {tag}
+      </Option>
+    )
+  }
+
+  sortArray (array, keyword, labels) {
+    return sortBy(array, [
+      // First, sort by the keyword match
+      (obj) => !(keyword && obj.name.toLowerCase().includes(keyword)),
+      // Then, sort by the label match
+      (obj) => !labels.some((label) => obj.labels.includes(label)),
+      // Finally, sort by the clickCount
+      (obj) => -(obj.clickCount || 0)
+    ])
+  }
+
+  render () {
+    const {
+      openQuickCommandBar,
+      pinnedQuickCommandBar
+    } = this.props.store
+    if (!openQuickCommandBar && !pinnedQuickCommandBar) {
+      return null
+    }
+    const all = copy(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)
+      .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 tp = pinnedQuickCommandBar
+      ? 'primary'
+      : 'ghost'
+    const cls = classNames(
+      'qm-list-wrap',
+      { 'fil-label': !!this.state.labels.length },
+      { 'fil-keyword': !!keyword }
+    )
+    return (
+      <div
+        className='qm-wrap-tooltip'
+        onMouseLeave={this.handleMouseLeave}
+        onMouseEnter={this.handleMouseEnter}
+      >
+        <div className='pd2'>
+          <div className='pd2b fix'>
+            <span className='fleft'>
+              <Input.Search
+                value={this.state.keyword}
+                onChange={this.handleChange}
+                placeholder=''
+                className='iblock'
+              />
+            </span>
+            <span className='fleft mg1l'>
+              <Select
+                {...sprops}
+              >
+                {this.props.store.quickCommandTags.map(
+                  this.renderTag
+                )}
+              </Select>
+            </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>
+        </div>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,119 @@
+import { Button, Input, Switch, Form, message, Select } from 'antd'
+import copy from 'json-deep-copy'
+import generate from '../../common/uid'
+import InputAutoFocus from '../common/input-auto-focus'
+const { TextArea } = Input
+const FormItem = Form.Item
+const { Option } = Select
+const { prefix } = window
+const e = prefix('form')
+const t = prefix('quickCommands')
+const s = prefix('setting')
+
+export default function QuickCommandForm (props) {
+  const [form] = Form.useForm()
+  const { autofocustrigger, quickCommandTags = [] } = props.store
+  async function handleSubmit (res) {
+    const { formData } = props
+    const {
+      name,
+      command,
+      inputOnly,
+      labels
+    } = res
+    const update = copy({
+      name,
+      command,
+      inputOnly,
+      labels
+    })
+    const update1 = {
+      ...update,
+      id: generate()
+    }
+    if (formData.id) {
+      props.store.editQuickCommand(formData.id, update)
+    } else {
+      props.store.addQuickCommand(update1)
+      props.store.setSettingItem({
+        id: '',
+        name: t('newQuickCommand')
+      })
+    }
+    message.success(s('saved'))
+  }
+  const initialValues = props.formData
+  if (!initialValues.labels) {
+    initialValues.labels = []
+  }
+  return (
+    <Form
+      form={form}
+      onFinish={handleSubmit}
+      className='form-wrap pd2l'
+      layout='vertical'
+      initialValues={initialValues}
+    >
+      <FormItem
+        label={t('quickCommandName')}
+        rules={[{
+          max: 60, message: '60 chars max'
+        }, {
+          required: true, message: 'name required'
+        }]}
+        hasFeedback
+        name='name'
+      >
+        <InputAutoFocus
+          selectall='yes'
+          autofocustrigger={autofocustrigger}
+        />
+      </FormItem>
+      <FormItem
+        name='command'
+        label={t('quickCommand')}
+        rules={[{
+          max: 5000, message: '5000 chars max'
+        }, {
+          required: true, message: 'command required'
+        }]}
+      >
+        <TextArea rows={3} />
+      </FormItem>
+      <FormItem
+        name='labels'
+        label={t('label')}
+      >
+        <Select
+          mode='tags'
+        >
+          {
+            quickCommandTags.map(q => {
+              return (
+                <Option value={q} key={'qmt-' + q}>
+                  {q}
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </FormItem>
+      <FormItem
+        label={t('inputOnly')}
+        name='inputOnly'
+        valuePropName='checked'
+      >
+        <Switch />
+      </FormItem>
+      <FormItem>
+        <p>
+          <Button
+            type='dashed'
+            htmlType='submit'
+          >{e('save')}
+          </Button>
+        </p>
+      </FormItem>
+    </Form>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { PureComponent } from 'react'
+import QuickCommandForm from './quick-commands-form-elem'
+import { LoadingOutlined } from '@ant-design/icons'
+
+export default class QuickCommandFormIndex extends PureComponent {
+  state = {
+    ready: false
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 200)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  render () {
+    const { ready } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    return <QuickCommandForm {...this.props} />
+  }
+}

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

@@ -0,0 +1,128 @@
+/**
+ * quick command list render
+ */
+
+import List from '../setting-panel/list'
+import { PlusOutlined } from '@ant-design/icons'
+import { Select } from 'antd'
+import classnames from 'classnames'
+import highlight from '../common/highlight'
+import QmTransport from './quick-command-transport'
+
+const { Option } = Select
+const { prefix } = window
+const q = prefix('quickCommands')
+
+export default class QuickCommandsList extends List {
+  del = (item, e) => {
+    e.stopPropagation()
+    this.props.store.delQuickCommand(item)
+  }
+
+  onClickItem = (item) => {
+    this.props.onClickItem(item)
+  }
+
+  handleChange = v => {
+    this.setState({
+      labels: v
+    })
+  }
+
+  getLabels = () => {
+    return this.props.store.quickCommandTags
+  }
+
+  renderItem = (item, i) => {
+    const { activeItemId } = this.props
+    const { name, id } = item
+    const cls = classnames(
+      'item-list-unit theme-item',
+      {
+        active: activeItemId === id
+      }
+    )
+    let title = name
+    title = highlight(
+      title,
+      this.state.keyword
+    )
+    return (
+      <div
+        key={i + id}
+        className={cls}
+        onClick={() => this.onClickItem(item)}
+      >
+        <div className='elli pd1y pd2x' title={name}>
+          {
+            !id
+              ? <PlusOutlined className='mg1r' />
+              : null
+          }
+          {title}
+        </div>
+        {this.renderDelBtn(item)}
+      </div>
+    )
+  }
+
+  renderTransport = () => {
+    return (
+      <QmTransport
+        store={this.props.store}
+      />
+    )
+  }
+
+  renderLabels = () => {
+    const arr = this.getLabels()
+    const props = {
+      placeholder: q('labels'),
+      mode: 'multiple',
+      value: this.state.labels,
+      onChange: this.handleChange,
+      style: {
+        width: '100%'
+      }
+    }
+    return (
+      <div className='pd1b'>
+        <Select
+          {...props}
+        >
+          {
+            arr.map(b => {
+              return (
+                <Option
+                  key={'qml-' + b}
+                  value={b}
+                >
+                  {b}
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </div>
+    )
+  }
+
+  filter = list => {
+    const { keyword, labels } = this.state
+    const f = keyword
+      ? list.filter((item) => {
+        const n = (item.name || '').toLowerCase()
+        const c = (item.command || '').toLowerCase()
+        const k = keyword.toLowerCase()
+        return n.includes(k) || c.includes(k)
+      })
+      : list
+    return labels.length
+      ? f.filter(d => {
+        return labels.some(label => {
+          return (d.labels || []).includes(label)
+        })
+      })
+      : f
+  }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * quick commands footer selection
+ */
+
+import { PureComponent } from 'react'
+import { Button } from 'antd'
+import './qm.styl'
+
+const { prefix } = window
+const e = prefix('quickCommands')
+
+export default class QuickCommandsFooter extends PureComponent {
+  handleOpen = () => {
+    this.timer = setTimeout(this.act, 500)
+  }
+
+  act = () => {
+    window.store.openQuickCommandBar = true
+  }
+
+  handleMouseLeave = () => {
+    clearTimeout(this.timer)
+  }
+
+  render () {
+    return (
+      <div className='fleft relative'>
+        <Button
+          size='small'
+          onMouseEnter={this.handleOpen}
+          onMouseLeave={this.handleMouseLeave}
+        >
+          {e('quickCommands')}
+        </Button>
+      </div>
+    )
+  }
+}