@electerm/electerm-react 2.4.28 → 2.4.35

package/client/components/bookmark-form/common/color-picker.jsx

@@ -73,3 +73,6 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     </Popover>
   )
 })
+
+ColorPicker.displayName = 'ColorPicker'
+ColorPicker.static = true

package/client/components/common/input-confirm-common.jsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
+import { Space } from 'antd'
+import './input-confirm-common.styl'
+
+export default function InputConfirmCommon ({
+  value,
+  onChange,
+  inputComponent: InputComponent,
+  iconPlacement = 'addonAfter', // 'addonAfter', 'suffix', or 'below'
+  extraAddonAfter,
+  ...rest
+}) {
+  const [localValue, setLocalValue] = useState(value)
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  function handleChange (e) {
+    const newValue = e && e.target ? e.target.value : e
+    setLocalValue(newValue)
+    setIsEditing(true)
+  }
+
+  function handleConfirm () {
+    onChange(localValue)
+    setIsEditing(false)
+  }
+
+  function handleCancel () {
+    setLocalValue(value)
+    setIsEditing(false)
+  }
+
+  const icons = isEditing
+    ? (
+      <>
+        <CheckOutlined
+          onClick={handleConfirm}
+          className='mg1x pointer'
+        />
+        <CloseOutlined
+          onClick={handleCancel}
+          className='pointer'
+        />
+      </>
+      )
+    : null
+  const { className, ...restProps } = rest
+  const cls = className ? `${className} input-confirm` : 'input-confirm'
+  const finalAddon = extraAddonAfter || icons
+    ? (
+      <Space.Addon>
+        {extraAddonAfter}
+        {icons}
+      </Space.Addon>
+      )
+    : null
+
+  const childProps = {
+    ...restProps,
+    value: localValue,
+    onChange: handleChange
+  }
+
+  const inputElement = <InputComponent {...childProps} />
+
+  return (
+    <div>
+      <Space.Compact className={cls}>
+        {inputElement}
+        {finalAddon}
+      </Space.Compact>
+    </div>
+  )
+}

package/client/components/common/input-confirm-common.styl

@@ -0,0 +1,5 @@
+.input-confirm
+  width 100%
+  display flex
+  .ant-input-number
+    flex 1

package/client/components/common/input-confirm.jsx

@@ -1,66 +1,13 @@
-/**
- * input only apply when confirm
- */
-import { PureComponent } from 'react'
-import {
-  CheckOutlined
-} from '@ant-design/icons'
-import {
-  InputNumber
-} from 'antd'
-
-export default class InputNumberConfirm extends PureComponent {
-  constructor (props) {
-    super(props)
-    this.state = {
-      v: props.value,
-      onEdit: false
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value) {
-      this.setState({
-        v: this.props.value
-      })
-    }
-  }
-
-  handleChange = (v) => {
-    this.setState({ v })
-  }
-
-  handleClick = () => {
-    this.setState({ onEdit: true })
-  }
-
-  handleSubmit = () => {
-    this.setState({ onEdit: false })
-    this.props.onChange(this.state.v)
-  }
-
-  after = () => {
-    const { onEdit } = this.state
-    if (onEdit) {
-      return (
-        <CheckOutlined
-          className='font16 pointer'
-          onClick={this.handleSubmit}
-        />
-      )
-    }
-    return this.props.addonAfter
-  }
-
-  render () {
-    return (
-      <InputNumber
-        {...this.props}
-        value={this.state.v}
-        onClick={this.handleClick}
-        onChange={this.handleChange}
-        addonAfter={this.after()}
-      />
-    )
-  }
+import { Input } from 'antd'
+import InputConfirmCommon from './input-confirm-common'
+
+export default function InputConfirm (props) {
+  const { extraAddonAfter, ...rest } = props
+  return (
+    <InputConfirmCommon
+      {...rest}
+      inputComponent={Input}
+      extraAddonAfter={extraAddonAfter}
+    />
+  )
 }

package/client/components/common/input-number-confirm.jsx

@@ -0,0 +1,13 @@
+import { InputNumber } from 'antd'
+import InputConfirmCommon from './input-confirm-common'
+
+export default function InputNumberConfirm (props) {
+  const { addonAfter, ...rest } = props
+  return (
+    <InputConfirmCommon
+      {...rest}
+      inputComponent={InputNumber}
+      extraAddonAfter={addonAfter}
+    />
+  )
+}

package/client/components/common/modal.jsx

@@ -57,19 +57,12 @@ export default function Modal (props) {
     if (!open) return
 
     const handleKeyDown = (e) => {
-      const isConfirm = !!document.querySelector('.custom-modal-cancel-btn')
       if (e.key === 'Escape') {
         if (onCancel) {
           onCancel()
           e.preventDefault()
         }
-      } else if ((e.key === 'Enter' || e.key === ' ') && !isConfirm) {
-        // For info, Enter/Space closes
-        if (onCancel) {
-          onCancel()
-          e.preventDefault()
-        }
-      } else if ((e.key === 'Enter' || e.key === ' ') && isConfirm) {
+      } else if ((e.key === 'Enter' || e.key === ' ')) {
         // For confirm, Enter/Space confirms
         const okBtn = document.querySelector('.custom-modal-ok-btn')
         if (okBtn) {

package/client/components/common/textarea-confirm.jsx

@@ -0,0 +1,13 @@
+import { Input } from 'antd'
+import InputConfirmCommon from './input-confirm-common'
+
+const { TextArea } = Input
+
+export default function TextareaConfirm (props) {
+  return (
+    <InputConfirmCommon
+      {...props}
+      inputComponent={TextArea}
+    />
+  )
+}

package/client/components/setting-panel/keywords-form.jsx

@@ -10,7 +10,7 @@ import {
   PlusOutlined
 } from '@ant-design/icons'
 import { useEffect } from 'react'
-import KeywordInput from './keyword-input'
+import InputConfirm from '../common/input-confirm'
 
 const FormItem = Form.Item
 const FormList = Form.List
@@ -55,7 +55,7 @@ export default function KeywordForm (props) {
             name={[field.name, 'keyword']}
             rules={[{ validator: checker }]}
           >
-            <KeywordInput
+            <InputConfirm
               addonBefore={renderBefore(field.name)}
             />
           </FormItem>

package/client/components/setting-panel/number-config.jsx

@@ -1,6 +1,4 @@
-import {
-  InputNumber
-} from 'antd'
+import InputNumberConfirm from '../common/input-number-confirm'
 import { isNumber, isNaN } from 'lodash-es'
 
 export default function NumberConfig ({
@@ -40,7 +38,7 @@ export default function NumberConfig ({
   }
   return (
     <div className={`pd2b ${cls || ''}`}>
-      <InputNumber
+      <InputNumberConfirm
         {...opts}
       />
     </div>

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

@@ -9,8 +9,6 @@ import message from '../common/message'
 import {
   Select,
   Switch,
-  Input,
-  InputNumber,
   Alert,
   Button,
   Table,
@@ -19,6 +17,9 @@ import {
 } from 'antd'
 import deepCopy from 'json-deep-copy'
 import Password from '../common/password'
+import InputConfirm from '../common/input-confirm'
+import InputNumberConfirm from '../common/input-number-confirm'
+import TextareaConfirm from '../common/textarea-confirm'
 import {
   settingMap,
   proxyHelpLink
@@ -149,8 +150,8 @@ export default class SettingCommon extends Component {
     this.props.store.setTheme(id)
   }
 
-  handleCustomCss = (e) => {
-    this.onChangeValue(e.target.value, 'customCss')
+  handleCustomCss = (value) => {
+    this.onChangeValue(value, 'customCss')
   }
 
   onChangeValue = (value, name) => {
@@ -222,7 +223,7 @@ export default class SettingCommon extends Component {
     )
   }
 
-  renderNumber = (name, options, title = '', width = '100%') => {
+  renderNumber = (name, options, title = '') => {
     let value = this.props.config[name]
     if (options.valueParser) {
       value = options.valueParser(value)
@@ -256,13 +257,10 @@ export default class SettingCommon extends Component {
         }
         return vv
       }
-      opts.style = {
-        width
-      }
     }
     return (
       <div className={`pd2b ${cls || ''}`}>
-        <InputNumber
+        <InputNumberConfirm
           {...opts}
         />
       </div>
@@ -272,10 +270,10 @@ export default class SettingCommon extends Component {
   renderText = (name, placeholder) => {
     const value = this.props.config[name]
     const defaultValue = defaultSettings[name]
-    const onChange = (e) => this.onChangeValue(e.target.value, name)
+    const onChange = (v) => this.onChangeValue(v, name)
     return (
       <div className='pd2b'>
-        <Input
+        <InputConfirm
           value={value}
           onChange={onChange}
           placeholder={placeholder || defaultValue}
@@ -289,7 +287,7 @@ export default class SettingCommon extends Component {
     const args = this.props.config[agrsProp]
     const value = this.props.config[name]
     const defaultValue = defaultSettings[name]
-    const onChange = (e) => this.onChangeValue(e.target.value, name)
+    const onChange = (v) => this.onChangeValue(v, name)
     const onChangeArgs = (v) => this.onChangeValue(v, agrsProp)
     const styleArg = {
       style: {
@@ -299,7 +297,7 @@ export default class SettingCommon extends Component {
     return (
       <div className='pd2b'>
         <Space.Compact block>
-          <Input
+          <InputConfirm
             value={value}
             onChange={onChange}
             placeholder={defaultValue}
@@ -569,7 +567,7 @@ export default class SettingCommon extends Component {
 
         <div className='pd2b'>
           <span className='inline-title mg1r'>{e('customCss')}</span>
-          <Input.TextArea
+          <TextareaConfirm
             onChange={this.handleCustomCss}
             value={customCss}
             rows={3}

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

@@ -7,7 +7,6 @@ import message from '../common/message'
 import {
   Select,
   Switch,
-  Input,
   Upload,
   Button,
   AutoComplete,
@@ -23,6 +22,7 @@ import {
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import ShowItem from '../common/show-item'
+import InputConfirm from '../common/input-confirm'
 import { osResolve } from '../../common/resolve'
 import { chooseSaveDirectory } from '../../common/choose-save-folder'
 import mapper from '../../common/auto-complete-data-mapper'
@@ -170,7 +170,7 @@ export default class SettingTerminal extends Component {
     const inputProps = {
       value: sessionLogPath,
       placeholder: path,
-      onChange: (e) => this.handleLogChange(e.target.value),
+      onChange: this.handleLogChange,
       addonAfter: (
         <>
           <Button
@@ -197,7 +197,7 @@ export default class SettingTerminal extends Component {
     }
     return (
       <div className='pd2b'>
-        <Input {...inputProps} />
+        <InputConfirm {...inputProps} />
       </div>
     )
   }
@@ -235,10 +235,10 @@ export default class SettingTerminal extends Component {
   renderText = (name, placeholder) => {
     const value = this.props.config[name]
     const defaultValue = defaultSettings[name]
-    const onChange = (e) => this.onChangeValue(e.target.value, name)
+    const onChange = (v) => this.onChangeValue(v, name)
     return (
       <div className='pd2b'>
-        <Input
+        <InputConfirm
           value={value}
           onChange={onChange}
           placeholder={placeholder || defaultValue}
@@ -339,8 +339,8 @@ export default class SettingTerminal extends Component {
               className='width-100'
               options={dataSource.map(this.renderBgOption)}
             >
-              <Input
-                addonAfter={after}
+              <InputConfirm
+                extraAddonAfter={after}
               />
             </AutoComplete>
           </Tooltip>

package/client/components/setting-sync/setting-sync-form.jsx

@@ -148,7 +148,7 @@ export default function SyncForm (props) {
     if (syncType === syncTypes.gitee) {
       return (
         <Alert
-          message={
+          title={
             <span>
               Gitee data sync is not recommended. For more information, please refer to the
               <Link to='https://github.com/electerm/electerm/wiki/gitee-data-sync-warning' className='mg1l'>

package/client/components/sys-menu/zoom.jsx

@@ -1,4 +1,4 @@
-import InputNumberConfirm from '../common/input-confirm'
+import InputNumberConfirm from '../common/input-number-confirm'
 
 import {
   MinusCircleOutlined,

package/client/components/tree-list/bookmark-transport.jsx

@@ -62,7 +62,6 @@ export default class BookmarkTransport extends PureComponent {
 
   render () {
     const edit = this.renderEdit()
-    console.log('edit', edit)
     if (edit === null) {
       return (
         <Space.Compact>

package/client/store/system-menu.js

@@ -64,7 +64,6 @@ export default Store => {
   Store.prototype.confirmExit = function (type) {
     const { store } = window
     let mod = null
-    console.log('confirmExit called')
     mod = Modal.confirm({
       onCancel: () => mod.destroy(),
       onOk: store.doExit,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "2.4.28",
+  "version": "2.4.35",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",

package/client/components/setting-panel/keyword-input.jsx

@@ -1,60 +0,0 @@
-import { Input } from 'antd'
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
-import { useState, useEffect } from 'react'
-
-export default function KeywordInput (props) {
-  const { value, onChange, addonBefore, ...rest } = props
-  const [localValue, setLocalValue] = useState(value || '')
-  const [isEditing, setIsEditing] = useState(false)
-
-  useEffect(() => {
-    setLocalValue(value || '')
-  }, [value])
-
-  function handleChange (e) {
-    const newValue = e.target.value
-    setLocalValue(newValue)
-    setIsEditing(true)
-  }
-
-  function handleConfirm () {
-    onChange(localValue)
-    setIsEditing(false)
-  }
-
-  function handleCancel () {
-    setLocalValue(value || '')
-    setIsEditing(false)
-  }
-
-  function handleBlur () {
-    // Optionally hide icons on blur, but since user might click icons, maybe not
-    // setIsEditing(false)
-  }
-
-  const addonAfter = isEditing
-    ? (
-      <div>
-        <CheckOutlined
-          onClick={handleConfirm}
-          className='mg1r pointer'
-        />
-        <CloseOutlined
-          onClick={handleCancel}
-          className='pointer'
-        />
-      </div>
-      )
-    : null
-
-  return (
-    <Input
-      value={localValue}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      addonBefore={addonBefore}
-      addonAfter={addonAfter}
-      {...rest}
-    />
-  )
-}