@electerm/electerm-react 1.34.30

package/client/components/setting-panel/list.jsx

@@ -0,0 +1,186 @@
+/**
+ * history list
+ */
+import React from 'react'
+import { CloseOutlined, EditOutlined, LoadingOutlined } from '@ant-design/icons'
+import { Popconfirm } from 'antd'
+import Search from '../common/search'
+import createName from '../../common/create-title'
+import classnames from 'classnames'
+import { noop } from 'lodash-es'
+import highlight from '../common/highlight'
+import { settingSyncId, settingCommonId } from '../../common/constants'
+import './list.styl'
+
+const { prefix } = window
+const e = prefix('menu')
+const c = prefix('common')
+const s = prefix('setting')
+
+export default class ItemList extends React.PureComponent {
+  state = {
+    keyword: '',
+    ready: false,
+    labels: [],
+    page: 1,
+    pageSize: 10
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 200)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  handleChange = e => {
+    this.setState({
+      page: 1,
+      keyword: e.target.value
+    })
+  }
+
+  del = (item, e) => {
+    e.stopPropagation()
+    this.props.store.delItem(item, this.props.type)
+  }
+
+  editItem = (e, item, isGroup) => {
+    e.stopPropagation()
+    this.props.store.openBookmarkEdit(item)
+  }
+
+  renderSearch = () => {
+    return (
+      <div className='pd1y'>
+        <Search
+          onChange={this.handleChange}
+          value={this.state.keyword}
+        />
+      </div>
+    )
+  }
+
+  renderDelBtn = item => {
+    if (!item.id || [settingSyncId, settingCommonId].includes(item.id) || item.id.startsWith('default')) {
+      return null
+    }
+    const { shouldConfirmDel } = this.props
+    const icon = (
+      <CloseOutlined
+        title={e('del')}
+        className='pointer list-item-remove'
+        onClick={
+          shouldConfirmDel
+            ? noop
+            : e => this.del(item, e)
+        }
+      />
+    )
+    if (shouldConfirmDel) {
+      return (
+        <Popconfirm
+          title={e('del') + '?'}
+          onConfirm={e => this.del(item, e)}
+          okText={e('del')}
+          cancelText={c('cancel')}
+          placement='top'
+        >
+          {icon}
+        </Popconfirm>
+      )
+    }
+    return icon
+  }
+
+  renderItem = (item, i) => {
+    const { onClickItem, type, activeItemId } = this.props
+    const { id } = item
+    const title = createName(item)
+    const cls = classnames(
+      'item-list-unit',
+      {
+        active: activeItemId === id
+      }
+    )
+    const titleHighlight = highlight(
+      title,
+      this.state.keyword
+    )
+    const isGroup = false
+    return (
+      <div
+        key={i + '__' + id}
+        className={cls}
+        onClick={() => onClickItem(item, type)}
+      >
+        <div
+          title={title}
+          className='elli pd1y pd2x list-item-title'
+        >{titleHighlight || s('new')}
+        </div>
+        {this.renderDelBtn(item)}
+        {this.renderEditBtn(item, isGroup)}
+      </div>
+    )
+  }
+
+  filter = list => {
+    const { keyword } = this.state
+    return keyword
+      ? list.filter(item => {
+        return createName(item).toLowerCase().includes(keyword.toLowerCase())
+      })
+      : list
+  }
+
+  renderEditBtn = (item, isGroup) => {
+    if (
+      (this.props.staticList && isGroup) ||
+      (!this.props.staticList && !isGroup)
+    ) {
+      return null
+    }
+    return (
+      <EditOutlined
+        title={e('edit')}
+        onClick={(e) => this.editItem(e, item, isGroup)}
+        className='pointer list-item-edit'
+      />
+    )
+  }
+
+  render () {
+    const { ready } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    let {
+      list = [],
+      type,
+      listStyle = {}
+    } = this.props
+    list = this.filter(list)
+    return (
+      <div className={`item-list item-type-${type}`}>
+        {this.renderTransport ? this.renderTransport() : null}
+        {this.renderLabels ? this.renderLabels() : null}
+        {this.renderSearch()}
+        <div className='item-list-wrap' style={listStyle}>
+          {
+            list.map(this.renderItem)
+          }
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/setting-panel/list.styl

@@ -0,0 +1,33 @@
+@require '../../css/includes/theme-default'
+.item-list-wrap
+  overflow-y scroll
+  &::-webkit-scrollbar
+    width 0
+.list-item-edit
+.list-item-apply
+.list-item-remove
+  display none
+  width 24px
+  line-height 35px
+  text-align center
+.list-item-title
+  flex-grow: 1
+.item-list-unit
+  display flex
+  position relative
+  margin-bottom 1px
+  cursor pointer
+  line-height 1.8
+  cu
+  &.active
+    background primary
+    color contrastColor(primary)
+  &.current
+    font-weight bold
+  &:hover
+    background darken(primary, 30%)
+    color contrastColor(darken(primary, 30%))
+    .list-item-apply
+    .list-item-edit
+    .list-item-remove
+      display block

package/client/components/setting-panel/on-tree-drop.js

@@ -0,0 +1,222 @@
+/**
+ * handle tree on drop event to support category drag/drop in any form
+ */
+
+import {
+  defaultBookmarkGroupId
+} from '../../common/constants'
+import { isEqual, find, findIndex, last, remove } from 'lodash-es'
+import copy from 'json-deep-copy'
+
+export default (info, props) => {
+  const {
+    dropToGap,
+    dragNode,
+    node,
+    dropPosition
+  } = info
+  const fromId = dragNode.key
+  const toId = node.key
+  const fromPoses = dragNode.pos.split('-').map(Number)
+  const fromPosesLevel = fromPoses.slice(0, fromPoses.length - 1)
+  const toPoses = node.pos.split('-').map(Number)
+  const toPosesLevel = toPoses.slice(0, toPoses.length - 1)
+  const isSameLevel = fromPosesLevel.length === toPosesLevel.length
+  const isSameCat = isEqual(fromPosesLevel, toPosesLevel) && dropToGap
+  const bookmarks = copy(props.bookmarks)
+  const bookmarkGroups = copy(
+    props.bookmarkGroups
+  )
+  let from = find(
+    bookmarks,
+    d => d.id === fromId
+  ) || find(
+    bookmarkGroups,
+    d => d.id === fromId
+  )
+  const fromLeaf = !!from && !from.bookmarkIds
+  let to = find(
+    bookmarks,
+    d => d.id === toId
+  ) || find(
+    bookmarkGroups,
+    d => d.id === toId
+  )
+  const toLeaf = !!to && !to.bookmarkIds
+
+  // no match
+  if (!to || !from) {
+    return
+  }
+
+  // // drop to a leaf
+  // if (toLeaf && !dropToGap) {
+  //   return
+  // }
+
+  // drag default cateogry to other level
+  if (fromId === defaultBookmarkGroupId && !isSameLevel) {
+    return
+  }
+
+  // drag default cateogry to nongap
+  if (fromId === defaultBookmarkGroupId && !dropToGap) {
+    return
+  }
+
+  // drag cateogry with subscategory to non gap
+  if (!fromLeaf && !dropToGap && from.bookmarkGroupIds && from.bookmarkGroupIds.length) {
+    return
+  }
+
+  // drag cat to level2 node
+  if (!fromLeaf && toPoses.length > 2) {
+    return
+  }
+
+  // drag node to first level
+  if (fromLeaf && toPoses.length <= 2 && dropToGap) {
+    return
+  }
+
+  // drag leaf node to cat gap
+  if (fromLeaf && toPoses.length > 2 && dropToGap && !toLeaf) {
+    return
+  }
+
+  // let's confirm the drop position
+  to = copy(to)
+  let fromGroup = null
+  if (fromPoses.length > 2) {
+    fromGroup = fromLeaf
+      ? find(
+        bookmarkGroups,
+        d => (d.bookmarkIds || []).includes(fromId)
+      )
+      : find(
+        bookmarkGroups,
+        d => (d.bookmarkGroupIds || []).includes(fromId)
+      )
+  }
+  let toGroup = null
+  const toFirstLevel = toPoses.length === 2 && dropToGap
+  if (!toFirstLevel) {
+    toGroup = dropToGap
+      ? find(
+        bookmarkGroups,
+        d => {
+          const arr = toLeaf
+            ? d.bookmarkIds
+            : d.bookmarkGroupIds
+          return (arr || []).includes(toId)
+        }
+      )
+      : (
+          toLeaf
+            ? find(
+              bookmarkGroups,
+              d => (d.bookmarkIds || []).includes(toId)
+            )
+            : find(
+              bookmarkGroups,
+              d => d.id === toId
+            )
+        )
+  }
+  let nodeIndex = 0
+  if (toGroup) {
+    const pool = toLeaf
+      ? toGroup.bookmarkIds || []
+      : toGroup.bookmarkGroupIds || []
+    nodeIndex = dropToGap
+      ? findIndex(pool, d => d === toId)
+      : pool.length
+    if (dropToGap) {
+      if (fromLeaf) {
+        nodeIndex = dropPosition < last(toPoses)
+          ? nodeIndex - 1
+          : nodeIndex + 1
+      } else {
+        nodeIndex = dropPosition < last(toPoses)
+          ? nodeIndex
+          : nodeIndex + 1
+      }
+    }
+  } else {
+    nodeIndex = findIndex(bookmarkGroups, d => {
+      return d.id === toId
+    })
+    if (fromLeaf) {
+      nodeIndex = dropPosition < last(toPoses)
+        ? nodeIndex - 1
+        : nodeIndex + 1
+    } else {
+      nodeIndex = dropPosition < last(toPoses)
+        ? nodeIndex
+        : nodeIndex + 1
+    }
+  }
+  if (nodeIndex < 0) {
+    nodeIndex = 0
+  }
+  let fromIndex = 0
+  if (!fromLeaf) {
+    from.level = toFirstLevel ? 1 : 2
+  }
+  const updates = []
+  if (toFirstLevel) {
+    fromIndex = findIndex(bookmarkGroups, d => d.id === fromId)
+    from = copy(from)
+    bookmarkGroups.splice(fromIndex, 1, 'tobedel')
+    bookmarkGroups.splice(nodeIndex, 0, from)
+    remove(bookmarkGroups, d => d === 'tobedel')
+    if (fromGroup) {
+      remove(fromGroup.bookmarkGroupIds, d => d === fromId)
+    }
+  } else if (fromGroup) {
+    const arr = fromLeaf
+      ? fromGroup.bookmarkIds
+      : fromGroup.bookmarkGroupIds
+    fromIndex = findIndex(arr, d => d === fromId)
+    isSameCat
+      ? arr.splice(fromIndex, 1, 'tobedel')
+      : remove(arr, d => d === fromId)
+  }
+  if (!toFirstLevel) {
+    const arr = !fromLeaf
+      ? toGroup.bookmarkGroupIds
+      : toGroup.bookmarkIds
+    arr.splice(nodeIndex, 0, fromId)
+    if (isSameCat) {
+      remove(arr, d => d === 'tobedel')
+    }
+  }
+  if (fromGroup) {
+    const { id, ...rest } = fromGroup
+    updates.push({
+      id,
+      db: 'bookmarkGroups',
+      update: rest,
+      upsert: false
+    })
+  }
+  if (toGroup) {
+    const { id, ...rest } = toGroup
+    updates.push({
+      id,
+      db: 'bookmarkGroups',
+      update: rest,
+      upsert: false
+    })
+  } else if (from) {
+    const { id, ...rest } = from
+    updates.push({
+      id,
+      db: 'bookmarkGroups',
+      update: rest,
+      upsert: false
+    })
+  }
+  props.store.setBookmarkGroups(bookmarkGroups)
+  props.store.batchDbUpdate(updates)
+}

package/client/components/setting-panel/setting-modal.jsx

@@ -0,0 +1,163 @@
+/**
+ * hisotry/bookmark/setting modal
+ */
+
+import { Component } from '../common/react-subx'
+import { pick } from 'lodash-es'
+import { Tabs } from 'antd'
+import SettingModal from './setting-wrap'
+import {
+  settingMap,
+  modals
+} from '../../common/constants'
+import TabBookmarks from './tab-bookmarks'
+import TabHistory from './tab-history'
+import TabQuickCommands from './tab-quick-commands'
+import TabSettings from './tab-settings'
+import TabThemes from './tab-themes'
+
+const { prefix } = window
+const m = prefix('common')
+const t = prefix('terminalThemes')
+const q = prefix('quickCommands')
+
+export default class SettingModalWrap extends Component {
+  selectItem = (item) => {
+    const { store } = this.props
+    store.setSettingItem(item)
+  }
+
+  renderTabs () {
+    const { store } = this.props
+    const tabsShouldConfirmDel = [
+      settingMap.bookmarks,
+      settingMap.terminalThemes
+    ]
+    const { settingTab, settingItem, settingSidebarList, bookmarkSelectMode } = store
+    const props0 = {
+      store,
+      activeItemId: settingItem.id,
+      type: settingTab,
+      onClickItem: this.selectItem,
+      shouldConfirmDel: tabsShouldConfirmDel.includes(settingTab),
+      list: settingSidebarList
+    }
+    const formProps = {
+      store,
+      formData: settingItem,
+      type: settingTab,
+      hide: store.hideSettingModal,
+      ...pick(store, [
+        'currentBookmarkGroupId',
+        'config'
+      ]),
+      bookmarkGroups: store.getBookmarkGroups(),
+      bookmarks: store.getBookmarks(),
+      serials: store.serials,
+      loaddingSerials: store.loaddingSerials
+    }
+    const treeProps = {
+      ...props0,
+      bookmarkSelectMode,
+      bookmarkGroups: store.getBookmarkGroups(),
+      bookmarks: store.getBookmarks(),
+      ...pick(store, [
+        'currentBookmarkGroupId',
+        'autofocustrigger',
+        'config'
+      ])
+    }
+    const items = [
+      {
+        key: settingMap.history,
+        label: m(settingMap.history),
+        children: null
+      },
+      {
+        key: settingMap.bookmarks,
+        label: m(settingMap.bookmarks),
+        children: null
+      },
+      {
+        key: settingMap.setting,
+        label: m(settingMap.setting),
+        children: null
+      },
+      {
+        key: settingMap.terminalThemes,
+        label: t('uiThemes'),
+        children: null
+      },
+      {
+        key: settingMap.quickCommands,
+        label: q(settingMap.quickCommands),
+        children: null
+      }
+    ]
+    return (
+      <div>
+        <Tabs
+          activeKey={settingTab}
+          animated={false}
+          items={items}
+          onChange={store.handleChangeSettingTab}
+          destroyInactiveTabPane
+          className='setting-tabs'
+        />
+        <TabHistory
+          listProps={props0}
+          settingItem={settingItem}
+          formProps={formProps}
+          settingTab={settingTab}
+        />
+        <TabQuickCommands
+          listProps={props0}
+          settingItem={settingItem}
+          formProps={formProps}
+          store={store}
+          settingTab={settingTab}
+        />
+        <TabBookmarks
+          treeProps={treeProps}
+          settingItem={settingItem}
+          formProps={formProps}
+          settingTab={settingTab}
+        />
+        <TabSettings
+          listProps={props0}
+          settingItem={settingItem}
+          settingTab={settingTab}
+          store={store}
+        />
+        <TabThemes
+          listProps={props0}
+          settingItem={settingItem}
+          formProps={formProps}
+          store={store}
+          settingTab={settingTab}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      showModal,
+      hideSettingModal,
+      innerWidth
+    } = this.props.store
+    const show = showModal === modals.setting
+    if (!show) {
+      return null
+    }
+    return (
+      <SettingModal
+        onCancel={hideSettingModal}
+        visible={show}
+        innerWidth={innerWidth}
+      >
+        {this.renderTabs()}
+      </SettingModal>
+    )
+  }
+}

package/client/components/setting-panel/setting-wrap.jsx

@@ -0,0 +1,37 @@
+/**
+ * settings page
+ */
+
+import { Component } from 'react'
+import { Drawer } from 'antd'
+import { CloseCircleOutlined } from '@ant-design/icons'
+import { sidebarWidth } from '../../common/constants'
+import './setting-wrap.styl'
+
+export default class SettingWrap extends Component {
+  render () {
+    const pops = {
+      open: this.props.visible,
+      onClose: this.props.onCancel,
+      className: 'setting-wrap',
+      width: this.props.innerWidth - sidebarWidth,
+      zIndex: 888,
+      placement: 'left',
+      destroyOnClose: true,
+      headerStyle: {
+        display: 'none'
+      }
+    }
+    return (
+      <Drawer
+        {...pops}
+      >
+        <CloseCircleOutlined
+          className='close-setting-wrap'
+          onClick={this.props.onCancel}
+        />
+        {this.props.visible ? this.props.children : null}
+      </Drawer>
+    )
+  }
+}

package/client/components/setting-panel/setting-wrap.styl

@@ -0,0 +1,52 @@
+@require '../../css/includes/theme-default'
+
+.setting-wrap
+  color text
+
+body .ant-drawer .ant-drawer-content-wrapper
+  left 43px
+// .setting-wrap-hide
+//   width 0
+//   border-left-width 0
+.close-setting-wrap
+  position absolute
+  left 20px
+  top 70px
+  font-size 16px
+  color text
+  cursor pointer
+  z-index 889
+  &:hover
+    color text
+.setting-row
+  position absolute
+  top 127px
+  overflow-y scroll
+.setting-row-left
+  left 0
+  width 340px
+  bottom 0
+  padding 20px 0 20px 20px
+  .ant-tree
+    background none
+.setting-row-right
+  left 340px
+  right 0
+  bottom 0
+  top 129px
+  padding 20px
+.setting-tabs-bookmarks
+  .setting-row-left
+    width 440px
+  .setting-row-right
+    left 483px
+.setting-tabs
+  position absolute
+  z-index 4
+  left 0
+  top 0
+  right 0
+  padding 55px 20px 0 50px
+.setting-col
+  ::-webkit-scrollbar
+    width 0