@blocklet/discuss-kit-ux-lite 2.6.0

package/dist/components/posts/comment-list/comment-list.mjs

@@ -0,0 +1,163 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { NavigateNext as NavigateNextIcon } from "@mui/icons-material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { styled } from "@mui/material/styles";
+import { useCommentsContext } from "./context.mjs";
+import Comment from "../comment.mjs";
+const LoadMoreButtonWrapper = styled(Box)`
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11L8 5L16 11' stroke='%23e1e4e8' stroke-linecap='square' stroke-width='1.5' /%3E%3C/svg%3E");
+  background-repeat: repeat-x;
+  background-position: center;
+`;
+function SegmentalList({ ...rest }) {
+  const { t } = useLocaleContext();
+  const {
+    state: { comments, nextCursor, highlighted },
+    autoCollapse,
+    allowCopyLink,
+    showProfileCard,
+    interactive,
+    loadMore,
+    loadMoreForTailSection,
+    updateComment,
+    deleteComment,
+    reply,
+    togglePin,
+    loadMoreReplies,
+    api
+  } = useCommentsContext();
+  if (!highlighted) {
+    return null;
+  }
+  const headIndex = comments.findIndex((item) => item.id === highlighted.head);
+  const hiddenComments = highlighted.position - comments.findIndex((item) => item.id === highlighted.id) + headIndex;
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: "comment-list", children: [
+    comments.map((comment) => {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        comment.id === highlighted?.id && hiddenComments > 0 && nextCursor && /* @__PURE__ */ jsx(LoadMoreButtonWrapper, { sx: { my: 4, textAlign: "center" }, children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "inline-flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              px: 4,
+              pt: 1,
+              pb: 2,
+              border: 1,
+              borderColor: "grey.300",
+              borderRadius: 1,
+              bgcolor: "#fff"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => loadMore(nextCursor), variant: "text", color: "primary", sx: { fontSize: 13 }, children: t("loadMore") }),
+              /* @__PURE__ */ jsxs(Box, { sx: { fontSize: 12, color: "grey.500" }, children: [
+                hiddenComments,
+                " Comments"
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Comment,
+          {
+            post: comment,
+            onDelete: deleteComment,
+            onContentUpdate: updateComment,
+            onRate: api.rate,
+            onUnrate: api.unrate,
+            onReply: reply,
+            onTogglePin: togglePin,
+            onLoadMoreReplies: loadMoreReplies,
+            autoCollapse,
+            allowCopyLink,
+            showProfileCard,
+            interactive
+          }
+        )
+      ] }, comment.id);
+    }),
+    highlighted.nextCursor && /* @__PURE__ */ jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: loadMoreForTailSection,
+        variant: "outlined",
+        color: "primary",
+        endIcon: /* @__PURE__ */ jsx(NavigateNextIcon, {}),
+        sx: { fontSize: 13 },
+        children: t("loadMore")
+      }
+    ) })
+  ] });
+}
+export default function CommentList(props) {
+  const { t } = useLocaleContext();
+  const {
+    state: { order, nextCursor, highlighted },
+    comments,
+    pinned,
+    autoCollapse,
+    allowCopyLink,
+    showProfileCard,
+    interactive,
+    loadMore,
+    updateComment,
+    deleteComment,
+    reply,
+    togglePin,
+    loadMoreReplies,
+    api,
+    renderComments,
+    renderDonation,
+    renderActions,
+    renderEditorPlugins,
+    enableAutoTranslate
+  } = useCommentsContext();
+  if (highlighted) {
+    return /* @__PURE__ */ jsx(SegmentalList, { ...props });
+  }
+  const renderComment = (comment, restProps) => /* @__PURE__ */ jsx(
+    Comment,
+    {
+      post: comment,
+      onDelete: deleteComment,
+      onContentUpdate: updateComment,
+      onRate: api.rate,
+      onUnrate: api.unrate,
+      onReply: reply,
+      onTogglePin: togglePin,
+      onLoadMoreReplies: loadMoreReplies,
+      autoCollapse,
+      allowCopyLink,
+      showProfileCard,
+      interactive,
+      renderDonation,
+      renderActions,
+      renderEditorPlugins,
+      enableAutoTranslate,
+      ...restProps
+    },
+    comment.id
+  );
+  const sortedPinned = pinned.sort((a, b) => (b.pinnedAt?.getTime() ?? 0) - (a.pinnedAt?.getTime() ?? 0));
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(Box, { children: sortedPinned.map((post) => renderComment(post, {})) }),
+    renderComments ? renderComments({ order, comments, renderComment }) : comments?.map(renderComment),
+    nextCursor && /* @__PURE__ */ jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "load-more",
+        onClick: () => loadMore(nextCursor),
+        variant: "outlined",
+        color: "primary",
+        endIcon: /* @__PURE__ */ jsx(NavigateNextIcon, {}),
+        sx: { fontSize: 13 },
+        children: t("loadMore")
+      }
+    ) })
+  ] });
+}

package/dist/components/posts/comment-list/context.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { Post, Target, CommentAPI } from '../../../types';
+type Order = 'asc' | 'desc';
+export type CommentsRender = (value: {
+    comments: Post[];
+    renderComment: (comment: Post, restProps: any) => React.ReactNode;
+    order: Order;
+}) => React.ReactNode;
+interface CommentsProviderProps {
+    target: Target;
+    api: CommentAPI;
+    flatView?: boolean;
+    children: React.ReactNode;
+    order?: Order;
+    autoCollapse?: boolean;
+    autoLoadComments?: boolean;
+    allowCopyLink?: boolean;
+    showProfileCard?: boolean;
+    interactive?: boolean;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    renderComments?: CommentsRender;
+    renderDonation?: (post: Post) => React.ReactNode;
+    renderActions?: (post: Post) => React.ReactNode;
+    renderEditorPlugins?: (post: Post) => React.ReactNode;
+    enableAutoTranslate?: boolean;
+    renderInnerFooter?: (post: Post) => React.ReactElement<any>;
+}
+interface State {
+    comments: Post[];
+    nextCursor: string | null;
+    total: number;
+    replyCursors: {
+        [key: string]: string | undefined | null;
+    };
+    highlighted: {
+        id: string;
+        position: number;
+        nextCursor: string | null;
+        head: string;
+    } | null;
+    initialized: boolean;
+    loading: boolean;
+    order: Order;
+}
+interface CommentsContextValue {
+    target: Target;
+    api: CommentAPI;
+    state: State;
+    comments: Post[];
+    pinned: Post[];
+    flatView?: boolean;
+    autoCollapse?: boolean;
+    allowCopyLink?: boolean;
+    showProfileCard?: boolean;
+    interactive?: boolean;
+    updateCommentState: (id: string, mapper: (post: Post) => Post) => void;
+    loadMore: (cursor: string) => void;
+    loadMoreForTailSection: () => void;
+    loadMoreReplies: (rootId: string) => void;
+    sort: (order: Order) => void;
+    updateComment: CommentAPI['updateComment'];
+    deleteComment: CommentAPI['deleteComment'];
+    reply: CommentAPI['reply'];
+    togglePin: CommentAPI['togglePin'];
+    findById: (id: string) => Post | undefined;
+    renderComments?: CommentsRender;
+    renderDonation?: (post: Post) => React.ReactNode;
+    renderActions?: (post: Post) => React.ReactNode;
+    renderEditorPlugins?: (post: Post) => React.ReactNode;
+    enableAutoTranslate?: boolean;
+    renderInnerFooter?: (post: Post) => React.ReactElement<any>;
+}
+export declare const CommentsContext: import("react").Context<CommentsContextValue>;
+export declare const useCommentsContext: () => CommentsContextValue;
+export declare function CommentsProvider({ target, api, flatView, children, order, autoLoadComments, autoCollapse, allowCopyLink, showProfileCard, interactive, containerRef, renderComments, renderDonation, renderActions, renderEditorPlugins, enableAutoTranslate, renderInnerFooter, }: CommentsProviderProps): JSX.Element;
+export {};

package/dist/components/posts/comment-list/context.mjs

@@ -0,0 +1,318 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, createContext, useContext, useMemo } from "react";
+import { useSetState, useSize } from "ahooks";
+import uniqBy from "lodash/uniqBy";
+import orderBy from "lodash/orderBy";
+import { getLastItem } from "../../utils.mjs";
+const KEY_LS_ORDER = "comment-list-order";
+const getInitialState = (overrides) => ({
+  comments: [],
+  nextCursor: null,
+  total: 0,
+  replyCursors: {},
+  highlighted: null,
+  initialized: false,
+  loading: true,
+  order: localStorage.getItem(KEY_LS_ORDER) === "asc" ? "asc" : "desc",
+  ...overrides
+});
+const uniqAndSort = (list, order) => {
+  const unique = uniqBy(list, "id");
+  const sorted = orderBy(unique, ["createdAt", "id"], [order, order]);
+  return sorted;
+};
+const getHighlightedId = () => {
+  const id = window.location.hash.substring(1);
+  return /^[\w-]+$/.test(id) ? id : "";
+};
+const useAutoScroll = (data, containerHeight) => {
+  const highlightedRef = useRef(getHighlightedId());
+  const lastHeightRef = useRef(containerHeight);
+  const autoScrolledRef = useRef(false);
+  const matchTargetedPost = (posts) => {
+    return posts.some((item) => {
+      if (item.id === highlightedRef.current) {
+        return true;
+      }
+      if (item.replies?.length) {
+        return matchTargetedPost(item.replies);
+      }
+      return false;
+    });
+  };
+  const stableHeight = () => {
+    if (lastHeightRef.current === containerHeight) {
+      return true;
+    }
+    lastHeightRef.current = containerHeight;
+    return false;
+  };
+  useEffect(() => {
+    let interval;
+    if (containerHeight && !autoScrolledRef.current) {
+      interval = window.setInterval(() => {
+        if (stableHeight()) {
+          clearInterval(interval);
+          if (highlightedRef.current && matchTargetedPost(data)) {
+            const element = document.getElementById(highlightedRef.current);
+            element?.scrollIntoView({ behavior: "smooth", block: "center" });
+            autoScrolledRef.current = true;
+          }
+        }
+      }, 200);
+    }
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [containerHeight]);
+};
+export const CommentsContext = createContext({});
+export const useCommentsContext = () => useContext(CommentsContext);
+export function CommentsProvider({
+  target,
+  api,
+  flatView,
+  children,
+  order,
+  autoLoadComments = true,
+  autoCollapse,
+  allowCopyLink,
+  showProfileCard,
+  interactive,
+  containerRef,
+  renderComments,
+  renderDonation,
+  renderActions,
+  renderEditorPlugins,
+  enableAutoTranslate,
+  renderInnerFooter
+}) {
+  const [state, setState] = useSetState(getInitialState(order ? { order } : {}));
+  const comments = useMemo(
+    () => uniqAndSort(
+      state.comments.filter((item) => !item.pinnedAt),
+      state.order
+    ),
+    [state.comments, state.order]
+  );
+  const pinned = useMemo(() => state.comments.filter((item) => item.pinnedAt), [state.comments]);
+  const containerHeight = useSize(containerRef)?.height;
+  const commentsKeyById = useMemo(() => {
+    return state.comments.reduce((acc, cur) => {
+      acc[cur.id] = cur;
+      if (cur.replies?.length) {
+        cur.replies.forEach((item) => {
+          acc[item.id] = item;
+        });
+      }
+      return acc;
+    }, {});
+  }, [state]);
+  const highlightedRef = useRef(getHighlightedId());
+  const limit = 15;
+  const initialRepliesLimit = -1;
+  useEffect(() => {
+    const init = async () => {
+      if (!autoLoadComments) {
+        setState({ initialized: true });
+        return;
+      }
+      setState({ ...getInitialState(), order: state.order, initialized: false });
+      const fetchCommentPosition = () => api.fetchCommentPosition({
+        id: highlightedRef.current,
+        objectId: target.id,
+        order: state.order,
+        includeReplies: flatView ? 1 : null
+      });
+      const [{ data, total, nextCursor }, positionRes, pinnedComments] = await Promise.all([
+        api.fetchComments({
+          objectId: target.id,
+          limit,
+          order: state.order,
+          includeReplies: flatView ? 1 : null,
+          initialRepliesLimit
+        }),
+        highlightedRef.current ? fetchCommentPosition() : -1,
+        api.fetchPinnedComments(target.id)
+      ]);
+      let position = -1;
+      let cursor = highlightedRef.current;
+      if (typeof positionRes !== "number") {
+        position = positionRes.position;
+        cursor = positionRes.rootId;
+      } else {
+        position = positionRes;
+      }
+      if (position > data.length - 1) {
+        const result = await api.fetchComments({
+          objectId: target.id,
+          limit,
+          order: state.order,
+          cursor,
+          skip: false,
+          includeReplies: flatView ? 1 : null,
+          initialRepliesLimit
+        });
+        setState({
+          comments: [...data, ...result.data, ...pinnedComments],
+          nextCursor,
+          total,
+          initialized: true,
+          // 记录 head (初始数据首元素 id)
+          highlighted: {
+            id: cursor,
+            position,
+            nextCursor: result.nextCursor,
+            head: data[0].id
+          }
+        });
+      } else {
+        setState({
+          comments: [...data, ...pinnedComments],
+          nextCursor,
+          total,
+          initialized: true
+        });
+      }
+    };
+    init();
+  }, [target.id, state.order, setState]);
+  useAutoScroll(state.comments, containerHeight);
+  const updateCommentState = (id, mapper) => {
+    const comment = commentsKeyById[id];
+    const root = commentsKeyById[comment.rootId];
+    if (root?.replies?.length) {
+      root.replies = root.replies.map((item) => item.id === id ? mapper(item) : item);
+      updateCommentState(root.id, (current) => ({ ...current }));
+    } else {
+      const mapped = state.comments.map((item) => item.id === id ? mapper(item) : item);
+      setState({ comments: mapped });
+    }
+  };
+  const loadMore = async (cursor) => {
+    const { data, total, nextCursor } = await api.fetchComments({
+      objectId: target.id,
+      limit,
+      order: state.order,
+      cursor,
+      includeReplies: flatView ? 1 : null,
+      initialRepliesLimit
+    });
+    const sorted = uniqAndSort([...state.comments, ...data], state.order);
+    setState({ comments: sorted, total, nextCursor });
+  };
+  const loadMoreForTailSection = async () => {
+    if (!state.highlighted) {
+      return;
+    }
+    const { data, total, nextCursor } = await api.fetchComments({
+      objectId: target.id,
+      limit,
+      order: state.order,
+      cursor: state.highlighted.nextCursor,
+      includeReplies: flatView ? 1 : null,
+      initialRepliesLimit
+    });
+    const sorted = uniqAndSort([...state.comments, ...data], state.order);
+    setState({ comments: sorted, total, highlighted: { ...state.highlighted, nextCursor } });
+  };
+  const loadMoreReplies = async (rootId) => {
+    const root = commentsKeyById[rootId];
+    if (root.replies) {
+      const cursor = state.replyCursors[root.id] || getLastItem(root.replies)?.id;
+      const { data, total, nextCursor } = await api.fetchComments({
+        objectId: target.id,
+        rootId,
+        limit,
+        order: "asc",
+        cursor
+      });
+      const sorted = uniqAndSort([...root.replies, ...data], "asc");
+      updateCommentState(rootId, (current) => ({
+        ...current,
+        replies: sorted,
+        totalReplies: total
+      }));
+      state.replyCursors[root.id] = nextCursor;
+    }
+  };
+  const sort = (order2) => {
+    setState({ order: order2 });
+    localStorage.setItem(KEY_LS_ORDER, order2);
+  };
+  const add = (post) => {
+    if (flatView || !post.rootId) {
+      setState({ comments: uniqAndSort([...state.comments, post], state.order) });
+    } else {
+      const root = commentsKeyById[post.rootId];
+      if (root) {
+        if (!state.replyCursors[root.id] && root.replies) {
+          state.replyCursors[root.id] = getLastItem(root.replies)?.id;
+        }
+        const sorted = uniqAndSort([...root.replies || [], post], "asc");
+        updateCommentState(post.rootId, (current) => ({
+          ...current,
+          replies: sorted,
+          totalReplies: (current.totalReplies || 0) + 1
+        }));
+      }
+    }
+    if (!commentsKeyById[post.id]) {
+      setState({ total: state.total + 1 });
+    }
+  };
+  const updateComment = async (post, content) => {
+    updateCommentState(post.id, (current) => ({ ...current, content }));
+    const { updatedAt } = await api.updateComment(post, content);
+    updateCommentState(post.id, (current) => ({ ...current, content, updatedAt }));
+  };
+  const deleteComment = async (post) => {
+    await api.deleteComment(post);
+    updateCommentState(post.id, (current) => ({ ...current, deletedAt: /* @__PURE__ */ new Date() }));
+  };
+  const reply = async (post, content) => {
+    const result = await api.reply(post, content);
+    setTimeout(() => add(result), 800);
+  };
+  const togglePin = async ({ post, value: value2 }) => {
+    await api.togglePin({ post, value: value2 });
+    updateCommentState(post.id, (current) => ({ ...current, pinnedAt: value2 ? /* @__PURE__ */ new Date() : null }));
+  };
+  const findById = (id) => commentsKeyById[id];
+  const value = useMemo(
+    () => ({
+      target,
+      state,
+      pinned,
+      comments,
+      flatView,
+      autoCollapse,
+      allowCopyLink,
+      showProfileCard,
+      interactive,
+      updateCommentState,
+      loadMore,
+      loadMoreForTailSection,
+      sort,
+      add,
+      api,
+      updateComment,
+      deleteComment,
+      reply,
+      togglePin,
+      loadMoreReplies,
+      findById,
+      renderComments,
+      renderDonation,
+      renderActions,
+      renderEditorPlugins,
+      enableAutoTranslate,
+      renderInnerFooter
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [target, state]
+  );
+  return /* @__PURE__ */ jsx(CommentsContext.Provider, { value, children });
+}

package/dist/components/posts/comment.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { CommentAPI, Post } from '../../types';
+import { PostProps } from './post';
+export interface CommentProps {
+    onDelete: CommentAPI['deleteComment'];
+    onRate: CommentAPI['rate'];
+    onUnrate: CommentAPI['unrate'];
+    onReply: CommentAPI['reply'];
+    onTogglePin: CommentAPI['togglePin'];
+    onLoadMoreReplies: (rootId: string) => void;
+    renderDonation?: (post: Post) => React.ReactNode;
+    renderActions?: (post: Post) => React.ReactNode;
+    renderEditorPlugins?: (post: Post) => React.ReactNode;
+    enableAutoTranslate?: boolean;
+}
+export default function Comment({ onDelete, onRate, onUnrate, onReply, onTogglePin, onContentUpdate, onLoadMoreReplies, renderDonation, renderActions, renderEditorPlugins, enableAutoTranslate, ...rest }: PostProps & CommentProps): import("react").JSX.Element;