@blocklet/discuss-kit-ux-lite 2.6.0

package/dist/components/profile-card/profile-card.mjs

@@ -0,0 +1,140 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useNavigate } from "react-router-dom";
+import { Box, styled } from "@mui/material";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
+import DID from "@arcblock/ux/lib/DID";
+import { green } from "@mui/material/colors";
+import { SocialActions } from "@arcblock/ux/lib/UserCard";
+import { useBrowser } from "@arcblock/react-hooks";
+import { useState } from "react";
+import Avatar from "../avatars/avatar.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+import Badge from "../avatars/badge.mjs";
+import { openProfile, isInDiscussKitApp } from "../utils.mjs";
+export function ProfileCard({ user, click, ...rest }) {
+  const { session } = useSessionContext();
+  const isLogin = !!session?.user?.did;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        boxSizing: "border-box",
+        width: 340,
+        p: 2,
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: 1,
+        fontSize: 14,
+        color: "grey.700",
+        bgcolor: "background.paper"
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, cursor: "pointer" }, onClick: click, children: [
+          /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size: 44, shape: "circle", variant: "circle" }),
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }, children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                component: "span",
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  lineHeight: 1.3
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Box, { sx: { fontWeight: "bold" }, children: user.fullName }),
+                  user.role && /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      sx: {
+                        px: 1.25,
+                        border: 1,
+                        borderColor: green[600],
+                        color: green[600],
+                        fontSize: 12,
+                        fontWeight: "bold",
+                        lineHeight: 1.5,
+                        borderRadius: "100vh",
+                        textTransform: "capitalize"
+                      },
+                      children: user.role
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DID,
+              {
+                style: { marginTop: 4, lineHeight: 1, height: 14, maxWidth: 250, color: "inherit !important" },
+                size: 14,
+                did: user.did
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(Badge, { passports: user?.passports || [], pointInfo: user?.pointInfo || {}, did: user?.did }) })
+          ] })
+        ] }),
+        (!isLogin || user?.did !== window.blocklet.appId && session?.user?.did && session?.user?.did !== user.did) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Box, { sx: { my: 2, borderTop: "1px solid", borderColor: "divider" } }),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(SocialActions, { session, showSocialActions: true, user }) })
+        ] })
+      ]
+    }
+  );
+}
+const HtmlTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    ...props,
+    classes: { popper: className },
+    slotProps: {
+      popper: {
+        disablePortal: true
+      }
+    }
+  }
+))(() => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "transparent",
+    maxWidth: "initial"
+  }
+}));
+export function ProfileCardTooltip({ user, children }) {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const { mobile } = useBrowser();
+  const click = (e) => {
+    e?.stopPropagation?.();
+    e?.preventDefault?.();
+    setOpen(false);
+    setTimeout(() => {
+      if (isInDiscussKitApp) {
+        navigate(`/profile?did=${user?.did}`);
+      } else {
+        openProfile(user?.did);
+      }
+    }, 100);
+  };
+  const renderChildren = () => {
+    if (typeof children === "function") {
+      return children({ navigateToProfile: click });
+    }
+    return children;
+  };
+  if (mobile.any) {
+    return renderChildren();
+  }
+  return /* @__PURE__ */ jsx(
+    HtmlTooltip,
+    {
+      open,
+      onClose: () => setOpen(false),
+      onOpen: () => setOpen(true),
+      PopperProps: { disablePortal: false },
+      title: /* @__PURE__ */ jsx(ProfileCard, { user, click }),
+      children: renderChildren()
+    }
+  );
+}

package/dist/components/rating/binary-thumb.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type RatingProps } from './rating';
+import type { Rating as RatingType } from '../../types';
+export type BinaryThumbProps = {
+    data: RatingType[];
+    variant?: 'default' | 'inverse';
+    size?: 'sm' | 'lg';
+} & Pick<RatingProps, 'onRate' | 'onUnrate'>;
+export default function BinaryThumb({ data, variant, size, ...rest }: BinaryThumbProps): import("react").JSX.Element;

package/dist/components/rating/binary-thumb.mjs

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { styled } from "@arcblock/ux/lib/Theme";
+import Box from "@mui/material/Box";
+import clsx from "clsx";
+import { Icon } from "@iconify/react";
+import ThumbUpIcon from "@iconify/icons-iconoir/thumbs-up";
+import RaterList from "./rater-list.mjs";
+import Rating from "./rating.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+const values = ["1", "-1"];
+export default function BinaryThumb({ data = [], variant = "default", size = "sm", ...rest }) {
+  const { session } = useSessionContext();
+  const [raterListVisible, setRaterListVisible] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const countPerValue = useMemo(() => {
+    return data.reduce((acc, cur) => {
+      acc[cur.value] = (acc[cur.value] || 0) + 1;
+      return acc;
+    }, {});
+  }, [data]);
+  const selectedValue = useMemo(() => {
+    return data.find((x) => x.rater?.did === session?.user?.did)?.value;
+  }, [data, session.user]);
+  const render = ({ options, toggleRate }) => {
+    const handleTextClick = (event, value) => {
+      setRaterListVisible(value);
+    };
+    const clickRateHandle = async (option) => {
+      if (loading) {
+        return;
+      }
+      setLoading(true);
+      await toggleRate(option.value);
+      setLoading(false);
+    };
+    return /* @__PURE__ */ jsx(Root, { children: options.map((option) => {
+      const iconStyle = {};
+      if (option.value === "-1") {
+        iconStyle.transform = "rotate(180deg)";
+      }
+      const icon = /* @__PURE__ */ jsx(Icon, { icon: ThumbUpIcon, style: iconStyle });
+      return /* @__PURE__ */ jsxs("div", { className: "reaction-item", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "reaction-item-btn",
+            icon,
+            text: option.count,
+            selected: option.selected,
+            onClick: () => clickRateHandle(option),
+            variant,
+            size,
+            onTextClick: (e) => handleTextClick(e, option.value),
+            disabled: loading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RaterList,
+          {
+            open: raterListVisible === option.value,
+            onClose: () => setRaterListVisible(null),
+            value: raterListVisible,
+            ratings: data
+          }
+        )
+      ] }, option.value);
+    }) });
+  };
+  return /* @__PURE__ */ jsx(
+    Rating,
+    {
+      ...rest,
+      ratingType: "binary-thumb",
+      values,
+      countPerValue,
+      selectedValue,
+      render
+    }
+  );
+}
+const Root = styled(Box)`
+  display: flex;
+  .reaction-item {
+    display: flex;
+    align-items: center;
+  }
+`;
+function IconButton({ icon, text, onClick, selected, variant, size, onTextClick, disabled, ...rest }) {
+  const classes = clsx(rest.className, `reaction-btn-${size} reaction-btn-${variant}`, {
+    "reaction-btn-selected": selected,
+    "button-disabled": disabled
+  });
+  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", onClick: (e) => onTextClick?.(e), children: text })
+  ] });
+}
+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;
+    cursor: pointer;
+  }
+  &.button-disabled {
+    opacity: 0.5;
+    .reaction-btn-icon {
+      cursor: not-allowed;
+    }
+  }
+  svg {
+    width: auto;
+  }
+  .reaction-btn-text {
+    display: inline-block;
+    cursor: pointer;
+  }
+  &.reaction-btn-sm {
+    min-width: 64px;
+    height: 18px;
+    font-size: 12px;
+    svg {
+      font-size: 15px;
+    }
+    .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};
+      }
+    }
+  }
+`;

package/dist/components/rating/github-reaction-container.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AxiosInstance } from 'axios';
+import { GithubReactionProps } from './github-reaction';
+interface Props extends Omit<GithubReactionProps, 'data' | 'onRate' | 'onUnrate'> {
+    id: string;
+    request: AxiosInstance;
+}
+export declare function GithubReactionContainer({ id, request, ...rest }: Props): import("react").JSX.Element | null;
+export {};

package/dist/components/rating/github-reaction-container.mjs

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import axios from "axios";
+import { useCreation, useRequest } from "ahooks";
+import GithubReaction from "./github-reaction.mjs";
+import { discussKitApiBaseUrl } from "../utils.mjs";
+import { useSessionContext } from "../hooks/session.mjs";
+const baseConfig = { baseURL: discussKitApiBaseUrl };
+const createApi = (request) => {
+  return {
+    fetchRatings: async (id) => {
+      const { data } = await request.get(`/ratings/${id}`, baseConfig);
+      return data;
+    },
+    rate: async ({ id, ratingType, value }) => {
+      await request.post(`/topics/${id}/ratings`, { ratingType, value }, baseConfig);
+    },
+    unrate: async ({ id }) => {
+      await request.delete(`/topics/${id}/ratings`, baseConfig);
+    }
+  };
+};
+export function GithubReactionContainer({ id, request, ...rest }) {
+  const { session } = useSessionContext();
+  const api = useCreation(() => createApi(request || axios.create({})), [request]);
+  const { data, loading, error } = useRequest(() => api.fetchRatings(id), {
+    refreshDeps: [id]
+  });
+  const handleRate = async ({ ratingType, value }) => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.rate({ id, ratingType, value });
+  };
+  const handleUnrate = async () => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.unrate({ id });
+  };
+  if (loading || error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(GithubReaction, { data, onRate: handleRate, onUnrate: handleUnrate, ...rest });
+}

package/dist/components/rating/github-reaction.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+import type { Rating as RatingType } from '../../types';
+export type GithubReactionProps = {
+    data: RatingType[];
+    onRate: ({ ratingType, value }: {
+        ratingType: string;
+        value: string;
+    }) => Promise<any>;
+    onUnrate: () => Promise<any>;
+    interactive?: boolean;
+} & IconButtonProps;
+/**
+ * 说明:
+ * GithubReaction 与 Rating 组件不兼容, 后者是 n 选 1, GithubReaction 是 n 选 m,
+ * 所以 GithubReaction 相当于重写, 与 Rating 组件和 BinaryThumb 组件没有关系
+ */
+export default function GithubReaction({ data, onRate, onUnrate, interactive, sx, ...rest }: GithubReactionProps): import("react").JSX.Element;

package/dist/components/rating/github-reaction.mjs

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Chip, ClickAwayListener, Tooltip, alpha } from "@mui/material";
+import { Icon } from "@iconify/react";
+import MoodPlusIcon from "@iconify/icons-tabler/mood-plus";
+import { useSessionContext } from "../hooks/index.mjs";
+import { IconButton } from "../icon-button.mjs";
+const emojiFont = {
+  fontFamily: '"Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color"'
+};
+export default function GithubReaction({
+  data,
+  onRate,
+  onUnrate,
+  interactive = true,
+  sx,
+  ...rest
+}) {
+  const { session } = useSessionContext();
+  const [open, setOpen] = useState(false);
+  const [raters, setRaters] = useState(null);
+  const [myReaction, setMyReaction] = useState(null);
+  const options = [
+    { value: "thumbs_up", label: "\u{1F44D}" },
+    { value: "thumbs_down", label: "\u{1F44E}" },
+    { value: "white_check_mark", label: "\u2705" },
+    { value: "laugh", label: "\u{1F604}" },
+    { value: "joy", label: "\u{1F602}" },
+    { value: "hooray", label: "\u{1F389}" },
+    { value: "heart", label: "\u2764\uFE0F" },
+    { value: "rocket", label: "\u{1F680}" },
+    { value: "eyes", label: "\u{1F440}" }
+  ];
+  const ratings = useMemo(() => {
+    const mapped = data.map((x) => {
+      if (x.value == "1" || x.value == "-1") {
+        return { ...x, value: x.value == "1" ? ["thumbs_up"] : ["thumbs_down"] };
+      }
+      return { ...x, value: x.value?.split(",") || [] };
+    });
+    if (session?.user?.did && myReaction) {
+      return [...mapped.filter((x) => x.rater?.did !== session.user.did), { rater: session.user, value: myReaction }];
+    }
+    return mapped;
+  }, [data, myReaction, session.user]);
+  const countPerValue = useMemo(() => {
+    return ratings.reduce((acc, cur) => {
+      cur.value.forEach((item) => {
+        acc[item] = (acc[item] || 0) + 1;
+      });
+      return acc;
+    }, {});
+  }, [ratings]);
+  const selectedValues = useMemo(() => {
+    return ratings.find((x) => x.rater?.did === session?.user?.did)?.value || [];
+  }, [ratings, session.user]);
+  const selectedValuesMap = useMemo(() => {
+    return selectedValues.reduce((acc, cur) => ({ ...acc, [cur]: true }), {});
+  }, [selectedValues]);
+  const hasReaction = Object.keys(countPerValue).length > 0;
+  const toggleRate = (value) => {
+    if (!interactive) {
+      return;
+    }
+    const valuesMap = { ...selectedValuesMap };
+    valuesMap[value] = !valuesMap[value];
+    const values = Object.keys(valuesMap).filter((x) => valuesMap[x]);
+    if (values.length) {
+      onRate({
+        ratingType: "github-reaction",
+        value: values.join(",")
+      });
+    } else {
+      onUnrate();
+    }
+    setMyReaction(values);
+    setOpen(false);
+  };
+  const getRatersNames = (value) => {
+    return ratings.filter((x) => x.rater && x.value.includes(value)).map((x) => x.rater.fullName);
+  };
+  const handleOpen = () => {
+    if (interactive) {
+      setOpen(!open);
+    }
+  };
+  const mergedSx = [{ position: "relative", ...hasReaction && { mt: 2.5 } }, ...Array.isArray(sx) ? sx : [sx]];
+  return /* @__PURE__ */ jsxs(IconButton, { onClick: handleOpen, sx: mergedSx, ...rest, children: [
+    /* @__PURE__ */ jsx(Box, { component: Icon, icon: MoodPlusIcon }),
+    hasReaction && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: -24, left: 5, display: "flex", gap: 1 }, children: options.map((option) => {
+      if (!countPerValue[option.value]) {
+        return null;
+      }
+      const selected = selectedValuesMap[option.value];
+      return /* @__PURE__ */ jsx(Tooltip, { title: raters?.join(", "), children: /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: emojiFont, children: option.label }),
+            /* @__PURE__ */ jsx("span", { children: countPerValue[option.value] })
+          ] }),
+          color: "default",
+          size: "small",
+          variant: selected ? "outlined" : "filled",
+          sx: {
+            lineHeight: "24px",
+            fontSize: 13,
+            border: 1,
+            borderColor: "divider",
+            borderRadius: 1,
+            cursor: "pointer",
+            bgcolor: "transparent",
+            "&:hover": {
+              bgcolor: "grey.100"
+            },
+            ...selected && {
+              borderColor: "warning.light",
+              bgcolor: (theme) => alpha(theme.palette.warning.light, 0.2)
+            }
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            toggleRate(option.value);
+          },
+          onMouseEnter: () => setRaters(getRatersNames(option.value)),
+          onMouseLeave: () => setRaters(null)
+        }
+      ) }, option.value);
+    }) }),
+    open && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          gap: 0.5,
+          position: "absolute",
+          left: 0,
+          bottom: 36,
+          px: 1,
+          py: 0.5,
+          border: 1,
+          borderColor: "grey.300",
+          bgcolor: "background.paper",
+          borderRadius: 1
+        },
+        children: options.map((option) => {
+          const selected = selectedValuesMap[option.value];
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              onClick: () => toggleRate(option.value),
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: 28,
+                height: 28,
+                fontSize: 14,
+                borderRadius: 1,
+                cursor: "pointer",
+                ":hover": { bgcolor: "grey.100" },
+                ...selected && {
+                  bgcolor: (theme) => alpha(theme.palette.primary.light, 0.2)
+                }
+              },
+              children: /* @__PURE__ */ jsx(Box, { sx: emojiFont, children: option.label })
+            },
+            option.value
+          );
+        })
+      }
+    ) })
+  ] });
+}

package/dist/components/rating/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BinaryThumb } from './binary-thumb';
+export { default as GithubReaction } from './github-reaction';
+export { GithubReactionContainer } from './github-reaction-container';

package/dist/components/rating/index.mjs

@@ -0,0 +1,3 @@
+export { default as BinaryThumb } from "./binary-thumb.mjs";
+export { default as GithubReaction } from "./github-reaction.mjs";
+export { GithubReactionContainer } from "./github-reaction-container.mjs";

package/dist/components/rating/rater-list.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { Rating } from '../../types';
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    value: string;
+    ratings: Rating[];
+}
+export default function RaterList({ open, onClose, value, ratings }: Props): import("react").JSX.Element;
+export {};

package/dist/components/rating/rater-list.mjs

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material";
+import Dialog from "@arcblock/ux/lib/Dialog";
+import { Avatar } from "../avatars/index.mjs";
+const StyledDialog = styled(Dialog)`
+  .ux-dialog_header {
+    padding: 0 16px;
+  }
+`;
+export default function RaterList({ open, onClose, value, ratings }) {
+  const raters = ratings.filter((item) => item.value === value).map((item) => item.rater);
+  return /* @__PURE__ */ jsx(StyledDialog, { open, onClose, PaperProps: { style: { width: 400, minHeight: 200 } }, children: /* @__PURE__ */ jsx(Box, { children: raters.map((rater) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          fontSize: 13,
+          color: "grey.700",
+          "& + &": { mt: 1 }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { did: rater.did, src: rater.avatar, variant: "circle", size: 26 }),
+          /* @__PURE__ */ jsx(Box, { children: rater.fullName })
+        ]
+      },
+      rater.did
+    );
+  }) }) });
+}

package/dist/components/rating/rating.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export type RatingType = 'binary-thumb' | 'five-star';
+interface Option {
+    value: string;
+    count: number;
+    selected: boolean;
+}
+interface RenderProps {
+    options: Option[];
+    toggleRate: (value: string) => void;
+}
+export interface RatingProps {
+    ratingType: RatingType;
+    values: string[];
+    countPerValue?: {
+        [key: string]: number;
+    };
+    selectedValue?: string;
+    render: ({ options, toggleRate }: RenderProps) => React.ReactElement<any>;
+    onRate: ({ ratingType, value }: {
+        ratingType: RatingType;
+        value: string;
+    }) => Promise<any>;
+    onUnrate: () => Promise<any>;
+}
+declare function Rating({ ratingType, values, countPerValue, selectedValue, render, onRate, onUnrate }: RatingProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default Rating;