@electerm/electerm-react 1.60.16 → 1.60.29

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

@@ -19,12 +19,10 @@ import {
   permission2mode
 } from '../../common/mode2permission'
 import wait from '../../common/wait'
-import postMessage from '../../common/post-msg'
 import {
   fileOperationsMap,
   isWin, transferTypeMap, typeMap,
-  isMac, maxEditFileSize, ctrlOrCmd,
-  commonActions
+  isMac, maxEditFileSize, ctrlOrCmd
 } from '../../common/constants'
 import findParent from '../../common/find-parent'
 import sorter from '../../common/index-sorter'
@@ -35,16 +33,14 @@ import time from '../../common/time'
 import { filesize } from 'filesize'
 import { createTransferProps } from './transfer-common'
 import generate from '../../common/uid'
+import { refsStatic, refs } from '../common/ref'
+import iconsMap from '../sys-menu/icons-map'
+import {
+  Dropdown
+} from 'antd'
 
 const e = window.translate
 
-const computePos = (e) => {
-  return {
-    left: e.clientX,
-    top: e.clientY
-  }
-}
-
 const fileItemCls = 'sftp-item'
 const onDragCls = 'sftp-ondrag'
 const onDragOverCls = 'sftp-dragover'
@@ -57,11 +53,13 @@ export default class FileSection extends React.Component {
       file: copy(props.file),
       overwriteStrategy: ''
     }
-    this.id = 'FileSection-' + (props.file?.id || generate())
+    // Create ref
+    this.domRef = React.createRef()
   }
 
   componentDidMount () {
-    this.dom = document.getElementById(this.id)
+    this.id = 'file-' + (this.props.file?.id || generate())
+    refs.add(this.id, this)
     this.applyStyle()
   }
 
@@ -75,17 +73,20 @@ export default class FileSection extends React.Component {
   }
 
   componentWillUnmount () {
+    refsStatic.remove(this.id)
     clearTimeout(this.timer)
     this.timer = null
-    this.dom = null
+    this.domRef = null
     this.dropTarget = null
     this.removeFileEditEvent()
-    window.removeEventListener('message', this.changeFileMode)
-    window.removeEventListener('message', this.onContextAction)
+  }
+
+  get editor () {
+    return refsStatic.get('text-editor')
   }
 
   applyStyle = () => {
-    if (!this.dom) {
+    if (!this.domRef) {
       return
     }
     const {
@@ -95,7 +96,7 @@ export default class FileSection extends React.Component {
     const headers = document.querySelectorAll(
       `#id-${id} .${type} .sftp-file-table-header .sftp-header-box`
     )
-    this.dom.querySelectorAll('.sftp-file-prop').forEach((n, i) => {
+    this.domRef.current?.querySelectorAll('.sftp-file-prop').forEach((n, i) => {
       const h = headers[i]
       if (h) {
         const s = pick(h.style, ['width', 'left'])
@@ -211,7 +212,7 @@ export default class FileSection extends React.Component {
     const cls = this.props.selectedFiles.length > 1
       ? onDragCls + ' ' + onMultiDragCls
       : onDragCls
-    addClass(this.dom, cls)
+    addClass(this.domRef.current, cls)
     e.dataTransfer.setData('fromFile', JSON.stringify(this.props.file))
   }
 
@@ -257,7 +258,7 @@ export default class FileSection extends React.Component {
     if (!type) {
       return
     }
-    let toFile = this.props[type + 'FileTree'][id] || {}
+    let toFile = this.props[type + 'FileTree'].get(id) || {}
     if (!toFile.id || !toFile.isDirectory) {
       toFile = {
         type,
@@ -272,7 +273,7 @@ export default class FileSection extends React.Component {
     this.props.modifier({
       onDrag: false
     })
-    removeClass(this.dom, onDragCls, onMultiDragCls)
+    removeClass(this.domRef.current, onDragCls, onMultiDragCls)
     document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
       removeClass(d, onDragOverCls)
     })
@@ -381,7 +382,7 @@ export default class FileSection extends React.Component {
 
   showInfo = () => {
     const { type } = this.props
-    window.store.openFileInfoModal({
+    refsStatic.get('file-modal')?.showFileInfoModal({
       file: this.state.file,
       tab: this.props.tab,
       visible: true,
@@ -463,8 +464,12 @@ export default class FileSection extends React.Component {
     const { file } = this.state
     const {
       id,
-      type
+      type,
+      isParent
     } = file
+    if (isParent) {
+      return
+    }
     this.props.modifier({
       lastClickedFile: file
     })
@@ -505,42 +510,28 @@ export default class FileSection extends React.Component {
     })
   }
 
-  changeFileMode = async e => {
-    const {
-      file = {},
-      action
-    } = e.data || {}
-    if (action === commonActions.submitFileModeClose) {
-      window.removeEventListener('message', this.changeFileMode)
-      return false
-    }
-    if (
-      action !== commonActions.submitFileModeEdit ||
-      file.id !== this.state.file.id
-    ) {
-      return false
-    }
+  changeFileMode = async (file) => {
     const { permission, type, path, name } = file
     const func = type === typeMap.local
       ? fs.chmod
       : this.props.sftp.chmod
     const p = resolve(path, name)
     await func(p, permission).catch(window.store.onError)
-    window.removeEventListener('message', this.changeFileMode)
     this.props[type + 'List']()
   }
 
   openFileModeModal = () => {
     const { type } = this.props
-    window.addEventListener(
-      'message', this.changeFileMode
+    refsStatic.get('file-modal')?.showFileModeModal(
+      {
+        tab: this.props.tab,
+        visible: true,
+        uidTree: this.props[`${type}UidTree`],
+        gidTree: this.props[`${type}GidTree`]
+      },
+      this.state.file,
+      this.id
     )
-    window.store.openFileModeModal({
-      tab: this.props.tab,
-      visible: true,
-      uidTree: this.props[`${type}UidTree`],
-      gidTree: this.props[`${type}GidTree`]
-    }, this.state.file)
   }
 
   handleBlur = () => {
@@ -596,11 +587,11 @@ export default class FileSection extends React.Component {
     })
   }
 
-  enterDirectory = (e, file) => {
+  enterDirectory = (e, file = this.state.file) => {
     e && e.stopPropagation && e.stopPropagation()
-    const { type, name } = file || this.state.file
+    const { type, name, isParent } = file
     const n = `${type}Path`
-    const path = this.props[n]
+    const path = isParent ? file.path : this.props[n]
     const np = resolve(path, name)
     const op = this.props[type + 'Path']
     this.props.modifier({
@@ -620,39 +611,11 @@ export default class FileSection extends React.Component {
   }
 
   removeFileEditEvent = () => {
-    delete this.eid
     if (this.watchingFile) {
       window.pre.ipcOffEvent('file-change', this.onFileChange)
       window.pre.runGlobalAsync('unwatchFile', this.watchingFile)
       delete this.watchingFile
     }
-    window.removeEventListener('message', this.onFileEditEvent)
-  }
-
-  onFileEditEvent = e => {
-    const {
-      action,
-      id,
-      text,
-      path,
-      mode,
-      type,
-      noClose
-    } = e.data || {}
-    if (id !== this.eid) {
-      return false
-    }
-    if (
-      action === commonActions.fetchTextEditorText
-    ) {
-      this.fetchEditorText(path, type)
-    } else if (action === commonActions.submitTextEditorText) {
-      this.onSubmitEditFile(mode, type, path, text, noClose)
-    } else if (action === commonActions.onCloseTextEditor) {
-      this.removeFileEditEvent()
-    } else if (action === commonActions.editWithSystemEditor) {
-      this.editWithSystemEditor(text)
-    }
   }
 
   editWithSystemEditor = async (text) => {
@@ -667,7 +630,7 @@ export default class FileSection extends React.Component {
     } else {
       const id = generate()
       tempPath = window.pre.resolve(
-        window.pre.tempDir, `temp-${id}-${name}`
+        window.pre.tempDir, `electerm-temp-${id}-${name}`
       )
       await fs.writeFile(tempPath, text)
     }
@@ -676,12 +639,9 @@ export default class FileSection extends React.Component {
   }
 
   onFileChange = (e, text) => {
-    postMessage({
-      action: commonActions.editWithSystemEditorDone,
-      data: {
-        id: this.eid,
-        text
-      }
+    this.editor.editWithSystemEditorDone({
+      id: this.id,
+      text
     })
   }
 
@@ -714,13 +674,7 @@ export default class FileSection extends React.Component {
     const text = typeMap.remote === type
       ? await this.props.sftp.readFile(path)
       : await fs.readFile(path)
-    postMessage({
-      action: commonActions.loadTextEditorText,
-      data: {
-        text,
-        loading: false
-      }
-    })
+    return text
   }
 
   onSubmitEditFile = async (mode, type, path, text, noClose) => {
@@ -743,25 +697,17 @@ export default class FileSection extends React.Component {
       data.file = null
       data.text = ''
     }
-    postMessage({
-      action: commonActions.openTextEditor,
-      data
-    })
+    this.editor?.setState(data)
     if (r && !noClose) {
       this.props[`${type}List`]()
     }
   }
 
   editFile = () => {
-    this.eid = generate()
-    postMessage({
-      action: commonActions.openTextEditor,
-      data: {
-        id: this.eid,
-        file: this.state.file
-      }
+    this.editor?.openEditor({
+      id: this.id,
+      file: this.state.file
     })
-    window.addEventListener('message', this.onFileEditEvent)
   }
 
   transferOrEnterDirectory = async (e, edit) => {
@@ -861,15 +807,25 @@ export default class FileSection extends React.Component {
     this.props.onGoto(this.props.file.type)
   }
 
-  del = async (delSelected) => {
+  shouldShowSelectedMenu = () => {
+    const {
+      file: {
+        id
+      },
+      selectedFiles
+    } = this.props
+    return id &&
+      selectedFiles.length > 1 &&
+      some(selectedFiles, d => d.id === id)
+  }
+
+  del = async () => {
+    const delSelected = this.shouldShowSelectedMenu()
     const { file, selectedFiles } = this.props
     const { type } = file
     const files = delSelected
       ? selectedFiles
       : [file]
-    postMessage({
-      type: commonActions.closeContextMenu
-    })
     await this.props.delFiles(type, files)
   }
 
@@ -925,17 +881,42 @@ export default class FileSection extends React.Component {
     return !isWin
   }
 
+  renderContextMenu = () => {
+    return this.renderContextItems()
+      .map(r => {
+        const {
+          func,
+          text,
+          disabled,
+          icon,
+          subText,
+          requireConfirm
+        } = r
+        const IconCom = iconsMap[icon]
+        return {
+          key: func,
+          label: text,
+          disabled,
+          icon: <IconCom />,
+          extra: subText,
+          danger: requireConfirm
+        }
+      })
+  }
+
   renderContextItems () {
     const {
       file: {
         type,
         isDirectory,
         size,
-        id
+        id,
+        isParent
       },
       selectedFiles,
       tab
     } = this.props
+    const isRealFile = id && !isParent
     const hasHost = !!tab.host
     const { enableSsh } = tab
     const isLocal = type === typeMap.local
@@ -955,7 +936,7 @@ export default class FileSection extends React.Component {
     const showEdit = !isDirectory && id &&
       size < maxEditFileSize
     const res = []
-    if (isDirectory && id) {
+    if (isDirectory && isRealFile) {
       res.push({
         func: 'doEnterDirectory',
         icon: 'EnterOutlined',
@@ -970,7 +951,7 @@ export default class FileSection extends React.Component {
       })
     }
     if (
-      isDirectory && id &&
+      isDirectory && isRealFile &&
       (
         (hasHost && enableSsh !== false && isRemote) ||
         (isLocal && !hasHost)
@@ -982,21 +963,21 @@ export default class FileSection extends React.Component {
         text: e('gotoFolderInTerminal')
       })
     }
-    if (!(!id || !hasHost || shouldShowSelectedMenu)) {
+    if (!(!isRealFile || !hasHost || shouldShowSelectedMenu)) {
       res.push({
         func: 'doTransfer',
         icon: iconType,
         text: transferText
       })
     }
-    if (!isDirectory && id && isLocal) {
+    if (!isDirectory && isRealFile && isLocal) {
       res.push({
         func: 'transferOrEnterDirectory',
         icon: 'ArrowRightOutlined',
         text: e('open')
       })
     }
-    if (id && isLocal) {
+    if (isRealFile && isLocal) {
       res.push({
         func: 'showInDefaultFileManager',
         icon: 'ContainerOutlined',
@@ -1010,15 +991,12 @@ export default class FileSection extends React.Component {
         text: e('edit')
       })
     }
-    if (id) {
+    if (isRealFile) {
       res.push({
         func: 'del',
         icon: 'CloseCircleOutlined',
         text: delTxt,
-        noAutoClose: true,
-        requireConfirm: true,
-        confirmTitle: this.renderDelConfirmTitle(shouldShowSelectedMenu),
-        args: [shouldShowSelectedMenu]
+        requireConfirm: true
       })
       res.push({
         func: 'onCopy',
@@ -1040,7 +1018,7 @@ export default class FileSection extends React.Component {
       disabled: !canPaste,
       subText: `${ctrlOrCmd}+v`
     })
-    if (id) {
+    if (isRealFile) {
       res.push({
         func: 'doRename',
         icon: 'EditOutlined',
@@ -1075,14 +1053,14 @@ export default class FileSection extends React.Component {
       icon: 'ReloadOutlined',
       text: e('refresh')
     })
-    if (this.showModeEdit(type, id)) {
+    if (this.showModeEdit(type, isRealFile)) {
       res.push({
         func: 'editPermission',
         icon: 'LockOutlined',
         text: e('editPermission')
       })
     }
-    if (id) {
+    if (isRealFile) {
       res.push({
         func: 'showInfo',
         icon: 'InfoCircleOutlined',
@@ -1092,46 +1070,8 @@ export default class FileSection extends React.Component {
     return res
   }
 
-  onContextAction = e => {
-    const {
-      action,
-      id,
-      args = [],
-      func
-    } = e.data || {}
-    if (action === commonActions.closeContextMenuAfter) {
-      window.removeEventListener('message', this.onContextAction)
-      return false
-    }
-    if (
-      action !== commonActions.clickContextMenu ||
-      id !== this.uid ||
-      !this[func]
-    ) {
-      return false
-    }
-    window.removeEventListener('message', this.onContextAction)
-    this[func](...args)
-  }
-
-  onContextMenu = e => {
-    e.preventDefault()
-    const { file } = this.state
-    const selected = this.isSelected(file)
-    if (!selected) {
-      this.onClick(e)
-    }
-    this.props.modifier({
-      lastClickedFile: file
-    })
-    const items = this.renderContextItems()
-    this.uid = generate()
-    window.store.openContextMenu({
-      items,
-      id: this.uid,
-      pos: computePos(e)
-    })
-    window.addEventListener('message', this.onContextAction)
+  onContextMenu = ({ key }) => {
+    this[key]()
   }
 
   renderEditing (file) {
@@ -1154,27 +1094,28 @@ export default class FileSection extends React.Component {
     )
   }
 
-  renderProp = ({ name, style }) => {
+  renderProp = ({ id, size }) => {
     const { file } = this.state
-    let value = file[name]
+    let value = file[id]
     let typeIcon = null
     let symbolicLinkText = null
     const {
       isDirectory,
-      isSymbolicLink
+      isSymbolicLink,
+      isParent
     } = file
-    if (isDirectory && name === 'size') {
+    if (isDirectory && id === 'size') {
       value = null
-    } else if (!isDirectory && name === 'size') {
+    } else if (!isDirectory && id === 'size') {
       value = filesize(value)
-    } else if (name === 'owner') {
+    } else if (id === 'owner') {
       const { type } = this.props
       value = this.props[`${type}UidTree`]['' + value] || value
-    } else if (name === 'group') {
+    } else if (id === 'group') {
       const { type } = this.props
       value = this.props[`${type}GidTree`]['' + value] || value
     }
-    if (name === 'name') {
+    if (id === 'name') {
       // const Icon = isDirectory
       //   ? FolderOutlined
       //   : FileOutlined
@@ -1182,17 +1123,29 @@ export default class FileSection extends React.Component {
       symbolicLinkText = isSymbolicLink
         ? <sup className='color-blue symbolic-link-icon'>*</sup>
         : null
-    } else if (name === 'mode') {
+    } else if (id === 'mode') {
       value = permission2mode(mode2permission(value))
-    } else if (name.toLowerCase().includes('time')) {
+    } else if (id.toLowerCase().includes('time')) {
       value = time(value)
     }
+    const divProps = {
+      className: `sftp-file-prop noise shi-${id}`,
+      style: {
+        width: size + '%',
+        flexBasis: `${size}%`
+      },
+      title: value
+    }
+    if (isParent && id !== 'name') {
+      value = null
+      divProps.title = ''
+    } else if (isParent && id === 'name') {
+      value = '..'
+    }
     return (
       <div
-        key={name}
-        title={value}
-        className={`sftp-file-prop noise shi-${name}`}
-        style={style}
+        {...divProps}
+        key={id}
       >
         {typeIcon}
         {symbolicLinkText}
@@ -1207,7 +1160,8 @@ export default class FileSection extends React.Component {
     const {
       isDirectory,
       id,
-      isEditing
+      isEditing,
+      isParent
     } = file
     if (isEditing) {
       return this.renderEditing(file)
@@ -1219,10 +1173,9 @@ export default class FileSection extends React.Component {
     })
     const props = {
       className,
-      draggable,
+      draggable: draggable && !isParent,
       onDoubleClick: this.transferOrEnterDirectory,
       ...pick(this, [
-        'onContextMenu',
         'onClick',
         'onDrag',
         'onDragEnter',
@@ -1232,23 +1185,34 @@ export default class FileSection extends React.Component {
         'onDrop',
         'onDragEnd'
       ]),
-      onDragStart: onDragStart || this.onDragStart
+      onDragStart: onDragStart || this.onDragStart,
+      'data-id': id,
+      id: this.id,
+      'data-is-parent': isParent ? 'y' : 'n',
+      'data-type': type,
+      title: file.name
+    }
+    const ddProps = {
+      menu: {
+        items: this.renderContextMenu(),
+        onClick: this.onContextMenu
+      },
+      trigger: ['contextMenu']
     }
     return (
-      <div
-        {...props}
-        data-id={id}
-        id={this.id}
-        data-type={type}
-        title={file.name}
-      >
-        <div className='file-bg' />
-        <div className='file-props'>
-          {
-            properties.map(this.renderProp)
-          }
+      <Dropdown {...ddProps}>
+        <div
+          ref={this.domRef}
+          {...props}
+        >
+          <div className='file-bg' />
+          <div className='file-props-div'>
+            {
+              properties.map(this.renderProp)
+            }
+          </div>
         </div>
-      </div>
+      </Dropdown>
     )
   }
 }