@electerm/electerm-react 5.0.8 → 5.1.6

package/client/components/sidebar/index.jsx

@@ -1,27 +1,20 @@
 import {
-  BookOutlined,
-  CloudSyncOutlined,
   InfoCircleOutlined,
-  PictureOutlined,
-  PlusCircleOutlined,
-  SettingOutlined,
   UpCircleOutlined,
-  AppstoreOutlined,
-  ThunderboltOutlined,
   AimOutlined,
   MenuFoldOutlined
 } from '@ant-design/icons'
-import { Tooltip, Popover } from 'antd'
+import { Tooltip } from 'antd'
 import SideBarPanel from './sidebar-panel'
-import TransferList from './transfer-list'
 import MenuBtn from '../sys-menu/menu-btn'
-import QuickConnect from '../tabs/quick-connect'
 import {
   settingMap,
   modals
 } from '../../common/constants'
 import SideIcon from './side-icon'
 import SidePanel from './side-panel'
+import LeftSidebarIcons from './left-sidebar-icons'
+import TransferList from './transfer-list'
 import hasActiveInput from '../../common/has-active-input'
 import './sidebar.styl'
 
@@ -47,7 +40,9 @@ export default function Sidebar (props) {
     showInfoModal,
     sidebarPanelTab,
     openWidgetsModal,
-    zoom
+    zoom,
+    leftSideBarIcons,
+    widgetInstancesLength
   } = props
 
   const { store } = window
@@ -146,67 +141,23 @@ export default function Sidebar (props) {
         <div className='control-icon-wrap'>
           <MenuBtn store={store} config={store.config} />
         </div>
-        <SideIcon
-          title={e('newBookmark')}
-        >
-          <PlusCircleOutlined
-            className='font22 iblock control-icon'
-            onClick={onNewSsh}
-          />
-        </SideIcon>
-        <Popover
-          content={<QuickConnect inputOnly />}
-          trigger='click'
-          placement='right'
-        >
-          <div className='control-icon-wrap' title={e('quickConnect')}>
-            <ThunderboltOutlined
-              className='font20 iblock control-icon'
-            />
-          </div>
-        </Popover>
-        <SideIcon
-          title={e(settingMap.bookmarks)}
-          active={bookmarksActive}
-        >
-          <BookOutlined
-            onClick={handleClickBookmark}
-            className='font20 iblock control-icon'
-          />
-        </SideIcon>
+        <LeftSidebarIcons
+          iconIds={leftSideBarIcons}
+          handleClickBookmark={handleClickBookmark}
+          onNewSsh={onNewSsh}
+          openSetting={openSetting}
+          openSettingSync={openSettingSync}
+          openTerminalThemes={openTerminalThemes}
+          openWidgetsModal={openWidgetsModal}
+          bookmarksActive={bookmarksActive}
+          themeActive={themeActive}
+          settingActive={settingActive}
+          syncActive={syncActive}
+          widgetsActive={widgetsActive}
+          isSyncingSetting={isSyncingSetting}
+          widgetInstancesLength={widgetInstancesLength}
+        />
         <TransferList {...transferProps} />
-        <SideIcon
-          title={e(settingMap.terminalThemes)}
-          active={themeActive}
-        >
-          <PictureOutlined
-            className='font20 iblock pointer control-icon'
-            onClick={openTerminalThemes}
-          />
-        </SideIcon>
-        <SideIcon
-          title={e(settingMap.setting)}
-          active={settingActive}
-        >
-          <SettingOutlined className='iblock font20 control-icon' onClick={openSetting} />
-        </SideIcon>
-        <SideIcon
-          title={e('settingSync')}
-          active={syncActive}
-        >
-          <CloudSyncOutlined
-            className='iblock font20 control-icon'
-            onClick={openSettingSync}
-            spin={isSyncingSetting}
-          />
-        </SideIcon>
-        <SideIcon
-          title={e('widgets')}
-          active={widgetsActive}
-        >
-          <AppstoreOutlined className='iblock font20 control-icon' onClick={openWidgetsModal} />
-        </SideIcon>
-
         <SideIcon
           title={e('about')}
           active={showInfoModal}

package/client/components/sidebar/left-sidebar-icons.jsx

@@ -0,0 +1,148 @@
+/**
+ * renders the customizable far-left sidebar icons.
+ *
+ * which icons appear, and in what order, is driven by `iconIds`
+ * (from config.leftSideBarIcons). The "about", "hide sidebar" and
+ * "file transfer" icons are not customizable — they are rendered
+ * directly by the parent (sidebar/index.jsx).
+ */
+
+import {
+  AppstoreOutlined,
+  BookOutlined,
+  CloudSyncOutlined,
+  PictureOutlined,
+  PlusCircleOutlined,
+  SettingOutlined,
+  ThunderboltOutlined
+} from '@ant-design/icons'
+import { Badge, Popover } from 'antd'
+import SideIcon from './side-icon'
+import QuickConnect from '../tabs/quick-connect'
+import { settingMap } from '../../common/constants'
+import { defaultLeftSideBarIcons } from '../../common/left-sidebar-icon-defs'
+
+const e = window.translate
+
+export default function LeftSidebarIcons (props) {
+  const {
+    iconIds,
+    handleClickBookmark,
+    onNewSsh,
+    openSetting,
+    openSettingSync,
+    openTerminalThemes,
+    openWidgetsModal,
+    bookmarksActive,
+    themeActive,
+    settingActive,
+    syncActive,
+    widgetsActive,
+    isSyncingSetting,
+    widgetInstancesLength
+  } = props
+
+  const ids = Array.isArray(iconIds) && iconIds.length
+    ? iconIds
+    : defaultLeftSideBarIcons
+
+  const registry = {
+    newBookmark: (
+      <SideIcon
+        key='newBookmark'
+        title={e('newBookmark')}
+      >
+        <PlusCircleOutlined
+          className='font22 iblock control-icon'
+          onClick={onNewSsh}
+        />
+      </SideIcon>
+    ),
+    quickConnect: (
+      <Popover
+        key='quickConnect'
+        content={<QuickConnect inputOnly />}
+        trigger='click'
+        placement='right'
+      >
+        <div
+          className='control-icon-wrap'
+          title={e('quickConnect')}
+        >
+          <ThunderboltOutlined className='font20 iblock control-icon' />
+        </div>
+      </Popover>
+    ),
+    bookmarks: (
+      <SideIcon
+        key='bookmarks'
+        title={e(settingMap.bookmarks)}
+        active={bookmarksActive}
+      >
+        <BookOutlined
+          onClick={handleClickBookmark}
+          className='font20 iblock control-icon'
+        />
+      </SideIcon>
+    ),
+    terminalThemes: (
+      <SideIcon
+        key='terminalThemes'
+        title={e(settingMap.terminalThemes)}
+        active={themeActive}
+      >
+        <PictureOutlined
+          className='font20 iblock pointer control-icon'
+          onClick={openTerminalThemes}
+        />
+      </SideIcon>
+    ),
+    setting: (
+      <SideIcon
+        key='setting'
+        title={e(settingMap.setting)}
+        active={settingActive}
+      >
+        <SettingOutlined
+          className='iblock font20 control-icon'
+          onClick={openSetting}
+        />
+      </SideIcon>
+    ),
+    settingSync: (
+      <SideIcon
+        key='settingSync'
+        title={e('settingSync')}
+        active={syncActive}
+      >
+        <CloudSyncOutlined
+          className='iblock font20 control-icon'
+          onClick={openSettingSync}
+          spin={isSyncingSetting}
+        />
+      </SideIcon>
+    ),
+    widgets: (
+      <SideIcon
+        key='widgets'
+        title={e('widgets')}
+        active={widgetsActive}
+      >
+        <Badge
+          count={widgetInstancesLength}
+          size='small'
+          offset={[0, 0]}
+          color='green'
+          overflowCount={99}
+        >
+          <AppstoreOutlined
+            className='iblock font20 control-icon'
+            onClick={openWidgetsModal}
+          />
+        </Badge>
+      </SideIcon>
+    )
+  }
+
+  return ids.map(id => registry[id] || null)
+}

package/client/components/sidebar/transfer-list.jsx

@@ -25,7 +25,7 @@ export default memo(function TransferList (props) {
   const bdProps = {
     count: len,
     size: 'small',
-    offset: [-10, -5],
+    offset: [0, 0],
     color,
     overflowCount: 99
   }

package/client/components/spice/spice-session.jsx

@@ -10,11 +10,11 @@ import {
   ReloadOutlined
 } from '@ant-design/icons'
 import {
-  Spin,
-  Switch
+  Spin
 } from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import RemoteFloatControl from '../common/remote-float-control'
+import SwitchLabel from '../common/switch'
 import './spice.styl'
 
 async function loadSpiceModule () {
@@ -132,8 +132,7 @@ export default class SpiceSession extends PureComponent {
     const scaleProps = {
       checked: this.state.scaleViewport,
       onChange: this.handleScaleViewChange,
-      unCheckedChildren: window.translate('scaleViewport'),
-      checkedChildren: window.translate('scaleViewport'),
+      label: window.translate('scaleViewport'),
       className: 'mg1l'
     }
     return (
@@ -144,7 +143,7 @@ export default class SpiceSession extends PureComponent {
             className='mg2r mg1l pointer'
           />
           {this.renderInfo()}
-          <Switch
+          <SwitchLabel
             {...scaleProps}
           />
         </div>

package/client/components/terminal/shortcut-bar-defs.js

@@ -0,0 +1,131 @@
+/**
+ * shortcut-bar data: the candidate button library, the default selection, and
+ * localStorage persistence. Pure data (no React) so it can be shared by the
+ * bar (shortcut-bar.jsx) and the edit modal (shortcut-bar-edit.jsx).
+ */
+
+import * as ls from '../../common/safe-local-storage'
+import { shortcutBarLsKey } from '../../common/constants'
+
+// build control bytes at runtime — keeps source free of literal control chars
+const ESC = String.fromCharCode(0x1b)
+const DEL = String.fromCharCode(0x7f)
+
+// --- candidate library -----------------------------------------------------
+
+const ctrlChars = 'abcdefghijklmnopqrstuvwxyz'.split('')
+const ctrlButtons = ctrlChars.map(ch => ({
+  id: 'ctrl+' + ch,
+  label: 'Ctrl+' + ch.toUpperCase(),
+  data: String.fromCharCode(ch.charCodeAt(0) - 96)
+}))
+
+const fKeys = [
+  ['f1', 'F1', ESC + 'OP'],
+  ['f2', 'F2', ESC + 'OQ'],
+  ['f3', 'F3', ESC + 'OR'],
+  ['f4', 'F4', ESC + 'OS'],
+  ['f5', 'F5', ESC + '[15~'],
+  ['f6', 'F6', ESC + '[17~'],
+  ['f7', 'F7', ESC + '[18~'],
+  ['f8', 'F8', ESC + '[19~'],
+  ['f9', 'F9', ESC + '[20~'],
+  ['f10', 'F10', ESC + '[21~'],
+  ['f11', 'F11', ESC + '[23~'],
+  ['f12', 'F12', ESC + '[24~']
+].map(([id, label, data]) => ({ id, label, data }))
+
+const navButtons = [
+  { id: 'esc', label: 'Esc', data: ESC },
+  { id: 'tab', label: 'Tab', data: '\t' },
+  { id: 'enter', label: 'Enter', data: '\r' },
+  { id: 'space', label: 'Space', data: ' ' },
+  { id: 'backspace', label: 'Bksp', data: DEL },
+  { id: 'arrow-up', label: '↑', data: ESC + '[A' },
+  { id: 'arrow-down', label: '↓', data: ESC + '[B' },
+  { id: 'arrow-right', label: '→', data: ESC + '[C' },
+  { id: 'arrow-left', label: '←', data: ESC + '[D' },
+  { id: 'home', label: 'Home', data: ESC + '[H' },
+  { id: 'end', label: 'End', data: ESC + '[F' },
+  { id: 'pageup', label: 'PgUp', data: ESC + '[5~' },
+  { id: 'pagedown', label: 'PgDn', data: ESC + '[6~' },
+  { id: 'insert', label: 'Ins', data: ESC + '[2~' },
+  { id: 'delete', label: 'Del', data: ESC + '[3~' }
+]
+
+const punctChars = ':;/~|\\`\'".,(){}[]<>=+-_*&^%$#@!?'
+const punctButtons = punctChars.split('').map(ch => ({
+  id: 'char-' + ch.charCodeAt(0),
+  label: ch,
+  data: ch
+}))
+
+// full library, de-duplicated by id
+const candidates = []
+const seenIds = new Set()
+;[...navButtons, ...ctrlButtons, ...fKeys, ...punctButtons].forEach(b => {
+  if (!seenIds.has(b.id)) {
+    seenIds.add(b.id)
+    candidates.push(b)
+  }
+})
+
+// ids selected by default — mirrors the keys requested in the feature spec
+const DEFAULT_ACTIVE_IDS = [
+  'esc',
+  'tab',
+  'ctrl+c',
+  'ctrl+v',
+  'ctrl+z',
+  'ctrl+y',
+  'ctrl+a',
+  'ctrl+x',
+  'ctrl+s',
+  'ctrl+f',
+  'ctrl+r',
+  'ctrl+g',
+  'ctrl+h',
+  'ctrl+n',
+  'ctrl+p',
+  'ctrl+l',
+  'enter',
+  'char-58',
+  'arrow-up',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'f1',
+  'f2',
+  'f3',
+  'f4',
+  'f5',
+  'f6',
+  'f7',
+  'f8',
+  'f9',
+  'f10',
+  'f11',
+  'f12'
+]
+
+export function defaultActive () {
+  const byId = new Map(candidates.map(c => [c.id, c]))
+  return DEFAULT_ACTIVE_IDS
+    .map(id => byId.get(id))
+    .filter(Boolean)
+    .map(b => ({ ...b }))
+}
+
+export function loadActive () {
+  const saved = ls.getItemJSON(shortcutBarLsKey, null)
+  if (Array.isArray(saved) && saved.length) {
+    return saved
+  }
+  return defaultActive()
+}
+
+export function saveActive (arr) {
+  ls.setItemJSON(shortcutBarLsKey, arr)
+}
+
+export { candidates }

package/client/components/terminal/shortcut-bar-edit.jsx

@@ -0,0 +1,205 @@
+/**
+ * edit modal for the shortcut bar.
+ *
+ * - tap a candidate to append it to the active list (order = click order)
+ * - tap the × on an active item to remove it
+ * - build a custom button (label + literal text to send)
+ * - search filters the candidate library
+ *
+ * Rendered through a portal to document.body so it isn't trapped inside the
+ * bar's (z-index 400, 44px tall) stacking context — otherwise higher-z app
+ * layers would paint over it on mobile.
+ */
+
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Input } from 'antd'
+import {
+  CloseOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SearchOutlined
+} from '@ant-design/icons'
+import classnames from 'classnames'
+import Modal from '../common/modal'
+import { defaultActive } from './shortcut-bar-defs'
+
+const e = window.translate
+
+export default function ShortcutBarEdit (props) {
+  const {
+    active,
+    candidates: allCandidates,
+    isMobile,
+    onCancel,
+    onSave
+  } = props
+
+  const [draft, setDraft] = useState(() => active.map(b => ({ ...b })))
+  const [keyword, setKeyword] = useState('')
+  const [customLabel, setCustomLabel] = useState('')
+  const [customData, setCustomData] = useState('')
+
+  const activeIds = new Set(draft.map(b => b.id))
+
+  function handleAddCandidate (btn) {
+    if (activeIds.has(btn.id)) {
+      return
+    }
+    setDraft(prev => [...prev, { ...btn }])
+  }
+
+  function handleRemoveActive (id) {
+    setDraft(prev => prev.filter(b => b.id !== id))
+  }
+
+  function handleAddCustom () {
+    const label = customLabel.trim()
+    const data = customData
+    if (!label) {
+      return
+    }
+    const id = 'custom-' + label + '-' + Date.now()
+    setDraft(prev => [...prev, { id, label, data, custom: true }])
+    setCustomLabel('')
+    setCustomData('')
+  }
+
+  function handleReset () {
+    setDraft(defaultActive())
+  }
+
+  function handleSave () {
+    onSave(draft)
+  }
+
+  const kw = keyword.trim().toLowerCase()
+  const filtered = allCandidates.filter(b => {
+    if (!kw) {
+      return true
+    }
+    return b.label.toLowerCase().includes(kw) || b.id.includes(kw)
+  })
+
+  function renderActive (b) {
+    return (
+      <div
+        key={b.id}
+        className='shortcut-active-item'
+      >
+        <span className='shortcut-active-label'>{b.label}</span>
+        <button
+          type='button'
+          className='shortcut-active-remove'
+          onClick={() => handleRemoveActive(b.id)}
+        >
+          <CloseOutlined />
+        </button>
+      </div>
+    )
+  }
+
+  function renderCandidate (b) {
+    const added = activeIds.has(b.id)
+    return (
+      <button
+        type='button'
+        key={b.id}
+        className={classnames('shortcut-candidate-item', { added })}
+        onClick={() => handleAddCandidate(b)}
+      >
+        {b.label}
+      </button>
+    )
+  }
+
+  const footer = (
+    <div className='custom-modal-footer-buttons shortcut-edit-footer'>
+      <button
+        type='button'
+        className='custom-modal-cancel-btn'
+        onClick={handleReset}
+      >
+        <ReloadOutlined /> {e('reset')}
+      </button>
+      <button
+        type='button'
+        className='custom-modal-cancel-btn'
+        onClick={onCancel}
+      >
+        {e('cancel')}
+      </button>
+      <button
+        type='button'
+        className='custom-modal-ok-btn'
+        onClick={handleSave}
+      >
+        {e('save')}
+      </button>
+    </div>
+  )
+  const sst = e('keyboardShortcuts')
+  return createPortal(
+    <Modal
+      open
+      title={e('edit')}
+      onCancel={onCancel}
+      footer={footer}
+      width={560}
+      zIndex={1100}
+      wrapClassName={classnames('shortcut-edit-wrap', { 'is-mobile': isMobile })}
+    >
+      <div className='shortcut-edit-section'>
+        <div className='shortcut-edit-section-title'>{sst}</div>
+        <div className='shortcut-active-list'>
+          {draft.length === 0 && (
+            <div className='shortcut-active-empty'>0 {sst}</div>
+          )}
+          {draft.map(renderActive)}
+        </div>
+      </div>
+
+      <div className='shortcut-edit-section'>
+        <div className='shortcut-custom-form'>
+          <Input
+            prefix={<SearchOutlined />}
+            value={keyword}
+            onChange={ev => setKeyword(ev.target.value)}
+            placeholder={e('search')}
+            className='shortcut-search-input'
+            allowClear
+          />
+        </div>
+        <div className='shortcut-candidate-list'>
+          {filtered.map(renderCandidate)}
+        </div>
+      </div>
+
+      <div className='shortcut-edit-section'>
+        <div className='shortcut-edit-section-title'>+ {sst}</div>
+        <div className='shortcut-custom-form'>
+          <Input
+            value={customLabel}
+            onChange={ev => setCustomLabel(ev.target.value)}
+            placeholder={e('label')}
+            className='shortcut-custom-input'
+          />
+          <Input
+            value={customData}
+            onChange={ev => setCustomData(ev.target.value)}
+            placeholder={e('edit')}
+            className='shortcut-custom-input'
+          />
+          <button
+            type='button'
+            className='custom-modal-ok-btn shortcut-custom-add'
+            onClick={handleAddCustom}
+          >
+            <PlusOutlined /> {e('add')}
+          </button>
+        </div>
+      </div>
+    </Modal>,
+    document.body
+  )
+}

package/client/components/terminal/shortcut-bar-entry.jsx

@@ -0,0 +1,34 @@
+/**
+ * lazy entry for shortcut-bar.
+ *
+ * The bar only makes sense on touch devices (it exists to compensate for the
+ * lack of a physical keyboard when the system input panel is shown). On
+ * non-touch devices we render nothing AND never import the real component, so
+ * its code (and the antd/icon deps it pulls in) stays out of the main bundle.
+ */
+
+import { lazy, Suspense } from 'react'
+
+const ShortcutBar = lazy(() => import('./shortcut-bar'))
+
+export function isTouchDevice () {
+  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+    return false
+  }
+  const coarse = typeof window.matchMedia === 'function' &&
+    window.matchMedia('(pointer: coarse)').matches
+  const hasTouch = (navigator.maxTouchPoints || 0) > 0 ||
+    ('ontouchstart' in window)
+  return Boolean(coarse || hasTouch)
+}
+
+export default function ShortcutBarEntry (props) {
+  if (!isTouchDevice()) {
+    return null
+  }
+  return (
+    <Suspense fallback={null}>
+      <ShortcutBar {...props} />
+    </Suspense>
+  )
+}