1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 05:09:43 +02:00

feat: Refactor CommentEdit component to use separate props for text and actions

This commit is contained in:
SedationH 2024-10-27 10:26:30 +08:00
parent 7580afdb1c
commit 85f8c52f04
2 changed files with 20 additions and 9 deletions

View file

@ -10,7 +10,7 @@ import { focusEnd } from '../../../utils/element-helpers';
import styles from './CommentEdit.module.scss'; import styles from './CommentEdit.module.scss';
const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref) => { const CommentEdit = React.forwardRef(({ defaultData, onUpdate, text, actions }, ref) => {
const [t] = useTranslation(); const [t] = useTranslation();
const [isOpened, setIsOpened] = useState(false); const [isOpened, setIsOpened] = useState(false);
const [data, handleFieldChange, setData] = useForm(null); const [data, handleFieldChange, setData] = useForm(null);
@ -76,7 +76,12 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
}, [isOpened]); }, [isOpened]);
if (!isOpened) { if (!isOpened) {
return children; return (
<>
{text}
{actions}
</>
);
} }
return ( return (
@ -101,9 +106,10 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
}); });
CommentEdit.propTypes = { CommentEdit.propTypes = {
children: PropTypes.element.isRequired,
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
onUpdate: PropTypes.func.isRequired, onUpdate: PropTypes.func.isRequired,
text: PropTypes.element.isRequired,
actions: PropTypes.element.isRequired,
}; };
export default React.memo(CommentEdit); export default React.memo(CommentEdit);

View file

@ -40,12 +40,17 @@ const ItemComment = React.memo(
})} })}
</span> </span>
</div> </div>
<CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}> <CommentEdit
<> ref={commentEdit}
defaultData={data}
onUpdate={onUpdate}
text={
<div className={styles.text}> <div className={styles.text}>
<Markdown linkTarget="_blank">{data.text}</Markdown> <Markdown linkTarget="_blank">{data.text}</Markdown>
</div> </div>
{canEdit && ( }
actions={
canEdit && (
<Comment.Actions> <Comment.Actions>
<Comment.Action <Comment.Action
as="button" as="button"
@ -66,9 +71,9 @@ const ItemComment = React.memo(
/> />
</DeletePopup> </DeletePopup>
</Comment.Actions> </Comment.Actions>
)} )
</> }
</CommentEdit> />
</div> </div>
</Comment> </Comment>
); );