import { useEffect, useState, useRef } from 'react' import PropTypes from 'prop-types' import { OverlayTrigger, Tooltip } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import classNames from 'classnames' import Icon from '../../../shared/components/icon' function ProjectNameEditableLabel({ projectName, hasRenamePermissions, onChange, className, }) { const { t } = useTranslation() const [isRenaming, setIsRenaming] = useState(false) const canRename = hasRenamePermissions && !isRenaming const [inputContent, setInputContent] = useState(projectName) const inputRef = useRef(null) useEffect(() => { if (isRenaming) { inputRef.current.select() } }, [isRenaming]) function startRenaming() { if (canRename) { setInputContent(projectName) setIsRenaming(true) } } function finishRenaming() { setIsRenaming(false) onChange(inputContent) } function handleKeyDown(event) { if (event.key === 'Enter') { event.preventDefault() finishRenaming() } } function handleOnChange(event) { setInputContent(event.target.value) } function handleBlur() { if (isRenaming) { finishRenaming() } } return (
{!isRenaming && ( {projectName} )} {isRenaming && ( )} {canRename && ( {t('rename')}} > {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus */} )}
) } ProjectNameEditableLabel.propTypes = { projectName: PropTypes.string.isRequired, hasRenamePermissions: PropTypes.bool, onChange: PropTypes.func.isRequired, className: PropTypes.string, } export default ProjectNameEditableLabel