@electerm/electerm-react 2.13.0 → 2.13.6

package/client/components/rdp/rdp-session.jsx

@@ -601,35 +601,44 @@ export default class RdpSession extends PureComponent {
 
   render () {
     const { width: w, height: h } = this.props
-    const rdpProps = {
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
     const { width, height, loading, scaleViewport } = this.state
+    const innerWidth = w - 10
+    const innerHeight = h - 80
+    const wrapperStyle = {
+      width: innerWidth + 'px',
+      height: innerHeight + 'px',
+      overflow: scaleViewport ? 'hidden' : 'auto'
+    }
     const canvasProps = {
       width,
       height,
       tabIndex: 0
     }
-    if (scaleViewport) {
-      canvasProps.className = 'scale-viewport'
-    }
     const cls = `rdp-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
+    const sessProps = {
+      className: cls,
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     const controlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
-          {...rdpProps}
-          className={cls}
+          {...sessProps}
         >
           {this.renderControl()}
-          <canvas
-            {...canvasProps}
-            ref={this.canvasRef}
-          />
           <RemoteFloatControl {...controlProps} />
+          <div
+            style={wrapperStyle}
+            className='rdp-scroll-wrapper s-scroll-wrapper'
+          >
+            <canvas
+              {...canvasProps}
+              ref={this.canvasRef}
+            />
+          </div>
         </div>
       </Spin>
     )

package/client/components/rdp/rdp.styl

@@ -9,7 +9,27 @@
     left: 0
     width: 100%
   &.scale-viewport
-    canvas
+    .rdp-scroll-wrapper canvas
       width: 100% !important
+      height: 100% !important
       object-fit: contain
 
+.s-scroll-wrapper
+  &::-webkit-scrollbar
+    width 16px
+    height 16px
+    background var(--main-darker)
+  &::-webkit-scrollbar-track
+    background var(--main-darker)
+    box-shadow inset 0 0 5px var(--main-darker)
+  &::-webkit-scrollbar-thumb
+    background var(--primary)
+    border-radius 0
+  &::-webkit-scrollbar-corner
+    background var(--main-darker)
+.rdp-scroll-wrapper
+  position relative
+  background var(--main)
+  z-index 299
+
+

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

@@ -770,6 +770,7 @@ export default class FileSection extends React.Component {
       typeTo,
       fromPath: resolve(path, name),
       toPath,
+      fromFile: file,
       id: generate(),
       ...createTransferProps(this.props),
       operation

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

@@ -22,6 +22,61 @@ export const getFileExt = fileName => {
   }
 }
 
+const modeDirectoryMask = 0o170000
+const modeDirectoryValue = 0o040000
+
+const toIsDirectory = (stat) => {
+  if (!stat) {
+    return false
+  }
+
+  if (typeof stat.isDirectory === 'function') {
+    return stat.isDirectory()
+  }
+
+  if (typeof stat.isDirectory === 'boolean') {
+    return stat.isDirectory
+  }
+
+  if (typeof stat.type === 'string') {
+    return stat.type === 'd'
+  }
+
+  if (typeof stat.type === 'number') {
+    return stat.type === 2
+  }
+
+  if (typeof stat.mode === 'number') {
+    return (stat.mode & modeDirectoryMask) === modeDirectoryValue
+  }
+
+  return false
+}
+
+const toIsSymbolicLink = (stat) => {
+  if (!stat) {
+    return false
+  }
+
+  if (typeof stat.isSymbolicLink === 'function') {
+    return stat.isSymbolicLink()
+  }
+
+  if (typeof stat.isSymbolicLink === 'boolean') {
+    return stat.isSymbolicLink
+  }
+
+  if (typeof stat.type === 'string') {
+    return stat.type === 'l'
+  }
+
+  if (typeof stat.type === 'number') {
+    return stat.type === 3
+  }
+
+  return false
+}
+
 export const getFolderFromFilePath = (filePath, isRemote) => {
   const sep = isRemote ? '/' : window.pre.sep
   const arr = filePath.split(sep)
@@ -54,8 +109,8 @@ export const getLocalFileInfo = async (filePath) => {
     type: 'local',
     ...getFolderFromFilePath(filePath, false),
     id: generate(),
-    isDirectory: statr.isDirectory,
-    isSymbolicLink: stat.isSymbolicLink
+    isDirectory: toIsDirectory(statr),
+    isSymbolicLink: toIsSymbolicLink(stat)
   }
 }
 
@@ -71,6 +126,6 @@ export const getRemoteFileInfo = async (sftp, filePath) => {
     type: 'remote',
     ...getFolderFromFilePath(filePath, true),
     id: generate(),
-    isDirectory: stat.isDirectory
+    isDirectory: toIsDirectory(stat)
   }
 }

package/client/components/spice/spice-session.jsx

@@ -269,20 +269,23 @@ export default class SpiceSession extends PureComponent {
     }
     const cls = `spice-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
     const contrlProps = this.getControlProps()
+    const sessProps = {
+      className: cls,
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     return (
       <Spin spinning={loading}>
         <div
-          className={cls}
-          style={{
-            width: w + 'px',
-            height: h + 'px'
-          }}
+          {...sessProps}
         >
           {this.renderControl()}
           <RemoteFloatControl {...contrlProps} />
           <div
             style={wrapperStyle}
-            className='spice-scroll-wrapper'
+            className='spice-scroll-wrapper s-scroll-wrapper'
           >
             <div
               ref={this.domRef}

package/client/components/spice/spice.styl

@@ -1,11 +1,29 @@
-.spice-session-wrap.scale-viewport
-  canvas
-    width: 100% !important
-    object-fit: contain
-  .spice-scroll-wrapper
-    display block
-.spice-scroll-wrapper
+.spice-session-wrap
   display: flex
   flex-direction: column
-  justify-content: center
-  align-items: center
+  align-items: center
+  .session-v-info
+    position: relative
+    width: 100%
+    z-index: 300
+  &.scale-viewport
+    .spice-scroll-wrapper
+      display flex
+      align-items center
+      justify-content center
+      > div
+        width 100% !important
+        height 100% !important
+        display flex
+        align-items center
+        justify-content center
+      canvas
+        width 100% !important
+        height 100% !important
+        max-width 100% !important
+        max-height 100% !important
+        object-fit contain
+.spice-scroll-wrapper
+  position relative
+  background var(--main)
+  z-index 299

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

@@ -23,7 +23,6 @@ export default function BookmarkToolbar (props) {
   const {
     onNewBookmark,
     onNewBookmarkGroup,
-    onImport,
     onExport,
     onSshConfigs,
     bookmarkGroups,
@@ -121,7 +120,12 @@ export default function BookmarkToolbar (props) {
     },
     {
       label: e('import'),
-      onClick: onImport,
+      onClick: () => {
+        const fileInput = document.querySelector('.upload-bookmark-icon')
+        if (fileInput) {
+          fileInput.click()
+        }
+      },
       icon: <ImportOutlined />
     },
     {

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

@@ -680,10 +680,6 @@ export default class ItemListTree extends Component {
     )
   }
 
-  handleImport = () => {
-    document.querySelector('.upload-bookmark-icon input')?.click()
-  }
-
   handleExport = () => {
     document.querySelector('.download-bookmark-icon')?.click()
   }
@@ -697,7 +693,6 @@ export default class ItemListTree extends Component {
       <NewButtonsGroup
         onNewBookmark={this.handleNewBookmark}
         onNewBookmarkGroup={this.handleNewBookmarkGroup}
-        onImport={this.handleImport}
         onExport={this.handleExport}
         onSshConfigs={this.handleSshConfigs}
         bookmarkGroups={this.props.bookmarkGroups}

package/client/components/vnc/vnc-session.jsx

@@ -18,6 +18,7 @@ import Modal from '../common/modal'
 import { copy } from '../../common/clipboard'
 import VncForm from './vnc-form'
 import RemoteFloatControl from '../common/remote-float-control'
+import './vnc.styl'
 
 // noVNC module imports — loaded dynamically
 async function loadVncModule () {
@@ -602,14 +603,17 @@ export default class VncSession extends PureComponent {
       className: 'vnc-session-wrap session-v-wrap'
     }
     const contrlProps = this.getControlProps()
+    const sessProps = {
+      className: 'vnc-session-wrap',
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     return (
       <Spin spinning={loading}>
         <div
-          className='rdp-session-wrap pd1'
-          style={{
-            width: w + 'px',
-            height: h + 'px'
-          }}
+          {...sessProps}
         >
           {this.renderControl()}
           <RemoteFloatControl

package/client/components/vnc/vnc.styl

@@ -0,0 +1,17 @@
+.vnc-session-wrap
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .session-v-info
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+  &.scale-viewport
+    .rdp-scroll-wrapper canvas
+      width: 100% !important
+      height: 100% !important
+      object-fit: contain
+  > div
+    background: transparent !important 

package/package.json

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