@electerm/electerm-react 1.34.30

package/client/components/tabs/tab.jsx

@@ -0,0 +1,427 @@
+/**
+ * file section
+ */
+
+import React from 'react'
+import runIdle from '../../common/run-idle'
+import {
+  CloseOutlined,
+  Loading3QuartersOutlined,
+  BorderlessTableOutlined
+} from '@ant-design/icons'
+import generate from '../../common/uid'
+import { Tooltip, message } from 'antd'
+import classnames from 'classnames'
+import copy from 'json-deep-copy'
+import { isEqual, findIndex, some, pick } from 'lodash-es'
+import Input from '../common/input-auto-focus'
+import createName from '../../common/create-title'
+import { addClass, removeClass } from '../../common/class'
+import {
+  terminalSshConfigType,
+  ctrlOrCmd,
+  commonActions
+} from '../../common/constants'
+
+const { prefix } = window
+const e = prefix('tabs')
+const m = prefix('menu')
+const onDragCls = 'ondrag-tab'
+const onDragOverCls = 'dragover-tab'
+
+export default class Tab extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      terminalOnData: false,
+      tab: copy(props.tab)
+    }
+  }
+
+  componentDidMount () {
+    this.dom = document.getElementById('id' + this.state.tab.id)
+    window.addEventListener('message', this.onEvent)
+  }
+
+  componentDidUpdate (prevProps) {
+    if (!isEqual(prevProps.tab, this.props.tab)) {
+      this.setState({
+        tab: copy(this.props.tab)
+      })
+    }
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('message', this.onEvent)
+    window.removeEventListener('message', this.onContextAction)
+    clearTimeout(this.handler)
+  }
+
+  modifier = (...args) => {
+    runIdle(() => this.setState(...args))
+  }
+
+  onEvent = (e) => {
+    if (
+      e.data &&
+      e.data.action === 'terminal-receive-data' &&
+      e.data.tabId === this.state.tab.id
+    ) {
+      this.modifier({
+        terminalOnData: true
+      })
+      if (this.handler) {
+        clearTimeout(this.handler)
+      }
+      this.handler = setTimeout(this.offTerminalOnData, 4000)
+    }
+  }
+
+  offTerminalOnData = () => {
+    this.modifier({
+      terminalOnData: false
+    })
+  }
+
+  clearCls = () => {
+    document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
+      removeClass(d, onDragOverCls)
+    })
+  }
+
+  handleClick = (e) => {
+    const {
+      onChangeTabId
+    } = this.props
+    const { id } = this.state.tab
+    onChangeTabId(id)
+  }
+
+  onDrag = () => {
+    addClass(this.dom, onDragCls)
+  }
+
+  onDragEnter = () => {
+    this.clearCls()
+    addClass(this.dom, onDragOverCls)
+  }
+
+  onDragExit = () => {
+    // debug('ondragexit')
+    // let {target} = e
+    // removeClass(target, 'sftp-dragover')
+  }
+
+  onDragLeave = e => {
+    // debug('ondragleave')
+    const { target } = e
+    removeClass(target, onDragOverCls)
+  }
+
+  onDragOver = e => {
+    // debug('ondragover')
+    // debug(e.target)
+    // removeClass(this.dom, 'sftp-dragover')
+    e.preventDefault()
+  }
+
+  onDragStart = e => {
+    // debug('ondragstart')
+    // debug(e.target)
+    e.dataTransfer.setData('fromFile', JSON.stringify(this.state.tab))
+    // e.effectAllowed = 'copyMove'
+  }
+
+  onDrop = e => {
+    e.preventDefault()
+    const { target } = e
+    if (!target) {
+      return
+    }
+    // debug('target drop', target)
+    const fromTab = JSON.parse(e.dataTransfer.getData('fromFile'))
+    const onDropTab = document.querySelector('.' + onDragOverCls)
+    if (!onDropTab || !fromTab) {
+      return
+    }
+    const dropId = onDropTab.getAttribute('data-id')
+    if (!dropId || dropId === fromTab.id) {
+      return
+    }
+    const { id } = fromTab
+    const tabs = copy(this.props.tabs)
+    const indexFrom = findIndex(tabs, t => t.id === id)
+    let indexDrop = findIndex(tabs, t => t.id === dropId)
+    if (indexDrop > indexFrom) {
+      indexDrop = indexDrop - 1
+    }
+    tabs.splice(indexFrom, 1)
+    tabs.splice(indexDrop, 0, fromTab)
+    this.props.setTabs(
+      tabs
+    )
+    window.store.focus()
+  }
+
+  handleReloadTab = async () => {
+    this.props.reloadTab(this.state.tab)
+  }
+
+  onDragEnd = e => {
+    removeClass(this.dom, onDragCls)
+    this.clearCls()
+    e && e.dataTransfer && e.dataTransfer.clearData()
+  }
+
+  handleClose = () => {
+    this.props.delTab(this.state.tab.id)
+  }
+
+  handleDup = () => {
+    this.props.onDuplicateTab(
+      this.state.tab
+    )
+  }
+
+  newTab = () => {
+    this.props.addTab()
+  }
+
+  doRename = () => {
+    const tab = copy(this.state.tab)
+    tab.titleTemp = tab.title || ''
+    tab.isEditting = true
+    this.setState({
+      tab
+    })
+  }
+
+  handleBlur = () => {
+    const tab = copy(this.state.tab)
+    const { titleTemp, title, id, host } = tab
+    if (!titleTemp && !host) {
+      return message.warning(e('titleEmptyWarn'))
+    }
+    delete tab.isEditting
+    if (title === titleTemp) {
+      delete tab.titleTemp
+      return this.setState({
+        tab
+      })
+    }
+    this.setState({
+      tab
+    })
+    this.props.editTab(id, { title: titleTemp })
+  }
+
+  handleChange = e => {
+    const titleTemp = e.target.value
+    const tab = copy(this.state.tab)
+    tab.titleTemp = titleTemp
+    this.setState({
+      tab
+    })
+  }
+
+  closeOther = () => {
+    const { setTabs, onChangeTabId } = this.props
+    onChangeTabId(this.props.tab.id)
+    setTabs([this.props.tab])
+  }
+
+  closeTabsRight = () => {
+    const {
+      tab, currentTabId,
+      onChangeTabId,
+      setTabs
+    } = this.props
+    let tabs = copy(this.props.tabs)
+    const index = findIndex(tabs, t => t.id === tab.id)
+    tabs = tabs.slice(0, index + 1)
+    if (!some(tabs, t => t.id === currentTabId)) {
+      onChangeTabId(tabs[0].id)
+    }
+    setTabs(tabs)
+  }
+
+  renderContext () {
+    const { tabs, tab } = this.props
+    const len = tabs.length
+    const index = findIndex(tabs, t => t.id === tab.id)
+    const noRight = index >= len - 1
+    const isSshConfig = tab.type === terminalSshConfigType
+    const res = []
+    res.push({
+      func: 'handleClose',
+      icon: 'CloseOutlined',
+      text: e('close'),
+      subText: `${ctrlOrCmd} + W`
+    })
+    res.push({
+      func: 'closeOther',
+      icon: 'CloseOutlined',
+      text: e('closeOtherTabs')
+    })
+    if (!noRight) {
+      res.push({
+        func: 'closeTabsRight',
+        icon: 'CloseOutlined',
+        text: e('closeTabRight')
+      })
+    }
+    res.push({
+      func: 'newTab',
+      icon: 'CodeOutlined',
+      text: e('newTab')
+    })
+    res.push({
+      func: 'handleDup',
+      icon: 'CopyOutlined',
+      text: e('duplicate')
+    })
+    res.push({
+      disabled: isSshConfig,
+      func: 'doRename',
+      icon: 'EditOutlined',
+      text: e('rename')
+    })
+    res.push({
+      func: 'handleReloadTab',
+      icon: 'Loading3QuartersOutlined',
+      text: m('reload')
+    })
+    return res
+  }
+
+  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)
+  }
+
+  handleContextMenu = e => {
+    e.preventDefault()
+    const { target } = e
+    const rect = target.getBoundingClientRect()
+    const items = this.renderContext()
+    this.uid = generate()
+    window.store.openContextMenu({
+      items,
+      pos: {
+        left: rect.left,
+        top: rect.top + 20
+      },
+      id: this.uid
+    })
+    window.addEventListener('message', this.onContextAction)
+  }
+
+  renderEditting (tab, cls) {
+    const {
+      titleTemp
+    } = tab
+    return (
+      <div className={cls + ' pd1x'}>
+        <Input
+          value={titleTemp}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onPressEnter={this.handleBlur}
+        />
+      </div>
+    )
+  }
+
+  renderCloseIcon () {
+    return (
+      <span className='tab-close pointer'>
+        <CloseOutlined onClick={this.handleClose} />
+      </span>
+    )
+  }
+
+  render () {
+    const {
+      currentTabId
+    } = this.props
+    const { isLast } = this.props
+    const { tab, terminalOnData } = this.state
+    const { id, isEditting, status, isTransporting, tabCount } = tab
+    const active = id === currentTabId
+    const cls = classnames(
+      `tab-${id}`,
+      'tab',
+      { active },
+      {
+        'tab-last': isLast
+      },
+      status,
+      {
+        'is-terminal-active': terminalOnData
+      },
+      {
+        'is-transporting': isTransporting
+      }
+    )
+    const title = createName(tab)
+    if (isEditting) {
+      return this.renderEditting(tab, cls)
+    }
+    return (
+      <Tooltip
+        title={title}
+        placement='top'
+      >
+        <div
+          className={cls}
+          draggable
+          id={'id' + id}
+          data-id={id}
+          {...pick(this, [
+            'onDrag',
+            'onDragEnter',
+            'onDragExit',
+            'onDragLeave',
+            'onDragOver',
+            'onDragStart',
+            'onDrop',
+            'onDragEnd'
+          ])}
+        >
+          <div
+            className='tab-title elli pd1x'
+            onClick={this.handleClick}
+            onDoubleClick={this.handleDup}
+            onContextMenu={this.handleContextMenu}
+          >
+            <Loading3QuartersOutlined
+              className='pointer tab-reload mg1r'
+              onClick={this.handleReloadTab}
+              title={m('reload')}
+            />
+            {tabCount}. {title}
+          </div>
+          <div className={'tab-status ' + status} />
+          <div className='tab-traffic' />
+          <BorderlessTableOutlined className='tab-terminal-feed' />
+          {
+            this.renderCloseIcon()
+          }
+        </div>
+      </Tooltip>
+    )
+  }
+}

package/client/components/tabs/tabs.styl

@@ -0,0 +1,220 @@
+@require '../../css/includes/theme-default'
+.tabs
+  position relative
+  height 56px
+  overflow hidden
+  background main-dark
+.app-drag-area
+.app-drag
+  position absolute
+  left 0
+  top 0
+  height 15px
+  right 0
+  z-index 1
+.app-drag
+  -webkit-app-region drag
+.tabs-inner
+  position relative
+  z-index 2
+  padding 0 5px 0 0
+  margin-top 10px
+  display inline-block
+  height 63px
+  overflow-x scroll
+  overflow-y hidden
+  margin-left 42px
+  -webkit-app-region drag
+.tabs-wrapper
+  z-index 3
+.tab
+  -webkit-app-region no-drag
+  display inline-block
+  vertical-align middle
+  cursor pointer
+  position relative
+  min-width 100px
+  max-width 200px
+  line-height 36px
+  margin 10px 1px 0 0
+  border-radius 3px 3px 0 0
+  background main-dark
+  text-align center
+  color text-dark
+  &.tab-last
+    margin-right 5px
+  .tab-reload
+  .tab-close
+    display none
+  &.active
+    color text
+    background main
+  &:hover
+    .tab-close
+      display block
+  &.dragover-tab::after
+    position absolute
+    content ''
+    left -2px
+    top 0
+    width 1px
+    border 1px dashed text-dark
+    height 36px
+  &.error
+    .tab-reload
+      display inline-block
+      color text-light
+@keyframes blink
+  0%
+    opacity 0.3
+  50%
+    opacity 1
+  100%
+    opacity 0.3
+
+.tab-terminal-feed
+.tab-traffic
+.tab-status
+  position absolute
+  left 2px
+  top 2px
+  width 5px
+  height 5px
+  border-radius 5px
+  background-color text-dark
+  &.success
+    background-color success
+  &.error
+    background-color error
+  &.processing
+    background-color primary
+.is-transporting .tab-traffic
+  display block
+  animation blink 2s infinite
+.tab-traffic
+  display none
+  left 10px
+  width 5px
+  border-radius 0
+  background-color success
+.is-terminal-active .tab-terminal-feed
+  display block
+  animation blink 2s infinite
+.tab-terminal-feed
+  display none
+  left 20px
+  border-radius 0
+  color success
+  background none
+  font-size 8px
+  left 2px
+  top 24px
+.tab-close
+  position absolute
+  right 5px
+  cursor pointer
+  top 50%
+  margin-top -8px
+  background text-dark
+  border-radius 100%
+  color text
+  height 16px
+  width 16px
+  text-align center
+  line-height 16px
+  font-size 10px
+  &:hover
+    color text-light
+
+.tabs-add-btn
+  display inline-block
+  vertical-align middle
+  margin 10px 3px 0 3px
+  -webkit-app-region no-drag
+  color text
+  &:hover
+    color text-light
+.tabs-extra
+  position absolute
+  height 20px
+  top 34px
+  right 0
+  line-height 20px
+  z-index 20
+  -webkit-app-region no-drag
+  // .ant-btn
+  //   background #333
+  //   color #aaa
+  //   border-color: #333
+  //   &:hover
+  //     color #ccc
+  .tabs-dd-icon
+    color text
+    font-size 12px
+  .tabs-add-btn
+    margin-top 0
+
+.window-controls
+  position absolute
+  right 0
+  -webkit-app-region no-drag
+  top 0
+  z-index 200
+  border-radius 0 0 3px 3px
+  padding 0
+  background main-light
+
+.window-control-box
+  display inline-block
+  padding 5px 10px
+  color text
+  -webkit-app-region no-drag
+  &:hover
+    color primary
+    cursor pointer
+    .icon-maximize
+      border-color primary
+.icon-maximize
+  width 10px
+  height 7px
+  border 1px solid text
+  cursor pointer
+  &.is-max
+    height 6px
+    position relative
+    &:before
+      position absolute
+      content ''
+      left -3px
+      top 3px
+      width 8px
+      height 4px
+      border 1px solid text
+      border-top none
+      border-right none
+
+.control-icon:hover
+  color text-light
+.tab-scroll-icon
+  color text-dark
+  &:hover
+    color text
+
+.add-menu-wrap
+  overflow-y scroll
+.window-controls
+  .window-control-minimize
+  .window-control-maximize
+    &:hover
+      background main-dark
+  .window-control-close:hover
+    background error
+
+.system-ui
+  .window-controls
+  .app-drag
+    display none
+  .tabs
+    height 45px
+  .tabs-inner
+    margin-top 0

package/client/components/tabs/window-control.jsx

@@ -0,0 +1,55 @@
+/**
+ * btns
+ */
+
+import { CloseOutlined, MinusOutlined } from '@ant-design/icons'
+import { Component } from '../common/react-subx'
+
+const { prefix } = window
+const m = prefix('menu')
+
+export default class WindowControl extends Component {
+  render () {
+    const {
+      isMaximized
+    } = this.props.store
+    const minimize = () => {
+      window.pre.runGlobalAsync('minimize')
+    }
+    const maximize = () => {
+      window.pre.runGlobalAsync('maximize')
+    }
+    const unmaximize = () => {
+      window.pre.runGlobalAsync('unmaximize')
+    }
+    const closeApp = () => {
+      window.store.exit()
+    }
+    return (
+      <div className='window-controls'>
+        <div className='window-control-box window-control-minimize' onClick={minimize}>
+          <MinusOutlined title={m('minimize')} className='iblock font12 widnow-control-icon' />
+        </div>
+        <div
+          className='window-control-box window-control-maximize'
+          onClick={
+            isMaximized ? unmaximize : maximize
+          }
+        >
+          <span
+            title={
+              isMaximized ? m('unmaximize') : m('maximize')
+            }
+            className={
+              'iblock font12 icon-maximize widnow-control-icon ' +
+                (isMaximized ? 'is-max' : 'not-max')
+            }
+          />
+        </div>
+        <div className='window-control-box window-control-close' onClick={closeApp}>
+          <CloseOutlined title={m('close')} className='iblock font12 widnow-control-icon' />
+        </div>
+      </div>
+    )
+  }
+}