@electerm/electerm-react 1.34.30

package/client/components/context-menu/history.jsx

@@ -0,0 +1,27 @@
+import { Component } from '../common/react-subx'
+import createTitle from '../../common/create-title'
+
+export default class HistorySubMenu extends Component {
+  render () {
+    const { store } = this.props
+    return (
+      <div className='sub-context-menu'>
+        {
+          store.history.map(item => {
+            const title = createTitle(item)
+            return (
+              <div
+                className='sub-context-menu-item'
+                title={title}
+                key={item.id}
+                onClick={() => store.onSelectHistory(item.id)}
+              >
+                {title}
+              </div>
+            )
+          })
+        }
+      </div>
+    )
+  }
+}

package/client/components/context-menu/icon-holder.jsx

@@ -0,0 +1,5 @@
+export default function IconHolder () {
+  return (
+    <span className='icon-holder mg1r' />
+  )
+}

package/client/components/context-menu/menu-btn.jsx

@@ -0,0 +1,224 @@
+/**
+ * btns
+ */
+
+import { Component } from '../common/react-subx'
+import logoRef from '@electerm/electerm-resource/res/imgs/electerm.svg'
+import { commonActions, ctrlOrCmd } from '../../common/constants'
+import generate from '../../common/uid'
+
+const { prefix } = window
+const e = prefix('control')
+const m = prefix('menu')
+const c = prefix('common')
+const t = prefix('tabs')
+const s = prefix('setting')
+const logo = logoRef.replace(/^\//, '')
+
+export default class MenuBtn extends Component {
+  state = {
+    opened: false
+  }
+
+  onContextAction = e => {
+    const {
+      action,
+      id,
+      args = [],
+      func
+    } = e.data || {}
+    if (
+      action !== commonActions.clickContextMenu ||
+      id !== this.uid ||
+      !this[func]
+    ) {
+      return false
+    }
+    window.removeEventListener('message', this.onContextAction)
+    this[func](...args)
+  }
+
+  openMenu = () => {
+    const items = this.renderContext()
+    this.uid = generate()
+    this.props.store.openContextMenu({
+      items,
+      pos: {
+        left: 40,
+        top: 10
+      },
+      id: this.uid
+    })
+    window.addEventListener('message', this.onContextAction)
+    this.setState({
+      opened: true
+    })
+  }
+
+  onNewSsh = () => {
+    this.props.store.onNewSsh()
+  }
+
+  addTab = () => {
+    this.props.store.addTab()
+  }
+
+  onNewWindow = () => {
+    this.props.store.onNewWindow()
+  }
+
+  openAbout = () => {
+    this.props.store.openAbout()
+  }
+
+  openSetting = () => {
+    this.props.store.openSetting()
+  }
+
+  openDevTools = () => {
+    window.pre.runGlobalAsync('openDevTools')
+  }
+
+  minimize = () => {
+    window.pre.runGlobalAsync('minimize')
+  }
+
+  maximize = () => {
+    window.pre.runGlobalAsync('maximize')
+  }
+
+  reload = () => {
+    window.location.reload()
+  }
+
+  onCheckUpdate = () => {
+    this.props.store.onCheckUpdate()
+  }
+
+  restart = () => {
+    this.props.store.restart()
+  }
+
+  close = () => {
+    this.props.store.exit()
+  }
+
+  renderContext = () => {
+    return [
+      {
+        func: 'onNewSsh',
+        icon: 'CodeFilled',
+        text: e('newBookmark'),
+        subText: `${ctrlOrCmd}+N`
+      },
+      {
+        func: 'addTab',
+        icon: 'RightSquareFilled',
+        text: t('newTab')
+      },
+      {
+        func: 'onNewWindow',
+        icon: 'WindowsOutlined',
+        text: e('newWindow')
+      },
+      // {
+      //   type: 'hr'
+      // },
+      {
+        noCloseMenu: true,
+        icon: 'BookOutlined',
+        text: c('bookmarks'),
+        submenu: 'Bookmark'
+      },
+      {
+        noCloseMenu: true,
+        icon: 'ClockCircleOutlined',
+        text: c('history'),
+        submenu: 'History'
+      },
+      {
+        noCloseMenu: true,
+        icon: 'BarsOutlined',
+        text: t('sessions'),
+        submenu: 'Tabs'
+      },
+      // {
+      //   type: 'hr'
+      // },
+      {
+        func: 'openAbout',
+        icon: 'InfoCircleOutlined',
+        text: m('about')
+      },
+      {
+        func: 'openSetting',
+        icon: 'SettingOutlined',
+        text: s('settings')
+      },
+      {
+        func: 'openDevTools',
+        icon: 'LeftSquareFilled',
+        text: m('toggledevtools')
+      },
+      // {
+      //   type: 'hr'
+      // },
+      {
+        module: 'Zoom'
+      },
+      {
+        func: 'minimize',
+        icon: 'SwitcherFilled',
+        text: m('minimize')
+      },
+      {
+        func: 'maximize',
+        icon: 'LayoutFilled',
+        text: m('maximize')
+      },
+      {
+        func: 'reload',
+        icon: 'ReloadOutlined',
+        text: m('reload')
+      },
+      // {
+      //   type: 'hr'
+      // },
+      {
+        func: 'onCheckUpdate',
+        icon: 'UpCircleOutlined',
+        text: e('checkForUpdate')
+      },
+      // {
+      //   type: 'hr'
+      // },
+      {
+        func: 'restart',
+        icon: 'RedoOutlined',
+        text: m('restart')
+      },
+      {
+        func: 'close',
+        icon: 'CloseOutlined',
+        text: m('close')
+      }
+    ]
+  }
+
+  render () {
+    const pops = {
+      className: 'menu-control',
+      onMouseDown: evt => evt.preventDefault(),
+      onClick: this.openMenu,
+      title: e('menu')
+    }
+    return (
+      <div
+        key='menu-control'
+        {...pops}
+      >
+        <img src={logo} width={28} height={28} />
+      </div>
+    )
+  }
+}

package/client/components/context-menu/sub-tab-menu.jsx

@@ -0,0 +1,23 @@
+import { PureComponent } from 'react'
+import createTitle from '../../common/create-title'
+
+export default class TabsSubMenuChild extends PureComponent {
+  handleClick = () => {
+    window.store.onChangeTabId(this.props.item.id)
+  }
+
+  render () {
+    const { item } = this.props
+    const title = createTitle(item)
+    return (
+      <div
+        className='sub-context-menu-item'
+        title={title}
+        key={item.id}
+        onClick={this.handleClick}
+      >
+        {title}
+      </div>
+    )
+  }
+}

package/client/components/context-menu/tabs.jsx

@@ -0,0 +1,22 @@
+import { Component } from '../common/react-subx'
+import TabsSubMenuChild from './sub-tab-menu'
+
+export default class TabsSubMenu extends Component {
+  render () {
+    const { store } = this.props
+    return (
+      <div className='sub-context-menu'>
+        {
+          store.getTabs().map(item => {
+            return (
+              <TabsSubMenuChild
+                key={item.id}
+                item={item}
+              />
+            )
+          })
+        }
+      </div>
+    )
+  }
+}

package/client/components/context-menu/zoom.jsx

@@ -0,0 +1,40 @@
+import { Component } from '../common/react-subx'
+import InputNumberConfirm from '../common/input-confirm'
+
+import {
+  MinusCircleOutlined,
+  PlusCircleOutlined
+} from '@ant-design/icons'
+
+export default class ZoomMenu extends Component {
+  handleChange = (v) => {
+    const { store } = this.props
+    store.zoom(v / 100)
+  }
+
+  render () {
+    const { store } = this.props
+    return (
+      <InputNumberConfirm
+        value={parseInt(store.config.zoom * 100, 10)}
+        onChange={this.handleChange}
+        step={1}
+        min={25}
+        max={500}
+        addonAfter='%'
+        addonBefore={
+          <div>
+            <PlusCircleOutlined
+              onClick={() => store.zoom(0.25, true)}
+              className='mg1r pointer font16'
+            />
+            <MinusCircleOutlined
+              onClick={() => store.zoom(-0.25, true)}
+              className='pointer font16'
+            />
+          </div>
+        }
+      />
+    )
+  }
+}

package/client/components/footer/batch-input.jsx

@@ -0,0 +1,177 @@
+/**
+ * batch input module
+ */
+
+import { Component } from 'react'
+import {
+  AutoComplete,
+  Input,
+  Switch,
+  Tooltip
+} from 'antd'
+import { batchInputLsKey, commonActions } from '../../common/constants'
+import postMsg from '../../common/post-msg'
+import classNames from 'classnames'
+
+const { prefix } = window
+const e = prefix('ssh')
+
+export default class BatchInput extends Component {
+  state = {
+    cmd: '',
+    toAll: false,
+    open: false,
+    enter: false
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  handleEnter = (e) => {
+    const { cmd, toAll } = this.state
+    if (!cmd.trim()) {
+      return
+    }
+    window.store.addBatchInput(cmd)
+    this.props.input(cmd, toAll)
+    this.setState({
+      cmd: '',
+      open: false
+    })
+    e.stopPropagation()
+  }
+
+  handleChange = (v = '') => {
+    let vv = v.replace(/^\d+:/, '').replace(/\n$/, '')
+    if (vv === batchInputLsKey) {
+      postMsg({
+        action: commonActions.updateStore,
+        func: 'clearBatchInput'
+      })
+      vv = ''
+    }
+    this.setState({
+      cmd: vv,
+      open: false
+    })
+  }
+
+  handleClick = () => {
+    this.setState({
+      open: true
+    })
+  }
+
+  handleChangeAll = toAll => {
+    this.setState({
+      toAll
+    })
+  }
+
+  handleBlur = () => {
+    this.setState({
+      open: false
+    })
+  }
+
+  mapper = (v, i) => {
+    return {
+      value: `${i}:${v}`,
+      label: v
+    }
+  }
+
+  renderClear = () => {
+    return {
+      value: batchInputLsKey,
+      label: e('clear')
+    }
+  }
+
+  buildOptions = () => {
+    const arr = this.props.batchInputs.map(this.mapper)
+    if (arr.length) {
+      return [
+        ...arr,
+        this.renderClear()
+      ]
+    }
+    return []
+  }
+
+  handleMouseEnter = () => {
+    clearTimeout(this.timer)
+    this.setState({
+      enter: true
+    })
+  }
+
+  leave = () => {
+    this.setState({
+      enter: false
+    })
+  }
+
+  handleMouseLeave = () => {
+    this.timer = setTimeout(this.leave, 5000)
+  }
+
+  render () {
+    const { cmd, open, toAll, enter } = this.state
+    const opts = {
+      options: this.buildOptions(),
+      placeholder: e('batchInput'),
+      value: cmd,
+      onChange: this.handleChange,
+      defaultOpen: false,
+      open,
+      allowClear: true,
+      className: 'batch-input-wrap'
+    }
+    const cls = classNames(
+      'batch-input-outer',
+      {
+        'bi-show': open || enter
+      }
+    )
+    const inputProps = {
+      size: 'small',
+      placeholder: e('batchInput'),
+      className: 'batch-input-holder'
+    }
+    return (
+      <span
+        className={cls}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        <span className='bi-compact'>
+          <Input
+            {...inputProps}
+          />
+        </span>
+        <span className='bi-full'>
+          <AutoComplete
+            {...opts}
+          >
+            <Input.TextArea
+              onPressEnter={this.handleEnter}
+              onClick={this.handleClick}
+              onBlur={this.handleBlur}
+              size='small'
+              row={1}
+            />
+          </AutoComplete>
+          <Tooltip title={e('runInAllTerminals')}>
+            <Switch
+              className='mg1l'
+              checked={toAll}
+              onChange={this.handleChangeAll}
+            />
+          </Tooltip>
+        </span>
+      </span>
+    )
+  }
+}

package/client/components/footer/footer-entry.jsx

@@ -0,0 +1,141 @@
+import { Component } from '../common/react-subx'
+import {
+  Tooltip,
+  Select
+} from 'antd'
+import { InfoCircleOutlined } from '@ant-design/icons'
+import './footer.styl'
+import { paneMap, terminalActions, statusMap } from '../../common/constants'
+import postMessage from '../../common/post-msg'
+import BatchInput from './batch-input'
+import encodes from '../bookmark-form/encodes'
+import Qm from '../quick-commands/quick-commands-select'
+
+const {
+  Option
+} = Select
+
+const { prefix } = window
+const f = prefix('form')
+
+export default class SystemMenu extends Component {
+  handleInfoPanel = () => {
+    const { activeTerminalId } = this.props.store
+    postMessage({
+      action: terminalActions.showInfoPanel,
+      activeSplitId: activeTerminalId
+    })
+  }
+
+  batchInput = (cmd, toAll) => {
+    const { activeTerminalId } = this.props.store
+    postMessage({
+      action: terminalActions.batchInput,
+      activeSplitId: activeTerminalId,
+      toAll,
+      cmd
+    })
+  }
+
+  handleSwitchEncoding = encode => {
+    const { activeTerminalId } = this.props.store
+    postMessage({
+      encode,
+      action: terminalActions.changeEncode,
+      activeSplitId: activeTerminalId
+    })
+  }
+
+  isLoading = () => {
+    const { currentTab } = this.props.store
+    if (!currentTab) {
+      return true
+    }
+    const {
+      status
+    } = currentTab
+    return status !== statusMap.success
+  }
+
+  renderBatchInputs () {
+    return (
+      <div className='terminal-footer-unit terminal-footer-center'>
+        <BatchInput
+          input={this.batchInput}
+          batchInputs={this.props.store.batchInputs}
+        />
+      </div>
+    )
+  }
+
+  renderQuickCommands () {
+    return (
+      <div className='terminal-footer-unit terminal-footer-qm'>
+        <Qm />
+      </div>
+    )
+  }
+
+  renderEncodingInfo () {
+    return (
+      <div className='terminal-footer-unit terminal-footer-info'>
+        <div className='fleft relative'>
+          <Select
+            style={{ minWidth: 100 }}
+            placeholder={f('encode')}
+            defaultValue={this.props.currentTab?.encode}
+            onSelect={this.handleSwitchEncoding}
+            size='small'
+          >
+            {
+              encodes.map(k => {
+                return (
+                  <Option key={k} value={k}>
+                    {k}
+                  </Option>
+                )
+              })
+            }
+          </Select>
+        </div>
+      </div>
+    )
+  }
+
+  renderInfoIcon () {
+    const loading = this.isLoading()
+    if (loading) {
+      return null
+    }
+    return (
+      <div className='terminal-footer-unit terminal-footer-info'>
+        <Tooltip
+          title='Terminal Info'
+        >
+          <InfoCircleOutlined
+            onClick={this.handleInfoPanel}
+            className='pointer font18 terminal-info-icon'
+          />
+        </Tooltip>
+      </div>
+    )
+  }
+
+  render () {
+    const { tabs } = this.props.store
+    const pane = this.props.store.currentTab?.pane
+    if (pane === paneMap.fileManager || !tabs.length) {
+      return null
+    }
+    return (
+      <div className='main-footer'>
+        <div className='terminal-footer-flex'>
+          {this.renderQuickCommands()}
+          {this.renderBatchInputs()}
+          {this.renderEncodingInfo()}
+          {this.renderInfoIcon()}
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/footer/footer.styl

@@ -0,0 +1,47 @@
+@require '../../css/includes/theme-default'
+
+.main-footer
+  background main
+  height 36px
+  position absolute
+  left 43px
+  right 0
+  bottom 0
+  color text
+  z-index 200
+.pinned
+  .main-footer
+  .qm-wrap-tooltip
+    left 343px
+
+
+.terminal-footer-flex
+  display flex
+  .terminal-footer-unit .ant-select-selector .ant-select-selection-placeholder
+    line-height 24px
+.terminal-footer-unit
+  margin-left 10px
+  line-height 34px
+  textarea.ant-input
+    min-height 26px
+    height 26px
+    margin-bottom -2px
+    resize none
+    &::-webkit-scrollbar
+      width 0
+
+.terminal-footer-center
+  flex-grow 1
+.terminal-footer-info
+  margin-right 10px
+  line-height 39px
+.batch-input-outer
+  .bi-full
+    display none
+  &.bi-show
+    .bi-full
+      display inline
+    .bi-compact
+      display none
+.batch-input-holder
+  width 100px