@blocklet/discuss-kit-ux 2.4.35 → 2.4.37

package/dist/components/paywall.mjs

@@ -0,0 +1,110 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, CircularProgress, Typography } from "@mui/material";
+import { useRequest } from "ahooks";
+import { joinURL } from "ufo";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { getPaymentKitMountPoint } from "./utils.mjs";
+import { useSessionContext } from "./hooks/session.mjs";
+const paymentKitMountPoint = getPaymentKitMountPoint();
+const buttonDisabledProps = {
+  color: "inherit",
+  variant: "contained",
+  sx: {
+    color: "grey.800",
+    cursor: "not-allowed"
+  }
+};
+const isBlurSubscriptionPublicType = window?.blocklet?.preferences?.subscriptionPublicType === "blur";
+export function Paywall({ children, cta, ...rest }) {
+  return /* @__PURE__ */ jsxs(Box, { ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          ...isBlurSubscriptionPublicType && {
+            maxHeight: "70vh",
+            overflow: "hidden",
+            position: "relative"
+          }
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "paywall",
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          py: 6,
+          color: "#fff",
+          bgcolor: "#000",
+          borderRadius: 2,
+          position: "sticky",
+          bottom: 16,
+          // 向上白色渐变背景
+          ":before": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: "-50%",
+            height: "50%",
+            background: "linear-gradient(transparent, rgba(255, 255, 255, 0.9) 85%)"
+          }
+        },
+        children: cta
+      }
+    )
+  ] });
+}
+export function SubscriptionPaywall({ type, fetchPaymentLink, ...rest }) {
+  const { session } = useSessionContext();
+  const { t } = useLocaleContext();
+  const { data, loading } = useRequest(() => fetchPaymentLink({ type, redirect: window.location.href }));
+  const paymentLink = paymentKitMountPoint && data?.link ? joinURL(paymentKitMountPoint, data.link) : null;
+  const loginAndReloadPage = () => {
+    session.login(() => {
+      window.location.reload();
+    });
+  };
+  const isDisabled = !paymentLink && !loading;
+  return /* @__PURE__ */ jsx(
+    Paywall,
+    {
+      ...rest,
+      cta: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h2", sx: { fontWeight: "bold" }, children: t("paywall.subscription.title") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { maxWidth: 600, mt: 1, mx: 4, textAlign: "center" }, children: t("paywall.subscription.desc") }),
+        /* @__PURE__ */ jsx(Box, { sx: { mt: 6 }, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            href: paymentLink || "#",
+            color: "primary",
+            variant: "contained",
+            size: "large",
+            ...isDisabled ? buttonDisabledProps : {},
+            children: [
+              t("paywall.subscription.subscribeNow"),
+              loading && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { ml: 1, color: "#fff" } })
+            ]
+          }
+        ) }),
+        !session?.user && /* @__PURE__ */ jsxs(Typography, { variant: "body1", sx: { mt: 2, color: "grey.400" }, children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-block", mr: 1 }, children: t("paywall.subscription.alreadySubscribe") }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              sx: { textDecoration: "underline", fontWeight: "bold", cursor: "pointer" },
+              onClick: loginAndReloadPage,
+              children: t("common.connect")
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}

package/dist/components/point-up/{box-animation.json.d.ts → box-animation.json}

@@ -1,4 +1,4 @@
-declare const _default: {
+{
   "v": "5.0.0",
   "fr": 30,
   "ip": 0,
@@ -2220,6 +2220,3 @@ declare const _default: {
     }
   ]
 }
-;
-
-export default _default;

package/dist/components/point-up/index.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 export declare const usePointUpContext: () => {};
 type PointUpProps = {
     points: number;
 };
-export default function PointUp({ points }: PointUpProps): import("react/jsx-runtime").JSX.Element;
-export declare function PointUpProvider({ children }: any): import("react/jsx-runtime").JSX.Element;
+export default function PointUp({ points }: PointUpProps): import("react").JSX.Element;
+export declare function PointUpProvider({ children }: any): import("react").JSX.Element;
 export {};

package/dist/components/point-up/index.mjs

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { useReactive } from "ahooks";
+import Box from "@mui/material/Box";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import joinUrl from "url-join";
+import LottieComponent from "./lottie-component.mjs";
+import boxAnimation from "./box-animation.json";
+import { getWsClient, useSubscription } from "../../ws.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+import { getDiscussKitClientId } from "../utils.mjs";
+const id = "point-up-component";
+const PointUpContext = createContext({});
+const WsEvents = Object.freeze({
+  POINT_UP: "point.up"
+});
+export const usePointUpContext = () => useContext(PointUpContext);
+export default function PointUp({ points }) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          LottieComponent,
+          {
+            src: boxAnimation,
+            style: {
+              width: 120,
+              height: 120,
+              marginTop: -28
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              mt: 1,
+              bgcolor: "primary.main",
+              px: 1,
+              py: 0.25,
+              color: "#fff",
+              borderRadius: 4,
+              fontSize: 13,
+              fontWeight: "bold"
+            },
+            children: t("common.pointUp", {
+              points: `${points}`
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+export function PointUpProvider({ children }) {
+  const state = useReactive({
+    pointsList: [],
+    visible: false,
+    currentPoints: 0
+  });
+  const { session } = useSessionContext();
+  const wsClient = getWsClient();
+  const pointUp = useCallback(({ points }) => {
+    state.pointsList.push(points);
+  }, []);
+  const pointUpComponent = window.blocklet?.componentMountPoints?.find?.(
+    (item) => item.did === "z2qa2ZST7Frp8w1XGqyw9v85u12R3mBbB2oaA"
+  );
+  const handlers = {
+    [WsEvents.POINT_UP]: (payload) => {
+      pointUp(payload);
+    }
+  };
+  useEffect(() => {
+    wsClient.connect();
+    return () => {
+      if (wsClient.isConnected()) {
+      }
+    };
+  }, []);
+  const value = useMemo(() => {
+    return {
+      pointUp
+    };
+  }, []);
+  useEffect(() => {
+    if (state.pointsList.length > 0) {
+      state.visible = true;
+      state.currentPoints = +state.pointsList[0];
+      const waitToClosePointUp = (ms = 5e3) => {
+        setTimeout(() => {
+          const el = document.getElementById(id);
+          if (el && el.matches(":hover")) {
+            waitToClosePointUp(ms / 2);
+          } else {
+            state.pointsList.shift();
+          }
+        }, ms);
+      };
+      waitToClosePointUp();
+    } else {
+      state.visible = false;
+    }
+  }, [JSON.stringify(state.pointsList)]);
+  useSubscription(
+    session?.user?.did,
+    ({ event, clientId, data }) => {
+      if (clientId === getDiscussKitClientId()) {
+        handlers[event]?.(data);
+      }
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(PointUpContext.Provider, { value, children: [
+    pointUpComponent?.mountPoint && createPortal(
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          onClick: () => {
+            window.open(joinUrl(window.location.origin, pointUpComponent.mountPoint, "my"));
+          },
+          id,
+          sx: {
+            position: "fixed",
+            bottom: 12,
+            left: 12,
+            zIndex: 9999,
+            opacity: state.visible ? 0.8 : 0,
+            transition: "all 0.3s",
+            pointerEvents: state.visible ? "auto" : "none",
+            cursor: "pointer",
+            "&:hover": {
+              opacity: state.visible ? 1 : 0,
+              transform: "translateY(-4px)"
+            }
+          },
+          children: state.visible && /* @__PURE__ */ jsx(PointUp, { points: state.currentPoints })
+        }
+      ),
+      document.body
+    ),
+    children
+  ] });
+}

package/dist/components/point-up/lottie-component.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 export interface LottieProps {
     src: any;
     style: any;
 }
-export default function LottieComponent({ src, ...restProps }: LottieProps): import("react/jsx-runtime").JSX.Element;
+export default function LottieComponent({ src, ...restProps }: LottieProps): import("react").JSX.Element;

package/dist/components/point-up/lottie-component.mjs

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { lazyRetry as lazy } from "@arcblock/ux/lib/Util";
+import { Suspense } from "react";
+const Lottie = lazy(() => import("lottie-react"));
+export default function LottieComponent({ src, ...restProps }) {
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Lottie, { animationData: src, loop: true, ...restProps }) });
+}

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

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 interface Props {
 }
-export default function CommentList(props: Props): import("react/jsx-runtime").JSX.Element;
+export default function CommentList(props: Props): import("react").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { Post, Target, CommentAPI } from '../../../types';
+import React from 'react';
+import type { Post, Target, CommentAPI } from '../../../types';
 type Order = 'asc' | 'desc';
 export type CommentsRender = (value: {
     comments: Post[];
@@ -70,7 +70,7 @@ interface CommentsContextValue {
     enableAutoTranslate?: boolean;
     renderInnerFooter?: (post: Post) => React.ReactElement<any>;
 }
-export declare const CommentsContext: React.Context<CommentsContextValue>;
+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): import("react/jsx-runtime").JSX.Element;
+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 {};