@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
93 lines • 6.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderComments = void 0;
var tslib_1 = require("tslib");
var Button_1 = require("@fluentui/react/lib/Button");
var DocumentCard_1 = require("@fluentui/react/lib/DocumentCard");
var Stack_1 = require("@fluentui/react/lib/Stack");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var react_2 = require("react");
var ConfirmDelete_1 = require("../ConfirmDelete/ConfirmDelete");
var ListItemCommentsStateProvider_1 = require("../ListItemCommentsStateProvider");
var CommentItem_1 = require("./CommentItem");
var RenderSpinner_1 = require("./RenderSpinner");
var useListItemCommentsStyles_1 = require("./useListItemCommentsStyles");
var react_hooks_1 = require("@fluentui/react-hooks");
var react_3 = require("@fluentui/react");
var __1 = require("../..");
var LikedUserList_1 = require("./LikedUserList");
var RenderComments = function () {
var highlightedCommentId = (0, react_2.useContext)(__1.AppContext).highlightedCommentId;
var _a = (0, react_2.useContext)(ListItemCommentsStateProvider_1.ListItemCommentsStateContext), listItemCommentsState = _a.listItemCommentsState, setlistItemCommentsState = _a.setlistItemCommentsState;
var _b = (0, useListItemCommentsStyles_1.useListItemCommentsStyles)(), documentCardStyles = _b.documentCardStyles, documentCardHighlightedStyles = _b.documentCardHighlightedStyles, itemContainerStyles = _b.itemContainerStyles, buttonsContainerStyles = _b.buttonsContainerStyles;
var comments = listItemCommentsState.comments, isLoading = listItemCommentsState.isLoading;
var _c = (0, react_hooks_1.useBoolean)(true), hideDialog = _c[0], setHideDialog = _c[1].toggle;
var _d = (0, react_1.useState)(false), showDialog = _d[0], setShowDialog = _d[1];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var _e = (0, react_1.useState)([]), selectedLikedBy = _e[0], setSelectedLikedBy = _e[1];
var _likeComment = (0, react_1.useCallback)(function () {
setlistItemCommentsState({
type: ListItemCommentsStateProvider_1.EListItemCommentsStateTypes.SET_COMMENT_ACTION,
payload: __1.ECommentAction.LIKE,
});
}, []);
var _unLikeComment = (0, react_1.useCallback)(function () {
setlistItemCommentsState({
type: ListItemCommentsStateProvider_1.EListItemCommentsStateTypes.SET_COMMENT_ACTION,
payload: __1.ECommentAction.UNLIKE,
});
}, []);
var onRenderCell = (0, react_1.useCallback)(function (comment, index) {
return (React.createElement(DocumentCard_1.DocumentCard, { styles: highlightedCommentId && comment.id === highlightedCommentId
? documentCardHighlightedStyles
: documentCardStyles, key: index },
React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "end", styles: buttonsContainerStyles },
React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
comment.likeCount > 0 ? (React.createElement(react_3.Link, { onClick: function () {
setSelectedLikedBy(comment.likedBy);
setShowDialog(true);
} }, comment.likeCount)) : (React.createElement(react_3.Text, null, comment.likeCount)),
React.createElement(Button_1.IconButton, { iconProps: {
iconName: "".concat(comment.isLikedByUser ? 'LikeSolid' : 'Like'),
}, style: { fontSize: 10 }, onClick: function () {
setlistItemCommentsState({
type: ListItemCommentsStateProvider_1.EListItemCommentsStateTypes.SET_SELECTED_COMMENT,
payload: comment,
});
if (!comment.isLikedByUser) {
_likeComment();
}
else {
_unLikeComment();
}
} })),
React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Delete' }, style: { fontSize: 10 }, onClick: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
setlistItemCommentsState({
type: ListItemCommentsStateProvider_1.EListItemCommentsStateTypes.SET_SELECTED_COMMENT,
payload: comment,
});
setHideDialog();
return [2 /*return*/];
});
}); } })),
React.createElement(DocumentCard_1.DocumentCardDetails, { styles: { root: { paddingTop: 15 } } },
React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "start", verticalAlign: "center", tokens: { childrenGap: 12 }, styles: itemContainerStyles },
React.createElement(CommentItem_1.CommentItem, { comment: comment })))));
}, [comments]);
return (React.createElement(React.Fragment, null,
isLoading ? (React.createElement(RenderSpinner_1.RenderSpinner, null)) : (React.createElement(react_3.List, { items: comments, onRenderCell: onRenderCell })),
React.createElement(ConfirmDelete_1.ConfirmDelete, { hideDialog: hideDialog, onDismiss: function (deleteComment) {
if (deleteComment) {
setlistItemCommentsState({
type: ListItemCommentsStateProvider_1.EListItemCommentsStateTypes.SET_COMMENT_ACTION,
payload: __1.ECommentAction.DELETE,
});
}
setHideDialog();
} }),
React.createElement(LikedUserList_1.LikedUserList, { isDialogOpen: showDialog, setShowDialog: setShowDialog, likedBy: selectedLikedBy })));
};
exports.RenderComments = RenderComments;
//# sourceMappingURL=RenderComments.js.map