@blocklet/discuss-kit 1.0.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2020 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,15 @@
+# DID Comment React Component
+
+A react component for DID Comments blocklet.
+
+## Install
+
+```
+npm install @did-comment/react
+```
+
+or
+
+```
+yarn add @did-comment/react
+```

package/lib/cjs/api.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const axios = require("axios");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const axios__default = /* @__PURE__ */ _interopDefaultLegacy(axios);
+const request = axios__default.default.create({ baseURL: "/", timeout: 5e3 });
+request.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+const fetchRatingStats = async (id) => {
+  const { data } = await request.get(`/ratings/${id}`);
+  return data;
+};
+const fetchComments = async (params) => {
+  try {
+    const { data } = await request.get("/comments", { params });
+    return data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+const reply = async ({ commentId, parentId, content }) => {
+  const { data } = await request.post(`/comments/${commentId}/replies`, { content, parentId });
+  return data;
+};
+const fetchMoreReplies = async ({ commentId, cursor, limit = 10 }) => {
+  try {
+    const { data } = await request.get(`/comments/${commentId}/replies`, {
+      params: { cursor, limit, embed: "rating" }
+    });
+    return data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+exports.default = request;
+exports.fetchComments = fetchComments;
+exports.fetchMoreReplies = fetchMoreReplies;
+exports.fetchRatingStats = fetchRatingStats;
+exports.reply = reply;

package/lib/cjs/comment-list.js

@@ -0,0 +1,117 @@
+"use strict";
+const react = require("react");
+const styled = require("@emotion/styled");
+const Button = require("@arcblock/ux/lib/Button");
+const CircularProgress = require("@mui/material/CircularProgress");
+const context$1 = require("@arcblock/ux/lib/Locale/context");
+const Dialog = require("@arcblock/ux/lib/Dialog");
+const Comment = require("./components/comment");
+const context = require("./context");
+const api = require("./api");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+const Button__default = /* @__PURE__ */ _interopDefaultLegacy(Button);
+const CircularProgress__default = /* @__PURE__ */ _interopDefaultLegacy(CircularProgress);
+const Comment__default = /* @__PURE__ */ _interopDefaultLegacy(Comment);
+const api__default = /* @__PURE__ */ _interopDefaultLegacy(api);
+function CommentList() {
+  const {
+    comments,
+    loadMore,
+    hasMore,
+    loading,
+    removeComment
+  } = context.useCommentsContext();
+  const {
+    t
+  } = react.useContext(context$1.LocaleContext);
+  const [waitDelRow, setWaitDelRow] = react.useState({});
+  const handleConfirmDelete = async (comment) => {
+    try {
+      setWaitDelRow({});
+      await api__default.default.delete(`/comments/${comment.id}`);
+      removeComment(comment);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Center, {
+      style: {
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress__default.default, {})
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, {
+    children: [comments.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: "empty",
+      children: t("empty")
+    }), comments.length > 0 && comments.map((comment, index) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(Comment__default.default, {
+        comment,
+        index: index + 1,
+        onDelete: setWaitDelRow
+      }, comment.id);
+    }), hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: "load-more",
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button__default.default, {
+        onClick: loadMore,
+        disabled: loading,
+        variant: "outlined",
+        color: "primary",
+        size: "small",
+        children: t("loadMore")
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx(Dialog.Confirm, {
+      open: !!waitDelRow.id,
+      title: t("tip"),
+      onConfirm: () => {
+        handleConfirmDelete(waitDelRow);
+      },
+      confirmButton: {
+        text: t("confirm"),
+        props: {
+          variant: "contained",
+          color: "error"
+        }
+      },
+      cancelButton: {
+        text: t("cancel"),
+        props: {
+          color: "inherit"
+        }
+      },
+      onCancel: () => {
+        setWaitDelRow({});
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+        children: t("deleteCommentDesc")
+      })
+    })]
+  });
+}
+CommentList.propTypes = {};
+CommentList.defaultProps = {};
+const Center = styled__default.default.div`
+  width: 100%;
+  padding: 120px 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Container = styled__default.default.div`
+  width: 100%;
+  .empty {
+    text-align: center;
+    color: #9397a1;
+    font-size: 16px;
+    margin-top: 44px;
+  }
+  .load-more {
+    text-align: center;
+    margin: 24px 0;
+  }
+`;
+module.exports = CommentList;

package/lib/cjs/components/comment.js

@@ -0,0 +1,335 @@
+"use strict";
+const React = require("react");
+const styled = require("@emotion/styled");
+const Box = require("@mui/material/Box");
+const Button = require("@mui/material/Button");
+const PropTypes = require("prop-types");
+const NavigateNextIcon = require("@mui/icons-material/NavigateNext");
+const DIDAddress = require("@arcblock/did-connect/lib/Address");
+const timeago_js = require("timeago.js");
+const context$1 = require("@arcblock/ux/lib/Locale/context");
+const discussKitUx = require("@blocklet/discuss-kit-ux");
+const rating = require("./rating");
+const Menu = require("./menu");
+const api = require("../api");
+const utils = require("../lib/utils");
+const context = require("../context");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+const Box__default = /* @__PURE__ */ _interopDefaultLegacy(Box);
+const Button__default = /* @__PURE__ */ _interopDefaultLegacy(Button);
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const NavigateNextIcon__default = /* @__PURE__ */ _interopDefaultLegacy(NavigateNextIcon);
+const DIDAddress__default = /* @__PURE__ */ _interopDefaultLegacy(DIDAddress);
+const Menu__default = /* @__PURE__ */ _interopDefaultLegacy(Menu);
+const api__default = /* @__PURE__ */ _interopDefaultLegacy(api);
+const SvgMessage = (props) => /* @__PURE__ */ React__namespace.createElement("svg", {
+  width: 32,
+  height: 32,
+  viewBox: "0 0 24 24",
+  ...props
+}, /* @__PURE__ */ React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "#888888",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  d: "m3 20l1.3-3.9A9 8 0 1 1 7.7 19L3 20"
+}));
+function CommentReplies({
+  comment,
+  onDelete,
+  ...rest
+}) {
+  const {
+    t
+  } = React.useContext(context$1.LocaleContext);
+  const {
+    loadMoreReplies
+  } = context.useCommentsContext();
+  const {
+    replies,
+    totalReplies
+  } = comment;
+  if (!(replies == null ? void 0 : replies.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+    mt: 1,
+    ...rest,
+    children: [replies.map((item) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comment, {
+          comment: item,
+          onDelete,
+          rootComment: comment
+        })
+      }, item.id);
+    }), totalReplies > replies.length && /* @__PURE__ */ jsxRuntime.jsx(Button__default.default, {
+      onClick: () => loadMoreReplies(comment.id),
+      variant: "outlined",
+      color: "inherit",
+      size: "small",
+      endIcon: /* @__PURE__ */ jsxRuntime.jsx(NavigateNextIcon__default.default, {}),
+      sx: {
+        mt: 2,
+        ml: 6,
+        color: "grey.600",
+        borderColor: "grey.400",
+        fontSize: 12,
+        textTransform: "none"
+      },
+      children: t("showMoreReplies")
+    })]
+  });
+}
+CommentReplies.propTypes = {
+  comment: PropTypes__default.default.object.isRequired,
+  onDelete: PropTypes__default.default.func.isRequired
+};
+function Comment({
+  comment,
+  onDelete,
+  rootComment,
+  ...rest
+}) {
+  var _a, _b, _c, _d;
+  const {
+    session,
+    addComment,
+    updateComment,
+    manageMode,
+    flatMode
+  } = context.useCommentsContext();
+  const {
+    t,
+    locale
+  } = React.useContext(context$1.LocaleContext);
+  const [inputBoxVisible, setInputBoxVisible] = React.useState(false);
+  const [editMode, setEditMode] = React.useState(false);
+  const isCommenter = ((_a = session == null ? void 0 : session.user) == null ? void 0 : _a.did) === comment.commenter.did;
+  const canEditOrDelete = !comment.deletedAt && (isCommenter || manageMode);
+  const menuItems = [...canEditOrDelete ? [{
+    text: /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+      component: "span",
+      sx: {
+        color: "error.main"
+      },
+      children: t("delete")
+    }),
+    onClick: () => onDelete(comment)
+  }, {
+    text: /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+      component: "span",
+      children: t("edit")
+    }),
+    onClick: () => setEditMode(true)
+  }] : []];
+  const sendReply = async (content) => {
+    const commentId = (rootComment == null ? void 0 : rootComment.id) || comment.commentId || comment.id;
+    const data = await utils.minDelay(api.reply({
+      commentId,
+      parentId: comment.id,
+      content
+    }), 800);
+    setInputBoxVisible(false);
+    addComment(data);
+  };
+  const handleOnRate = async ({
+    ratingType,
+    value
+  }) => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api__default.default.post(`/objects/${comment.objectId}/comments/${comment.id}/ratings`, {
+      ratingType,
+      value
+    });
+  };
+  const handleOnUnrate = async () => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api__default.default.delete(`/objects/${comment.objectId}/comments/${comment.id}/ratings`);
+  };
+  const handleUpdateComment = async (content) => {
+    await api__default.default.put(`/comments/${comment.id}`, {
+      content
+    });
+    updateComment(comment.id, (current) => ({
+      ...current,
+      content
+    }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root, {
+    ...rest,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(discussKitUx.Avatar, {
+      did: comment.commenter.did,
+      src: comment.commenter.avatar,
+      size: 36,
+      shape: "circle",
+      variant: "circle"
+    }), /* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+      flex: "1",
+      pl: 2,
+      overflow: "hidden",
+      children: [/* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "start",
+        children: [/* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+          children: [/* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            flexWrap: "wrap",
+            color: "#333",
+            lineHeight: 1,
+            children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+              children: comment.commenter.fullName || "Unknown"
+            }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              children: ["(", /* @__PURE__ */ jsxRuntime.jsx(DIDAddress__default.default, {
+                copyable: false,
+                responsive: false,
+                compact: true,
+                inline: true,
+                children: comment.commenter.did
+              }), ")"]
+            }), /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+              width: {
+                xs: "100%",
+                md: "auto"
+              },
+              fontSize: 13,
+              color: "grey.500",
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                children: timeago_js.format(comment.createdAt, locale === "zh" ? "zh_CN" : "en_US")
+              })
+            })]
+          }), ((_b = comment.replyTo) == null ? void 0 : _b.did) && (flatMode || comment.parentId !== comment.commentId) && /* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+            mt: 0.5,
+            fontSize: 13,
+            lineHeight: 1,
+            color: "primary.light",
+            sx: {
+              ".did-address-text": {
+                color: "primary.light"
+              }
+            },
+            children: ["@", /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+              component: "span",
+              mr: 1,
+              children: comment.replyTo.fullName
+            }), "(", /* @__PURE__ */ jsxRuntime.jsx(DIDAddress__default.default, {
+              copyable: false,
+              responsive: false,
+              compact: true,
+              inline: true,
+              children: comment.replyTo.did
+            }), ")"]
+          })]
+        }), !!(menuItems == null ? void 0 : menuItems.length) && /* @__PURE__ */ jsxRuntime.jsx(Menu__default.default, {
+          items: menuItems,
+          style: {
+            position: "absolute",
+            right: 0,
+            top: 16
+          }
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+        mt: 1,
+        children: [!comment.deletedAt && /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.PostContent, {
+          content: comment.content,
+          editing: editMode,
+          onExitEditing: () => setEditMode(false),
+          onSubmit: handleUpdateComment
+        }), comment.deletedAt && /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+          display: "inline-block",
+          px: 2,
+          py: 1,
+          mt: 1,
+          fontSize: 14,
+          bgcolor: "grey.100",
+          color: "grey.600",
+          borderRadius: 1,
+          children: t("deleted")
+        })]
+      }), !manageMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, {
+          display: "flex",
+          alignItems: "center",
+          mt: 1.5,
+          children: [/* @__PURE__ */ jsxRuntime.jsx(rating.BinaryThumb, {
+            selected: (_c = comment.rating) == null ? void 0 : _c.myRating,
+            countPerValue: (_d = comment.rating) == null ? void 0 : _d.counts,
+            onRate: handleOnRate,
+            onUnrate: handleOnUnrate
+          }), /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+            onClick: () => utils.protectLogin(session, () => setInputBoxVisible(!inputBoxVisible)),
+            sx: {
+              lineHeight: 1,
+              "&:hover": {
+                cursor: "pointer"
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(SvgMessage, {
+              style: {
+                width: "auto",
+                height: 16
+              }
+            })
+          })]
+        }), inputBoxVisible && /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+          my: 2,
+          children: /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.CommentInput, {
+            send: sendReply
+          })
+        })]
+      }), !comment.parentId && /* @__PURE__ */ jsxRuntime.jsx(CommentReplies, {
+        comment,
+        onDelete
+      })]
+    })]
+  });
+}
+Comment.propTypes = {
+  comment: PropTypes__default.default.object.isRequired,
+  onDelete: PropTypes__default.default.func,
+  rootComment: PropTypes__default.default.object
+};
+Comment.defaultProps = {
+  onDelete: void 0,
+  rootComment: void 0
+};
+const Root = styled__default.default(Box__default.default)`
+  display: flex;
+  position: relative;
+  padding: 24px 0 0 0;
+  &:first-of-type {
+    flex-shrink: 0;
+  }
+`;
+module.exports = Comment;

package/lib/cjs/components/error-fallback.js

@@ -0,0 +1,26 @@
+"use strict";
+const PropTypes = require("prop-types");
+const Alert = require("@mui/material/Alert");
+const AlertTitle = require("@mui/material/AlertTitle");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const Alert__default = /* @__PURE__ */ _interopDefaultLegacy(Alert);
+const AlertTitle__default = /* @__PURE__ */ _interopDefaultLegacy(AlertTitle);
+function ErrorFallback({
+  error
+}) {
+  const errorMessageElement = process.env.NODE_ENV === "production" ? null : /* @__PURE__ */ jsxRuntime.jsx("pre", {
+    children: error.message
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Alert__default.default, {
+    severity: "warning",
+    children: [/* @__PURE__ */ jsxRuntime.jsx(AlertTitle__default.default, {
+      children: "Oops!"
+    }), "DID Comments is not working properly.", errorMessageElement]
+  });
+}
+ErrorFallback.propTypes = {
+  error: PropTypes__default.default.instanceOf(Error).isRequired
+};
+module.exports = ErrorFallback;

package/lib/cjs/components/menu.js

@@ -0,0 +1,84 @@
+"use strict";
+const react = require("react");
+const PropTypes = require("prop-types");
+const styled = require("@emotion/styled");
+const IconButton = require("@mui/material/IconButton");
+const MoreVertIcon = require("@mui/icons-material/MoreVert");
+const Box = require("@mui/material/Box");
+const MuiMenu = require("@mui/material/Menu");
+const MuiMenuItem = require("@mui/material/MenuItem");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+const IconButton__default = /* @__PURE__ */ _interopDefaultLegacy(IconButton);
+const MoreVertIcon__default = /* @__PURE__ */ _interopDefaultLegacy(MoreVertIcon);
+const Box__default = /* @__PURE__ */ _interopDefaultLegacy(Box);
+const MuiMenu__default = /* @__PURE__ */ _interopDefaultLegacy(MuiMenu);
+const MuiMenuItem__default = /* @__PURE__ */ _interopDefaultLegacy(MuiMenuItem);
+function Menu({
+  items,
+  ...rest
+}) {
+  const [anchorEl, setAnchorEl] = react.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root, {
+    ...rest,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, {
+      size: "medium",
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(MoreVertIcon__default.default, {
+        sx: {
+          fontSize: 18
+        }
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx(MuiMenu__default.default, {
+      anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      open,
+      onClose: handleClose,
+      children: items.map(({
+        onClick,
+        text,
+        ...itemProps
+      }, index) => {
+        const _onClick = () => {
+          onClick();
+          handleClose();
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(StyledMenuItem, {
+          onClick: _onClick,
+          ...itemProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, {
+            minWidth: 100,
+            children: text
+          })
+        }, index);
+      })
+    })]
+  });
+}
+Menu.propTypes = {
+  items: PropTypes__default.default.array.isRequired
+};
+Menu.defaultProps = {};
+const Root = styled__default.default("div")`
+  display: inline-block;
+`;
+const StyledMenuItem = styled__default.default(MuiMenuItem__default.default)`
+  font-size: 14px;
+`;
+module.exports = Menu;