@plone/volto 18.0.0-alpha.42 → 18.0.0-alpha.44

package/dist/server/assets/Comments-BYGPCvYn.js

@@ -0,0 +1,416 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import { defineMessages, useIntl, FormattedMessage } from "react-intl";
+import { createPortal } from "react-dom";
+import { useDispatch, useSelector, shallowEqual } from "react-redux";
+import { Container, Comment, Button, Icon } from "semantic-ui-react";
+import { l as listComments, C as CommentEditModal, a as addComment, b as listMoreComments, d as deleteComment } from "./index-7OxxMyWS.js";
+import { cf as getInitials, u as usePrevious, b as getBaseUrl, F as Form, f as flattenToAppURL, cg as getColor } from "../entry-server.js";
+import moment from "moment";
+import "classnames";
+import "lodash-es";
+import "react-router";
+import "react-router-hash-link";
+import "tlds";
+import "prepend-http";
+import "react-router-dom";
+import "redux";
+import "lodash-move";
+import "react-dom/server";
+import "react-transition-group";
+import "react-toastify";
+import "promise-file-reader";
+import "uuid";
+import "pretty-bytes";
+import "react-side-effect";
+import "github-slugger";
+import "slate";
+import "hoist-non-react-statics";
+import "query-string";
+import "slate-react";
+import "prettier/standalone";
+import "prettier/parser-html";
+import "prismjs/components/prism-core.js";
+import "react-animate-height";
+import "react-popper";
+import "react-sortable-hoc";
+import "react-dates/initialize.js";
+import "react-anchor-link-smooth-scroll";
+import "jwt-decode";
+import "react-router-config";
+import "react-fast-compare";
+import "object-assign";
+import "lodash-es/split.js";
+import "lodash-es/join.js";
+import "lodash-es/trim.js";
+import "react-cookie";
+import "react-intl-redux";
+import "universal-cookie";
+import "slate-hyperscript";
+import "is-hotkey";
+import "react-dropzone";
+import "react-intersection-observer";
+import "is-url";
+import "lodash-es/isUndefined.js";
+import "lodash-es/isString.js";
+import "redux-mock-store";
+import "serialize-javascript";
+import "superagent";
+import "connected-react-router";
+import "react-beautiful-dnd";
+import "detect-browser";
+import "locale";
+import "history";
+import "redux-thunk";
+import "redux-localstorage-simple";
+import "debug";
+import "express";
+import "http-proxy-middleware";
+const defaultSize = 30;
+const defaultColor = "Teal";
+const defaultClassName = "avatar circular";
+const Avatar = ({ src, title, text, size, color, className }) => {
+  const radius = Math.round(size / 2);
+  return /* @__PURE__ */ jsx("div", { className, title, children: src ? /* @__PURE__ */ jsx("img", { src, alt: title }) : /* @__PURE__ */ jsxs("svg", { width: size, height: size, children: [
+    /* @__PURE__ */ jsx("circle", { cx: radius, cy: radius, r: radius, fill: color }),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: "50%",
+        y: "50%",
+        textAnchor: "middle",
+        fill: "white",
+        fontSize: `${radius}px`,
+        fontFamily: "Arial",
+        dy: ".3em",
+        children: text || getInitials(title, 1)
+      }
+    )
+  ] }) });
+};
+Avatar.propTypes = {
+  src: PropTypes.string,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  size: PropTypes.number,
+  color: PropTypes.string,
+  className: PropTypes.string
+};
+Avatar.defaultProps = {
+  src: null,
+  title: null,
+  text: null,
+  size: defaultSize,
+  color: defaultColor,
+  className: defaultClassName
+};
+const messages = defineMessages({
+  comment: {
+    id: "Comment",
+    defaultMessage: "Comment"
+  },
+  comments: {
+    id: "Comments",
+    defaultMessage: "Comments"
+  },
+  commentDescription: {
+    id: "You can add a comment by filling out the form below. Plain text formatting.",
+    defaultMessage: "You can add a comment by filling out the form below. Plain text formatting."
+  },
+  default: {
+    id: "Default",
+    defaultMessage: "Default"
+  },
+  delete: {
+    id: "Delete",
+    defaultMessage: "Delete"
+  },
+  edit: {
+    id: "Edit",
+    defaultMessage: "Edit"
+  },
+  reply: {
+    id: "Reply",
+    defaultMessage: "Reply"
+  },
+  hideReplies: {
+    id: "Hide Replies",
+    defaultMessage: "Hide Replies"
+  },
+  showReplies: {
+    id: "Show Replies",
+    defaultMessage: "Show Replies"
+  },
+  loadMoreComments: {
+    id: "Load more",
+    defaultMessage: "Load more..."
+  }
+});
+const makeFormSchema = (intl) => ({
+  fieldsets: [
+    {
+      fields: ["comment"],
+      id: "default",
+      title: intl.formatMessage(messages.default)
+    }
+  ],
+  properties: {
+    comment: {
+      title: intl.formatMessage(messages.comment),
+      type: "string",
+      widget: "textarea"
+    }
+  },
+  required: ["comment1"]
+});
+const useComments = () => {
+  const items = useSelector((state) => state.comments.items, shallowEqual);
+  const next = useSelector((state) => state.comments.next, shallowEqual);
+  const items_total = useSelector(
+    (state) => state.comments.items_total,
+    shallowEqual
+  );
+  const permissions = useSelector(
+    (state) => state.comments.permissions || {},
+    shallowEqual
+  );
+  const addRequest = useSelector((state) => state.comments.add, shallowEqual);
+  const deleteRequest = useSelector(
+    (state) => state.comments.delete,
+    shallowEqual
+  );
+  return { items, next, items_total, permissions, addRequest, deleteRequest };
+};
+const Comments = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname } = props;
+  const [showEdit, setshowEdit] = useState(false);
+  const [editId, seteditId] = useState(null);
+  const [editText, seteditText] = useState(null);
+  const [replyTo, setreplyTo] = useState(null);
+  const [collapsedComments, setcollapsedComments] = useState({});
+  const { items, next, items_total, permissions, addRequest, deleteRequest } = useComments();
+  const prevpathname = usePrevious(pathname);
+  const prevaddRequestLoading = usePrevious(addRequest.loading);
+  const prevdeleteRequestLoading = usePrevious(deleteRequest.loading);
+  useEffect(() => {
+    if (pathname !== prevpathname || prevaddRequestLoading && addRequest.loaded || prevdeleteRequestLoading && deleteRequest.loaded) {
+      dispatch(listComments(getBaseUrl(pathname)));
+    }
+  }, [
+    dispatch,
+    pathname,
+    prevpathname,
+    prevaddRequestLoading,
+    addRequest.loaded,
+    prevdeleteRequestLoading,
+    deleteRequest.loaded
+  ]);
+  const onSubmit = (formData) => {
+    dispatch(addComment(getBaseUrl(pathname), formData.comment, replyTo));
+    setreplyTo(null);
+  };
+  const setReplyTo = (commentId) => {
+    setreplyTo(commentId);
+  };
+  const loadMoreComments = () => {
+    dispatch(listMoreComments(next));
+  };
+  const onDelete = (value) => {
+    dispatch(deleteComment(value));
+  };
+  const prevcollapsedComments = usePrevious(collapsedComments);
+  const hideReply = (commentId) => {
+    const hasComment = prevcollapsedComments[commentId];
+    setcollapsedComments((prevState) => ({
+      ...prevState,
+      [commentId]: !hasComment
+    }));
+  };
+  const onEdit = useCallback((value) => {
+    setshowEdit(true);
+    seteditText(value.text);
+    seteditId(value.id);
+  }, []);
+  const onEditOk = () => {
+    setshowEdit(false);
+    seteditId(null);
+    seteditText(null);
+    dispatch(listComments(getBaseUrl(pathname)));
+  };
+  const onEditCancel = useCallback(() => {
+    setshowEdit(false);
+    seteditId(null);
+    seteditText(null);
+    setreplyTo(null);
+  }, []);
+  const addRepliesAsChildrenToComments = (items2) => {
+    let initialValue = {};
+    const allCommentsWithCildren2 = items2.reduce((accumulator, item) => {
+      return {
+        [item.comment_id]: { comment: item, children: [] },
+        ...accumulator
+      };
+    }, initialValue);
+    items2.forEach((comment) => {
+      if (comment.in_reply_to) {
+        allCommentsWithCildren2[comment.in_reply_to].children.push(comment);
+      }
+    });
+    return allCommentsWithCildren2;
+  };
+  const allCommentsWithCildren = useMemo(
+    () => addRepliesAsChildrenToComments(items),
+    [items]
+  );
+  const allPrimaryComments = items.filter((comment) => !comment.in_reply_to);
+  const commentElement = (comment) => /* @__PURE__ */ jsxs(Comment, { id: comment.comment_id, children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        src: flattenToAppURL(comment.author_image),
+        title: comment.author_name || "Anonymous",
+        color: getColor(comment.author_username)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Comment.Content, { children: [
+      /* @__PURE__ */ jsx(Comment.Author, { children: comment.author_name }),
+      /* @__PURE__ */ jsx(Comment.Metadata, { children: /* @__PURE__ */ jsxs("span", { children: [
+        " ",
+        /* @__PURE__ */ jsx("span", { title: moment(comment.creation_date).format("LLLL"), children: moment(comment.creation_date).fromNow() })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Comment.Text, { children: [
+        " ",
+        comment.text["mime-type"] === "text/html" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            dangerouslySetInnerHTML: {
+              __html: comment.text.data
+            }
+          }
+        ) : comment.text.data
+      ] }),
+      /* @__PURE__ */ jsxs(Comment.Actions, { children: [
+        comment.can_reply && /* @__PURE__ */ jsx(
+          Comment.Action,
+          {
+            as: "a",
+            "aria-label": intl.formatMessage(messages.reply),
+            onClick: () => setReplyTo(comment.comment_id),
+            children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Reply", defaultMessage: "Reply" })
+          }
+        ),
+        comment.is_editable && /* @__PURE__ */ jsx(
+          Comment.Action,
+          {
+            onClick: () => onEdit({
+              id: flattenToAppURL(comment["@id"]),
+              text: comment.text.data
+            }),
+            "aria-label": intl.formatMessage(messages.edit),
+            value: {
+              id: flattenToAppURL(comment["@id"]),
+              text: comment.text.data
+            },
+            children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Edit", defaultMessage: "Edit" })
+          }
+        ),
+        comment.is_deletable && /* @__PURE__ */ jsxs(
+          Comment.Action,
+          {
+            "aria-label": intl.formatMessage(messages.delete),
+            onClick: () => onDelete(flattenToAppURL(comment["@id"])),
+            color: "red",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "delete", color: "red" }),
+              /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "Delete",
+                  defaultMessage: "Delete",
+                  color: "red"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Comment.Action, { as: "a", onClick: () => hideReply(comment.comment_id), children: allCommentsWithCildren[comment.comment_id].children.length > 0 ? collapsedComments[comment.comment_id] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { name: "eye", color: "blue" }),
+          /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: "Show Replies",
+              defaultMessage: "Show Replies"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { name: "minus", color: "blue" }),
+          /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: "Hide Replies",
+              defaultMessage: "Hide Replies"
+            }
+          )
+        ] }) : null })
+      ] }),
+      /* @__PURE__ */ jsx("div", { id: `reply-place-${comment.comment_id}` })
+    ] }),
+    allCommentsWithCildren[comment.comment_id].children.length > 0 ? allCommentsWithCildren[comment.comment_id].children.map(
+      (child, index) => /* @__PURE__ */ jsx(
+        Comment.Group,
+        {
+          collapsed: collapsedComments[comment.comment_id],
+          children: commentElement(child)
+        },
+        `group-${index}-${comment.comment_id}`
+      )
+    ) : null
+  ] }, comment.comment_id);
+  if (!permissions.view_comments) return "";
+  return /* @__PURE__ */ jsxs(Container, { className: "comments", children: [
+    /* @__PURE__ */ jsx(
+      CommentEditModal,
+      {
+        open: showEdit,
+        onCancel: onEditCancel,
+        onOk: onEditOk,
+        id: editId,
+        text: editText
+      }
+    ),
+    permissions.can_reply && /* @__PURE__ */ jsx("div", { id: "comment-add-id", children: /* @__PURE__ */ jsx(
+      Form,
+      {
+        onSubmit,
+        onCancel: onEditCancel,
+        submitLabel: intl.formatMessage(messages.comment),
+        resetAfterSubmit: true,
+        schema: makeFormSchema(intl)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Comment.Group, { threaded: true, id: "discussion", children: allPrimaryComments.map((item) => commentElement(item)) }),
+    items_total > items.length && /* @__PURE__ */ jsx(Button, { fluid: true, basic: true, color: "blue", onClick: loadMoreComments, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Load more", defaultMessage: "Load more..." }) }),
+    replyTo && document && createPortal(
+      /* @__PURE__ */ jsx(
+        Form,
+        {
+          onSubmit,
+          onCancel: onEditCancel,
+          submitLabel: intl.formatMessage(messages.comment),
+          resetAfterSubmit: true,
+          schema: makeFormSchema(intl)
+        }
+      ),
+      document.getElementById(`reply-place-${replyTo}`)
+    )
+  ] });
+};
+Comments.propTypes = {
+  pathname: PropTypes.string.isRequired
+};
+export {
+  Comments as default
+};