import { useState } from 'react' import PropTypes from 'prop-types' import { Button, Modal } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus' import AccessibleModal from '../../../../shared/components/accessible-modal' import { useFileTreeActionable } from '../../contexts/file-tree-actionable' import { DuplicateFilenameError } from '../../errors' import { isCleanFilename } from '../../util/safe-path' function FileTreeModalCreateFolder() { const { t } = useTranslation() const [name, setName] = useState('') const [validName, setValidName] = useState(true) const { isCreatingFolder, inFlight, finishCreatingFolder, cancel, error, } = useFileTreeActionable() 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 ( {t('new_folder')} {!validName ? (
{t('files_cannot_include_invalid_characters')}
) : null} {error ? (
{errorMessage()}
) : null}
{inFlight ? ( ) : ( <> )}
) } 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 ( ) } 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