@electerm/electerm-react 1.37.110 → 1.37.126

package/client/common/constants.js

@@ -322,6 +322,7 @@ export const instSftpKeys = [
   'download',
   'upload',
   'mkdir',
+  'getFolderSize',
   'getHomeDir',
   'rmdir',
   'stat',

package/client/components/common/input-auto-focus.jsx

@@ -3,6 +3,7 @@
  */
 
 import { Input } from 'antd'
+import InputNative from './native-input'
 import React from 'react'
 import { findLastIndex } from 'lodash-es'
 import uid from '../../common/uid'
@@ -57,7 +58,7 @@ export default class InputAutoFocus extends React.PureComponent {
     const { type, ...rest } = this.props
     const Dom = type === 'password'
       ? Input.Password
-      : Input
+      : type === 'native' ? InputNative : Input
     return (
       <Dom
         {...rest}

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

@@ -0,0 +1,30 @@
+/**
+ * input with auto focus
+ */
+
+import React from 'react'
+import './native-input.styl'
+
+export default function InputNative (props) {
+  const { value, type, onChange, onPressEnter, addonAfter = null, ...rest } = props
+  return (
+    <span
+      className='ant-input-group-wrapper'
+      data-id={props['data-id']}
+    >
+      <span className='ant-input-wrapper ant-input-group'>
+        <input
+          class='ant-input native-input'
+          type='text'
+          value={value}
+          onChange={onChange}
+          onPressEnter={onPressEnter}
+          {...rest}
+        />
+      </span>
+      <span class='ant-input-group-addon'>
+        {addonAfter}
+      </span>
+    </span>
+  )
+}

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

@@ -0,0 +1,7 @@
+@require '../../css/includes/theme-default'
+.native-input
+  color text
+  background-color main-light
+  border-color main-light
+  &:focus
+    border-color main-light

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

@@ -334,7 +334,7 @@ export default class ItemListTree extends Component {
 
   renderSearch = () => {
     return (
-      <div className='pd1y pd2r'>
+      <div className='pd1y'>
         <Search
           onChange={this.handleChange}
           value={this.state.keyword}
@@ -590,6 +590,7 @@ export default class ItemListTree extends Component {
         onChange={this.handleChangeEdit}
         onPressEnter={this.handleSubmitEdit}
         addonAfter={confirm}
+        type='native'
       />
     )
   }
@@ -723,15 +724,25 @@ export default class ItemListTree extends Component {
         title,
         this.state.keyword
       )
+    const propsAll = {
+      className: cls,
+      title: titleAll,
+      onContextMenu: e => this.onContextMenu(e, item, isGroup)
+    }
+    const titleProps = {
+      className: 'tree-item-title elli',
+      style: this.props.staticList
+        ? { maxWidth: (this.props.store.leftSidebarWidth - 110) + 'px' }
+        : undefined
+    }
+    const key = item.id || uid()
     return (
       <div
-        className={cls}
-        key={item.id || uid()}
-        title={titleAll}
-        onContextMenu={e => this.onContextMenu(e, item, isGroup)}
+        {...propsAll}
+        key={key}
       >
         <div
-          className='tree-item-title elli'
+          {...titleProps}
         >
           {tag}{titleHighlight}
         </div>
@@ -892,6 +903,7 @@ export default class ItemListTree extends Component {
             onPressEnter={this.handleSubmitSub}
             onChange={this.handleChangeBookmarkGroupTitleSub}
             addonAfter={confirm}
+            type='native'
           />
         )}
       />
@@ -965,7 +977,7 @@ export default class ItemListTree extends Component {
         {
           this.renderSearch()
         }
-        <div className='item-list-wrap pd2r' style={listStyle}>
+        <div className='item-list-wrap' style={listStyle}>
           {this.renderNewBookmarkGroup()}
           <Tree
             {...treeProps}

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

@@ -28,7 +28,7 @@ import {
 } from '../../common/constants'
 import findParent from '../../common/find-parent'
 import sorter from '../../common/index-sorter'
-import { getFolderFromFilePath } from './file-read'
+import { getFolderFromFilePath, getLocalFileInfo, checkFolderSize } from './file-read'
 import { readClipboard, copy as copyToClipboard, hasFileInClipboardText } from '../../common/clipboard'
 import fs from '../../common/fs'
 import time from '../../common/time'
@@ -286,7 +286,7 @@ export default class FileSection extends React.Component {
     }
   }
 
-  onDropFile = (fromFiles, toFile, fromFileManager) => {
+  onDropFile = async (fromFiles, toFile, fromFileManager) => {
     const { type: fromType } = fromFiles[0]
     const {
       id,
@@ -295,7 +295,6 @@ export default class FileSection extends React.Component {
     } = toFile
 
     let operation = ''
-
     // same side and drop to file = drop to folder
     if (!fromFileManager && fromType === toType && !isDirectoryTo) {
       return
@@ -321,7 +320,25 @@ export default class FileSection extends React.Component {
     }
 
     // other side, do transfer
-    this.transferDrop(fromFiles, toFile, operation)
+    let files = fromFiles
+    if (fromFileManager) {
+      files = await this.filterFiles(fromFiles)
+    }
+    this.transferDrop(files, toFile, operation)
+  }
+
+  filterFiles = async (files) => {
+    const res = []
+    for (const file of files) {
+      const { name, path } = file
+      const info = await getLocalFileInfo(
+        resolve(path, name)
+      )
+      if (info) {
+        res.push(info)
+      }
+    }
+    return res
   }
 
   transferDrop = (fromFiles, toFile, operation) => {
@@ -763,7 +780,7 @@ export default class FileSection extends React.Component {
     }
   }
 
-  getTransferList = (
+  getTransferList = async (
     file,
     toPathBase,
     _typeTo,
@@ -793,15 +810,16 @@ export default class FileSection extends React.Component {
       operation
     }
     if (isDirectory) {
+      const zip = await checkFolderSize(this.props, file)
       Object.assign(obj, {
-        zip: true,
-        skipExpand: true
+        zip,
+        skipExpand: zip
       })
     }
     return [obj]
   }
 
-  doTransferSelected = (
+  doTransferSelected = async (
     e,
     selectedFiles = this.props.selectedFiles,
     toPathBase,
@@ -810,7 +828,7 @@ export default class FileSection extends React.Component {
   ) => {
     let all = []
     for (const f of selectedFiles) {
-      const arr = this.getTransferList(f, toPathBase, typeTo, operation)
+      const arr = await this.getTransferList(f, toPathBase, typeTo, operation)
       all = [
         ...all,
         ...arr
@@ -821,13 +839,7 @@ export default class FileSection extends React.Component {
 
   transfer = async () => {
     const { file } = this.state
-    const arr = this.getTransferList(file)
-    this.props.addTransferList(arr)
-  }
-
-  zipTransferDirectory = () => {
-    const { file } = this.state
-    const arr = this.getTransferList(file)
+    const arr = await this.getTransferList(file)
     this.props.addTransferList(arr)
   }
 

package/client/components/sftp/file-read.js

@@ -4,7 +4,8 @@
 
 import generate from '../../common/uid'
 import fs from '../../common/fs'
-import { isWin } from '../../common/constants'
+import { isWin, typeMap } from '../../common/constants'
+import resolve from '../../common/resolve'
 
 export const getFileExt = fileName => {
   const sep = '.'
@@ -79,3 +80,28 @@ export const getRemoteFileInfo = async (sftp, filePath) => {
     isDirectory: stat.isDirectory
   }
 }
+
+export async function checkFolderSize (props, f) {
+  const pth = resolve(f.path, f.name)
+  const func = f.type === typeMap.remote
+    ? props.sftp
+    : window.fs
+  const {
+    size,
+    count
+  } = await func.getFolderSize(pth)
+    .catch(err => {
+      console.log('get folder size fail', err)
+      return { size: 0, count: 0 }
+    })
+  if (count === 0) {
+    return true
+  }
+  if (size >= 600) {
+    return false
+  }
+  if (size / count >= 100) {
+    return false
+  }
+  return true
+}

package/client/components/sftp/transfer-conflict.jsx

@@ -6,7 +6,13 @@
 import { useRef } from 'react'
 import { useDelta, useConditionalEffect } from 'react-delta'
 import { maxTransport, typeMap } from '../../common/constants'
-import { getLocalFileInfo, getRemoteFileInfo, getFolderFromFilePath, getFileExt } from './file-read'
+import {
+  getLocalFileInfo,
+  getRemoteFileInfo,
+  getFolderFromFilePath,
+  getFileExt,
+  checkFolderSize
+} from './file-read'
 import copy from 'json-deep-copy'
 import { findIndex, find } from 'lodash-es'
 import generate from '../../common/uid'
@@ -263,8 +269,10 @@ export default (props) => {
       toFile = await checkExist(typeTo, toPath)
     }
     if (fromFile.isDirectory) {
-      tr.zip = true
-      tr.skipExpand = true
+      const skip = await checkFolderSize(props, fromFile)
+        .then(d => d && typeFrom !== typeTo)
+      tr.zip = skip
+      tr.skipExpand = skip
     }
     if (fromPath === toPath && typeFrom === typeTo) {
       return updateTransferAction({

package/client/components/sidebar/bookmark.jsx

@@ -73,7 +73,7 @@ export default class BookmarkPanel extends Component {
             </div>
           </div>
         </div>
-        <div className='pd2x'>
+        <div className='pd2l sidebar-inner'>
           <BookmarkSelect store={store} from='sidebar' />
         </div>
       </div>

package/client/components/sidebar/sidebar.styl

@@ -120,3 +120,5 @@
     color text-light
 .logo-filter
   filter invert(80%)
+.sidebar-inner
+  padding-right 8px

package/client/components/tabs/app-drag.jsx

@@ -52,7 +52,6 @@ export default function AppDrag (props) {
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
       onDoubleClick={onDoubleClick}
-      onMouseLeave={onMouseUp}
     >
       {props.children}
     </div>

package/package.json

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