import ControlLabel from 'react-bootstrap/lib/ControlLabel' import { Alert, FormControl } from 'react-bootstrap' import FormGroup from 'react-bootstrap/lib/FormGroup' import React, { useCallback } from 'react' import { Trans } 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 = 'File Name', focusName = false, classes = {}, placeholder = 'File Name', error, }) { // 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} setName(event.target.value)} inputRef={inputRef} /> {touchedName && !validName && ( )} {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]), } function ErrorMessage({ error }) { // if (typeof error === 'string') { // return error // } switch (error.constructor) { case DuplicateFilenameError: return ( ) case InvalidFilenameError: return ( ) case BlockedFilenameError: return ( ) default: // return return null // other errors are displayed elsewhere } } ErrorMessage.propTypes = { error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, }