import ControlLabel from 'react-bootstrap/lib/ControlLabel' import { Alert, FormControl } from 'react-bootstrap' import FormGroup from 'react-bootstrap/lib/FormGroup' import { useCallback } from 'react' import { useTranslation } from 'react-i18next' import { useFileTreeCreateName } from '../../contexts/file-tree-create-name' import PropTypes from 'prop-types' import { BlockedFilenameError, DuplicateFilenameError, InvalidFilenameError, } from '../../errors' /** * A form component that renders a text input with label, * plus a validation warning and/or an error message when needed */ export default function FileTreeCreateNameInput({ label, focusName = false, classes = {}, placeholder, error, inFlight, }) { const { t } = useTranslation() // the value is stored in a context provider, so it's available elsewhere in the form const { name, setName, touchedName, validName } = useFileTreeCreateName() // focus the first part of the filename if needed const inputRef = useCallback( element => { if (element && focusName) { window.requestAnimationFrame(() => { element.focus() element.setSelectionRange(0, element.value.lastIndexOf('.')) }) } }, [focusName] ) return ( {label || t('file_name')} setName(event.target.value)} inputRef={inputRef} disabled={inFlight} /> {touchedName && !validName && ( {t('files_cannot_include_invalid_characters')} )} {error && } ) } FileTreeCreateNameInput.propTypes = { focusName: PropTypes.bool, label: PropTypes.string, classes: PropTypes.shape({ formGroup: PropTypes.string, }), placeholder: PropTypes.string, error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), inFlight: PropTypes.bool.isRequired, } function ErrorMessage({ error }) { const { t } = useTranslation() // if (typeof error === 'string') { // return error // } switch (error.constructor) { case DuplicateFilenameError: return ( {t('file_already_exists')} ) case InvalidFilenameError: return ( {t('files_cannot_include_invalid_characters')} ) case BlockedFilenameError: return ( {t('blocked_filename')} ) default: // return return null // other errors are displayed elsewhere } } ErrorMessage.propTypes = { error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, }