@electerm/electerm-react 1.34.30

package/client/components/common/resize-wrap.jsx

@@ -0,0 +1,222 @@
+/**
+ * make child component resizable by drag the horizontal or vertical handle
+ * // todo: rerender check
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { isNull, pick, isUndefined } from 'lodash-es'
+import parseInt10 from '../../common/parse-int10'
+import generate from '../../common/uid'
+import memoizeOne from 'memoize-one'
+import {
+  terminalSplitDirectionMap,
+  minTerminalWidth,
+  maxDragMove
+} from '../../common/constants'
+import './resize-wrap.styl'
+
+export default class ResizeWrap extends React.Component {
+  static propTypes = {
+    direction: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+    children: PropTypes.arrayOf(PropTypes.element).isRequired,
+    minWidth: PropTypes.number,
+    onEndDrag: PropTypes.func,
+    noResizeEvent: PropTypes.bool
+  }
+
+  getChildIds = (props = this.props) => {
+    return props.children.map(c => c.props.id)
+  }
+
+  getSplitIds = () => {
+    const len = this.props.children.length - 1
+    return this.getSplitIdsCache(len)
+  }
+
+  getSplitIdsCache = memoizeOne((len) => {
+    return new Array(len)
+      .fill(8).map(() => generate())
+  })
+
+  positionProps = [
+    'width',
+    'height',
+    'left',
+    'top'
+  ]
+
+  onDrag = (e) => {
+    const dom = e.target
+    const prev = dom.previousSibling
+    const next = dom.nextSibling
+    const { direction } = this.props
+    const { startPosition } = this
+    if (isNull(e.pageX)) {
+      return
+    }
+    const currentPosition = {
+      x: e.pageX,
+      y: e.pageY
+    }
+
+    const types = ['dom', 'prev', 'next']
+    const doms = [dom, prev, next]
+    const styles = doms.map(d => {
+      const { style } = d
+      const obj = pick(style, this.positionProps)
+      return Object.keys(obj).reduce((prev, k) => {
+        const v = obj[k]
+        return {
+          ...prev,
+          [k]: isUndefined(v)
+            ? v
+            : parseInt10(obj[k].replace('px', ''))
+        }
+      }, {})
+    })
+    let xDiff = currentPosition.x - startPosition.x
+    let yDiff = currentPosition.y - startPosition.y
+    if (Math.abs(xDiff) > maxDragMove) {
+      return
+    }
+    const prevStyle = styles[1]
+    const nextStyle = styles[2]
+    const minW = this.props.minWidth || minTerminalWidth
+    if (direction === terminalSplitDirectionMap.vertical) {
+      if (yDiff > 0 && yDiff > nextStyle.height - minW) {
+        yDiff = nextStyle.height - minW
+      } else if (yDiff < 0 && yDiff < -(prevStyle.height - minW)) {
+        yDiff = -(prevStyle.height - minW)
+      }
+    } else {
+      if (xDiff > 0 && xDiff > nextStyle.width - minW) {
+        xDiff = nextStyle.width - minW
+      } else if (xDiff < 0 && xDiff < -(prevStyle.width - minW)) {
+        xDiff = -(prevStyle.width - minW)
+      }
+    }
+    doms.forEach((d, i) => {
+      this.changePosition(d, direction, xDiff, yDiff, types[i], styles[i])
+    })
+    this.startPosition = currentPosition
+  }
+
+  onDragStart = (e) => {
+    this.startPosition = {
+      x: e.pageX,
+      y: e.pageY
+    }
+  }
+
+  changePosition = (
+    dom,
+    direction,
+    xDiff,
+    yDiff,
+    type,
+    style
+  ) => {
+    const realHeight = style.height
+    const realWidth = style.width
+    const realTop = style.top
+    const realLeft = style.left
+    if (type === 'prev' && direction === terminalSplitDirectionMap.vertical) {
+      dom.style.height = (realHeight + yDiff) + 'px'
+    } else if (type === 'prev') {
+      dom.style.width = (realWidth + xDiff) + 'px'
+    } else if (type === 'dom' && direction === terminalSplitDirectionMap.vertical) {
+      dom.style.top = (realTop + yDiff) + 'px'
+    } else if (type === 'dom') {
+      dom.style.left = (realLeft + xDiff) + 'px'
+    } else if (type === 'next' && direction === terminalSplitDirectionMap.vertical) {
+      dom.style.top = (realTop + yDiff) + 'px'
+      dom.style.height = (realHeight - yDiff) + 'px'
+    } else {
+      dom.style.width = (realWidth - xDiff) + 'px'
+      dom.style.left = (realLeft + xDiff) + 'px'
+    }
+  }
+
+  onDragEnd = () => {
+    const {
+      noResizeEvent,
+      onDragEnd
+    } = this.props
+    if (onDragEnd) {
+      onDragEnd()
+    }
+    if (noResizeEvent) {
+      return
+    }
+    window.dispatchEvent(new CustomEvent('resize'))
+  }
+
+  buildHandleComponent = (prevComponent, direction, index, tid) => {
+    const zIndex = this.props.children.length + 10
+    const cls = classnames(
+      `tw-${tid}`,
+      'term-dragger',
+      `term-dragger-${index}`,
+      `term-dragger-${direction}`
+    )
+    const { left, top, width, height } = prevComponent.props
+    const style = direction === terminalSplitDirectionMap.vertical
+      ? {
+          left: 0,
+          right: 0,
+          zIndex,
+          top: top + height - 2
+        }
+      : {
+          top: 0,
+          bottom: 0,
+          zIndex,
+          left: left + width - 2
+        }
+    const props = {
+      style,
+      ...pick(this, [
+        'onDoubleClick',
+        'onDrag',
+        'onDragStart',
+        'onDragEnd'
+      ]),
+      className: cls,
+      draggable: true
+    }
+    return (
+      <span
+        key={tid}
+        {...props}
+      />
+    )
+  }
+
+  render () {
+    const {
+      children,
+      direction
+    } = this.props
+    const len = children.length
+    if (len < 2) {
+      return children
+    }
+    let splitIndex = 0
+    const splitIds = this.getSplitIds()
+    const newArr = children.reduce((prev, c, i) => {
+      let split = null
+      if (i !== len - 1) {
+        split = this.buildHandleComponent(c, direction, i, splitIds[splitIndex])
+        splitIndex++
+      }
+      return [
+        ...prev,
+        c,
+        split
+      ].filter(d => d)
+    }, [])
+    return newArr
+  }
+}

package/client/components/common/resize-wrap.styl

@@ -0,0 +1,9 @@
+.term-dragger
+  position absolute
+  z-index 1
+.term-dragger-vertical
+  cursor ns-resize
+  height 5px
+.term-dragger-horizontal
+  cursor ew-resize
+  width 5px

package/client/components/common/search.jsx

@@ -0,0 +1,9 @@
+/**
+ * common search with clear icon
+ */
+
+import { Input } from 'antd'
+
+const { Search } = Input
+
+export default Search

package/client/components/common/show-item.jsx

@@ -0,0 +1,27 @@
+/**
+ * show item in folder
+ * // todo rerender check
+ */
+
+import { memo } from 'react'
+import { FolderOpenOutlined } from '@ant-design/icons'
+// import { isMac } from '../../common/constants'
+// import fs from '../../common/fs'
+
+function onClick (e, href) {
+  e.preventDefault()
+  window.pre.showItemInFolder(href)
+}
+
+export default memo(props => {
+  const { to, children = '', ...rest } = props
+  return (
+    <a
+      href={to}
+      onClick={e => onClick(e, to)}
+      {...rest}
+    >
+      {children} <FolderOpenOutlined />
+    </a>
+  )
+})

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

@@ -0,0 +1,15 @@
+import { Component } from '../common/react-subx'
+import BookmarksList from '../sidebar/bookmark-select'
+
+export default class BookmarkSubMenu extends Component {
+  render () {
+    const { store } = this.props
+    return (
+      <div className='sub-context-menu bookmarks-sub-context-menu'>
+        <BookmarksList
+          store={store}
+        />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,340 @@
+/**
+ * context menu
+ */
+import React from 'react'
+import './context-menu.styl'
+import classnames from 'classnames'
+import {
+  contextMenuHeight,
+  contextMenuPaddingTop,
+  contextMenuWidth,
+  commonActions
+} from '../../common/constants'
+import {
+  Popconfirm
+} from 'antd'
+import postMessage from '../../common/post-msg'
+import { noop } from 'lodash-es'
+import History from './history'
+import Bookmark from './boomarks'
+import Tabs from './tabs'
+import Zoom from './zoom'
+import IconHolder from './icon-holder'
+import {
+  CodeOutlined,
+  BorderHorizontalOutlined,
+  SearchOutlined,
+  SelectOutlined,
+  SwitcherOutlined,
+  CheckOutlined,
+  CloudDownloadOutlined,
+  CloudUploadOutlined,
+  ArrowRightOutlined,
+  CheckSquareOutlined,
+  CloseCircleOutlined,
+  ContainerOutlined,
+  CopyOutlined,
+  EditOutlined,
+  EnterOutlined,
+  FileAddOutlined,
+  FileExcelOutlined,
+  FolderAddOutlined,
+  InfoCircleOutlined,
+  LockOutlined,
+  ReloadOutlined
+} from '@ant-design/icons'
+
+const { prefix } = window
+const c = prefix('common')
+
+export default class ContextMenu extends React.PureComponent {
+  state = {
+    items: [],
+    id: '',
+    pos: {
+      left: 0,
+      top: 0
+    },
+    className: 'context-menu'
+  }
+
+  componentDidMount () {
+    window.addEventListener('message', e => {
+      const {
+        type,
+        data
+      } = e.data || {}
+      if (
+        type === commonActions.closeContextMenu
+      ) {
+        this.closeContextMenu()
+      } else if (type === commonActions.openContextMenu) {
+        this.setOnCloseEvent()
+        this.setState(data)
+      }
+    })
+  }
+
+  setOnCloseEvent = () => {
+    const dom = document
+      .querySelector('.ant-drawer')
+    if (dom) {
+      dom.addEventListener('click', this.onTriggerClose)
+    }
+    document
+      .getElementById('outside-context')
+      .addEventListener('click', this.onTriggerClose)
+  }
+
+  onTriggerClose = () => {
+    this.closeContextMenu()
+    const dom = document
+      .querySelector('.ant-drawer')
+    if (dom) {
+      dom.removeEventListener('click', this.onTriggerClose)
+    }
+    document
+      .getElementById('outside-context')
+      .removeEventListener('click', this.onTriggerClose)
+  }
+
+  icons = {
+    CodeOutlined,
+    BorderHorizontalOutlined,
+    SearchOutlined,
+    SelectOutlined,
+    SwitcherOutlined,
+    IconHolder,
+    CheckOutlined,
+    CloudDownloadOutlined,
+    CloudUploadOutlined,
+    ArrowRightOutlined,
+    CheckSquareOutlined,
+    CloseCircleOutlined,
+    ContainerOutlined,
+    CopyOutlined,
+    EditOutlined,
+    EnterOutlined,
+    FileAddOutlined,
+    FileExcelOutlined,
+    FolderAddOutlined,
+    InfoCircleOutlined,
+    LockOutlined,
+    ReloadOutlined
+  }
+
+  modules = {
+    History,
+    Bookmark,
+    Tabs,
+    Zoom
+  }
+
+  closeContextMenu = () => {
+    this.setState({
+      id: '',
+      items: []
+    })
+  }
+
+  computePos = () => {
+    const {
+      pos,
+      items
+    } = this.state
+    const { length } = items
+    const count = length
+      ? items.filter(c => c.type !== 'hr').length
+      : 3
+    const countHr = length
+      ? items.filter(c => c.type === 'hr').length
+      : 3
+    let {
+      left,
+      top
+    } = pos
+    const {
+      topMenuHeight
+    } = this.props.store
+    const height = count * contextMenuHeight + contextMenuPaddingTop * 2 + countHr * 1
+    const maxHeight = Math.max(
+      window.innerHeight - topMenuHeight - top,
+      top - topMenuHeight
+    )
+    const shouldScroll = maxHeight < height
+    const startTop = top > (window.innerHeight - topMenuHeight) / 2
+    const realHeight = Math.min(maxHeight, height)
+    if (startTop) {
+      top = top - realHeight
+    }
+    if (window.innerWidth < left + contextMenuWidth + 10) {
+      left = left - contextMenuWidth
+    }
+    return {
+      pos: {
+        left: left + 'px',
+        top: top + 'px',
+        height: realHeight + 'px'
+      },
+      realHeight,
+      shouldScroll
+    }
+  }
+
+  onClick = (e, item) => {
+    const {
+      disabled,
+      func,
+      args,
+      noCloseMenu
+    } = item
+    if (disabled) {
+      return
+    }
+    postMessage({
+      action: commonActions.clickContextMenu,
+      id: this.state.id,
+      args,
+      func
+    })
+    if (!noCloseMenu) {
+      this.closeContextMenu()
+    }
+  }
+
+  renderSubText = (subText) => {
+    return subText
+      ? (<span className='context-sub-text'>{subText}</span>)
+      : null
+  }
+
+  renderSubMenu = (submenu) => {
+    if (!submenu) {
+      return
+    }
+    const Mod = this.modules[submenu]
+    return (
+      <Mod store={this.props.store} />
+    )
+  }
+
+  renderItem = (item, i) => {
+    const {
+      disabled,
+      icon,
+      text,
+      noAutoClose,
+      requireConfirm,
+      confirmTitle,
+      subText,
+      className,
+      type,
+      module,
+      submenu
+    } = item
+    if (type === 'hr') {
+      return <hr />
+    }
+    const baseCls = 'context-item'
+    if (module && this.modules[module]) {
+      const Mod = this.modules[module]
+      return (
+        <div className={baseCls}>
+          <Mod store={this.props.store} />
+        </div>
+      )
+    }
+    let iconElem = null
+    if (icon && this.icons[icon]) {
+      const Icon = this.icons[icon]
+      iconElem = <Icon />
+    }
+    const cls = classnames(
+      baseCls,
+      {
+        disabled
+      },
+      {
+        'no-auto-close-context': noAutoClose
+      },
+      className,
+      {
+        'with-sub-menu': submenu
+      }
+    )
+    const act = requireConfirm || submenu
+      ? noop
+      : (e) => this.onClick(e, item)
+    const unit = (
+      <div
+        key={`context-item-${i}-${text}`}
+        className={cls}
+        onClick={act}
+      >
+        {iconElem}{iconElem ? ' ' : ''}{text}
+        {
+          this.renderSubText(subText)
+        }
+        {
+          this.renderSubMenu(submenu)
+        }
+      </div>
+    )
+    if (!requireConfirm) {
+      return unit
+    }
+    const title = (
+      <div className='wordbreak'>{confirmTitle}</div>
+    )
+    return (
+      <Popconfirm
+        cancelText={c('cancel')}
+        key={`context-item-${i}-${text}`}
+        okText={c('ok')}
+        title={title}
+        onConfirm={(e) => this.onClick(e, item)}
+      >
+        {unit}
+      </Popconfirm>
+    )
+  }
+
+  renderItems = () => {
+    return this.state.items.map(this.renderItem)
+  }
+
+  render () {
+    const { id, className } = this.state
+    if (!id) {
+      return null
+    }
+    const {
+      pos,
+      shouldScroll,
+      realHeight
+    } = this.computePos()
+    const cls = classnames(
+      className,
+      id ? 'show' : 'hide',
+      shouldScroll ? 'scroll' : ''
+    )
+    const innerProps = {
+      className: 'context-menu-inner',
+      style: {
+        height: (realHeight - contextMenuPaddingTop * 2) + 'px'
+      }
+    }
+    return (
+      <div
+        className={cls}
+        style={pos}
+      >
+        <div
+          {...innerProps}
+        >
+          {this.renderItems()}
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/context-menu/context-menu.styl

@@ -0,0 +1,90 @@
+@require '../../css/includes/theme-default'
+.context-menu
+  position: absolute
+  width 220px
+  background main-dark
+  box-shadow 0px 0px 3px 3px alpha(main-dark, .35)
+  // border 1px solid #222
+  padding 10px 0
+  z-index 999
+  -webkit-app-region no-drag
+  color text
+  &.scroll
+    .context-menu-inner
+      overflow-x hidden
+      overflow-y scroll
+.context-item
+  -webkit-app-region no-drag
+  position relative
+  color text
+  height 28px
+  line-height 28px
+  padding 0 16px
+  &:hover
+    background #000
+    color #eee
+    cursor pointer
+  &.disabled
+    color alpha(text, .85)
+    &:hover
+      color #777
+      background #333
+      cursor not-allowed
+
+.context-sub-text
+  position absolute
+  right 16px
+  top 6px
+  opacity .65
+
+.context-menu
+  hr
+    margin 0
+    border none
+    border-bottom 1px solid main-light
+.sub-context-menu
+  display none
+  width 200px
+  position absolute
+  left 100%
+  top 0
+  background main-dark
+  box-shadow 0px 0px 3px 3px alpha(main, .35)
+  max-height 300px
+  overflow-y scroll
+.with-sub-menu
+  &:hover
+    .sub-context-menu
+      display block
+.sub-context-menu-item
+  cursor pointer
+  padding 10px 16px
+  overflow hidden
+  white-space nowrap
+  text-overflow ellipsis
+  &:hover, &.active
+    background-color primary
+    color contrastColor(primary)
+.bookmarks-sub-context-menu
+  width 380px
+  padding 20px 10px 10px 20px
+
+.menu-control
+  width 28px
+  height 28px
+  border-radius 30px
+  color text
+  font-size 16px
+  text-align center
+  display inline-block
+  line-height 28px
+  cursor pointer
+  opacity .6
+  &:hover
+    opacity 1
+.is-main
+  .menu-control
+    img
+      border 1px solid text-dark
+      border-radius 28px
+      background #000