@electerm/electerm-react 1.34.30

package/client/components/icons/match-case.jsx

@@ -0,0 +1,10 @@
+import Icon from '@ant-design/icons'
+
+// from https://icon-sets.iconify.design/codicon/case-sensitive/
+const matchCaseSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 16 16'>
+    <path fill='currentColor' d='M8.854 11.702h-1l-.816-2.159H3.772l-.768 2.16H2L4.954 4h.935l2.965 7.702Zm-2.111-2.97L5.534 5.45a3.142 3.142 0 0 1-.118-.515h-.021c-.036.218-.077.39-.124.515L4.073 8.732h2.67Zm7.013 2.97h-.88v-.86h-.022c-.383.66-.947.99-1.692.99c-.548 0-.978-.146-1.29-.436c-.307-.29-.461-.675-.461-1.155c0-1.027.605-1.625 1.815-1.794l1.65-.23c0-.935-.379-1.403-1.134-1.403c-.663 0-1.26.226-1.794.677V6.59c.54-.344 1.164-.516 1.87-.516c1.292 0 1.938.684 1.938 2.052v3.577Zm-.88-2.782l-1.327.183c-.409.057-.717.159-.924.306c-.208.143-.312.399-.312.768c0 .268.095.489.285.66c.193.169.45.253.768.253a1.41 1.41 0 0 0 1.08-.457c.286-.308.43-.696.43-1.165V8.92Z' />
+  </svg>
+)
+
+export const MatchCaseIcon = props => (<Icon component={matchCaseSvg} {...props} />)

package/client/components/icons/match-whole-word.jsx

@@ -0,0 +1,13 @@
+import Icon from '@ant-design/icons'
+
+// from https://icon-sets.iconify.design/codicon/whole-word/
+const matchWholeWordSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 16 16'>
+    <g fill='currentColor'>
+      <path fillRule='evenodd' d='M0 11h1v2h14v-2h1v3H0v-3Z' clipRule='evenodd' />
+      <path d='M6.84 11h-.88v-.86h-.022c-.383.66-.947.989-1.692.989c-.548 0-.977-.145-1.289-.435c-.308-.29-.462-.675-.462-1.155c0-1.028.605-1.626 1.816-1.794l1.649-.23c0-.935-.378-1.403-1.134-1.403c-.662 0-1.26.226-1.794.677v-.902c.541-.344 1.164-.516 1.87-.516c1.292 0 1.938.684 1.938 2.052V11Zm-.88-2.782L4.633 8.4c-.408.058-.716.16-.924.307c-.208.143-.311.399-.311.768c0 .268.095.488.284.66c.194.168.45.253.768.253a1.41 1.41 0 0 0 1.08-.457c.286-.308.43-.696.43-1.165v-.548Zm3.388 1.987h-.022V11h-.88V2.857h.88v3.61h.021c.434-.73 1.068-1.096 1.902-1.096c.705 0 1.257.247 1.654.741c.401.49.602 1.15.602 1.977c0 .92-.224 1.658-.672 2.213c-.447.551-1.06.827-1.837.827c-.726 0-1.276-.308-1.649-.924Zm-.022-2.218v.768c0 .455.147.841.44 1.16c.298.315.674.473 1.128.473c.534 0 .951-.204 1.252-.613c.304-.408.456-.975.456-1.702c0-.613-.141-1.092-.424-1.44c-.283-.347-.666-.52-1.15-.52c-.511 0-.923.178-1.235.536c-.311.355-.467.8-.467 1.338Z' />
+    </g>
+  </svg>
+)
+
+export const MatchWholWordIcon = props => <Icon component={matchWholeWordSvg} {...props} />

package/client/components/icons/regular-exp.jsx

@@ -0,0 +1,10 @@
+import Icon from '@ant-design/icons'
+
+// from https://icon-sets.iconify.design/codicon/regex/
+const regExpSvg = () => (
+  <svg width='1em' height='1em' viewBox='0 0 16 16'>
+    <path fill='currentColor' fillRule='evenodd' d='M10.012 2h.976v3.113l2.56-1.557l.486.885L11.47 6l2.564 1.559l-.485.885l-2.561-1.557V10h-.976V6.887l-2.56 1.557l-.486-.885L9.53 6L6.966 4.441l.485-.885l2.561 1.557V2zM2 10h4v4H2v-4z' clipRule='evenodd' />
+  </svg>
+)
+
+export const RegularExpIcon = props => (<Icon component={regExpSvg} {...props} />)

package/client/components/main/css-overwrite.jsx

@@ -0,0 +1,92 @@
+/**
+ * btns
+ */
+
+import { PureComponent } from 'react'
+import fs from '../../common/fs'
+import { noTerminalBgValue } from '../../common/constants'
+
+export default class CssOverwrite extends PureComponent {
+  // componentDidMount () {
+  //   setTimeout(this.writeCss, 3000)
+  // }
+
+  componentDidUpdate (prevProps) {
+    Object.keys(this.props).some(key => {
+      if (key.startsWith('terminalBackground') && prevProps[key] !== this.props[key]) {
+        this.updateCss()
+        return true
+      }
+      return false
+    })
+    if (!prevProps.wsInited && this.props.wsInited) {
+      this.writeCss()
+    }
+  }
+
+  createStyle = async () => {
+    const { terminalBackgroundImagePath } = this.props
+    let content = ''
+    let st = ''
+    const isWebImg = /^https?:\/\//.test(terminalBackgroundImagePath)
+    if (noTerminalBgValue === terminalBackgroundImagePath) {
+      st = 'none'
+    } else if (terminalBackgroundImagePath && !isWebImg) {
+      content = await fs.readFileAsBase64(terminalBackgroundImagePath)
+        .catch(log.error)
+      if (content) {
+        st = `url(data:image;base64,${content}) !important`
+      }
+    } else if (terminalBackgroundImagePath && isWebImg) {
+      st = `url(${terminalBackgroundImagePath}) !important`
+    }
+    if (!st) {
+      return `#container .session-current .xterm-viewport {
+        background-image: url("./images/electerm-watermark.png");
+      }`
+    }
+
+    const styles = [
+      `background-image: ${st}`,
+      'background-size: cover',
+      'background-position: center'
+    ]
+
+    if (st !== 'none') {
+      styles.push(`filter: blur(${
+        this.props.terminalBackgroundFilterBlur
+      }px) opacity(${
+        +this.props.terminalBackgroundFilterOpacity
+      }) brightness(${
+        +this.props.terminalBackgroundFilterBrightness
+      }) contrast(${
+        +this.props.terminalBackgroundFilterContrast
+      }) grayscale(${
+        +this.props.terminalBackgroundFilterGrayscale
+      })`)
+    }
+
+    return `#container .session-current .xterm-viewport {
+      ${styles.join(';')} 
+    }`
+  }
+
+  writeCss = async () => {
+    const style = document.createElement('style')
+    style.type = 'text/css'
+    style.innerHTML = await this.createStyle()
+    style.id = 'css-overwrite'
+    document.getElementsByTagName('head')[0].appendChild(style)
+  }
+
+  updateCss = async () => {
+    const style = document.getElementById('css-overwrite')
+    if (style) {
+      style.innerHTML = await this.createStyle()
+    }
+  }
+
+  render () {
+    return null
+  }
+}

package/client/components/main/error-wrapper.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { FrownOutlined, ReloadOutlined } from '@ant-design/icons'
+import { Button } from 'antd'
+import {
+  logoPath1
+} from '../../common/constants'
+
+const { prefix } = window
+const e = prefix('main')
+const m = prefix('menu')
+
+export default class ErrorBoundary extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.state = {
+      hasError: false,
+      error: {}
+    }
+  }
+
+  componentDidCatch (error) {
+    log.error(error)
+    this.setState({
+      hasError: true,
+      error
+    })
+  }
+
+  handleReload = () => {
+    window.location.reload()
+  }
+
+  render () {
+    if (this.state.hasError) {
+      const { stack, message } = this.state.error
+      return (
+        <div className='pd3 aligncenter error-wrapper'>
+          <div className='pd2y aligncenter'>
+            <img src={logoPath1} className='iblock mwm-100' />
+          </div>
+          <h1>
+            <FrownOutlined className='mg1r iblock' />
+            <span className='iblock mg1r'>{e('error')}</span>
+            <Button
+              onClick={this.handleReload}
+              className='iblock'
+              icon={<ReloadOutlined />}
+            >
+              {m('reload')}
+            </Button>
+          </h1>
+          <div className='pd1y'>{message}</div>
+          <div className='pd1y'>{stack}</div>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}

package/client/components/main/index.jsx

@@ -0,0 +1,11 @@
+import ErrorBoundary from './error-wrapper'
+import Main from './main'
+import store from '../../store'
+
+export default function MainEntry () {
+  return (
+    <ErrorBoundary>
+      <Main store={store} />
+    </ErrorBoundary>
+  )
+}

package/client/components/main/loading.jsx

@@ -0,0 +1,25 @@
+import LogoElem from '../common/logo-elem'
+import { PureComponent } from 'react'
+
+export class LoadingUI extends PureComponent {
+  state = {
+    show: true
+  }
+
+  hide = () => {
+    this.setState({
+      show: false
+    })
+  }
+
+  render () {
+    if (!this.state.show) {
+      return null
+    }
+    return (
+      <div className='loading-data'>
+        <LogoElem />
+      </div>
+    )
+  }
+}

package/client/components/main/main.jsx

@@ -0,0 +1,149 @@
+import { Component } from '../common/react-subx'
+import Sessions from '../session/sessions'
+import ContextMenu from '../context-menu/context-menu'
+import FileInfoModal from '../sftp/file-props-modal'
+import FileModeModal from '../sftp/file-mode-modal'
+import UpdateCheck from './upgrade'
+import SettingModal from '../setting-panel/setting-modal'
+import TextEditor from '../text-editor/text-editor'
+import Sidebar from '../sidebar'
+import BatchOp from '../batch-op/batch-op'
+import CssOverwrite from './css-overwrite'
+import UiTheme from './ui-theme'
+import TerminalInteractive from '../terminal/terminal-interactive'
+import classnames from 'classnames'
+import { isMac, isWin } from '../../common/constants'
+import TermFullscreenControl from './term-fullscreen-control'
+import { LoadingUI } from './loading'
+import { ConfigProvider, notification } from 'antd'
+import './wrapper.styl'
+
+export default class Index extends Component {
+  componentDidMount () {
+    notification.config({
+      placement: 'bottomRight'
+    })
+    const { store } = this.props
+    window.addEventListener('resize', store.onResize)
+    store.onResize()
+    store.initStoreEvents()
+    const { ipcOnEvent } = window.pre
+    ipcOnEvent('checkupdate', store.onCheckUpdate)
+    ipcOnEvent('open-about', store.openAbout)
+    ipcOnEvent('new-ssh', store.onNewSsh)
+    ipcOnEvent('add-tab-from-command-line', store.addTabFromCommandLine)
+    ipcOnEvent('openSettings', store.openSetting)
+    ipcOnEvent('selectall', store.selectall)
+    ipcOnEvent('focused', store.focus)
+    ipcOnEvent('blur', store.onBlur)
+    ipcOnEvent('zoom-reset', store.onZoomReset)
+    ipcOnEvent('zoomin', store.onZoomIn)
+    ipcOnEvent('zoomout', store.onZoomout)
+
+    document.addEventListener('drop', function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+    })
+    document.addEventListener('dragover', function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+    })
+    window.addEventListener('offline', store.setOffline)
+    window.addEventListener('mousewheel', store.onMouseWheel)
+    window.addEventListener('keydown', store.onKeyDown)
+    store.isSencondInstance = window.pre.runSync('isSencondInstance')
+    store.initData()
+    store.checkForDbUpgrade()
+  }
+
+  render () {
+    const { store } = this.props
+    const {
+      configLoaded,
+      config,
+      terminalFullScreen,
+      pinned,
+      isSencondInstance,
+      pinnedQuickCommandBar,
+      wsInited,
+      upgradeInfo,
+      installSrc,
+      uiThemeConfig
+    } = store
+    const cls = classnames({
+      loaded: configLoaded,
+      'system-ui': store.config.useSystemTitleBar,
+      'is-mac': isMac,
+      'is-win': isWin,
+      pinned,
+      'qm-pinned': pinnedQuickCommandBar,
+      'term-fullscreen': terminalFullScreen,
+      'is-main': !isSencondInstance
+    })
+    const ext1 = {
+      className: cls
+    }
+    const cpConf = config
+    const confsCss = Object
+      .keys((cpConf))
+      .filter(d => d.startsWith('terminalBackground'))
+      .reduce((p, k) => {
+        return {
+          ...p,
+          [k]: cpConf[k]
+        }
+      }, {})
+    const themeProps = {
+      themeConfig: store.getUiThemeConfig()
+    }
+    const outerProps = {
+      style: {
+        opacity: config.opacity
+      }
+    }
+    return (
+      <ConfigProvider
+        theme={uiThemeConfig}
+      >
+        <div {...ext1}>
+          <LoadingUI
+            wsInited={wsInited}
+          />
+          <TermFullscreenControl
+            terminalFullScreen={terminalFullScreen}
+          />
+          <CssOverwrite
+            {...confsCss}
+            wsInited={wsInited}
+          />
+          <TerminalInteractive />
+          <UiTheme
+            {...themeProps}
+            buildTheme={store.buildTheme}
+          />
+          <TextEditor />
+          <UpdateCheck
+            skipVersion={cpConf.skipVersion}
+            upgradeInfo={upgradeInfo}
+            installSrc={installSrc}
+          />
+          <FileInfoModal />
+          <FileModeModal />
+          <SettingModal store={store} />
+          <BatchOp store={store} />
+          <div
+            id='outside-context'
+            {...outerProps}
+          >
+            <Sidebar store={store} />
+            <Sessions
+              store={store}
+              config={cpConf}
+            />
+          </div>
+          <ContextMenu store={store} />
+        </div>
+      </ConfigProvider>
+    )
+  }
+}

package/client/components/main/term-fullscreen-control.jsx

@@ -0,0 +1,21 @@
+/**
+ * btns
+ */
+
+import { FullscreenExitOutlined } from '@ant-design/icons'
+import './term-fullscreen.styl'
+
+export default function TermFullscreenControl (props) {
+  const handleExitFullscreen = () => {
+    window.store.toggleTermFullscreen(false)
+  }
+  if (!props.terminalFullScreen) {
+    return null
+  }
+  return (
+    <FullscreenExitOutlined
+      className='mg1r icon-info font16 pointer spliter term-fullscreen-control'
+      onClick={handleExitFullscreen}
+    />
+  )
+}

package/client/components/main/term-fullscreen.styl

@@ -0,0 +1,27 @@
+.term-fullscreen
+  .sidebar
+  .tabs
+  .terminal-footer
+  .terminal-control
+  .qm-wrap-tooltip
+  .main-footer
+    display none
+  .term-fullscreen-control
+    display block
+    right 10px
+    top 10px
+    position fixed
+    z-index 100
+  .term-wrap
+    position fixed
+    left 0 !important
+    top 0 !important
+    height 100% !important
+    width 100% !important
+  .term-wrap-1
+    left 10px !important
+    top 10px !important
+    right 10px !important
+    bottom 10px !important
+.term-fullscreen-control
+  display none

package/client/components/main/ui-theme.jsx

@@ -0,0 +1,31 @@
+/**
+ * ui theme
+ */
+
+import { useEffect } from 'react'
+import { useDelta, useConditionalEffect } from 'react-delta'
+import eq from 'fast-deep-equal'
+
+const themeDomId = 'theme-css'
+
+export default function UiTheme (props) {
+  const { themeConfig, buildTheme } = props
+
+  const delta = useDelta(themeConfig)
+
+  async function applyTheme () {
+    const stylus = document.getElementById(themeDomId)
+    const {
+      stylusCss
+    } = await buildTheme(themeConfig)
+    stylus.innerHTML = stylusCss
+  }
+
+  useEffect(() => {
+    applyTheme()
+  }, [])
+  useConditionalEffect(() => {
+    applyTheme()
+  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  return null
+}