@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
88 lines (87 loc) • 6.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useSelector } from 'react-redux';
import { Icon } from '../../components/icons';
import Panel from '../../components/Panel';
import SimpleButton from '../../components/SimpleButton';
import * as CommentsRedux from '../../Redux/ActionsReducers/CommentsRedux';
import { CommentsAndNotesSelector } from '../../Redux/ActionsReducers/InternalRedux';
import { useAdaptable } from '../AdaptableContext';
import AdaptableInput from '../Components/AdaptableInput';
import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
import { Box, Flex } from '../../components/Flex';
import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
export const CommentsEditor = (props) => {
const { api } = useAdaptable();
const showCloseButton = api.optionsApi.getCommentOptions()?.showPopupCloseButton ?? true;
const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
const userId = React.useMemo(() => {
return api.optionsApi.getUserName();
}, []);
const commentThread = useSelector((state) => CommentsRedux.GetCellCommentSelector(state.Comment, cellAddress));
const isReadOnlyModule = api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === ACCESS_LEVEL_READ_ONLY;
const [activeEditingComment, setActiveEditingComment] = React.useState(() => {
return null;
});
const [newCommentText, setNewCommentText] = React.useState('');
const commentsWrapperRef = React.useRef(null);
const comments = commentThread?.Comments;
const scrollToBottom = () => {
commentsWrapperRef?.current?.scrollTo(0, commentsWrapperRef?.current?.scrollHeight);
};
React.useEffect(() => {
scrollToBottom();
}, []);
if (!commentThread) {
return null;
}
const formatDate = (date, format) => {
return FormatHelper.DateFormatter(date, { Pattern: format });
};
return (_jsxs(Panel, { color: "var(--ab-color-primary-foreground)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
if (event.key === 'Escape') {
api.commentApi.hideCommentsPopup();
}
}, children: [showCloseButton && (_jsxs(Flex, { children: [_jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { onClick: (event) => {
event.stopPropagation();
api.commentApi.hideCommentsPopup();
}, variant: "text", icon: "close" })] })), _jsx(Flex, { className: "twa:overflow-auto twa:max-h-[300px]", flexDirection: "column", ref: commentsWrapperRef, children: comments &&
comments.length > 0 &&
comments.map((comment, index) => {
if (!comment) {
return null;
}
const isOwnComment = comment?.Author?.UserName
? comment?.Author?.UserName === userId
: true;
return (_jsxs(Box, { className: "ab-Comment twa:p-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:mb-2", children: [_jsxs(Box, { children: [_jsx(Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold", children: comment?.Author?.UserName }), comment.Timestamp && (_jsx(Box, { "data-name": "comment-timestamp", className: "twa:text-2", children: formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat()) }))] }), _jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }), _jsx(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
api.commentApi.deleteComment(comment, cellAddress);
requestAnimationFrame(() => {
props.onRefreshContent();
});
} })] }), _jsx(Box, { onClick: () => setActiveEditingComment(comment.Uuid), children: comment.Uuid === activeEditingComment ? (_jsx(AdaptableInput, { autoFocus: true, className: "twa:w-full", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
if (comment.Uuid === activeEditingComment) {
setActiveEditingComment(null);
}
}, onChange: (event) => {
api.commentApi.editComment({
...comment,
Value: event.target.value,
}, cellAddress);
} })) : (_jsx(Box, { "data-name": "comment-text", children: comment.Value })) })] }, comment.Uuid ?? index));
}) }), _jsx(AdaptableInput, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
setNewCommentText(event.target.value);
}, onKeyDown: (event) => {
if (event.key === 'Enter') {
api.commentApi.addComment(newCommentText, cellAddress);
setNewCommentText('');
requestAnimationFrame(() => {
props.onRefreshContent();
scrollToBottom();
});
}
}, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }), _jsxs(SimpleButton, { className: "twa:w-full", variant: "raised", onClick: () => {
api.settingsPanelApi.openSettingsPanel('Comment');
api.internalApi.getAnnotationsService().hidePopup();
}, children: [_jsx(Box, { className: "twa:mr-2", children: _jsx(Icon, { name: "folder" }) }), ' ', "Open all Comments"] })] }));
};