@blocklet/discuss-kit 2.3.106 → 2.4.0

package/lib/es/comments.js

@@ -1,392 +1,359 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef, useMemo, useEffect, useState } from "react";
-import { styled } from "@arcblock/ux/lib/Theme";
-import PropTypes from "prop-types";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { Alert, AlertTitle, Box, CircularProgress } from "@mui/material";
-import { useLocaleContext, LocaleProvider } from "@arcblock/ux/lib/Locale/context";
-import { ErrorBoundary } from "react-error-boundary";
-import { useDefaultApiErrorHandler, useCommentsContext, useSubscription, IconButtonGroup, GithubReactionContainer, SegmentedControl, CommentList, getWsClient, UploaderProvider, InternalThemeProvider, ConfirmProvider, DefaultEditorConfigProvider, CommentsProvider, CommentInput } from "@blocklet/discuss-kit-ux";
-import { useRequest } from "ahooks";
-import ErrorFallback from "./components/error-fallback";
-import { translations } from "./locales";
-import { discussKitPrefix } from "./lib/utils";
-import api, { fetchRatings } from "./api";
-import { useTopicInfoSync } from "./hooks/topic-info-sync";
-const getCurrentBlockletComponentName = () => {
-  var _a, _b;
-  const ensureTrailingSlash = (str) => str.endsWith("/") ? str : `${str}/`;
-  const matched = (_b = (_a = window.blocklet) == null ? void 0 : _a.componentMountPoints) == null ? void 0 : _b.find(
-    (x) => {
-      var _a2;
-      return ensureTrailingSlash(x.mountPoint) === ensureTrailingSlash((_a2 = window.blocklet) == null ? void 0 : _a2.prefix);
-    }
-  );
-  return matched == null ? void 0 : matched.title;
-};
-const formatComment = (comment) => {
-  var _a;
-  return {
-    ...comment,
-    rootId: comment.rootCommentId,
-    createdAt: comment.createdAt ? new Date(comment.createdAt) : null,
-    updatedAt: comment.updatedAt ? new Date(comment.updatedAt) : null,
-    deletedAt: comment.deletedAt ? new Date(comment.deletedAt) : null,
-    pinnedAt: comment.pinnedAt ? new Date(comment.pinnedAt) : null,
-    replies: (_a = comment.replies) == null ? void 0 : _a.map(formatComment)
-  };
-};
-const commentAPI = {
-  fetchComments: async (params) => {
-    const copy = {
-      ...params,
-      embed: params.rootId ? "rating" : "replies,rating",
-      size: params.limit
-    };
-    const {
-      data: { data, nextCursor, total }
-    } = await api.get("/comments", { params: copy });
-    return { data: data == null ? void 0 : data.map(formatComment), nextCursor, total };
+import { jsx as r, jsxs as m, Fragment as V } from "react/jsx-runtime";
+import { useRef as J, useMemo as Q, useEffect as X, useContext as Y, useState as Z } from "react";
+import { styled as ee } from "@arcblock/ux/lib/Theme";
+import t from "prop-types";
+import { SessionContext as te } from "@arcblock/did-connect/lib/Session";
+import { Alert as ne, AlertTitle as oe, Box as p, CircularProgress as re } from "@mui/material";
+import { useLocaleContext as F, LocaleProvider as ie } from "@arcblock/ux/lib/Locale/context";
+import { ErrorBoundary as se } from "react-error-boundary";
+import { getWsClient as ae, UploaderProvider as le, InternalThemeProvider as de, ConfirmProvider as ce, DefaultEditorConfigProvider as ue, CommentsProvider as me, useDefaultApiErrorHandler as pe, useCommentsContext as fe, useSubscription as Ce, IconButtonGroup as he, GithubReactionContainer as be, SegmentedControl as ge, CommentList as ye, CommentInput as we } from "@blocklet/discuss-kit-ux";
+import { useRequest as xe } from "ahooks";
+import Ae from "./components/error-fallback.js";
+import { translations as ve } from "./locales/index.js";
+import { discussKitPrefix as Ie } from "./lib/utils.js";
+import s, { fetchRatings as Pe } from "./api.js";
+import { useTopicInfoSync as Te } from "./hooks/topic-info-sync.js";
+const $e = () => {
+  const e = (o) => o.endsWith("/") ? o : `${o}/`;
+  return window.blocklet?.componentMountPoints?.find(
+    (o) => e(o.mountPoint) === e(window.blocklet?.prefix)
+  )?.title;
+}, d = (e) => ({
+  ...e,
+  rootId: e.rootCommentId,
+  createdAt: e.createdAt ? new Date(e.createdAt) : null,
+  updatedAt: e.updatedAt ? new Date(e.updatedAt) : null,
+  deletedAt: e.deletedAt ? new Date(e.deletedAt) : null,
+  pinnedAt: e.pinnedAt ? new Date(e.pinnedAt) : null,
+  replies: e.replies?.map(d)
+}), Se = {
+  fetchComments: async (e) => {
+    const n = {
+      ...e,
+      embed: e.rootId ? "rating" : "replies,rating",
+      size: e.limit
+    }, {
+      data: { data: o, nextCursor: l, total: f }
+    } = await s.get("/comments", { params: n });
+    return { data: o?.map(d), nextCursor: l, total: f };
   },
-  fetchPinnedComments: async (objectId) => {
-    const { data } = await api.get("/comments/pinned", { params: { objectId } });
-    return ((data == null ? void 0 : data.data) || []).map(formatComment);
+  fetchPinnedComments: async (e) => {
+    const { data: n } = await s.get("/comments/pinned", { params: { objectId: e } });
+    return (n?.data || []).map(d);
   },
-  fetchCommentPosition: async ({ id, ...params }) => {
-    const { data } = await api.get(`/comments/${id}/position`, { params });
-    return data;
+  fetchCommentPosition: async ({ id: e, ...n }) => {
+    const { data: o } = await s.get(`/comments/${e}/position`, { params: n });
+    return o;
   },
-  deleteComment: async ({ id }) => {
-    const { data } = await api.delete(`/comments/${id}`);
-    return data;
+  deleteComment: async ({ id: e }) => {
+    const { data: n } = await s.delete(`/comments/${e}`);
+    return n;
   },
-  updateComment: async ({ id, updatedAt }, content) => {
-    const { data } = await api.put(`/comments/${id}`, { content, updatedAt });
-    return formatComment(data);
+  updateComment: async ({ id: e, updatedAt: n }, o) => {
+    const { data: l } = await s.put(`/comments/${e}`, { content: o, updatedAt: n });
+    return d(l);
   },
-  reply: async ({ id }, content) => {
-    const { data } = await api.post("/comments/replies", {
-      content,
-      parentId: id,
+  reply: async ({ id: e }, n) => {
+    const { data: o } = await s.post("/comments/replies", {
+      content: n,
+      parentId: e,
       link: window.location.href
     });
-    return formatComment(data);
+    return d(o);
   },
-  rate: async (comment, value, ratingType) => {
-    await api.post(`/topics/${comment.topicId}/comments/${comment.id}/ratings`, { ratingType, value });
+  rate: async (e, n, o) => {
+    await s.post(`/topics/${e.topicId}/comments/${e.id}/ratings`, { ratingType: o, value: n });
   },
-  unrate: async (comment) => {
-    await api.delete(`/topics/${comment.topicId}/comments/${comment.id}/ratings`);
+  unrate: async (e) => {
+    await s.delete(`/topics/${e.topicId}/comments/${e.id}/ratings`);
   },
-  fetchRatings: async (id) => {
-    const { data } = await api.get(`/ratings/${id}`);
-    return data;
+  fetchRatings: async (e) => {
+    const { data: n } = await s.get(`/ratings/${e}`);
+    return n;
   },
-  togglePin: async ({ post, value }) => {
-    if (value) {
-      await api.put(`/posts/${post.id}/pinned`);
-    } else {
-      await api.delete(`/posts/${post.id}/pinned`);
-    }
+  togglePin: async ({ post: e, value: n }) => {
+    n ? await s.put(`/posts/${e.id}/pinned`) : await s.delete(`/posts/${e.id}/pinned`);
   }
-};
-const useDiscussKitStatus = () => {
-  const [available, setAvailable] = useState(true);
-  useRequest(
-    () => api.get("/status", { muteError: true }).then(() => setAvailable(true)).catch(() => setAvailable(false)),
+}, Re = () => {
+  const [e, n] = Z(!0);
+  return xe(
+    () => s.get("/status", { muteError: !0 }).then(() => n(!0)).catch(() => n(!1)),
     { cacheKey: "discuss-kit-status", staleTime: -1 }
-  );
-  return { available };
+  ), { available: e };
 };
-const DiscussKitComments = forwardRef(
-  ({
-    displayReaction,
-    object,
-    onChange,
-    onSendComment,
-    commentInputPosition,
-    autoFocus,
-    disabledSend,
-    initialContent,
-    sendText,
-    sendIcon,
-    showTopbar,
-    sendComment,
-    reactionAppend,
-    skeleton,
-    placeholder,
-    onInput,
-    draftKey,
-    inputSx,
-    editorRef,
-    disableCmdEnter
-  }, ref) => {
-    useDefaultApiErrorHandler({
-      request: api
-    });
-    const { available } = useDiscussKitStatus();
-    const { session } = useContext(SessionContext) || {};
-    const { state, sort, add, updateCommentState, interactive, findById, renderInnerFooter } = useCommentsContext();
-    const { total, order, initialized } = state;
-    const { t } = useLocaleContext();
-    useTopicInfoSync(object);
-    const handlers = {
-      ADD_COMMENT: (data) => {
-        add(formatComment(data));
-        onChange == null ? void 0 : onChange();
-      },
-      UPDATE_COMMENT: (data) => {
-        const comment = findById(data.id);
-        if (comment && comment.content !== data.content) {
-          updateCommentState(data.id, (current) => {
-            current.content = data.content;
-            current.updatedAt = data.updatedAt;
-            current.synced = Date.now();
-            return current;
-          });
-        }
-      },
-      RATING_COMMENT: async ({ commentId }) => {
-        const rating = await fetchRatings(commentId);
-        updateCommentState(commentId, (current) => ({
-          ...current,
-          rating
-        }));
+function K({
+  ref: e = void 0,
+  displayReaction: n = !0,
+  object: o,
+  onChange: l = () => {
+  },
+  onSendComment: f = () => {
+  },
+  commentInputPosition: C = "top",
+  autoFocus: w = !1,
+  disabledSend: x = void 0,
+  initialContent: A = "",
+  sendText: v = "",
+  sendIcon: I = null,
+  showTopbar: P = !0,
+  sendComment: h = null,
+  reactionAppend: T = null,
+  skeleton: $ = null,
+  placeholder: S = "",
+  onInput: R = () => {
+  },
+  draftKey: b = "",
+  inputSx: g = {},
+  editorRef: y = null,
+  disableCmdEnter: O = !1
+}) {
+  pe({
+    request: s
+  });
+  const { available: B } = Re(), { session: k } = Y(te) || {}, { state: q, sort: L, add: M, updateCommentState: N, interactive: D, findById: U, renderInnerFooter: W } = fe(), { total: E, order: z, initialized: G } = q, { t: c } = F();
+  Te(o);
+  const _ = {
+    ADD_COMMENT: (i) => {
+      M(d(i)), l?.();
+    },
+    UPDATE_COMMENT: (i) => {
+      const a = U(i.id);
+      a && a.content !== i.content && N(i.id, (u) => (u.content = i.content, u.updatedAt = i.updatedAt, u.synced = Date.now(), u));
+    },
+    RATING_COMMENT: async ({ commentId: i }) => {
+      const a = await Pe(i);
+      N(i, (u) => ({
+        ...u,
+        rating: a
+      }));
+    }
+  };
+  if (Ce(
+    o.id,
+    ({ event: i, data: a }) => {
+      _[i]?.(a);
+    },
+    [o.id, q]
+  ), !B)
+    return /* @__PURE__ */ m(ne, { severity: "info", children: [
+      /* @__PURE__ */ r(oe, { children: c("apiUnavailable.title") }),
+      c("apiUnavailable.desc")
+    ] });
+  if (!G)
+    return $ || /* @__PURE__ */ r(
+      p,
+      {
+        sx: {
+          width: "100%",
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ r(re, {})
       }
-    };
-    useSubscription(
-      object.id,
-      ({ event, data }) => {
-        var _a;
-        (_a = handlers[event]) == null ? void 0 : _a.call(handlers, data);
-      },
-      [object.id, state]
     );
-    if (!available) {
-      return /* @__PURE__ */ jsxs(Alert, { severity: "info", children: [
-        /* @__PURE__ */ jsx(AlertTitle, { children: t("apiUnavailable.title") }),
-        t("apiUnavailable.desc")
-      ] });
-    }
-    if (!initialized) {
-      return skeleton || /* @__PURE__ */ jsx(Box, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+  const H = async (i) => {
+    const { data: a } = await (h ? h({ content: i, object: o }) : s.post("/comments", { content: i, object: o }));
+    M(d(a)), f?.(a);
+  }, j = () => /* @__PURE__ */ r(
+    we,
+    {
+      editorRef: y,
+      placeholder: S,
+      send: H,
+      draftKey: b || `object-${o.id}`,
+      autoFocus: w,
+      disabledSend: x,
+      initialContent: A,
+      sendText: v,
+      sendIcon: I,
+      renderInnerFooter: W,
+      onChange: R,
+      disableCmdEnter: O
     }
-    const handleSendComment = async (content) => {
-      const { data } = await (sendComment ? sendComment({ content, object }) : api.post("/comments", { content, object }));
-      add(formatComment(data));
-      onSendComment == null ? void 0 : onSendComment(data);
-    };
-    const renderCommentInput = () => {
-      return /* @__PURE__ */ jsx(
-        CommentInput,
+  );
+  return /* @__PURE__ */ m(Ee, { ref: e, children: [
+    /* @__PURE__ */ m(V, { children: [
+      /* @__PURE__ */ r(
+        p,
         {
-          editorRef,
-          placeholder,
-          send: handleSendComment,
-          draftKey: draftKey || `object-${object.id}`,
-          autoFocus,
-          disabledSend,
-          initialContent,
-          sendText,
-          sendIcon,
-          renderInnerFooter,
-          onChange: onInput,
-          disableCmdEnter
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "end"
+          },
+          children: n && /* @__PURE__ */ m(he, { sx: { alignItems: "flex-end" }, children: [
+            /* @__PURE__ */ r(be, { id: o.id, request: s, interactive: D }),
+            T
+          ] })
         }
-      );
-    };
-    return /* @__PURE__ */ jsxs(Container, { ref, children: [
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "space-between", alignItems: "end", children: displayReaction && /* @__PURE__ */ jsxs(IconButtonGroup, { sx: { alignItems: "flex-end" }, children: [
-          /* @__PURE__ */ jsx(GithubReactionContainer, { id: object.id, request: api, interactive }),
-          reactionAppend
-        ] }) }),
-        session.user && interactive && commentInputPosition === "top" && /* @__PURE__ */ jsx(Box, { mt: 2, className: "comment-editor", children: renderCommentInput() })
-      ] }),
-      !!total && showTopbar && /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { fontWeight: "medium" }, children: [
-          total > 0 ? `${total} ${t("comments")}` : t("comment"),
-          " "
-        ] }),
-        /* @__PURE__ */ jsx(
-          SegmentedControl,
-          {
-            value: order,
-            options: [
-              { value: "desc", label: t("newest") },
-              { value: "asc", label: t("oldest") }
-            ],
-            onChange: (value) => sort(value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(CommentList, { className: "comment-list" }),
-      session.user && interactive && commentInputPosition === "bottom" && /* @__PURE__ */ jsx(Box, { sx: { mt: 6, ...inputSx }, children: renderCommentInput() })
-    ] });
-  }
-);
-DiscussKitComments.propTypes = {
-  displayReaction: PropTypes.bool,
-  object: PropTypes.object.isRequired,
-  onChange: PropTypes.func,
-  onSendComment: PropTypes.func,
-  disabledSend: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  initialContent: PropTypes.string,
-  sendText: PropTypes.string,
-  sendIcon: PropTypes.node,
-  commentInputPosition: PropTypes.oneOf(["top", "bottom"]),
-  showTopbar: PropTypes.bool,
-  sendComment: PropTypes.func,
-  reactionAppend: PropTypes.any,
-  skeleton: PropTypes.node,
-  placeholder: PropTypes.string,
-  onInput: PropTypes.func,
-  draftKey: PropTypes.string,
-  editorRef: PropTypes.object,
-  inputSx: PropTypes.object,
-  disableCmdEnter: PropTypes.bool
-};
-DiscussKitComments.defaultProps = {
-  displayReaction: true,
-  onChange: () => {
-  },
-  onSendComment: () => {
-  },
-  disabledSend: void 0,
-  autoFocus: false,
-  initialContent: "",
-  sendText: "",
-  sendIcon: null,
-  commentInputPosition: "top",
-  showTopbar: true,
-  sendComment: null,
-  reactionAppend: null,
-  skeleton: null,
-  placeholder: "",
-  onInput: () => {
-  },
-  draftKey: "",
-  editorRef: null,
-  inputSx: {},
-  disableCmdEnter: false
+      ),
+      k.user && D && C === "top" && /* @__PURE__ */ r(
+        p,
+        {
+          className: "comment-editor",
+          sx: {
+            mt: 2
+          },
+          children: j()
+        }
+      )
+    ] }),
+    !!E && P && /* @__PURE__ */ m(
+      p,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mt: 3
+        },
+        children: [
+          /* @__PURE__ */ m(p, { sx: { fontWeight: "medium" }, children: [
+            E > 0 ? `${E} ${c("comments")}` : c("comment"),
+            " "
+          ] }),
+          /* @__PURE__ */ r(
+            ge,
+            {
+              value: z,
+              options: [
+                { value: "desc", label: c("newest") },
+                { value: "asc", label: c("oldest") }
+              ],
+              onChange: (i) => L(i)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(ye, { className: "comment-list" }),
+    k.user && D && C === "bottom" && /* @__PURE__ */ r(p, { sx: { mt: 6, ...g }, children: j() })
+  ] });
+}
+K.propTypes = {
+  ref: t.any,
+  displayReaction: t.bool,
+  object: t.object.isRequired,
+  onChange: t.func,
+  onSendComment: t.func,
+  disabledSend: t.bool,
+  autoFocus: t.bool,
+  initialContent: t.string,
+  sendText: t.string,
+  sendIcon: t.node,
+  commentInputPosition: t.oneOf(["top", "bottom"]),
+  showTopbar: t.bool,
+  sendComment: t.func,
+  reactionAppend: t.any,
+  skeleton: t.node,
+  placeholder: t.string,
+  onInput: t.func,
+  draftKey: t.string,
+  editorRef: t.object,
+  inputSx: t.object,
+  disableCmdEnter: t.bool
 };
-function Wrapper({
-  target,
-  flatView,
-  autoCollapse,
-  autoLoadComments,
-  order,
-  allowCopyLink,
-  showProfileCard,
-  interactive,
-  renderComments,
-  renderDonation,
-  renderActions,
-  renderEditorPlugins,
-  enableAutoTranslate,
-  renderInnerFooter,
-  ...rest
+function De({
+  target: e,
+  flatView: n = !1,
+  autoCollapse: o = !1,
+  autoLoadComments: l = !0,
+  order: f = void 0,
+  allowCopyLink: C = !1,
+  showProfileCard: w = !1,
+  interactive: x = !0,
+  renderComments: A = null,
+  renderDonation: v = null,
+  renderActions: I = null,
+  renderEditorPlugins: P = null,
+  enableAutoTranslate: h = !1,
+  renderInnerFooter: T = null,
+  ...$
 }) {
-  if (!(target == null ? void 0 : target.id)) {
+  const S = Object.assign(
+    {},
+    {
+      displayReaction: !0,
+      onChange: () => {
+      },
+      onSendComment: () => {
+      },
+      disabledSend: void 0,
+      sendComment: null,
+      reactionAppend: null
+    },
+    $
+  );
+  if (!e?.id)
     throw new Error("target is required.");
-  }
-  const { locale = "en" } = useLocaleContext() || {};
-  const containerRef = useRef();
-  const object = useMemo(
+  const { locale: R = "en" } = F() || {}, b = J(), g = Q(
     () => ({
       link: window.location.href,
-      blockletName: getCurrentBlockletComponentName(),
-      ...target
+      blockletName: $e(),
+      ...e
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [target]
-  );
-  const wsClient = getWsClient(discussKitPrefix);
-  useEffect(() => {
-    wsClient.connect();
-    return () => {
-      if (wsClient.isConnected()) ;
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: /* @__PURE__ */ jsx(LocaleProvider, { translations, locale, children: /* @__PURE__ */ jsx(UploaderProvider, { children: /* @__PURE__ */ jsx(InternalThemeProvider, { children: /* @__PURE__ */ jsx(ConfirmProvider, { children: /* @__PURE__ */ jsx(DefaultEditorConfigProvider, { request: api, children: /* @__PURE__ */ jsx(
-    CommentsProvider,
+    [e]
+  ), y = ae(Ie);
+  return X(() => (y.connect(), () => {
+    y.isConnected();
+  }), []), /* @__PURE__ */ r(se, { FallbackComponent: Ae, children: /* @__PURE__ */ r(ie, { translations: ve, locale: R, children: /* @__PURE__ */ r(le, { children: /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r(ue, { request: s, children: /* @__PURE__ */ r(
+    me,
     {
-      target: object,
-      api: commentAPI,
-      flatView,
-      order,
-      autoCollapse,
-      autoLoadComments,
-      allowCopyLink,
-      showProfileCard,
-      interactive,
-      containerRef,
-      renderDonation,
-      renderActions,
-      renderEditorPlugins,
-      enableAutoTranslate,
-      renderComments,
-      renderInnerFooter,
-      children: /* @__PURE__ */ jsx(DiscussKitComments, { ...rest, object, ref: containerRef })
+      target: g,
+      api: Se,
+      flatView: n,
+      order: f,
+      autoCollapse: o,
+      autoLoadComments: l,
+      allowCopyLink: C,
+      showProfileCard: w,
+      interactive: x,
+      containerRef: b,
+      renderDonation: v,
+      renderActions: I,
+      renderEditorPlugins: P,
+      enableAutoTranslate: h,
+      renderComments: A,
+      renderInnerFooter: T,
+      children: /* @__PURE__ */ r(K, { ...S, object: g, ref: b })
     }
   ) }) }) }) }) }) });
 }
-Wrapper.propTypes = {
-  target: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    desc: PropTypes.string,
-    owner: PropTypes.string
+De.propTypes = {
+  target: t.shape({
+    id: t.string.isRequired,
+    title: t.string,
+    desc: t.string,
+    owner: t.string
   }).isRequired,
-  displayReaction: PropTypes.bool,
-  onChange: PropTypes.func,
-  flatView: PropTypes.bool,
-  autoCollapse: PropTypes.bool,
-  autoLoadComments: PropTypes.bool,
-  allowCopyLink: PropTypes.bool,
-  disabledSend: PropTypes.bool,
-  showProfileCard: PropTypes.bool,
-  order: PropTypes.oneOf(["asc", "desc"]),
-  interactive: PropTypes.bool,
-  renderComments: PropTypes.func,
-  renderDonation: PropTypes.any,
-  renderActions: PropTypes.func,
-  renderEditorPlugins: PropTypes.func,
-  enableAutoTranslate: PropTypes.bool,
-  renderInnerFooter: PropTypes.func,
-  sendComment: PropTypes.func,
-  reactionAppend: PropTypes.any
-};
-Wrapper.defaultProps = {
-  displayReaction: true,
-  onChange: () => {
-  },
-  flatView: false,
-  autoCollapse: false,
-  autoLoadComments: true,
-  allowCopyLink: false,
-  disabledSend: void 0,
-  showProfileCard: false,
-  order: void 0,
-  interactive: true,
-  renderComments: null,
-  renderDonation: null,
-  renderActions: null,
-  renderEditorPlugins: null,
-  enableAutoTranslate: false,
-  renderInnerFooter: null,
-  sendComment: null,
-  reactionAppend: null
+  displayReaction: t.bool,
+  onChange: t.func,
+  flatView: t.bool,
+  autoCollapse: t.bool,
+  autoLoadComments: t.bool,
+  allowCopyLink: t.bool,
+  disabledSend: t.bool,
+  showProfileCard: t.bool,
+  order: t.oneOf(["asc", "desc"]),
+  interactive: t.bool,
+  renderComments: t.func,
+  renderDonation: t.any,
+  renderActions: t.func,
+  renderEditorPlugins: t.func,
+  enableAutoTranslate: t.bool,
+  renderInnerFooter: t.func,
+  sendComment: t.func,
+  reactionAppend: t.any
 };
-const Container = styled("div")`
+const Ee = ee("div")`
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
-  padding: ${(props) => props.padding ? "20px" : "0"};
-  border: ${(props) => props.border ? "1px solid rgb(208, 215, 222)" : "none"};
+  padding: ${(e) => e.padding ? "20px" : "0"};
+  border: ${(e) => e.border ? "1px solid rgb(208, 215, 222)" : "none"};
   border-radius: 6px;
 `;
 export {
-  Wrapper as default
+  De as default
 };