@electerm/electerm-react 2.5.6 → 2.5.9

package/client/components/auth/login.jsx

@@ -86,7 +86,7 @@ export default function Login () {
               readOnly={loading}
               onChange={handlePassChange}
               placeholder={e('password')}
-              addonAfter={renderAfter()}
+              suffix={renderAfter()}
               onPressEnter={handleSubmit}
             />
           </div>

package/client/components/bookmark-form/common/fields.jsx

@@ -90,7 +90,7 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
         )
         break
       case 'colorTitle':
-        control = <InputAutoFocus addonBefore={<ColorPickerItem />} {...item.props} />
+        control = <InputAutoFocus prefix={<ColorPickerItem />} {...item.props} />
         break
       case 'password':
         control = <Password {...item.props} />

package/client/components/bookmark-form/common/hex-input.jsx

@@ -17,6 +17,11 @@ export const HexInput = (props) => {
     return <CheckOutlined className='pointer' onClick={submit} />
   }
   return (
-    <Input addonBefore='#' {...props} value={v} onChange={handleChange} addonAfter={renderAfter()} />
+    <Input
+      prefix='#' {...props}
+      value={v}
+      onChange={handleChange}
+      suffix={renderAfter()}
+    />
   )
 }

package/client/components/bookmark-form/common/run-scripts.jsx

@@ -25,14 +25,16 @@ export default function renderRunScripts () {
             name={[field.name, 'delay']}
             required
           >
-            <InputNumber
-              min={1}
-              step={1}
-              max={65535}
-              addonBefore={e('loginScriptDelay')}
-              rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
-              className='compact-input'
-            />
+            <Space.Compact>
+              <Space.Addon>{e('loginScriptDelay')}</Space.Addon>
+              <InputNumber
+                min={1}
+                step={1}
+                max={65535}
+                rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
+                className='compact-input'
+              />
+            </Space.Compact>
           </FormItem>
           <FormItem
             label=''

package/client/components/bookmark-form/common/ssh-host-selector.jsx

@@ -53,7 +53,7 @@ export default function SshHostSelector ({ ips = [], useIp, form, onBlur, onPast
           name='host'
           onBlur={props.onBlur}
           onPaste={e => onPaste(e, form)}
-          addonBefore={<ColorPickerItem />}
+          prefix={<ColorPickerItem />}
         />
       </FormItem>
     </FormItem>

package/client/components/bookmark-form/common/ssh-tunnels.jsx

@@ -268,7 +268,6 @@ export default function renderSshTunnels (props) {
               <InputNumber
                 min={1}
                 max={65535}
-                // addonBefore={e('localPort')}
                 placeholder={e('port')}
               />
             </FormItem>

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

@@ -7,8 +7,8 @@ export default function InputConfirmCommon ({
   value,
   onChange,
   inputComponent: InputComponent,
-  iconPlacement = 'addonAfter', // 'addonAfter', 'suffix', or 'below'
-  extraAddonAfter,
+  addonBefore,
+  addonAfter,
   ...rest
 }) {
   const [localValue, setLocalValue] = useState(value)
@@ -50,10 +50,11 @@ export default function InputConfirmCommon ({
     : null
   const { className, ...restProps } = rest
   const cls = className ? `${className} input-confirm` : 'input-confirm'
-  const finalAddon = extraAddonAfter || icons
+  const beforeAddon = addonBefore || null
+  const afterAddon = addonAfter || icons
     ? (
       <Space.Addon>
-        {extraAddonAfter}
+        {addonAfter}
         {icons}
       </Space.Addon>
       )
@@ -70,8 +71,9 @@ export default function InputConfirmCommon ({
   return (
     <div>
       <Space.Compact className={cls}>
+        {beforeAddon}
         {inputElement}
-        {finalAddon}
+        {afterAddon}
       </Space.Compact>
     </div>
   )

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

@@ -2,12 +2,10 @@ import { Input } from 'antd'
 import InputConfirmCommon from './input-confirm-common'
 
 export default function InputConfirm (props) {
-  const { extraAddonAfter, ...rest } = props
   return (
     <InputConfirmCommon
-      {...rest}
+      {...props}
       inputComponent={Input}
-      extraAddonAfter={extraAddonAfter}
     />
   )
 }

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

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

package/client/components/common/password.jsx

@@ -49,9 +49,6 @@ export default forwardRef(function Password (props, ref) {
     }
   }, [props.onBlur])
 
-  // Keep addonBefore as-is from props; must be null when caps lock is off
-  const addonBefore = props.addonBefore ?? null
-
   // Show caps lock indicator inside prefix to avoid remounting the input wrapper
   let capsPrefix = null
   if (isCapsLockOn) {
@@ -75,7 +72,6 @@ export default forwardRef(function Password (props, ref) {
     <Input.Password
       {...props}
       ref={ref}
-      addonBefore={addonBefore}
       prefix={prefix}
       onKeyDown={handleKeyEvent}
       onKeyUp={handleKeyEvent}

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -29,14 +29,16 @@ export default function renderQm () {
           name={[field.name, 'delay']}
           required
         >
-          <InputNumber
-            min={1}
-            step={1}
-            max={65535}
-            addonBefore={e('delay')}
-            placeholder={100}
-            className='compact-input'
-          />
+          <Space.Compact>
+            <Space.Addon>{e('delay')}</Space.Addon>
+            <InputNumber
+              min={1}
+              step={1}
+              max={65535}
+              placeholder={100}
+              className='compact-input'
+            />
+          </Space.Compact>
         </FormItem>
         <FormItem
           label=''
@@ -44,20 +46,21 @@ export default function renderQm () {
           required
           className='mg2x'
         >
-          <Input.TextArea
-            autoSize={{ minRows: 1 }}
-            placeholder={e('quickCommand')}
-            className='compact-input qm-input'
-            onFocus={() => {
-              focused.current = i
-            }}
-          />
+          <Space.Compact>
+            <Input.TextArea
+              autoSize={{ minRows: 1 }}
+              placeholder={e('quickCommand')}
+              className='compact-input qm-input'
+              onFocus={() => {
+                focused.current = i
+              }}
+            />
+            <Button
+              icon={<MinusCircleOutlined />}
+              onClick={() => remove(field.name)}
+            />
+          </Space.Compact>
         </FormItem>
-        <Button
-          icon={<MinusCircleOutlined />}
-          onClick={() => remove(field.name)}
-          className='mg24b'
-        />
       </Space>
     )
   }

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

@@ -55,16 +55,17 @@ export default function KeywordForm (props) {
             name={[field.name, 'keyword']}
             rules={[{ validator: checker }]}
           >
-            <InputConfirm
-              addonBefore={renderBefore(field.name)}
-            />
+            <Space.Compact>
+              <InputConfirm
+                addonBefore={renderBefore(field.name)}
+              />
+              <Button
+                icon={<MinusCircleOutlined />}
+                onClick={() => remove(field.name)}
+              />
+            </Space.Compact>
           </FormItem>
         </FormItem>
-        <Button
-          icon={<MinusCircleOutlined />}
-          onClick={() => remove(field.name)}
-          className='mg24b'
-        />
       </Space>
     )
   }

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

@@ -442,7 +442,7 @@ export default class SettingCommon extends Component {
       onFocus: this.handleLoginPassFocus,
       onBlur: this.handleLoginPassBlur,
       onChange: this.handleChangeLoginPass,
-      addonAfter: this.renderLoginPassAfter(),
+      suffix: this.renderLoginPassAfter(),
       placeholder: placeholderLogin
     }
     return (

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

@@ -11,7 +11,8 @@ import {
   Button,
   AutoComplete,
   Tooltip,
-  Flex
+  Flex,
+  Space
 } from 'antd'
 import deepCopy from 'json-deep-copy'
 import {
@@ -176,23 +177,25 @@ export default class SettingTerminal extends Component {
           <Button
             onClick={this.handleChooseFolder}
             className='mg1r'
+            type='text'
             size='small'
           >
             {e('chooseFolder')}
           </Button>
           <Button
             size='small'
+            type='text'
             onClick={() => this.handleLogChange('')}
           >
             {e('reset')}
           </Button>
         </>
       ),
+      prefix: e('terminalLogPath'),
       addonBefore: (
-        <>
-          <span className='mg1r'>{e('terminalLogPath')}</span>
+        <Space.Addon>
           <ShowItem to={path} />
-        </>
+        </Space.Addon>
       )
     }
     return (
@@ -340,7 +343,7 @@ export default class SettingTerminal extends Component {
               options={dataSource.map(this.renderBgOption)}
             >
               <InputConfirm
-                extraAddonAfter={after}
+                addonAfter={after}
               />
             </AutoComplete>
           </Tooltip>

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

@@ -235,7 +235,7 @@ export default function TerminalBackgroundConfig ({
             options={dataSource.map(renderBgOption)}
           >
             <Input
-              addonAfter={after}
+              suffix={after}
             />
           </AutoComplete>
         </Tooltip>

package/client/components/sftp/address-bar.jsx

@@ -66,6 +66,7 @@ function renderAddonBefore (props, realPath) {
         realPath={realPath}
         host={host}
         type={type}
+        className='mg1r'
         onClickHistory={props.onClickHistory}
       />
     </>
@@ -134,11 +135,11 @@ export default function AddressBar (props) {
           value={path}
           onChange={e => props.onChange(e, n)}
           onPressEnter={e => props.onGoto(type, e)}
-          addonBefore={renderAddonBefore(props, realPath)}
+          prefix={renderAddonBefore(props, realPath)}
           onFocus={() => props.onInputFocus(type)}
           onBlur={() => props.onInputBlur(type)}
           disabled={loadingSftp}
-          addonAfter={
+          suffix={
             renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type)
           }
         />

package/client/components/sftp/address-bookmark.jsx

@@ -101,7 +101,7 @@ export default auto(function AddrBookmark (props) {
       placement='bottom'
       trigger='click'
     >
-      <StarOutlined />
+      <StarOutlined className={props.className || ''} />
     </Popover>
   )
 })

package/client/components/sftp/file-item.jsx

@@ -74,6 +74,7 @@ export default class FileSection extends React.Component {
   }
 
   componentWillUnmount () {
+    filesRef.remove(this.id)
     clearTimeout(this.timer)
     this.timer = null
     this.domRef = null
@@ -82,7 +83,6 @@ export default class FileSection extends React.Component {
   }
 
   clearRef = () => {
-    filesRef.remove(this.id)
     refs.remove(this.id)
   }
 
@@ -1112,7 +1112,7 @@ export default class FileSection extends React.Component {
       <div className='sftp-item'>
         <Input
           value={nameTemp}
-          addonBefore={pre}
+          prefix={pre}
           onChange={this.handleChange}
           onBlur={this.handleBlur}
           onPressEnter={this.handleBlur}

package/client/components/sftp/keyword-filter.jsx

@@ -37,11 +37,11 @@ export default function KeywordFilter ({ keyword, type, updateKeyword }) {
   const inputProps = {
     value: text,
     onChange: handleInputChange,
-    addonBefore: <FilterOutlined />,
+    prefix: <FilterOutlined />,
     onKeyPress: handleKeyPress,
     placeholder: e('keyword'),
     className: 'keyword-filter-input',
-    addonAfter: <CheckOutlined onClick={applyFilter} />
+    suffix: <CheckOutlined onClick={applyFilter} />
   }
 
   const tooltipContent = (

package/client/components/shortcuts/shortcut-editor.jsx

@@ -201,7 +201,7 @@ export default class ShortcutEdit extends PureComponent {
     return (
       <div className={this.getCls()}>
         <Input
-          addonAfter={this.renderAfter()}
+          suffix={this.renderAfter()}
           value={shortcut}
           className='shortcut-input'
         />

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

@@ -1,5 +1,7 @@
 import InputNumberConfirm from '../common/input-number-confirm'
-
+import {
+  Space
+} from 'antd'
 import {
   MinusCircleOutlined,
   PlusCircleOutlined
@@ -18,9 +20,9 @@ export default function ZoomMenu (props) {
       step={1}
       min={25}
       max={500}
-      addonAfter='%'
+      suffix='%'
       addonBefore={
-        <>
+        <Space.Addon>
           <PlusCircleOutlined
             onClick={() => store.zoom(0.25, true)}
             className='mg1r pointer font16'
@@ -29,7 +31,7 @@ export default function ZoomMenu (props) {
             onClick={() => store.zoom(-0.25, true)}
             className='pointer font16'
           />
-        </>
+        </Space.Addon>
       }
     />
   )

package/client/components/terminal/term-search.jsx

@@ -206,9 +206,8 @@ export default class TermSearch extends PureComponent {
       value: termSearch,
       className: 'iblock',
       onChange: this.handleChange,
-      suffix: this.renderSuffix(),
+      suffix: <>{this.renderSuffix()} {this.renderAfter()}</>,
       onPressEnter: this.next,
-      addonAfter: this.renderAfter(),
       selectall: true
     }
     return (

package/client/components/terminal/terminal.jsx

@@ -239,12 +239,21 @@ class Term extends Component {
             type: 'shell_integration',
             execute: async () => {
               await this.injectShellIntegration()
+              if (currSftpFollow) {
+                this.attachAddon._sendData('\r')
+              }
             }
           })
         } else {
           // No active queue, inject directly
-          this.injectShellIntegration()
+          this.injectShellIntegration().then(() => {
+            if (currSftpFollow) {
+              this.attachAddon._sendData('\r')
+            }
+          })
         }
+      } else if (this.shellInjected && currSftpFollow) {
+        this.getCwd()
       }
     }
     if (

package/client/components/text-editor/simple-editor.jsx

@@ -165,7 +165,7 @@ export default function SimpleEditor (props) {
           enterButton={<SearchOutlined />}
           onSearch={handleSearch}
           onPressEnter={handleSearch}
-          addonAfter={renderAfter()}
+          suffix={renderAfter()}
           style={{ width: 'auto' }}
         />
         <Button

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

@@ -570,8 +570,8 @@ export default class ItemListTree extends Component {
         value={categoryTitle}
         onChange={this.handleChangeEdit}
         onPressEnter={this.handleSubmitEdit}
-        addonBefore={colorPicker}
-        addonAfter={confirm}
+        prefix={colorPicker}
+        suffix={confirm}
       />
     )
   }
@@ -757,8 +757,8 @@ export default class ItemListTree extends Component {
           value={bookmarkGroupTitle}
           onPressEnter={this.handleSubmit}
           onChange={this.handleChangeBookmarkGroupTitle}
-          addonBefore={colorPicker}
-          addonAfter={confirm}
+          prefix={colorPicker}
+          suffix={confirm}
           onBlur={this.handleBlurBookmarkGroupTitle}
         />
       </div>

package/client/components/tree-list/tree-list.styl

@@ -28,6 +28,7 @@
     .tree-control-btn
       display inline-block
       vertical-align middle
+      line-height 26px
   &.item-dragover-top
     border-top 1px solid #18d551
 .tree-item-title

package/client/components/web/address-bar.jsx

@@ -33,12 +33,12 @@ export default function AddressBar (props) {
         <Input
           value={url}
           onClick={handleClick}
-          addonBefore={
+          prefix={
             <ReloadOutlined
               onClick={onReload}
             />
           }
-          addonAfter={
+          suffix={
             <GlobalOutlined
               onClick={onOpen}
             />

package/package.json

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