@blocklet/discuss-kit 1.0.0

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

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,37 @@
+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

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

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

@@ -0,0 +1,91 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import useSetState from "react-use/lib/useSetState";
+function Rating({
+  ratingType,
+  values,
+  countPerValue,
+  selected,
+  render,
+  onRate,
+  onUnrate
+}) {
+  const [state, setState] = useSetState({
+    selected,
+    countPerValue
+  });
+  const hasSelected = !!state.selected || state.selected === 0;
+  const increaseCount = (value, inc) => {
+    setState((prevState) => ({
+      countPerValue: {
+        ...prevState.countPerValue,
+        [value]: (prevState.countPerValue[value] || 0) + inc
+      }
+    }));
+  };
+  useEffect(() => {
+    setState({
+      countPerValue,
+      selected
+    });
+  }, [countPerValue, selected]);
+  if (!render) {
+    return null;
+  }
+  const options = values.map((value) => {
+    var _a;
+    return {
+      value,
+      count: ((_a = state.countPerValue) == null ? void 0 : _a[value]) || 0,
+      selected: state.selected === value
+    };
+  });
+  const toggleRate = async (value) => {
+    try {
+      if (state.selected === value) {
+        await onUnrate({
+          ratingType,
+          value
+        });
+        increaseCount(value, -1);
+        setState({
+          selected: null
+        });
+      } else {
+        await onRate({
+          ratingType,
+          value
+        });
+        if (hasSelected) {
+          increaseCount(state.selected, -1);
+        }
+        increaseCount(value, 1);
+        setState({
+          selected: value
+        });
+      }
+    } catch (e) {
+      console.error("Failed to rate.", e);
+    }
+  };
+  return render({
+    options,
+    toggleRate
+  });
+}
+Rating.propTypes = {
+  ratingType: PropTypes.oneOf(["binary-thumb", "five-star", "emoji-based"]).isRequired,
+  values: PropTypes.arrayOf(PropTypes.number).isRequired,
+  countPerValue: PropTypes.object,
+  selected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  render: PropTypes.func.isRequired,
+  onRate: PropTypes.func.isRequired,
+  onUnrate: PropTypes.func.isRequired
+};
+Rating.defaultProps = {
+  countPerValue: {},
+  selected: void 0
+};
+export {
+  Rating as default
+};

package/lib/es/context.js

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useMemo } from "react";
+import PropTypes from "prop-types";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { useComments } from "./hooks";
+import getWsClient from "./ws";
+import { jsx } from "react/jsx-runtime";
+const CommentsContext = createContext();
+function CommentsProvider({
+  prefix,
+  session,
+  object,
+  manageMode,
+  flatMode,
+  children
+}) {
+  var _a;
+  const sessionCtx = useContext(SessionContext);
+  const _session = session || (sessionCtx == null ? void 0 : sessionCtx.session);
+  const wsClient = getWsClient(prefix);
+  const commentsState = useComments({
+    objectId: object.id,
+    flatMode
+  }, [(_a = _session == null ? void 0 : _session.user) == null ? void 0 : _a.did]);
+  useEffect(() => {
+    wsClient.connect();
+    return () => {
+      if (wsClient.isConnected()) {
+        wsClient.disconnect();
+      }
+    };
+  }, []);
+  const value = useMemo(
+    () => ({
+      session: _session,
+      object,
+      prefix,
+      manageMode,
+      flatMode,
+      ...commentsState
+    }),
+    [_session, object, prefix, commentsState]
+  );
+  return /* @__PURE__ */ jsx(CommentsContext.Provider, {
+    value,
+    children
+  });
+}
+CommentsProvider.propTypes = {
+  prefix: PropTypes.string,
+  session: PropTypes.object,
+  object: PropTypes.PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    desc: PropTypes.string,
+    owner: PropTypes.string
+  }).isRequired,
+  manageMode: PropTypes.bool,
+  flatMode: PropTypes.bool,
+  children: PropTypes.any.isRequired
+};
+CommentsProvider.defaultProps = {
+  prefix: "",
+  session: void 0,
+  manageMode: false,
+  flatMode: false
+};
+const useCommentsContext = () => {
+  return useContext(CommentsContext);
+};
+export {
+  CommentsContext,
+  CommentsProvider,
+  useCommentsContext
+};

package/lib/es/did-comment-with-session.js

@@ -0,0 +1,24 @@
+import { getWebWalletUrl } from "@arcblock/did-connect/lib/utils";
+import DIDComment from "./did-comment";
+import { SessionProvider } from "./session";
+import { jsx } from "react/jsx-runtime";
+const DIDCommentHOC = (WrappedComponent) => {
+  const webWalletUrl = getWebWalletUrl();
+  return function(props) {
+    return /* @__PURE__ */ jsx(SessionProvider, {
+      serviceHost: "/",
+      webWalletUrl,
+      children: (session) => {
+        return /* @__PURE__ */ jsx(WrappedComponent, {
+          ...props,
+          session: session.session,
+          showConnectBtn: true
+        });
+      }
+    });
+  };
+};
+const didCommentWithSession = DIDCommentHOC(DIDComment);
+export {
+  didCommentWithSession as default
+};