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:
parent
7580afdb1c
commit
85f8c52f04
2 changed files with 20 additions and 9 deletions
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue