fix #2228 [new feature] Use pagination when more than 100 files in fi…

…le manager

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electerm",
-  "version": "1.16.20",
+  "version": "1.16.21",
   "description": "Terminal/ssh/sftp client(linux, mac, win) based on electron/ssh2/node-pty/xterm/antd/subx and other libs",
   "main": "app.js",
   "bin": "npm/electerm",

src/client/components/sftp/list-table-ui.jsx

@@ -21,6 +21,7 @@ import {
 import copy from 'json-deep-copy'
 import { CheckOutlined } from '@ant-design/icons'
 import FileSection from './file-item'
+import PagedList from './paged-list'
 
 const { prefix } = window
 const e = prefix('sftp')
@@ -113,6 +114,7 @@ export default class FileListTable extends React.Component {
       ]
     }, [])
     return {
+      pageSize: 100,
       properties,
       splitHandles
     }
@@ -432,6 +434,17 @@ export default class FileListTable extends React.Component {
 
   onDoubleClick = () => this.resetWidth()
 
+  hasPager = () => {
+    const {
+      pageSize
+    } = this.state
+    const {
+      fileList
+    } = this.props
+    const len = fileList.length
+    return len > pageSize
+  }
+
   rebuildStyle = (name) => {
     let { style, parentWidth } = this.oldStyles[name]
     style = copy(style)
@@ -486,20 +499,32 @@ export default class FileListTable extends React.Component {
   render () {
     const { fileList, height, type } = this.props
     const tableHeaderHeight = 30
+    const props = {
+      className: 'sftp-table-content overscroll-y relative',
+      style: {
+        height: height - sftpControlHeight - tableHeaderHeight
+      },
+      draggable: false
+    }
+    const hasPager = this.hasPager()
+    const cls = classnames(
+      'sftp-table relative',
+      {
+        'sftp-has-pager': hasPager
+      }
+    )
     return (
-      <div className='sftp-table relative'>
+      <div className={cls}>
         {this.renderTableHeader()}
         <div
-          className='sftp-table-content overscroll-y relative'
-          style={{
-            height: height - sftpControlHeight - tableHeaderHeight
-          }}
-          draggable={false}
+          {...props}
         >
           {this.props.renderEmptyFile(type)}
-          {
-            fileList.map(this.renderItem)
-          }
+          <PagedList
+            list={fileList}
+            renderItem={this.renderItem}
+            hasPager={hasPager}
+          />
         </div>
       </div>
     )

src/client/components/sftp/paged-list.jsx

@@ -0,0 +1,60 @@
+/**
+ * file list module to limit files rendered to increase performance
+ */
+
+import { PureComponent } from 'react'
+import { Pagination } from 'antd'
+
+export default class ScrollFiles extends PureComponent {
+  state = {
+    page: 1,
+    pageSize: 100
+  }
+
+  onChange = page => {
+    this.setState({
+      page
+    })
+  }
+
+  renderList () {
+    const {
+      page, pageSize
+    } = this.state
+    const start = (page - 1) * pageSize
+    const end = start + pageSize
+    const {
+      list, hasPager
+    } = this.props
+    const arr = hasPager
+      ? list.slice(start, end)
+      : list
+    return arr.map(this.props.renderItem)
+  }
+
+  renderPager () {
+    const props = {
+      current: this.state.page,
+      pageSize: this.state.pageSize,
+      total: this.props.list.length,
+      showSizeChanger: false,
+      size: 'small',
+      onChange: this.onChange
+    }
+    return (
+      <div className='pd1b'>
+        <Pagination
+          {...props}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const arr = this.renderList()
+    if (this.props.hasPager) {
+      arr.push(this.renderPager())
+    }
+    return arr
+  }
+}