@blocklet/discuss-kit 1.0.7 → 1.0.8

package/lib/cjs/components/menu.js

@@ -1,7 +1,7 @@
 "use strict";
 const react = require("react");
 const PropTypes = require("prop-types");
-const styled = require("@emotion/styled");
+const Theme = require("@arcblock/ux/lib/Theme");
 const IconButton = require("@mui/material/IconButton");
 const MoreVertIcon = require("@mui/icons-material/MoreVert");
 const Box = require("@mui/material/Box");
@@ -10,7 +10,6 @@ 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);
@@ -75,10 +74,10 @@ Menu.propTypes = {
   items: PropTypes__default.default.array.isRequired
 };
 Menu.defaultProps = {};
-const Root = styled__default.default("div")`
+const Root = Theme.styled("div")`
   display: inline-block;
 `;
-const StyledMenuItem = styled__default.default(MuiMenuItem__default.default)`
+const StyledMenuItem = Theme.styled(MuiMenuItem__default.default)`
   font-size: 14px;
 `;
 module.exports = Menu;

package/lib/cjs/did-comment.js

@@ -1,6 +1,6 @@
 "use strict";
 const react = require("react");
-const styled = require("@emotion/styled");
+const Theme = require("@arcblock/ux/lib/Theme");
 const joinUrl = require("url-join");
 const PropTypes = require("prop-types");
 const useAsyncRetry = require("react-use/lib/useAsyncRetry");
@@ -19,7 +19,6 @@ const getWsClient = require("./ws");
 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 joinUrl__default = /* @__PURE__ */ _interopDefaultLegacy(joinUrl);
 const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
 const useAsyncRetry__default = /* @__PURE__ */ _interopDefaultLegacy(useAsyncRetry);
@@ -286,6 +285,7 @@ function Wrapper({
   target,
   prefix,
   flatView,
+  autoCollapse,
   ...rest
 }) {
   if (!(target == null ? void 0 : target.id)) {
@@ -294,6 +294,13 @@ function Wrapper({
   const {
     locale
   } = context.useLocaleContext();
+  const [, setSettings] = discussKitUx.useCommentSettings();
+  react.useEffect(() => {
+    setSettings((prev) => ({
+      ...prev,
+      autoCollapse
+    }));
+  }, [autoCollapse, setSettings]);
   const object = react.useMemo(
     () => ({
       ...target,
@@ -344,16 +351,18 @@ Wrapper.propTypes = {
   showConnectBtn: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func,
   prefix: PropTypes__default.default.string,
-  flatView: PropTypes__default.default.bool
+  flatView: PropTypes__default.default.bool,
+  autoCollapse: PropTypes__default.default.bool
 };
 Wrapper.defaultProps = {
   showConnectBtn: false,
   onChange: () => {
   },
   prefix: "",
-  flatView: false
+  flatView: false,
+  autoCollapse: false
 };
-const Container = styled__default.default.div`
+const Container = Theme.styled("div")`
   background-color: #fff;
   width: 100%;
   margin: 0 auto;

package/lib/es/components/menu.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
-import styled from "@emotion/styled";
+import { styled } from "@arcblock/ux/lib/Theme";
 import IconButton from "@mui/material/IconButton";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import Box from "@mui/material/Box";

package/lib/es/did-comment.js

@@ -1,5 +1,5 @@
-import { useMemo, useEffect, useContext } from "react";
-import styled from "@emotion/styled";
+import { useEffect, useMemo, useContext } from "react";
+import { styled } from "@arcblock/ux/lib/Theme";
 import joinUrl from "url-join";
 import PropTypes from "prop-types";
 import useAsyncRetry from "react-use/lib/useAsyncRetry";
@@ -11,7 +11,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import { useLocaleContext, LocaleProvider } from "@arcblock/ux/lib/Locale/context";
 import { ErrorBoundary } from "react-error-boundary";
-import { InternalThemeProvider, CommentsProvider, useCommentsContext, BinaryThumb, CommentInput, CommentList } from "@blocklet/discuss-kit-ux";
+import { useCommentSettings, InternalThemeProvider, CommentsProvider, useCommentsContext, BinaryThumb, CommentInput, CommentList } from "@blocklet/discuss-kit-ux";
 import ErrorFallback from "./components/error-fallback";
 import { translations } from "./locales";
 import getWsClient, { useSubscription } from "./ws";
@@ -272,6 +272,7 @@ function Wrapper({
   target,
   prefix,
   flatView,
+  autoCollapse,
   ...rest
 }) {
   if (!(target == null ? void 0 : target.id)) {
@@ -280,6 +281,13 @@ function Wrapper({
   const {
     locale
   } = useLocaleContext();
+  const [, setSettings] = useCommentSettings();
+  useEffect(() => {
+    setSettings((prev) => ({
+      ...prev,
+      autoCollapse
+    }));
+  }, [autoCollapse, setSettings]);
   const object = useMemo(
     () => ({
       ...target,
@@ -330,16 +338,18 @@ Wrapper.propTypes = {
   showConnectBtn: PropTypes.bool,
   onChange: PropTypes.func,
   prefix: PropTypes.string,
-  flatView: PropTypes.bool
+  flatView: PropTypes.bool,
+  autoCollapse: PropTypes.bool
 };
 Wrapper.defaultProps = {
   showConnectBtn: false,
   onChange: () => {
   },
   prefix: "",
-  flatView: false
+  flatView: false,
+  autoCollapse: false
 };
-const Container = styled.div`
+const Container = styled("div")`
   background-color: #fff;
   width: 100%;
   margin: 0 auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A react component for DID Comments blocklet.",
   "main": "./lib/cjs/index.js",
   "module": "./lib/es/index.js",
@@ -37,7 +37,7 @@
     "@arcblock/did-connect": "^2.4.52",
     "@arcblock/ux": "^2.4.52",
     "@arcblock/ws": "^1.18.15",
-    "@blocklet/discuss-kit-ux": "1.0.7",
+    "@blocklet/discuss-kit-ux": "1.0.8",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.10.9",
@@ -75,5 +75,5 @@
     "vite-plugin-build": "^0.6.0",
     "vite-plugin-svgr": "^2.2.2"
   },
-  "gitHead": "64db5271e940f4d3a5a02444cc1dc5c391de7513"
+  "gitHead": "daa242497b657cf81c90e151e1cb4a51858bdca9"
 }

package/lib/cjs/comment-list.js

@@ -1,117 +0,0 @@
-"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

@@ -1,335 +0,0 @@
-"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;