@blocklet/discuss-kit 1.0.6 → 1.0.8

package/lib/es/comment-list.js

@@ -1,112 +0,0 @@
-import { useContext, useState } from "react";
-import styled from "@emotion/styled";
-import Button from "@arcblock/ux/lib/Button";
-import CircularProgress from "@mui/material/CircularProgress";
-import { LocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Confirm } from "@arcblock/ux/lib/Dialog";
-import Comment from "./components/comment";
-import { useCommentsContext } from "./context";
-import api from "./api";
-import { jsx, jsxs } from "react/jsx-runtime";
-function CommentList() {
-  const {
-    comments,
-    loadMore,
-    hasMore,
-    loading,
-    removeComment
-  } = useCommentsContext();
-  const {
-    t
-  } = useContext(LocaleContext);
-  const [waitDelRow, setWaitDelRow] = useState({});
-  const handleConfirmDelete = async (comment) => {
-    try {
-      setWaitDelRow({});
-      await api.delete(`/comments/${comment.id}`);
-      removeComment(comment);
-    } catch (e) {
-      console.error(e);
-    }
-  };
-  if (loading) {
-    return /* @__PURE__ */ jsx(Center, {
-      style: {
-        width: "100%"
-      },
-      children: /* @__PURE__ */ jsx(CircularProgress, {})
-    });
-  }
-  return /* @__PURE__ */ jsxs(Container, {
-    children: [comments.length === 0 && /* @__PURE__ */ jsx("div", {
-      className: "empty",
-      children: t("empty")
-    }), comments.length > 0 && comments.map((comment, index) => {
-      return /* @__PURE__ */ jsx(Comment, {
-        comment,
-        index: index + 1,
-        onDelete: setWaitDelRow
-      }, comment.id);
-    }), hasMore && /* @__PURE__ */ jsx("div", {
-      className: "load-more",
-      children: /* @__PURE__ */ jsx(Button, {
-        onClick: loadMore,
-        disabled: loading,
-        variant: "outlined",
-        color: "primary",
-        size: "small",
-        children: t("loadMore")
-      })
-    }), /* @__PURE__ */ jsx(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__ */ jsx("span", {
-        children: t("deleteCommentDesc")
-      })
-    })]
-  });
-}
-CommentList.propTypes = {};
-CommentList.defaultProps = {};
-const Center = styled.div`
-  width: 100%;
-  padding: 120px 0 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const Container = styled.div`
-  width: 100%;
-  .empty {
-    text-align: center;
-    color: #9397a1;
-    font-size: 16px;
-    margin-top: 44px;
-  }
-  .load-more {
-    text-align: center;
-    margin: 24px 0;
-  }
-`;
-export {
-  CommentList as default
-};

package/lib/es/components/comment.js

@@ -1,309 +0,0 @@
-import * as React from "react";
-import { useContext, useState } from "react";
-import styled from "@emotion/styled";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import PropTypes from "prop-types";
-import NavigateNextIcon from "@mui/icons-material/NavigateNext";
-import DIDAddress from "@arcblock/did-connect/lib/Address";
-import { format } from "timeago.js";
-import { LocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Avatar, PostContent, CommentInput } from "@blocklet/discuss-kit-ux";
-import { BinaryThumb } from "./rating";
-import Menu from "./menu";
-import api, { reply } from "../api";
-import { protectLogin, minDelay } from "../lib/utils";
-import { useCommentsContext } from "../context";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-const SvgMessage = (props) => /* @__PURE__ */ React.createElement("svg", {
-  width: 32,
-  height: 32,
-  viewBox: "0 0 24 24",
-  ...props
-}, /* @__PURE__ */ React.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
-  } = useContext(LocaleContext);
-  const {
-    loadMoreReplies
-  } = useCommentsContext();
-  const {
-    replies,
-    totalReplies
-  } = comment;
-  if (!(replies == null ? void 0 : replies.length)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Box, {
-    mt: 1,
-    ...rest,
-    children: [replies.map((item) => {
-      return /* @__PURE__ */ jsx("div", {
-        children: /* @__PURE__ */ jsx(Comment, {
-          comment: item,
-          onDelete,
-          rootComment: comment
-        })
-      }, item.id);
-    }), totalReplies > replies.length && /* @__PURE__ */ jsx(Button, {
-      onClick: () => loadMoreReplies(comment.id),
-      variant: "outlined",
-      color: "inherit",
-      size: "small",
-      endIcon: /* @__PURE__ */ jsx(NavigateNextIcon, {}),
-      sx: {
-        mt: 2,
-        ml: 6,
-        color: "grey.600",
-        borderColor: "grey.400",
-        fontSize: 12,
-        textTransform: "none"
-      },
-      children: t("showMoreReplies")
-    })]
-  });
-}
-CommentReplies.propTypes = {
-  comment: PropTypes.object.isRequired,
-  onDelete: PropTypes.func.isRequired
-};
-function Comment({
-  comment,
-  onDelete,
-  rootComment,
-  ...rest
-}) {
-  var _a, _b, _c, _d;
-  const {
-    session,
-    addComment,
-    updateComment,
-    manageMode,
-    flatMode
-  } = useCommentsContext();
-  const {
-    t,
-    locale
-  } = useContext(LocaleContext);
-  const [inputBoxVisible, setInputBoxVisible] = useState(false);
-  const [editMode, setEditMode] = 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__ */ jsx(Box, {
-      component: "span",
-      sx: {
-        color: "error.main"
-      },
-      children: t("delete")
-    }),
-    onClick: () => onDelete(comment)
-  }, {
-    text: /* @__PURE__ */ jsx(Box, {
-      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 minDelay(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.post(`/objects/${comment.objectId}/comments/${comment.id}/ratings`, {
-      ratingType,
-      value
-    });
-  };
-  const handleOnUnrate = async () => {
-    if (!session.user) {
-      session.login();
-      throw new Error("Unauthenticated.");
-    }
-    await api.delete(`/objects/${comment.objectId}/comments/${comment.id}/ratings`);
-  };
-  const handleUpdateComment = async (content) => {
-    await api.put(`/comments/${comment.id}`, {
-      content
-    });
-    updateComment(comment.id, (current) => ({
-      ...current,
-      content
-    }));
-  };
-  return /* @__PURE__ */ jsxs(Root, {
-    ...rest,
-    children: [/* @__PURE__ */ jsx(Avatar, {
-      did: comment.commenter.did,
-      src: comment.commenter.avatar,
-      size: 36,
-      shape: "circle",
-      variant: "circle"
-    }), /* @__PURE__ */ jsxs(Box, {
-      flex: "1",
-      pl: 2,
-      overflow: "hidden",
-      children: [/* @__PURE__ */ jsxs(Box, {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "start",
-        children: [/* @__PURE__ */ jsxs(Box, {
-          children: [/* @__PURE__ */ jsxs(Box, {
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-            flexWrap: "wrap",
-            color: "#333",
-            lineHeight: 1,
-            children: [/* @__PURE__ */ jsx("span", {
-              children: comment.commenter.fullName || "Unknown"
-            }), /* @__PURE__ */ jsxs("div", {
-              children: ["(", /* @__PURE__ */ jsx(DIDAddress, {
-                copyable: false,
-                responsive: false,
-                compact: true,
-                inline: true,
-                children: comment.commenter.did
-              }), ")"]
-            }), /* @__PURE__ */ jsx(Box, {
-              width: {
-                xs: "100%",
-                md: "auto"
-              },
-              fontSize: 13,
-              color: "grey.500",
-              children: /* @__PURE__ */ jsx("span", {
-                children: format(comment.createdAt, locale === "zh" ? "zh_CN" : "en_US")
-              })
-            })]
-          }), ((_b = comment.replyTo) == null ? void 0 : _b.did) && (flatMode || comment.parentId !== comment.commentId) && /* @__PURE__ */ jsxs(Box, {
-            mt: 0.5,
-            fontSize: 13,
-            lineHeight: 1,
-            color: "primary.light",
-            sx: {
-              ".did-address-text": {
-                color: "primary.light"
-              }
-            },
-            children: ["@", /* @__PURE__ */ jsx(Box, {
-              component: "span",
-              mr: 1,
-              children: comment.replyTo.fullName
-            }), "(", /* @__PURE__ */ jsx(DIDAddress, {
-              copyable: false,
-              responsive: false,
-              compact: true,
-              inline: true,
-              children: comment.replyTo.did
-            }), ")"]
-          })]
-        }), !!(menuItems == null ? void 0 : menuItems.length) && /* @__PURE__ */ jsx(Menu, {
-          items: menuItems,
-          style: {
-            position: "absolute",
-            right: 0,
-            top: 16
-          }
-        })]
-      }), /* @__PURE__ */ jsxs(Box, {
-        mt: 1,
-        children: [!comment.deletedAt && /* @__PURE__ */ jsx(PostContent, {
-          content: comment.content,
-          editing: editMode,
-          onExitEditing: () => setEditMode(false),
-          onSubmit: handleUpdateComment
-        }), comment.deletedAt && /* @__PURE__ */ jsx(Box, {
-          display: "inline-block",
-          px: 2,
-          py: 1,
-          mt: 1,
-          fontSize: 14,
-          bgcolor: "grey.100",
-          color: "grey.600",
-          borderRadius: 1,
-          children: t("deleted")
-        })]
-      }), !manageMode && /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsxs(Box, {
-          display: "flex",
-          alignItems: "center",
-          mt: 1.5,
-          children: [/* @__PURE__ */ jsx(BinaryThumb, {
-            selected: (_c = comment.rating) == null ? void 0 : _c.myRating,
-            countPerValue: (_d = comment.rating) == null ? void 0 : _d.counts,
-            onRate: handleOnRate,
-            onUnrate: handleOnUnrate
-          }), /* @__PURE__ */ jsx(Box, {
-            onClick: () => protectLogin(session, () => setInputBoxVisible(!inputBoxVisible)),
-            sx: {
-              lineHeight: 1,
-              "&:hover": {
-                cursor: "pointer"
-              }
-            },
-            children: /* @__PURE__ */ jsx(SvgMessage, {
-              style: {
-                width: "auto",
-                height: 16
-              }
-            })
-          })]
-        }), inputBoxVisible && /* @__PURE__ */ jsx(Box, {
-          my: 2,
-          children: /* @__PURE__ */ jsx(CommentInput, {
-            send: sendReply
-          })
-        })]
-      }), !comment.parentId && /* @__PURE__ */ jsx(CommentReplies, {
-        comment,
-        onDelete
-      })]
-    })]
-  });
-}
-Comment.propTypes = {
-  comment: PropTypes.object.isRequired,
-  onDelete: PropTypes.func,
-  rootComment: PropTypes.object
-};
-Comment.defaultProps = {
-  onDelete: void 0,
-  rootComment: void 0
-};
-const Root = styled(Box)`
-  display: flex;
-  position: relative;
-  padding: 24px 0 0 0;
-  &:first-of-type {
-    flex-shrink: 0;
-  }
-`;
-export {
-  Comment as default
-};

package/lib/es/components/rating/binary-thumb.js

@@ -1,176 +0,0 @@
-import PropTypes from "prop-types";
-import { styled } from "@arcblock/ux/lib/Theme";
-import Box from "@mui/material/Box";
-import clsx from "clsx";
-import * as React from "react";
-import Rating from "./rating";
-import { jsx, jsxs } from "react/jsx-runtime";
-const SvgThumbUp = (props) => /* @__PURE__ */ React.createElement("svg", {
-  width: 32,
-  height: 32,
-  viewBox: "0 0 24 24",
-  ...props
-}, /* @__PURE__ */ React.createElement("g", {
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeWidth: 1.5
-}, /* @__PURE__ */ React.createElement("path", {
-  d: "M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"
-}), /* @__PURE__ */ React.createElement("path", {
-  strokeLinejoin: "round",
-  d: "M7 20V9"
-})));
-function BinaryThumb({
-  variant,
-  size,
-  ...rest
-}) {
-  const renderer = ({
-    options,
-    toggleRate
-  }) => {
-    return /* @__PURE__ */ jsx(Root, {
-      children: options.map((option) => {
-        const icon = option.value === -1 ? /* @__PURE__ */ jsx(SvgThumbUp, {
-          style: {
-            transform: "rotate(180deg)"
-          }
-        }) : /* @__PURE__ */ jsx(SvgThumbUp, {});
-        return /* @__PURE__ */ jsx("div", {
-          className: "reaction-item",
-          children: /* @__PURE__ */ jsx(IconButton, {
-            className: "reaction-item-btn",
-            icon,
-            text: option.count,
-            selected: option.selected,
-            onClick: () => toggleRate(option.value),
-            variant,
-            size
-          })
-        }, option.value);
-      })
-    });
-  };
-  return /* @__PURE__ */ jsx(Rating, {
-    ratingType: "binary-thumb",
-    values: [1, -1],
-    ...rest,
-    render: renderer
-  });
-}
-BinaryThumb.propTypes = {
-  variant: PropTypes.oneOf(["default", "inverse"]),
-  size: PropTypes.oneOf(["sm", "lg"])
-};
-BinaryThumb.defaultProps = {
-  variant: "default",
-  size: "sm"
-};
-const Root = styled(Box)`
-  display: flex;
-  .reaction-item {
-    display: flex;
-    align-items: center;
-  }
-`;
-function IconButton({
-  icon,
-  text,
-  onClick,
-  selected,
-  variant,
-  size,
-  ...rest
-}) {
-  const classes = clsx(rest.className, `reaction-btn-${size} reaction-btn-${variant}`, {
-    "reaction-btn-selected": selected
-  });
-  return /* @__PURE__ */ jsxs(IconButtonRoot, {
-    ...rest,
-    className: classes,
-    children: [/* @__PURE__ */ jsx("span", {
-      className: "reaction-btn-icon",
-      onClick,
-      children: icon
-    }), !!text && /* @__PURE__ */ jsx("span", {
-      className: "reaction-btn-text",
-      children: text
-    })]
-  });
-}
-IconButton.propTypes = {
-  icon: PropTypes.node.isRequired,
-  text: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  onClick: PropTypes.func.isRequired,
-  selected: PropTypes.bool,
-  variant: PropTypes.oneOf(["default", "inverse"]),
-  size: PropTypes.oneOf(["sm", "lg"])
-};
-IconButton.defaultProps = {
-  selected: false,
-  variant: "default",
-  size: "sm"
-};
-const IconButtonRoot = styled("div")`
-  display: flex;
-  align-items: center;
-  &.reaction-btn-selected {
-    color: ${(props) => props.theme.palette.primary.main};
-  }
-  .reaction-btn-icon {
-    display: flex;
-    line-height: 1;
-    &:hover {
-      cursor: pointer;
-    }
-  }
-  svg {
-    width: auto;
-  }
-  .reaction-btn-text {
-    display: inline-block;
-  }
-  &.reaction-btn-sm {
-    min-width: 64px;
-    height: 18px;
-    font-size: 12px;
-    svg {
-      height: 16px;
-    }
-    .reaction-btn-text {
-      margin-left: 8px;
-    }
-  }
-  &.reaction-btn-lg {
-    min-width: 100px;
-    font-size: 14px;
-    .reaction-btn-icon {
-      justify-content: center;
-      align-items: center;
-      width: 44px;
-      height: 44px;
-      border-radius: 8px;
-    }
-    svg {
-      height: 20px;
-    }
-    .reaction-btn-text {
-      margin-left: 12px;
-    }
-  }
-  &.reaction-btn-inverse {
-    .reaction-btn-icon {
-      background-color: ${(props) => props.theme.palette.grey[200]};
-    }
-    &.reaction-btn-selected {
-      .reaction-btn-icon {
-        color: #fff;
-        background-color: ${(props) => props.theme.palette.primary.main};
-      }
-    }
-  }
-`;
-export {
-  BinaryThumb as default
-};

package/lib/es/components/rating/emoji-based.js

@@ -1,37 +0,0 @@
-import PropTypes from "prop-types";
-import Rating from "./rating";
-import { jsx } from "react/jsx-runtime";
-function EmojiBased({
-  emojiValues
-}) {
-  return /* @__PURE__ */ jsx(Rating, {
-    ratingType: "emoji-based",
-    children: /* @__PURE__ */ jsx("span", {
-      children: emojiValues
-    })
-  });
-}
-EmojiBased.propTypes = {
-  emojiValues: PropTypes.array
-};
-EmojiBased.defaultProps = {
-  emojiValues: [{
-    value: 5,
-    emojicon: "\u{1F601}"
-  }, {
-    value: 4,
-    emojicon: "\u{1F600}"
-  }, {
-    value: 3,
-    emojicon: "\u{1F610}"
-  }, {
-    value: 2,
-    emojicon: "\u{1F615}"
-  }, {
-    value: 1,
-    emojicon: "\u{1F61E}"
-  }]
-};
-export {
-  EmojiBased as default
-};

package/lib/es/components/rating/index.js

@@ -1,4 +0,0 @@
-import { default as default2 } from "./binary-thumb";
-export {
-  default2 as BinaryThumb
-};