Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 66x | import { getUserId } from "@utils/TokenUtils";
import { Button, Input } from "antd";
import React, { ReactElement, useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { StringUtils } from "@utils/index";
import { openErrorNotification, openInfoNotification } from "@utils/NotificationUtils";
import { createRelatedDomainObject } from "@utils/FetchUtils";
import CustomAvatar from "../avatar/CustomAvatar";
import { RecordProps, TableMetaProps } from "@props/RecordProps";
import { DomainComment } from "./CommentProps";
import { SendOutlined } from '@ant-design/icons';
export interface CommentFormProps {
zIndex: number;
mainDomainName: string;
owner: RecordProps;
objectTypeId: number;
column: TableMetaProps;
fetchDataCallback?: () => void;
replyTo?: DomainComment;
}
const CommentForm = (props: CommentFormProps): ReactElement => {
const {
zIndex, mainDomainName, column, fetchDataCallback, owner, replyTo,
objectTypeId
} = props;
const { t } = useTranslation();
const [content, setContent] = useState<string>("");
const [saving, setSaving] = useState<boolean>(false);
const placeholder = t("Please input comments here, press Ctrl + Enter to save it");
const submitMessage = useCallback((): void => {
if (!StringUtils.isBlank(content)) {
if (saving) {
return;
}
setSaving(true);
createRelatedDomainObject({
columnName: column.key,
object: {
content,
status: "NEW",
replyTo: replyTo?.id ?? undefined,
objectId: owner.id,
objectType: objectTypeId,
},
mainDomainName: mainDomainName,
mainDomainId: owner.id,
relatedDomainName: "tech_muyan_comment_DomainComment",
}).then(() => {
setContent("");
openInfoNotification(t("Comment saved"));
fetchDataCallback?.();
}).catch((e) => {
openErrorNotification(t("Error"), e.message);
}).finally(() => setSaving(false));
}
}, [
column.key, content, mainDomainName, fetchDataCallback,
owner.id, saving, t, replyTo, objectTypeId
]);
const keydownHandler = useCallback((e: React.KeyboardEvent<HTMLDivElement>): void => {
if (e.key === 'Enter' && e.ctrlKey && !StringUtils.isBlank(content)) {
submitMessage();
}
}, [submitMessage, content]);
React.useEffect(() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
document.addEventListener('keydown', keydownHandler);
return () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
document.removeEventListener('keydown', keydownHandler);
};
}, [keydownHandler]);
const avatarSize = (replyTo != null) ? undefined : "large";
return (
<div style={{ zIndex }} className="comment-form-container">
<CustomAvatar
userId={Number.parseInt(getUserId() ?? "")}
size={avatarSize}
/>
<div className="comment-input-container">
<Input.TextArea
placeholder={placeholder}
className="text"
autoSize={{ minRows: 3 }}
onChange={(e) => setContent(e.target.value)}
value={content}
autoFocus={true}
/>
<Button
value="Submit"
size="small"
onClick={submitMessage}
loading={saving}
icon={<SendOutlined />}
>
{t('Submit')}
</Button>
</div>
</div>
);
};
export default CommentForm;
|