@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
276 lines (272 loc) • 10.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Comments = Comments;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _commentAuthorInfo = _interopRequireDefault(require("./comment-author-info"));
var _commentForm = _interopRequireDefault(require("./comment-form"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Renders the Comments component.
*
* @param {Object} props - The component props.
* @param {Array} props.threads - The array of comment threads.
* @param {Function} props.onEditComment - The function to handle comment editing.
* @param {Function} props.onAddReply - The function to add a reply to a comment.
* @param {Function} props.onCommentDelete - The function to delete a comment.
* @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
* @param {boolean} props.showCommentBoard - Whether to show the comment board.
* @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
* @return {React.ReactNode} The rendered Comments component.
*/
function Comments({
threads,
onEditComment,
onAddReply,
onCommentDelete,
onCommentResolve,
showCommentBoard,
setShowCommentBoard
}) {
const {
blockCommentId
} = (0, _data.useSelect)(select => {
const {
getBlockAttributes,
getSelectedBlockClientId
} = select(_blockEditor.store);
const _clientId = getSelectedBlockClientId();
return {
blockCommentId: _clientId ? getBlockAttributes(_clientId)?.blockCommentId : null
};
}, []);
const [focusThread, setFocusThread] = (0, _element.useState)(showCommentBoard && blockCommentId ? blockCommentId : null);
const clearThreadFocus = () => {
setFocusThread(null);
setShowCommentBoard(false);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [
// If there are no comments, show a message indicating no comments are available.
(!Array.isArray(threads) || threads.length === 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
alignment: "left",
className: "editor-collab-sidebar-panel__thread",
justify: "flex-start",
spacing: "3",
children:
// translators: message displayed when there are no comments available
(0, _i18n.__)('No comments available')
}), Array.isArray(threads) && threads.length > 0 && threads.map(thread => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
className: (0, _clsx.default)('editor-collab-sidebar-panel__thread', {
'editor-collab-sidebar-panel__active-thread': blockCommentId && blockCommentId === thread.id,
'editor-collab-sidebar-panel__focus-thread': focusThread && focusThread === thread.id
}),
id: thread.id,
spacing: "3",
onClick: () => setFocusThread(thread.id),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Thread, {
thread: thread,
onAddReply: onAddReply,
onCommentDelete: onCommentDelete,
onCommentResolve: onCommentResolve,
onEditComment: onEditComment,
isFocused: focusThread === thread.id,
clearThreadFocus: clearThreadFocus
})
}, thread.id))]
});
}
function Thread({
thread,
onEditComment,
onAddReply,
onCommentDelete,
onCommentResolve,
isFocused,
clearThreadFocus
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
thread: thread,
onResolve: onCommentResolve,
onEdit: onEditComment,
onDelete: onCommentDelete,
status: thread.status
}), 0 < thread?.reply?.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
className: "editor-collab-sidebar-panel__show-more-reply",
children: (0, _i18n.sprintf)(
// translators: 1: number of replies.
(0, _i18n._x)('%s more replies..', 'Show replies button'), thread?.reply?.length)
}), isFocused && thread.reply.map(reply => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
className: "editor-collab-sidebar-panel__child-thread",
id: reply.id,
spacing: "2",
children: ['approved' !== thread.status && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
thread: reply,
onEdit: onEditComment,
onDelete: onCommentDelete
}), 'approved' === thread.status && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
thread: reply
})]
}, reply.id))]
}), 'approved' !== thread.status && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
className: "editor-collab-sidebar-panel__child-thread",
spacing: "2",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
alignment: "left",
spacing: "3",
justify: "flex-start",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
spacing: "3",
className: "editor-collab-sidebar-panel__comment-field",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
onSubmit: inputComment => {
onAddReply(inputComment, thread.id);
},
onCancel: event => {
event.stopPropagation(); // Prevent the parent onClick from being triggered
clearThreadFocus();
},
submitButtonText: (0, _i18n._x)('Reply', 'Add reply comment')
})
})]
})]
});
}
const CommentBoard = ({
thread,
onResolve,
onEdit,
onDelete,
status
}) => {
const [actionState, setActionState] = (0, _element.useState)(false);
const [showConfirmDialog, setShowConfirmDialog] = (0, _element.useState)(false);
const handleConfirmDelete = () => {
onDelete(thread.id);
setActionState(false);
setShowConfirmDialog(false);
};
const handleConfirmResolve = () => {
onResolve(thread.id);
setActionState(false);
setShowConfirmDialog(false);
};
const handleCancel = () => {
setActionState(false);
setShowConfirmDialog(false);
};
const actions = [onEdit && {
title: (0, _i18n._x)('Edit', 'Edit comment'),
onClick: () => {
setActionState('edit');
}
}, onDelete && {
title: (0, _i18n._x)('Delete', 'Delete comment'),
onClick: () => {
setActionState('delete');
setShowConfirmDialog(true);
}
}];
const moreActions = actions.filter(item => item?.onClick);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
alignment: "left",
spacing: "3",
justify: "flex-start",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {
avatar: thread?.author_avatar_urls?.[48],
name: thread?.author_name,
date: thread?.date
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: "editor-collab-sidebar-panel__comment-status",
children: [status !== 'approved' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
alignment: "right",
justify: "flex-end",
spacing: "0",
children: [0 === thread?.parent && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
label: (0, _i18n._x)('Resolve', 'Mark comment as resolved'),
__next40pxDefaultSize: true,
icon: _icons.published,
onClick: () => {
setActionState('resolve');
setShowConfirmDialog(true);
},
showTooltip: true
}), 0 < moreActions.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
icon: _icons.moreVertical,
label: (0, _i18n._x)('Select an action', 'Select comment action'),
className: "editor-collab-sidebar-panel__comment-dropdown-menu",
controls: moreActions
})]
}), status === 'approved' &&
/*#__PURE__*/
// translators: tooltip for resolved comment
(0, _jsxRuntime.jsx)(_components.Tooltip, {
text: (0, _i18n.__)('Resolved'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.check
})
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
alignment: "left",
spacing: "3",
justify: "flex-start",
className: "editor-collab-sidebar-panel__user-comment",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: "3",
className: "editor-collab-sidebar-panel__comment-field",
children: ['edit' === actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
onSubmit: value => {
onEdit(thread.id, value);
setActionState(false);
},
onCancel: () => handleCancel(),
thread: thread,
submitButtonText: (0, _i18n._x)('Update', 'verb')
}), 'edit' !== actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
children: thread?.content?.raw
})]
})
}), 'resolve' === actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
isOpen: showConfirmDialog,
onConfirm: handleConfirmResolve,
onCancel: handleCancel,
confirmButtonText: "Yes",
cancelButtonText: "No",
children:
// translators: message displayed when confirming an action
(0, _i18n.__)('Are you sure you want to mark this comment as resolved?')
}), 'delete' === actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
isOpen: showConfirmDialog,
onConfirm: handleConfirmDelete,
onCancel: handleCancel,
confirmButtonText: "Yes",
cancelButtonText: "No",
children:
// translators: message displayed when confirming an action
(0, _i18n.__)('Are you sure you want to delete this comment?')
})]
});
};
//# sourceMappingURL=comments.js.map