@electerm/electerm-react 1.50.66 → 1.51.0

package/client/components/theme/theme-list-item.jsx

@@ -0,0 +1,148 @@
+/**
+ * theme list render
+ */
+
+import {
+  CheckCircleOutlined,
+  PlusOutlined,
+  SunOutlined,
+  MoonOutlined
+} from '@ant-design/icons'
+import { Tooltip, Tag } from 'antd'
+import classnames from 'classnames'
+import { defaultTheme } from '../../common/constants'
+import highlight from '../common/highlight'
+import isColorDark from '../../common/is-color-dark'
+
+const e = window.translate
+
+export default function ThemeListItem (props) {
+  const {
+    item,
+    activeItemId,
+    theme,
+    keyword
+  } = props
+  const { store } = window
+
+  function handleClickApply () {
+    store.setTheme(item.id)
+  }
+
+  function renderPreview () {
+    const {
+      main,
+      text
+    } = item.uiThemeConfig
+    const arr = [
+      'error',
+      'success',
+      'warn',
+      'info',
+      'primary'
+    ]
+    return (
+      <div
+        className='theme-preview pd2'
+        style={{ background: main, color: text }}
+      >
+        {
+          arr.map(k => {
+            return (
+              <Tag
+                color={item.uiThemeConfig[k]}
+                key={k}
+                className='mg1l mg1b'
+              >
+                {e(k)}
+              </Tag>
+            )
+          })
+        }
+      </div>
+    )
+  }
+
+  function renderApplyBtn () {
+    if (!item.id) {
+      return null
+    }
+    return (
+      <Tooltip
+        title={renderPreview()}
+        placement='topLeft'
+      >
+        <CheckCircleOutlined
+          className='pointer list-item-apply'
+          onClick={handleClickApply}
+        />
+      </Tooltip>
+    )
+  }
+
+  function handleClickTheme () {
+    props.onClickItem(item)
+  }
+
+  function renderTag () {
+    if (!id) {
+      return null
+    }
+    const { main, text } = item.uiThemeConfig
+    const isDark = isColorDark(main)
+    const txt = isDark ? <MoonOutlined /> : <SunOutlined />
+    return (
+      <Tag
+        color={main}
+        className='mg1l'
+        style={
+          {
+            color: text
+          }
+        }
+      >
+        {txt}
+      </Tag>
+    )
+  }
+
+  const { name, id, type } = item
+  const cls = classnames(
+    'item-list-unit theme-item',
+    {
+      current: theme === id
+    },
+    {
+      active: activeItemId === id
+    }
+  )
+  let title = id === defaultTheme.id
+    ? e(id)
+    : name
+  title = highlight(
+    title,
+    keyword
+  )
+
+  return (
+    <div
+      className={cls}
+      onClick={handleClickTheme}
+    >
+      <div className='elli pd1y pd2x' title={name}>
+        {
+          !id
+            ? <PlusOutlined className='mg1r' />
+            : null
+        }
+        {renderTag()}{title}
+      </div>
+      {
+        id === defaultTheme.id || type === 'iterm'
+          ? null
+          : props.renderDelBtn(item)
+      }
+      {renderApplyBtn(item)}
+    </div>
+  )
+}

package/client/components/theme/theme-list.jsx

@@ -3,21 +3,13 @@
  */
 
 import List from '../setting-panel/list'
-import { CheckCircleOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons'
-import { Tooltip, Pagination } from 'antd'
-import classnames from 'classnames'
-import { defaultTheme } from '../../common/constants'
-import highlight from '../common/highlight'
+import { LoadingOutlined } from '@ant-design/icons'
+import { pick } from 'lodash-es'
+import { Pagination } from 'antd'
+import ThemeListItem from './theme-list-item'
 import './terminal-theme-list.styl'
 
-const e = window.translate
-
 export default class ThemeList extends List {
-  del = (item, e) => {
-    e.stopPropagation()
-    this.props.store.delTheme(item)
-  }
-
   handlePager = page => {
     this.setState({ page })
   }
@@ -26,68 +18,22 @@ export default class ThemeList extends List {
     this.setState({ pageSize, page })
   }
 
-  renderApplyBtn = item => {
-    if (!item.id) {
-      return null
-    }
-    return (
-      <Tooltip
-        title={e('apply')}
-        placement='topLeft'
-      >
-        <CheckCircleOutlined
-          className='pointer list-item-apply'
-          onClick={() => this.props.store.setTheme(item.id)}
-        />
-      </Tooltip>
-    )
-  }
-
-  onClickTheme = item => {
-    this.props.onClickItem(item)
-  }
-
   renderItem = (item, i) => {
-    const { activeItemId } = this.props
-    const { theme } = this.props
-    const { name, id, type } = item
-    const cls = classnames(
-      'item-list-unit theme-item',
-      {
-        current: theme === id
-      },
-      {
-        active: activeItemId === id
-      }
-    )
-    let title = id === defaultTheme.id
-      ? e(id)
-      : name
-    title = highlight(
-      title,
-      this.state.keyword
-    )
+    const itemProps = {
+      item,
+      renderDelBtn: this.renderDelBtn,
+      activeItemId: this.props.activeItemId,
+      ...pick(
+        this.props,
+        [
+          'onClickItem',
+          'theme',
+          'keyword'
+        ]
+      )
+    }
     return (
-      <div
-        key={i + id}
-        className={cls}
-        onClick={() => this.onClickTheme(item)}
-      >
-        <div className='elli pd1y pd2x' title={name}>
-          {
-            !id
-              ? <PlusOutlined className='mg1r' />
-              : null
-          }
-          {title}
-        </div>
-        {
-          id === defaultTheme.id || type === 'iterm'
-            ? null
-            : this.renderDelBtn(item)
-        }
-        {this.renderApplyBtn(item)}
-      </div>
+      <ThemeListItem key={item.id} {...itemProps} />
     )
   }
 

package/client/store/common.js

@@ -8,7 +8,6 @@ import { debounce, some } from 'lodash-es'
 import postMessage from '../common/post-msg'
 import {
   commonActions,
-  tabActions,
   modals,
   leftSidebarWidthKey,
   rightSidebarWidthKey,
@@ -24,12 +23,6 @@ export default Store => {
     Object.assign(this, updates)
   }
 
-  Store.prototype.setOffline = function () {
-    postMessage({
-      action: tabActions.setAllTabOffline
-    })
-  }
-
   Store.prototype.onError = function (e) {
     handleError(e)
   }

package/client/store/index.js

@@ -26,6 +26,7 @@ import transferHistoryExtend from './transfer-history'
 import batchInputHistory from './batch-input-history'
 import transferExtend from './transfer-list'
 import addressBookmarkExtend from './address-bookmark'
+import isColorDark from '../common/is-color-dark'
 
 import { uniq } from 'lodash-es'
 import copy from 'json-deep-copy'
@@ -56,40 +57,6 @@ function getReverseColor (hex) {
   return '#' + reverse.toString(16).padStart(6, '0')
 }
 
-function expandShorthandColor (color) {
-  if (color.length === 4) {
-    return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
-  }
-  if (color.length === 7) {
-    return color
-  }
-  if (color.length < 7) {
-    return expandShorthandColor(color + 'f')
-  }
-  if (color.length > 7) {
-    return expandShorthandColor(color.slice(0, 7))
-  }
-  if (!/^#[A-Fa-f0-9]{6}$/.test(color)) {
-    return '#141314'
-  }
-}
-
-function isColorDark (_color) {
-  let color = expandShorthandColor(_color)
-  if (color.charAt(0) === '#') {
-    color = color.slice(1) // Remove the '#' if present
-  }
-  const r = parseInt(color.substr(0, 2), 16)
-  const g = parseInt(color.substr(2, 2), 16)
-  const b = parseInt(color.substr(4, 2), 16)
-
-  // Formula to determine brightness
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000
-
-  // Decide based on brightness threshold
-  return brightness < 128 // You can adjust this threshold as needed
-}
-
 class Store {
   constructor () {
     Object.assign(
@@ -123,7 +90,7 @@ class Store {
     const {
       currentTabId
     } = this
-    const tabs = window.store.getTabs()
+    const { tabs } = window.store
     const tab = tabs.find(t => t.id === currentTabId)
     if (!tab) {
       return false
@@ -154,7 +121,7 @@ class Store {
   }
 
   get isTransporting () {
-    return window.store.getTabs().some(t => t.isTransporting)
+    return window.store.tabs.some(t => t.isTransporting)
   }
 
   get settingSidebarList () {
@@ -190,7 +157,7 @@ class Store {
   }
 
   get tabTitles () {
-    return window.store.getTabs().map(d => d.title).join('#')
+    return window.store.tabs.map(d => d.title).join('#')
   }
 
   get setting () {
@@ -275,7 +242,6 @@ const arrGetterProps = [
   'bookmarks',
   'bookmarkGroups',
   'profiles',
-  'tabs',
   'fileTransfers',
   'transferHistory',
   'quickCommands',
@@ -335,6 +301,6 @@ transferExtend(Store)
 addressBookmarkExtend(Store)
 
 export const StateStore = Store
-const store = manage(new Store(), 1)
+const store = manage(new Store())
 
 export default store

package/client/store/init-state.js

@@ -46,7 +46,7 @@ export default () => {
     configLoaded: false,
     loadTime: 0,
     lastDataUpdateTime: 0,
-    _tabs: '[]',
+    tabs: [],
     currentTabId: '',
     _history: '[]',
     _bookmarks: '[]',