55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
import React, { useRef, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { KeyCodes } from 'shared/constants/keyCodes';
|
|
import { is, generateErrors } from 'shared/utils/validation';
|
|
|
|
import { TitleTextarea, ErrorText } from './Styles';
|
|
|
|
const propTypes = {
|
|
issue: PropTypes.object.isRequired,
|
|
updateIssue: PropTypes.func.isRequired,
|
|
};
|
|
|
|
const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
|
|
const $titleInputRef = useRef();
|
|
const [error, setError] = useState(null);
|
|
|
|
const handleTitleChange = () => {
|
|
setError(null);
|
|
|
|
const title = $titleInputRef.current.value;
|
|
if (title === issue.title) return;
|
|
|
|
const errors = generateErrors({ title }, { title: [is.required(), is.maxLength(200)] });
|
|
|
|
if (errors.title) {
|
|
setError(errors.title);
|
|
} else {
|
|
updateIssue({ title });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<TitleTextarea
|
|
minRows={1}
|
|
placeholder="Short summary"
|
|
defaultValue={issue.title}
|
|
ref={$titleInputRef}
|
|
onBlur={handleTitleChange}
|
|
onKeyDown={event => {
|
|
if (event.keyCode === KeyCodes.ENTER) {
|
|
event.target.blur();
|
|
}
|
|
}}
|
|
/>
|
|
{error && <ErrorText>{error}</ErrorText>}
|
|
</>
|
|
);
|
|
};
|
|
|
|
ProjectBoardIssueDetailsTitle.propTypes = propTypes;
|
|
|
|
export default ProjectBoardIssueDetailsTitle;
|