@blocklet/discuss-kit 1.0.0

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

@@ -0,0 +1,199 @@
+"use strict";
+const PropTypes = require("prop-types");
+const Theme = require("@arcblock/ux/lib/Theme");
+const Box = require("@mui/material/Box");
+const clsx = require("clsx");
+const React = require("react");
+const Rating = require("./rating");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const Box__default = /* @__PURE__ */ _interopDefaultLegacy(Box);
+const clsx__default = /* @__PURE__ */ _interopDefaultLegacy(clsx);
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const Rating__default = /* @__PURE__ */ _interopDefaultLegacy(Rating);
+const SvgThumbUp = (props) => /* @__PURE__ */ React__namespace.createElement("svg", {
+  width: 32,
+  height: 32,
+  viewBox: "0 0 24 24",
+  ...props
+}, /* @__PURE__ */ React__namespace.createElement("g", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeWidth: 1.5
+}, /* @__PURE__ */ React__namespace.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__namespace.createElement("path", {
+  strokeLinejoin: "round",
+  d: "M7 20V9"
+})));
+function BinaryThumb({
+  variant,
+  size,
+  ...rest
+}) {
+  const renderer = ({
+    options,
+    toggleRate
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Root, {
+      children: options.map((option) => {
+        const icon = option.value === -1 ? /* @__PURE__ */ jsxRuntime.jsx(SvgThumbUp, {
+          style: {
+            transform: "rotate(180deg)"
+          }
+        }) : /* @__PURE__ */ jsxRuntime.jsx(SvgThumbUp, {});
+        return /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: "reaction-item",
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, {
+            className: "reaction-item-btn",
+            icon,
+            text: option.count,
+            selected: option.selected,
+            onClick: () => toggleRate(option.value),
+            variant,
+            size
+          })
+        }, option.value);
+      })
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Rating__default.default, {
+    ratingType: "binary-thumb",
+    values: [1, -1],
+    ...rest,
+    render: renderer
+  });
+}
+BinaryThumb.propTypes = {
+  variant: PropTypes__default.default.oneOf(["default", "inverse"]),
+  size: PropTypes__default.default.oneOf(["sm", "lg"])
+};
+BinaryThumb.defaultProps = {
+  variant: "default",
+  size: "sm"
+};
+const Root = Theme.styled(Box__default.default)`
+  display: flex;
+  .reaction-item {
+    display: flex;
+    align-items: center;
+  }
+`;
+function IconButton({
+  icon,
+  text,
+  onClick,
+  selected,
+  variant,
+  size,
+  ...rest
+}) {
+  const classes = clsx__default.default(rest.className, `reaction-btn-${size} reaction-btn-${variant}`, {
+    "reaction-btn-selected": selected
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(IconButtonRoot, {
+    ...rest,
+    className: classes,
+    children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+      className: "reaction-btn-icon",
+      onClick,
+      children: icon
+    }), !!text && /* @__PURE__ */ jsxRuntime.jsx("span", {
+      className: "reaction-btn-text",
+      children: text
+    })]
+  });
+}
+IconButton.propTypes = {
+  icon: PropTypes__default.default.node.isRequired,
+  text: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]).isRequired,
+  onClick: PropTypes__default.default.func.isRequired,
+  selected: PropTypes__default.default.bool,
+  variant: PropTypes__default.default.oneOf(["default", "inverse"]),
+  size: PropTypes__default.default.oneOf(["sm", "lg"])
+};
+IconButton.defaultProps = {
+  selected: false,
+  variant: "default",
+  size: "sm"
+};
+const IconButtonRoot = Theme.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};
+      }
+    }
+  }
+`;
+module.exports = BinaryThumb;

package/lib/cjs/components/rating/emoji-based.js

@@ -0,0 +1,39 @@
+"use strict";
+const PropTypes = require("prop-types");
+const Rating = require("./rating");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const Rating__default = /* @__PURE__ */ _interopDefaultLegacy(Rating);
+function EmojiBased({
+  emojiValues
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Rating__default.default, {
+    ratingType: "emoji-based",
+    children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+      children: emojiValues
+    })
+  });
+}
+EmojiBased.propTypes = {
+  emojiValues: PropTypes__default.default.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}"
+  }]
+};
+module.exports = EmojiBased;

package/lib/cjs/components/rating/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const binaryThumb = require("./binary-thumb");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const binaryThumb__default = /* @__PURE__ */ _interopDefaultLegacy(binaryThumb);
+Object.defineProperty(exports, "BinaryThumb", {
+  enumerable: true,
+  get: () => binaryThumb__default.default
+});

package/lib/cjs/components/rating/rating.js

@@ -0,0 +1,93 @@
+"use strict";
+const react = require("react");
+const PropTypes = require("prop-types");
+const useSetState = require("react-use/lib/useSetState");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const useSetState__default = /* @__PURE__ */ _interopDefaultLegacy(useSetState);
+function Rating({
+  ratingType,
+  values,
+  countPerValue,
+  selected,
+  render,
+  onRate,
+  onUnrate
+}) {
+  const [state, setState] = useSetState__default.default({
+    selected,
+    countPerValue
+  });
+  const hasSelected = !!state.selected || state.selected === 0;
+  const increaseCount = (value, inc) => {
+    setState((prevState) => ({
+      countPerValue: {
+        ...prevState.countPerValue,
+        [value]: (prevState.countPerValue[value] || 0) + inc
+      }
+    }));
+  };
+  react.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__default.default.oneOf(["binary-thumb", "five-star", "emoji-based"]).isRequired,
+  values: PropTypes__default.default.arrayOf(PropTypes__default.default.number).isRequired,
+  countPerValue: PropTypes__default.default.object,
+  selected: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  render: PropTypes__default.default.func.isRequired,
+  onRate: PropTypes__default.default.func.isRequired,
+  onUnrate: PropTypes__default.default.func.isRequired
+};
+Rating.defaultProps = {
+  countPerValue: {},
+  selected: void 0
+};
+module.exports = Rating;

package/lib/cjs/context.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const PropTypes = require("prop-types");
+const Session = require("@arcblock/did-connect/lib/Session");
+const hooks = require("./hooks");
+const getWsClient = require("./ws");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefaultLegacy(PropTypes);
+const getWsClient__default = /* @__PURE__ */ _interopDefaultLegacy(getWsClient);
+const CommentsContext = react.createContext();
+function CommentsProvider({
+  prefix,
+  session,
+  object,
+  manageMode,
+  flatMode,
+  children
+}) {
+  var _a;
+  const sessionCtx = react.useContext(Session.SessionContext);
+  const _session = session || (sessionCtx == null ? void 0 : sessionCtx.session);
+  const wsClient = getWsClient__default.default(prefix);
+  const commentsState = hooks.useComments({
+    objectId: object.id,
+    flatMode
+  }, [(_a = _session == null ? void 0 : _session.user) == null ? void 0 : _a.did]);
+  react.useEffect(() => {
+    wsClient.connect();
+    return () => {
+      if (wsClient.isConnected()) {
+        wsClient.disconnect();
+      }
+    };
+  }, []);
+  const value = react.useMemo(
+    () => ({
+      session: _session,
+      object,
+      prefix,
+      manageMode,
+      flatMode,
+      ...commentsState
+    }),
+    [_session, object, prefix, commentsState]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CommentsContext.Provider, {
+    value,
+    children
+  });
+}
+CommentsProvider.propTypes = {
+  prefix: PropTypes__default.default.string,
+  session: PropTypes__default.default.object,
+  object: PropTypes__default.default.PropTypes.shape({
+    id: PropTypes__default.default.string.isRequired,
+    title: PropTypes__default.default.string,
+    desc: PropTypes__default.default.string,
+    owner: PropTypes__default.default.string
+  }).isRequired,
+  manageMode: PropTypes__default.default.bool,
+  flatMode: PropTypes__default.default.bool,
+  children: PropTypes__default.default.any.isRequired
+};
+CommentsProvider.defaultProps = {
+  prefix: "",
+  session: void 0,
+  manageMode: false,
+  flatMode: false
+};
+const useCommentsContext = () => {
+  return react.useContext(CommentsContext);
+};
+exports.CommentsContext = CommentsContext;
+exports.CommentsProvider = CommentsProvider;
+exports.useCommentsContext = useCommentsContext;

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

@@ -0,0 +1,25 @@
+"use strict";
+const utils = require("@arcblock/did-connect/lib/utils");
+const DIDComment = require("./did-comment");
+const session = require("./session");
+const jsxRuntime = require("react/jsx-runtime");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const DIDComment__default = /* @__PURE__ */ _interopDefaultLegacy(DIDComment);
+const DIDCommentHOC = (WrappedComponent) => {
+  const webWalletUrl = utils.getWebWalletUrl();
+  return function(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(session.SessionProvider, {
+      serviceHost: "/",
+      webWalletUrl,
+      children: (session2) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(WrappedComponent, {
+          ...props,
+          session: session2.session,
+          showConnectBtn: true
+        });
+      }
+    });
+  };
+};
+const didCommentWithSession = DIDCommentHOC(DIDComment__default.default);
+module.exports = didCommentWithSession;