first commit
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
|
||||
import FileTreeCreateFormProvider from '../../contexts/file-tree-create-form'
|
||||
import FileTreeModalCreateFileBody from '../file-tree-create/file-tree-modal-create-file-body'
|
||||
import FileTreeModalCreateFileFooter from '../file-tree-create/file-tree-modal-create-file-footer'
|
||||
import OLModal, {
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/features/ui/components/ol/ol-modal'
|
||||
|
||||
export default function FileTreeModalCreateFile() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { isCreatingFile, cancel } = useFileTreeActionable()
|
||||
|
||||
if (!isCreatingFile) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<FileTreeCreateFormProvider>
|
||||
<OLModal size="lg" onHide={cancel} show>
|
||||
<OLModalHeader closeButton>
|
||||
<OLModalTitle>{t('add_files')}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
|
||||
<OLModalBody className="modal-new-file">
|
||||
<FileTreeModalCreateFileBody />
|
||||
</OLModalBody>
|
||||
|
||||
<OLModalFooter>
|
||||
<FileTreeModalCreateFileFooter />
|
||||
</OLModalFooter>
|
||||
</OLModal>
|
||||
</FileTreeCreateFormProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
|
||||
import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
|
||||
import { DuplicateFilenameError } from '../../errors'
|
||||
import { isCleanFilename } from '../../util/safe-path'
|
||||
import OLModal, {
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/features/ui/components/ol/ol-modal'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
|
||||
function FileTreeModalCreateFolder() {
|
||||
const { t } = useTranslation()
|
||||
const [name, setName] = useState('')
|
||||
const [validName, setValidName] = useState(true)
|
||||
|
||||
const { isCreatingFolder, inFlight, finishCreatingFolder, cancel, error } =
|
||||
useFileTreeActionable()
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCreatingFolder) {
|
||||
// clear the input when the modal is closed
|
||||
setName('')
|
||||
}
|
||||
}, [isCreatingFolder])
|
||||
|
||||
if (!isCreatingFolder) return null // the modal will not be rendered; return early
|
||||
|
||||
function handleHide() {
|
||||
cancel()
|
||||
}
|
||||
|
||||
function handleCreateFolder() {
|
||||
finishCreatingFolder(name)
|
||||
}
|
||||
|
||||
function errorMessage() {
|
||||
switch (error.constructor) {
|
||||
case DuplicateFilenameError:
|
||||
return t('file_already_exists')
|
||||
default:
|
||||
return t('generic_something_went_wrong')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<OLModal show onHide={handleHide}>
|
||||
<OLModalHeader>
|
||||
<OLModalTitle>{t('new_folder')}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
|
||||
<OLModalBody>
|
||||
<InputName
|
||||
name={name}
|
||||
setName={setName}
|
||||
validName={validName}
|
||||
setValidName={setValidName}
|
||||
handleCreateFolder={handleCreateFolder}
|
||||
/>
|
||||
{!validName ? (
|
||||
<div
|
||||
role="alert"
|
||||
aria-label={t('files_cannot_include_invalid_characters')}
|
||||
className="alert alert-danger file-tree-modal-alert"
|
||||
>
|
||||
{t('files_cannot_include_invalid_characters')}
|
||||
</div>
|
||||
) : null}
|
||||
{error ? (
|
||||
<div
|
||||
role="alert"
|
||||
aria-label={errorMessage()}
|
||||
className="alert alert-danger file-tree-modal-alert"
|
||||
>
|
||||
{errorMessage()}
|
||||
</div>
|
||||
) : null}
|
||||
</OLModalBody>
|
||||
|
||||
<OLModalFooter>
|
||||
{inFlight ? (
|
||||
<OLButton variant="primary" disabled isLoading={inFlight} />
|
||||
) : (
|
||||
<>
|
||||
<OLButton variant="secondary" onClick={handleHide}>
|
||||
{t('cancel')}
|
||||
</OLButton>
|
||||
<OLButton
|
||||
variant="primary"
|
||||
onClick={handleCreateFolder}
|
||||
disabled={!validName}
|
||||
>
|
||||
{t('create')}
|
||||
</OLButton>
|
||||
</>
|
||||
)}
|
||||
</OLModalFooter>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
|
||||
function InputName({
|
||||
name,
|
||||
setName,
|
||||
validName,
|
||||
setValidName,
|
||||
handleCreateFolder,
|
||||
}) {
|
||||
const { autoFocusedRef } = useRefWithAutoFocus()
|
||||
|
||||
function handleFocus(ev) {
|
||||
ev.target.setSelectionRange(0, -1)
|
||||
}
|
||||
|
||||
function handleChange(ev) {
|
||||
setValidName(isCleanFilename(ev.target.value.trim()))
|
||||
setName(ev.target.value)
|
||||
}
|
||||
|
||||
function handleKeyDown(ev) {
|
||||
if (ev.key === 'Enter' && validName) {
|
||||
handleCreateFolder()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
ref={autoFocusedRef}
|
||||
className="form-control"
|
||||
type="text"
|
||||
value={name}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={handleChange}
|
||||
onFocus={handleFocus}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
InputName.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
setName: PropTypes.func.isRequired,
|
||||
validName: PropTypes.bool.isRequired,
|
||||
setValidName: PropTypes.func.isRequired,
|
||||
handleCreateFolder: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default FileTreeModalCreateFolder
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
|
||||
import OLModal, {
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/features/ui/components/ol/ol-modal'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
import OLNotification from '@/features/ui/components/ol/ol-notification'
|
||||
|
||||
function FileTreeModalDelete() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const {
|
||||
isDeleting,
|
||||
inFlight,
|
||||
finishDeleting,
|
||||
actionedEntities,
|
||||
cancel,
|
||||
error,
|
||||
} = useFileTreeActionable()
|
||||
|
||||
if (!isDeleting) return null // the modal will not be rendered; return early
|
||||
|
||||
function handleHide() {
|
||||
cancel()
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
finishDeleting()
|
||||
}
|
||||
|
||||
return (
|
||||
<OLModal show onHide={handleHide}>
|
||||
<OLModalHeader>
|
||||
<OLModalTitle>{t('delete')}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
|
||||
<OLModalBody>
|
||||
<p>{t('sure_you_want_to_delete')}</p>
|
||||
<ul>
|
||||
{actionedEntities.map(entity => (
|
||||
<li key={entity._id}>{entity.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
{error && (
|
||||
<OLNotification
|
||||
type="error"
|
||||
content={t('generic_something_went_wrong')}
|
||||
/>
|
||||
)}
|
||||
</OLModalBody>
|
||||
|
||||
<OLModalFooter>
|
||||
{inFlight ? (
|
||||
<OLButton variant="danger" disabled isLoading />
|
||||
) : (
|
||||
<>
|
||||
<OLButton variant="secondary" onClick={handleHide}>
|
||||
{t('cancel')}
|
||||
</OLButton>
|
||||
<OLButton variant="danger" onClick={handleDelete}>
|
||||
{t('delete')}
|
||||
</OLButton>
|
||||
</>
|
||||
)}
|
||||
</OLModalFooter>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileTreeModalDelete
|
||||
@@ -0,0 +1,89 @@
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
|
||||
import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
|
||||
|
||||
import {
|
||||
InvalidFilenameError,
|
||||
BlockedFilenameError,
|
||||
DuplicateFilenameError,
|
||||
DuplicateFilenameMoveError,
|
||||
} from '../../errors'
|
||||
import OLModal, {
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/features/ui/components/ol/ol-modal'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
|
||||
function FileTreeModalError() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { isRenaming, isMoving, cancel, error } = useFileTreeActionable()
|
||||
|
||||
// the modal will not be rendered; return early
|
||||
if (!error) return null
|
||||
if (!isRenaming && !isMoving) return null
|
||||
|
||||
function handleHide() {
|
||||
cancel()
|
||||
}
|
||||
|
||||
function errorTitle() {
|
||||
switch (error.constructor) {
|
||||
case DuplicateFilenameError:
|
||||
case DuplicateFilenameMoveError:
|
||||
return t('duplicate_file')
|
||||
case InvalidFilenameError:
|
||||
case BlockedFilenameError:
|
||||
return t('invalid_file_name')
|
||||
default:
|
||||
return t('error')
|
||||
}
|
||||
}
|
||||
|
||||
function errorMessage() {
|
||||
switch (error.constructor) {
|
||||
case DuplicateFilenameError:
|
||||
return t('file_already_exists')
|
||||
case DuplicateFilenameMoveError:
|
||||
return (
|
||||
<Trans
|
||||
i18nKey="file_already_exists_in_this_location"
|
||||
components={[<strong />]} // eslint-disable-line react/jsx-key
|
||||
values={{ fileName: error.entityName }}
|
||||
shouldUnescape
|
||||
tOptions={{ interpolation: { escapeValue: true } }}
|
||||
/>
|
||||
)
|
||||
case InvalidFilenameError:
|
||||
return t('files_cannot_include_invalid_characters')
|
||||
case BlockedFilenameError:
|
||||
return t('blocked_filename')
|
||||
default:
|
||||
return t('generic_something_went_wrong')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<OLModal show onHide={handleHide}>
|
||||
<OLModalHeader>
|
||||
<OLModalTitle>{errorTitle()}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
|
||||
<OLModalBody>
|
||||
<div role="alert" aria-label={errorMessage()}>
|
||||
{errorMessage()}
|
||||
</div>
|
||||
</OLModalBody>
|
||||
|
||||
<OLModalFooter>
|
||||
<OLButton onClick={handleHide} variant="primary">
|
||||
{t('ok')}
|
||||
</OLButton>
|
||||
</OLModalFooter>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileTreeModalError
|
||||
Reference in New Issue
Block a user