@electerm/electerm-react 1.34.30

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

@@ -0,0 +1,81 @@
+import { Component } from '../common/react-subx'
+import {
+  StarOutlined,
+  PlusSquareOutlined
+} from '@ant-design/icons'
+import {
+  Popover
+} from 'antd'
+import AddrBookmarkItem from './address-bookmark-item'
+import { typeMap } from '../../common/constants'
+import uid from '../../common/uid'
+import './address-bookmark.styl'
+
+export default class AddrBookmark extends Component {
+  onDel = (item) => {
+    this.props.store.delAddressBookmark(item)
+  }
+
+  handleAddAddr = () => {
+    const {
+      store, host, realPath, type
+    } = this.props
+    store.addAddressBookmark(
+      {
+        addr: realPath,
+        host: type === typeMap.local ? '' : host,
+        id: uid()
+      }
+    )
+  }
+
+  render () {
+    const { type, onClickHistory, store, host } = this.props
+    // const cls = classnames(
+    //   'sftp-history',
+    //   'animated',
+    //   `sftp-history-${type}`
+    // )
+    const addrs = type === typeMap.local
+      ? store.addressBookmarksLocal
+      : store.addressBookmarks.filter(
+        g => g.host === host
+      )
+    const inner = addrs.length
+      ? addrs.map(o => {
+        return (
+          <AddrBookmarkItem
+            handleClick={onClickHistory}
+            type={type}
+            key={o.id}
+            handleDel={this.onDel}
+            item={o}
+          />
+        )
+      })
+      : null
+    const content = (
+      <div>
+        {inner}
+      </div>
+    )
+    const title = (
+      <div>
+        <PlusSquareOutlined
+          className='add-addr-bookmark'
+          onClick={this.handleAddAddr}
+        />
+      </div>
+    )
+    return (
+      <Popover
+        content={content}
+        title={title}
+        placement='bottom'
+        trigger='click'
+      >
+        <StarOutlined />
+      </Popover>
+    )
+  }
+}

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

@@ -0,0 +1,8 @@
+.sftp-history-item.addr-bookmark-item
+  padding-right 20px
+  position relative
+.del-addr-bookmark
+  position absolute
+  right 0px
+  top 10px
+  cursor pointer

package/client/components/sftp/confirm-modal.jsx

@@ -0,0 +1,184 @@
+/**
+ * confirm modal for transfer conflict
+ *
+ */
+
+import { Modal, Button } from 'antd'
+import { isString } from 'lodash-es'
+import AnimateText from '../common/animate-text'
+import formatTime from '../../../app/common/time'
+import { FolderOutlined, FileOutlined } from '@ant-design/icons'
+import {
+  fileActions
+} from '../../common/constants'
+import postMessage from '../../common/post-msg'
+
+const { prefix } = window
+const e = prefix('sftp')
+
+function formatTimeAuto (strOrDigit) {
+  if (isString(strOrDigit)) {
+    return formatTime(strOrDigit)
+  }
+  return formatTime(strOrDigit * 1000)
+}
+
+export default (props) => {
+  if (!props.transferToConfirm) {
+    return null
+  }
+  const {
+    fromPath,
+    toPath,
+    fromFile: {
+      isDirectory,
+      name,
+      id: fileId,
+      modifyTime: modifyTimeFrom,
+      size: sizeFrom,
+      type: typeFrom
+    },
+    toFile: {
+      modifyTime: modifyTimeTo,
+      size: sizeTo,
+      type: typeTo
+    },
+    id,
+    transferGroupId
+  } = props.transferToConfirm
+  function act (action) {
+    props.modifier({
+      transferToConfirm: null
+    })
+    postMessage({
+      transferGroupId,
+      fileId,
+      id,
+      transfer: props.transferToConfirm,
+      action
+    })
+  }
+  function renderContent () {
+    const action = isDirectory ? e('merge') : e('replace')
+    const typeTxt = isDirectory ? e('folder') : e('file')
+    const Icon = isDirectory ? FolderOutlined : FileOutlined
+    const typeTitle = e(typeTo)
+    const otherTypeTitle = e(typeFrom)
+    return (
+      <div className='confirms-content-wrap'>
+        <AnimateText>
+          <p className='pd1b color-red font13'>
+            {action}
+          </p>
+          <p className='bold font14'>
+            {typeTitle} {typeTxt}: <Icon className='mg1r' />{name}
+          </p>
+          <p className='font13'>
+            {e('size')}: {sizeTo}, {e('modifyTime')}: {formatTimeAuto(modifyTimeTo)}
+          </p>
+          <p className='pd1b'>
+            ({toPath})
+          </p>
+          <p>
+            with
+          </p>
+          <p className='bold font14'>
+            {otherTypeTitle} {typeTxt}: <Icon className='mg1r' />{name}
+          </p>
+          <p className='font13'>
+            {e('size')}: {sizeFrom}, {e('modifyTime')}: {formatTimeAuto(modifyTimeFrom)}
+          </p>
+          <p className='pd1b'>
+            ({fromPath})
+          </p>
+        </AnimateText>
+      </div>
+    )
+  }
+  function renderFooter () {
+    return (
+      <div className='mgq1t pd1y alignright'>
+        <Button
+          type='dashed'
+          className='mg1l'
+          onClick={() => act(fileActions.cancel)}
+        >
+          {e('cancel')}
+        </Button>
+        <Button
+          type='dashed'
+          className='mg1l'
+          onClick={() => act(fileActions.skip)}
+        >
+          {e('skip')}
+        </Button>
+        <Button
+          type='dashed'
+          className='mg1l'
+          onClick={() => act(fileActions.skipAll)}
+        >
+          {e('skipAll')}
+        </Button>
+        <Button
+          danger
+          className='mg1l'
+          onClick={
+            () => act(fileActions.mergeOrOverwrite)
+          }
+        >
+          {isDirectory ? e('merge') : e('overwrite')}
+        </Button>
+        <Button
+          type='primary'
+          className='mg1l'
+          onClick={
+            () => act(fileActions.rename)
+          }
+        >
+          {e('rename')}
+        </Button>
+        <div className='pd1t'>
+          <Button
+            type='dashed'
+            danger
+            className='mg1l'
+            title={
+              isDirectory
+                ? e('mergeDesc')
+                : e('overwriteDesc')
+            }
+            onClick={
+              () => act(fileActions.mergeOrOverwriteAll)
+            }
+          >
+            {isDirectory ? e('mergeAll') : e('overwriteAll')}
+          </Button>
+          <Button
+            type='primary'
+            className='mg1l'
+            title={e('renameDesc')}
+            onClick={
+              () => act(fileActions.renameAll)
+            }
+          >
+            {e('renameAll')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+  const modalProps = {
+    open: true,
+    width: 500,
+    title: e('fileConflict'),
+    footer: renderFooter(),
+    onCancel: () => act(fileActions.cancel)
+  }
+  return (
+    <Modal
+      {...modalProps}
+    >
+      {renderContent()}
+    </Modal>
+  )
+}

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

@@ -0,0 +1,22 @@
+/**
+ * file/folder icon by ext or name
+ */
+
+import { getIconForFile, getIconForFolder } from 'vscode-icons-js'
+// import Icon from '@ant-design/icons'
+
+export default function FileIcon ({ file, ...extra }) {
+  const { extIconPath } = window.pre
+  const name = file.isDirectory
+    ? getIconForFolder(file.name)
+    : getIconForFile(file.name)
+  // const svg = <img src={iconPath + name} alt='' />
+  return (
+    <img
+      src={extIconPath + name}
+      height={12}
+      alt=''
+      {...extra}
+    />
+  )
+}