@@ -250,10 +315,21 @@ class Modals extends React.Component {
onSubmit={this.rename} />
+
+
+
+
@@ -278,16 +354,16 @@ class Modals extends React.Component {
@@ -299,13 +375,18 @@ class Modals extends React.Component {
Modals.propTypes = {
t: PropTypes.func.isRequired,
show: PropTypes.string,
- files: PropTypes.array,
+ files: PropTypes.oneOfType([
+ PropTypes.array,
+ PropTypes.object
+ ]),
onAddByPath: PropTypes.func.isRequired,
onMove: PropTypes.func.isRequired,
onMakeDir: PropTypes.func.isRequired,
onShareLink: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
- onPublish: PropTypes.func.isRequired
+ onPublish: PropTypes.func.isRequired,
+ done: PropTypes.func.isRequired,
+ root: PropTypes.string
}
export default withTranslation('files')(Modals)
diff --git a/src/files/modals/move-modal/MoveModal.js b/src/files/modals/move-modal/MoveModal.js
new file mode 100644
index 000000000..e591136a2
--- /dev/null
+++ b/src/files/modals/move-modal/MoveModal.js
@@ -0,0 +1,290 @@
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
+import Button from '../../../components/button/button.tsx'
+import StrokeMove from '../../../icons/StrokeMove.js'
+import { withTranslation } from 'react-i18next'
+import StrokeInfo from '../../../icons/StrokeInfo.js'
+
+const DirectoryInput = ({ value, onChange, suggestions, onKeyPress, className, t }) => {
+ const [showSuggestions, setShowSuggestions] = useState(false)
+ const [activeSuggestion, setActiveSuggestion] = useState(-1)
+ const [showTooltip, setShowTooltip] = useState(false)
+ const inputRef = useRef(null)
+ const suggestionsRef = useRef(null)
+ const listboxId = 'directory-suggestions-listbox'
+
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (suggestionsRef.current && !suggestionsRef.current.contains(event.target)) {
+ setShowSuggestions(false)
+ }
+ }
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [])
+
+ const handleKeyDown = (e) => {
+ if (!suggestions.length) return
+
+ if (e.keyCode === 40 || e.key === 'ArrowDown') {
+ e.preventDefault()
+ setActiveSuggestion(prev => Math.min(prev + 1, suggestions.length - 1))
+ } else if (e.keyCode === 38 || e.key === 'ArrowUp') {
+ e.preventDefault()
+ setActiveSuggestion(prev => Math.max(prev - 1, -1))
+ } else if ((e.keyCode === 13 || e.key === 'Enter') && activeSuggestion >= 0) {
+ e.preventDefault()
+ onChange(suggestions[activeSuggestion])
+ setShowSuggestions(false)
+ setActiveSuggestion(-1)
+ }
+ }
+
+ const selectSuggestion = (suggestion) => {
+ onChange(suggestion)
+ setShowSuggestions(false)
+ inputRef.current?.focus()
+ }
+
+ return (
+
+
+
{
+ onChange(e.target.value)
+ setShowSuggestions(true)
+ setActiveSuggestion(-1)
+ }}
+ onKeyPress={onKeyPress}
+ onKeyDown={handleKeyDown}
+ onFocus={() => setShowSuggestions(true)}
+ className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db flex-auto focus-outline ${className}`}
+ placeholder="/files/path/to/directory"
+ aria-label="Directory path"
+ aria-expanded={showSuggestions}
+ aria-controls={listboxId}
+ aria-autocomplete="list"
+ role="combobox"
+ />
+
+
+
+ {showTooltip && (
+
+ {t('moveModal.directoryCreationInfo')}
+
+
+ )}
+
+
+
+ {showSuggestions && suggestions.length > 0 && (
+
+ {suggestions.map((suggestion, index) => (
+
+ ))}
+
+ )}
+
+ )
+}
+
+function MoveModal ({ t, tReady, mainFiles, files, onCancel, onSubmit, source, destination, folder, count, className, onFetchDirectory: doFetchDirectory, ...props }) {
+ const [value, setValue] = useState(destination)
+ const [suggestions, setSuggestions] = useState([])
+ const fetchTimeoutRef = useRef(null)
+ const formatPath = (path) => {
+ const normalizedPath = path.startsWith('/files') ? path.substring(6) : path
+ return normalizedPath.split('/').filter(e => !!e).join('/')
+ }
+
+ const disabledPath = files.filter(e => e.type === 'directory').map(e => formatPath(e.path)).includes(formatPath(value))
+
+ useEffect(() => {
+ let isMounted = true
+
+ const fetchSuggestions = async () => {
+ if (!value || typeof value !== 'string') {
+ setSuggestions([])
+ return
+ }
+
+ try {
+ const parts = value.toString().split('/')
+ const currentInput = parts[parts.length - 1] || ''
+
+ let entries = []
+ try {
+ const normalizedValue = value.replace(/^\/files/, '')
+ const result = formatPath(value) === formatPath(mainFiles.path)
+ ? mainFiles.content.filter(entry => entry.type === 'directory').map(entry => ({ path: entry.path, name: entry.name }))
+ : ((await doFetchDirectory(normalizedValue))?.content || [])?.map(entry => ({
+ ...entry,
+ path: `/files${normalizedValue}/${entry.name}`.replace(/\/+/g, '/')
+ }))
+
+ if (result && Array.isArray(result)) {
+ entries = result.map(entry => entry.path)
+ }
+ } catch (err) {
+ console.error('Error fetching directory entries:', err)
+ }
+
+ const ignorePath = files.filter(e => e.type === 'directory').map(e => formatPath(e.path))
+
+ const filteredSuggestions = entries.filter(path =>
+ path.toLowerCase().includes((currentInput || '').toLowerCase()) &&
+ path !== value && !ignorePath.includes(formatPath(path))
+ )
+
+ if (isMounted) {
+ setSuggestions([...new Set(filteredSuggestions)])
+ }
+ } catch (err) {
+ console.error('Error fetching directory suggestions:', err)
+ if (isMounted) {
+ setSuggestions([])
+ }
+ }
+ }
+
+ // a little bit of debouncing, to avoid too many requests
+ if (fetchTimeoutRef.current) {
+ clearTimeout(fetchTimeoutRef.current)
+ }
+
+ fetchTimeoutRef.current = setTimeout(() => {
+ fetchSuggestions()
+ }, 350)
+
+ return () => {
+ isMounted = false
+ if (fetchTimeoutRef.current) {
+ clearTimeout(fetchTimeoutRef.current)
+ }
+ setSuggestions([])
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [value, source, doFetchDirectory])
+
+ const context = folder ? 'Folder' : 'Files'
+ const title = t(`moveModal.title${context}`, { count })
+ const description = t(`moveModal.description${context}`, { source, count })
+
+ const onKeyPress = (event) => {
+ if (event.key === 'Enter' && !suggestions.length) {
+ const normalizedValue = value.startsWith('/files') ? value : `/files${value}`
+ onSubmit(normalizedValue)
+ }
+ }
+
+ return (
+
+
+ {description && {description}
}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+MoveModal.propTypes = {
+ onCancel: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ source: PropTypes.string.isRequired,
+ destination: PropTypes.string.isRequired,
+ folder: PropTypes.bool,
+ count: PropTypes.number.isRequired,
+ t: PropTypes.func.isRequired,
+ tReady: PropTypes.bool.isRequired,
+ mainFiles: PropTypes.object.isRequired
+}
+
+MoveModal.defaultProps = {
+ className: '',
+ folder: false
+}
+
+export default withTranslation('files')(MoveModal)
diff --git a/src/files/selected-actions/SelectedActions.css b/src/files/selected-actions/SelectedActions.css
index e7ceaa047..9fd640f2f 100644
--- a/src/files/selected-actions/SelectedActions.css
+++ b/src/files/selected-actions/SelectedActions.css
@@ -2,6 +2,16 @@
width: 100%;
}
+.fs-count {
+ display: none;
+}
+
+@media only screen and (min-width: 35em) {
+ .fs-count {
+ display: block;
+ }
+}
+
@media only screen and (min-width: 60em) {
.selectedActions {
width: calc(100% - 148px)
@@ -16,3 +26,63 @@
from { transform: translateY(100%) }
to { transform: translateY(0%) }
}
+
+.more-menu {
+ position: absolute;
+ right: 0;
+ bottom: 100%;
+ margin-bottom: 0.5rem;
+ background-color: white;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border: 1px solid #edf0f4;
+ min-width: 200px;
+ z-index: 10;
+}
+
+.more-menu-item {
+ display: flex;
+ align-items: center;
+ padding: 0.75rem 1rem;
+ width: 100%;
+ border-bottom: 1px solid #edf0f4;
+ transition: background-color 0.2s ease;
+ cursor: pointer;
+}
+
+.more-menu-item:last-child {
+ border-bottom: none;
+}
+
+.more-menu-item:hover {
+ background-color: #f0f6fa;
+}
+
+.more-menu-item.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.more-menu-item.disabled:hover {
+ background-color: transparent;
+}
+
+.more-menu-item svg {
+ width: 1rem;
+ height: 1rem;
+ margin-right: 0.75rem;
+ flex-shrink: 0;
+}
+
+.more-menu-item span {
+ font-size: 0.875rem;
+ color: #4A4A4A;
+}
+
+.more-menu-item:hover svg {
+ fill: #0b3a53;
+}
+
+.more-menu-item:hover span {
+ color: #0b3a53;
+}
diff --git a/src/files/selected-actions/SelectedActions.js b/src/files/selected-actions/SelectedActions.js
index 3451517a3..0f389dab7 100644
--- a/src/files/selected-actions/SelectedActions.js
+++ b/src/files/selected-actions/SelectedActions.js
@@ -10,6 +10,8 @@ import StrokePencil from '../../icons/StrokePencil.js'
import StrokeIpld from '../../icons/StrokeIpld.js'
import StrokeTrash from '../../icons/StrokeTrash.js'
import StrokeDownload from '../../icons/StrokeDownload.js'
+import StrokeMove from '../../icons/StrokeMove.js'
+import StrokeMore from '../../icons/StrokeMore.js'
import './SelectedActions.css'
const styles = {
@@ -43,6 +45,11 @@ class SelectedActions extends React.Component {
constructor (props) {
super(props)
this.containerRef = React.createRef()
+ this.state = {
+ force100: false,
+ showMoreMenu: false,
+ windowWidth: window.innerWidth
+ }
}
static propTypes = {
@@ -50,6 +57,7 @@ class SelectedActions extends React.Component {
size: PropTypes.number.isRequired,
unselect: PropTypes.func.isRequired,
remove: PropTypes.func.isRequired,
+ move: PropTypes.func.isRequired,
setPinning: PropTypes.func.isRequired,
share: PropTypes.func.isRequired,
download: PropTypes.func.isRequired,
@@ -65,25 +73,107 @@ class SelectedActions extends React.Component {
className: ''
}
- state = {
- force100: false
+ updateWidth = () => {
+ this.setState({ windowWidth: window.innerWidth })
}
componentDidMount () {
this.containerRef.current && this.containerRef.current.focus()
+ window.addEventListener('resize', this.updateWidth)
}
- render () {
- const { t, tReady, animateOnStart, count, size, unselect, remove, share, setPinning, download, rename, inspect, className, style, isMfs, ...props } = this.props
+ componentWillUnmount () {
+ window.removeEventListener('resize', this.updateWidth)
+ }
+
+ toggleMoreMenu = () => {
+ this.setState(state => ({ showMoreMenu: !state.showMoreMenu }))
+ }
+ render () {
+ const { t, tReady, animateOnStart, count, size, unselect, remove, move, share, setPinning, download, rename, inspect, className, style, isMfs, ...props } = this.props
+ const { showMoreMenu, windowWidth } = this.state
const isSingle = count === 1
let singleFileTooltip = { title: t('individualFilesOnly') }
-
if (count === 1) {
singleFileTooltip = {}
}
+ const items = [
+ {
+ action: share,
+ icon:
,
+ label: t('actions.share'),
+ className: '',
+ disabled: false,
+ extras: {}
+ },
+ {
+ action: download,
+ icon:
,
+ label: t('app:actions.download'),
+ className: '',
+ disabled: false,
+ extras: {}
+ },
+ {
+ action: remove,
+ icon:
,
+ label: t('app:actions.remove'),
+ className: classes.action(isMfs),
+ disabled: !isMfs,
+ extras: {}
+ },
+ {
+ action: move,
+ icon:
,
+ label: t('app:actions.move'),
+ className: classes.action(isMfs),
+ disabled: !isMfs,
+ extras: {}
+ },
+ {
+ action: setPinning,
+ icon:
,
+ label: t('app:actions.setPinning'),
+ className: classes.action(isSingle),
+ disabled: !isSingle,
+ extras: {}
+ },
+ {
+ action: inspect,
+ icon:
,
+ label: t('app:actions.inspect'),
+ className: classes.action(isSingle),
+ disabled: !isSingle,
+ extras: singleFileTooltip
+ },
+ {
+ action: rename,
+ icon:
,
+ label: t('app:actions.rename'),
+ className: classes.action(isSingle && isMfs),
+ disabled: !(isSingle && isMfs),
+ extras: singleFileTooltip
+ }
+ ]
+
+ // max widths breakpoints
+ const breakpoints = () => {
+ if (windowWidth <= 400) {
+ return 1
+ } else if (windowWidth <= 768) {
+ return 2
+ } else if (windowWidth <= 1045) {
+ return 3
+ } else if (windowWidth <= 1250) {
+ return 4
+ }
+
+ return items.length
+ }
+
return (
@@ -92,37 +182,35 @@ class SelectedActions extends React.Component {
{count}
-
+
{t('filesSelected', { count })}
{t('totalSize', { size: humanSize(size) })}
-
-
-
-
-
-
-
+
+
+ {items.slice(0, breakpoints()).map((item, i) => (
+
+ ))}
+ {(breakpoints() < (items.length) &&
)}
+ {showMoreMenu && (
+
+ {items.slice(breakpoints(), items.length).map((item, i) => (
+
+ ))}
+
+ )}
+